/* HAHUMI 6.28 (boot) — heroes in the first frame, all seven on a phone's first screen, quieter layers, one calm entrance.
 * Link in <head> after fix627-boot.css. Motion uses the --dur-* / --ease-1 / --spring tokens of home60.css. */

/* 1. The seven welcome heroes are static HTML now (scripts/gen-welcome628.mjs → home60.html between <!--w628:heroes-->).
 * Their order index (--i), which home60.js used to set inline, comes from CSS so the first frame already has the final
 * tilt; home60.js later sets the very same value, so nothing moves when it wakes them. (CSP: no inline style attributes.) */
#w613Row>.w613-buddy:nth-child(1){--i:0}#w613Row>.w613-buddy:nth-child(2){--i:1}#w613Row>.w613-buddy:nth-child(3){--i:2}
#w613Row>.w613-buddy:nth-child(4){--i:3}#w613Row>.w613-buddy:nth-child(5){--i:4}#w613Row>.w613-buddy:nth-child(6){--i:5}
#w613Row>.w613-buddy:nth-child(7){--i:6}
/* they rise as soon as the street is there (the old .25 s wait was for the script that drew them) */
@media (prefers-reduced-motion:no-preference){
 #w613Row>.w613-buddy{animation-duration:calc(var(--dur-3) * 1.5);animation-delay:calc(var(--i) * 40ms)}
}

/* 2. Phones: all seven on the first screen — two rows (4 + 3, centred) on the pavement, names under their feet, no
 * carousel and no «swipe» hint. Title, lead and both calls to action stay above them. Measured at 390×844, 360×740 and
 * 375×667 (tests/fix628-boot.test.mjs lists the rules; the browser check is in /home/claude/work/fix628/boot.md). */
@media (max-width:700px){
 .st619{padding-top:14px}
 body[data-street="1"] .w613-lead{margin-top:10px;font-size:15px;line-height:1.42}
 body[data-street="1"] .w613-cta{flex-wrap:nowrap;gap:8px;margin-top:14px}
 body[data-street="1"] .w613-cta .w613-go{min-height:48px;padding-inline:18px;white-space:nowrap}
 html body[data-street="1"] .w613-cta .w613-more{padding-inline:14px;white-space:nowrap}
 body[data-street="1"] .w613-peek{margin-top:8px}
 #w613Row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:auto;align-items:end;justify-items:center;
  gap:2px 0;padding:0 8px;overflow:visible;-webkit-mask-image:none;mask-image:none;height:auto}
 #w613Row>.w613-buddy{grid-column:span 2;width:100%;min-width:44px;min-height:44px;padding-bottom:20px}
 #w613Row>.w613-buddy:nth-child(5){grid-column:2 / span 2}
 #w613Row .w613-art{width:min(100%,86px)}
 #w613Row .w613-name{display:block;font-size:12px;padding:3px 9px}
 #w613Row>.w613-buddy::after{bottom:14px;height:12px}
 /* the speech bubble stays on screen at both edges */
 #w613Row .w613-say{max-width:min(150px,44vw);transform:translate(var(--sx,-50%),8px) scale(.9)}
 #w613Row>.w613-buddy.talk .w613-say{transform:translate(var(--sx,-50%),0)}
 #w613Row>.w613-buddy:nth-child(1){--sx:-18%}#w613Row>.w613-buddy:nth-child(4){--sx:-82%}
 body[data-street="1"] .w613-ledge{margin-top:8px;min-height:52px;padding:12px 18px}
 .st619-swipe{display:none}
}
/* shorter phones (iPhone SE 375×667, 360×740): a smaller title and lead, smaller heroes — still all on screen */
@media (max-width:700px) and (max-height:760px){
 #w613Title{font-size:min(32px,calc((100vw - 36px) / 9))}
 body[data-street="1"] .w613-lead{margin-top:8px;font-size:14px;line-height:1.38}
 body[data-street="1"] .w613-cta{margin-top:12px}
 #w613Row .w613-art{width:min(100%,80px)}
}

/* 3. Layers. «Лови!» spent over half of the main thread in Paint/Commit/Layerize and the page repainted at rest.
 * The causes were the hero's own frames (hero-life67.js: now ~30 fps from 2.5 s after the last input and during the game)
 * and the logo's eyes following the pointer through the game (logo613.js: they ignore the game stage). Here: the stage keeps
 * its layout and paint to itself, the hero (the only thing that moves there at rest) is its own layer, and the logo's eyes
 * repaint their own small layer instead of the whole top bar / sidebar. The rail itself gets no containment: on phones it
 * holds the fixed tab bar, and contain would re-anchor it. */
.stage{contain:layout paint}
.stage .hero-art{will-change:transform}
.rail .logo-mark>svg{will-change:transform}

/* 4. Screens: the view that just became visible rises 8 px and fades in (home60.js viewIn628 → .in628) instead of a hard
 * cut; it starts at .35 opacity, so there is never an empty frame. The first screen of a visit is not animated. */
@media (prefers-reduced-motion:no-preference){
 .in628{animation:in628 var(--dur-2) var(--ease-1) both}
 @keyframes in628{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
}