/* Piku Print Club, the site. intro.css: the hero's ENTRANCE (v3.13; owner, 2026-10-05, picked "Slap" from three prototypes and asked for the badge and the down arrow to be part of it).
   Only while <html> has .intro (js/intro.js: the page opened at the top, no #hash, motion allowed) and only inside prefers-reduced-motion: no-preference. About 2.3 seconds:
     0.04s  the logo is SLAPPED on: from big and tilted, with a small squash on contact
     0.24s  the headline's words drop in one by one (each word has its own little tilt), and then each line's SECOND INK (the off-register ghost) slides from far away into its place:
            the riso misregistration settling, which no other page has
     0.60s  the phone rises from below the fold; 0.78s the line under the headline fades up
     0.98s  "Whose turn?" and then the kids on the phone's screen pop in, one after another
     0.92s  the App Store badge fades up EXACTLY like the line above it (the same in-up), a beat behind it. OWNER'S EXPLICIT CALL, 2026-10-05: "the App Store button should animate like the
            text just above it". Apple's guideline (developer.apple.com/app-store/marketing/guidelines, Badge Use) says "Don't modify, angle, or animate the App Store badge"; the owner was told
            that and chose this. The badge's own artwork is never altered (no tilt, scale, colour or filter): only its wrapper (.cta) rises and fades in, once, then it is back to normal.
            To make it a plain cut-in again, see src/README.md, "The hero's entrance"
     1.9s   the big pink DOWN ARROW arrives LAST (css below, timed by js/core.js "== pager ==": it pops in with a little turn, then starts its bob and its ring)
   Every animation uses animation-fill-mode: backwards, so the first keyframe holds during the delay and, when it ends, the element simply goes back to its own css: nothing is left
   applied, nothing can fight the normal rules afterwards. Each last keyframe equals the element's normal style (check both when changing one). Only translate, rotate, scale, opacity and
   (for the second ink) text-shadow move: no layout, no CLS. The springs are the site's own (--spring-pop, css/base.css). */
@media (prefers-reduced-motion:no-preference){

/* the logo, slapped on */
.intro .hero .brand{animation:in-slap .7s var(--spring-pop) .04s backwards}
@keyframes in-slap{from{scale:1.45;rotate:calc(var(--r,0deg) - 15deg);translate:0 -30px;opacity:0}12%{opacity:1}to{scale:1;rotate:var(--r,0deg);translate:0 0;opacity:1}}

/* the headline: the words, then the second ink */
.intro .hero .hl .w{animation:in-word .62s var(--spring-pop) calc(.24s + var(--i,0) * .085s) backwards}
@keyframes in-word{from{translate:0 .62em;rotate:var(--wr,0deg);scale:.86;opacity:0}20%{opacity:1}to{translate:0 0;rotate:0deg;scale:1;opacity:1}}
.intro .hero .hl .w:nth-child(1){--wr:-7deg}
.intro .hero .hl .w:nth-child(2){--wr:5deg}
.intro .hero .hl .w:nth-child(3){--wr:-5deg}
.intro .hero .vh + .hl{animation:in-ghost .62s cubic-bezier(.2,.8,.2,1) .5s backwards}
.intro .hero .hl + .hl{animation:in-ghost .62s cubic-bezier(.2,.8,.2,1) .62s backwards}
@keyframes in-ghost{from{text-shadow:-.2em .17em 0 var(--ghost-teal)}to{text-shadow:-.03em .03em 0 var(--ghost-teal)}}

/* the line under it, then the badge a beat later: the SAME fade-up (the owner's call, see the head comment) */
.intro .hero .note{animation:in-up .6s cubic-bezier(.2,.8,.2,1) .78s backwards}
@keyframes in-up{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.intro .hero .cta{animation:in-up .6s cubic-bezier(.2,.8,.2,1) .92s backwards}

/* the phone rises, and the kids on its first screen pop in */
.intro .tour-phone{animation:in-rise .85s var(--spring-pop) .6s backwards}
@keyframes in-rise{from{translate:0 70px;opacity:0}25%{opacity:1}to{translate:0 0;opacity:1}}
.intro .scr-home .hm-title{animation:in-up .5s cubic-bezier(.2,.8,.2,1) .98s backwards}
.intro .scr-home .hm-kid{animation:in-kid .55s var(--spring-pop) calc(1.05s + var(--k,0) * .09s) backwards}
@keyframes in-kid{from{scale:.5;opacity:0}30%{opacity:1}to{scale:1;opacity:1}}
.intro .scr-home .hm-kid:nth-child(2){--k:1}
.intro .scr-home .hm-kid:nth-child(3){--k:2}
.intro .scr-home .hm-kid:nth-child(4){--k:3}

/* the down arrow, last: js/core.js puts .pg-intro on the pager the first time it shows at the top and sets --pg-delay so that it lands about 1.9s after the page opened,
   however late the script ran; it also holds the arrow's bob and its ring back until it has landed. These three are under .intro too, so that when js/intro.js takes .intro away early
   (the page turned out to be scrolled down: a reload halfway down) the arrow is dropped with everything else */
.intro .pager.pg-intro .pg-down{animation:pg-arrive .65s var(--spring-pop) var(--pg-delay,1.9s) backwards}
@keyframes pg-arrive{from{scale:.3;rotate:-28deg;opacity:0}35%{opacity:1}to{scale:1;rotate:0deg;opacity:1}}
.intro .pager.pg-intro.is-hero .pg-ic{animation-delay:calc(var(--pg-delay,1.9s) + .6s)}
.intro .pager.pg-intro.is-hero .pg-down::after{animation-delay:calc(var(--pg-delay,1.9s) + 1.4s)}
}