/* Small living things inside a big sentence (america.gov's animated tiles, set inside the words): each one opens a gap in the
   line when the scroll lights the word before it, never earlier, then plays its little film; it plays again on a click and
   answers a hover. Layers, glass that refracts what is behind it, and masks; no blur on a picture (the kit's rule 3).
   No tile under them: each stands on the page itself, centred on the middle of the capitals (Tommi, 2026-10-04: "i wouldnt
   put the container containing them, i prefer transparent background... aligned centrally vertically, not on the bottom").
   Sizes are in em, so a tile follows the sentence's type. Needs ../base/base.css; driven by pops.js and big-sentence.js. */

@property --r{syntax:"<length>";inherits:true;initial-value:0px}
@property --spin{syntax:"<angle>";inherits:true;initial-value:0deg}

/* ---------- the gap that opens in the line, and the thing that lands in it ---------- */
/* the gap has no height and sits on the baseline, so the line spacing stays as it was; what lands in it (.pop-box) is a little
   taller than the capitals (font-size 1.586em, 30% up from 1.22 on Tommi's word, 2026-10-04: every em inside is its own) and
   hangs with its middle on the middle of the capitals: Favorit's capitals are .7 of the sentence's em, so .35em up, .221 of
   this one; the gap before it stays .2 of the sentence's em */
.pop{position:relative;display:inline-block;font-size:1.586em;vertical-align:baseline;width:0;height:0;--mid:.221em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:width .9s var(--e-molla),margin .9s var(--e-molla),opacity .6s var(--e-ui)}
.pop.on{width:var(--w);margin-left:.123em}
.pop-box{position:absolute;left:0;right:0;top:calc(-.45em - var(--mid));height:.9em;transform:translateY(.25em) scale(.35) rotate(-8deg);opacity:0;
  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .35s var(--e-ui)}
/* it lands the way america.gov's lock shuts: a lift, the slam, a small recoil */
.pop.on .pop-box{transform:none;opacity:1;animation:pop-land .95s .08s both}
@keyframes pop-land{
  0%{transform:translateY(.25em) scale(.35) rotate(-8deg);opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  50%{transform:translateY(-.05em) scale(1.07) rotate(1.5deg);opacity:1;animation-timing-function:cubic-bezier(.32,0,.8,0)}
  72%{transform:translateY(.015em) scale(.97);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  100%{transform:none;opacity:1}}
.pop.on:hover .pop-box{transform:translateY(-.035em) scale(1.06)}
.pop.on:active .pop-box{transform:scale(.95);transition-duration:.2s}
.pop.dim{opacity:.72}
.pop-clip{position:absolute;inset:0;isolation:isolate}

/* ---------- 1. the window: a real one seen from inside the room, its wooden shutters pushed open onto a summer sky ---------- */
/* Tommi, 2026-10-05: "redo the window, i trully dont like it" (it was a dark frame with glass casements). Three pictures made for it
   (gpt-image, like the engine): the off-white wooden frame with its opening empty (window-frame.webp), one walnut persiana, drawn
   twice and mirrored (window-shutter.webp), and the view on 35mm film, sky, sun haze and sea (window-view.webp). The opening is
   where the frame's picture is empty: 19.07% in from each side, 10.36% from the top, 11.15% from the bottom; the shutters swing
   out of the room, away from us, on their outer hinges, so the perspective keeps them inside the opening */
.pop-window{--w:.62em}
.pw-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;filter:drop-shadow(0 .03em .04em oklch(0% 0 0/.14))}
.pw-open{position:absolute;left:18.4%;right:18.4%;top:9.7%;bottom:10.5%;overflow:hidden;perspective:1.1em;background:oklch(30% .02 60)}
.pw-view{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform:scale(1.22);transition:transform 2.2s var(--e-esce)}
.pop-window.go .pw-view{transform:scale(1.04);animation:pw-air 9s ease-in-out 2.2s infinite alternate}
.pop-window.go:hover .pw-view{transform:scale(1.12) translate(-3%,2%);animation:none}
@keyframes pw-air{from{transform:scale(1.04)}to{transform:scale(1.1) translate(2%,-1%)}}
.pw-cloud{position:absolute;width:1.3em;max-width:none;left:0;top:18%;opacity:0;pointer-events:none;transition:opacity 1.4s var(--e-ui) .6s}
.pop-window.go .pw-cloud{opacity:.75;animation:pw-drift 20s linear infinite}
.pop-window.go:hover .pw-cloud{animation-duration:6s}
@keyframes pw-drift{from{translate:.4em 0}to{translate:-1.7em 0}}
/* a shutter: the persiana, its shade deepening as it turns away from the room's light */
.pw-sh{position:absolute;top:-1%;bottom:-1%;width:51%;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.3,1.22,.5,1)}
.pw-sh::before,.pw-sh::after{content:"";position:absolute;inset:0}
.pw-sh::before{background:url(/pops/window-shutter.webp) center/100% 100%}
.pw-sh::after{background:linear-gradient(90deg,oklch(0% 0 0/.5),oklch(0% 0 0/.15));opacity:0;transition:opacity 1.5s var(--e-ui)}
.pw-l{left:0;transform-origin:0 50%}
.pw-r{right:0;transform-origin:100% 50%}
.pw-r::before{transform:scaleX(-1)}
.pw-r::after{transform:scaleX(-1)}
/* closed, a line of daylight leaks between the two */
.pw-seam{position:absolute;left:50%;top:0;bottom:0;width:.012em;translate:-50% 0;background:oklch(98% .05 85);box-shadow:0 0 .03em .01em oklch(95% .1 85/.8);opacity:.9;transition:opacity .4s var(--e-ui)}
.pop-window.go .pw-seam{opacity:0}
.pop-window.go .pw-l{transform:rotateY(74deg)}
.pop-window.go .pw-r{transform:rotateY(-74deg)}
.pop-window.go .pw-sh::after{opacity:1}
.pop-window.go:hover .pw-l{transform:rotateY(84deg)}
.pop-window.go:hover .pw-r{transform:rotateY(-84deg)}

/* ---------- 2. the tools: their marks orbit, a lens magnifies them, then they fold into the star ---------- */
.pop-ai{--w:.78em}
.pa-ring{position:absolute;left:50%;top:50%;width:0;height:0;transition:--r .9s var(--e-molla),--spin 2.6s cubic-bezier(.45,0,.2,1)}
/* the marks alone, no chip under them (Kimi's and Seedance's white marks are recoloured dark in their files) */
.pa-logo{position:absolute;left:-.08em;top:-.08em;width:.16em;height:.16em;max-width:none;object-fit:contain;
  /* the orbit follows --r and --spin, which the ring animates; the pop is the separate scale, so the ring's every-frame change
     never restarts it (a transition on transform with a delay, fed by a moving variable, never gets past its delay) */
  transform:rotate(calc(var(--i) * 45deg + var(--spin))) translateY(calc(var(--r) * -1)) rotate(calc(var(--i) * -45deg - var(--spin)));
  scale:var(--s,0);transition:scale .7s var(--e-molla) calc(var(--i) * 50ms),opacity .4s var(--e-ui)}
.pop-ai.go .pa-ring{--r:.3em;--spin:300deg}
.pop-ai.go .pa-logo{--s:1}
/* the lens: a round glass over the top of the orbit; inside it the same ring, scaled about the lens, so each mark swells as
   it passes under the glass and the marks around it are pushed aside, as a real lens bends what is behind it */
.pa-lens{position:absolute;left:50%;top:calc(50% - .3em);width:.3em;height:.3em;margin:-.15em;border-radius:50%;overflow:hidden;z-index:2;opacity:0;transform:scale(.4);
  /* the page's own white inside the glass, so only what the lens magnifies shows through it; a thin rim, no shadow */
  background:var(--fondo);box-shadow:inset 0 .01em .015em oklch(100% 0 0),inset 0 -.015em .03em oklch(0% 0 0/.12),0 0 0 .008em oklch(0% 0 0/.22);
  transition:opacity .5s var(--e-ui) .35s,transform .9s cubic-bezier(.2,.9,.3,1.06) .35s}
.pa-lens::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;background:radial-gradient(60% 40% at 35% 22%,oklch(100% 0 0/.85),transparent 70%),radial-gradient(closest-side,transparent 78%,oklch(100% 0 0/.5))}
.pa-mag{position:absolute;left:50%;top:50%;width:0;height:0;transform:scale(1.55)}
.pa-mag .pa-ring{left:0;top:.3em}
.pop-ai.go .pa-lens{opacity:1;transform:none}
/* folding into the star */
.pop-ai.star .pa-ring{--r:0em;--spin:420deg;transition:--r .55s cubic-bezier(.6,0,.8,.4),--spin .55s linear}
.pop-ai.star .pa-logo{--s:.2;opacity:0;transition:scale .55s cubic-bezier(.6,0,.8,.4),opacity .3s var(--e-ui) .25s}
.pop-ai.star .pa-lens{opacity:0;transform:scale(.3);transition:opacity .3s var(--e-ui),transform .5s var(--e-ui)}
.pa-star{position:absolute;left:50%;top:50%;width:.56em;height:.56em;margin:-.28em;z-index:3;overflow:visible;color:var(--ink);transform:rotate(-40deg) scale(.5);opacity:0;
  transition:transform 1s var(--e-molla) .4s,opacity .2s var(--e-ui) .4s}
.pa-star line{stroke:currentColor;stroke-width:9.4;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--e-esce)}
.pa-star line:nth-child(1){transition-delay:.45s}.pa-star line:nth-child(2){transition-delay:.5s}.pa-star line:nth-child(3){transition-delay:.55s}
.pa-star line:nth-child(4){transition-delay:.6s}.pa-star line:nth-child(5){transition-delay:.65s}.pa-star line:nth-child(6){transition-delay:.7s}
.pop-ai.star .pa-star{transform:none;opacity:1}
.pop-ai.star .pa-star line{stroke-dashoffset:0}
/* on hover the star opens for a moment and the marks peek out of it */
.pop-ai.star:hover .pa-ring{--r:.3em;--spin:480deg;transition:--r .7s var(--e-molla),--spin 1.6s var(--e-esce)}
.pop-ai.star:hover .pa-logo{--s:.85;opacity:1;transition:scale .7s var(--e-molla) calc(var(--i) * 30ms),opacity .2s}
.pop-ai.star:hover .pa-star{transform:rotate(30deg) scale(.42);opacity:.18;transition:transform .7s var(--e-molla),opacity .3s}

/* ---------- 3. the graph: a line that goes flat, then nearly straight up, and the view climbs with it ---------- */
.pop-up{--w:1.2em}
.pu-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* the grid fades out towards its edges (an SVG mask in the markup), so there is no box round it */
.pu-grid{stroke:oklch(0% 0 0/.13);stroke-width:.6;transition:transform 2.6s var(--e-esce) .6s}
.pu-cam{transition:transform 2.2s cubic-bezier(.6,0,.25,1) 1s}
.pu-line{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.pu-dot{opacity:0}
.pu-dot circle:first-child{fill:oklch(0% 0 0/.14)}
.pu-dot circle:last-child{fill:var(--ink)}
.pop-up.go .pu-line{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s cubic-bezier(.55,0,.35,1) .2s}
.pop-up.go .pu-dot{opacity:1;transition:opacity .2s .2s}
.pop-up.go .pu-cam{transform:translateY(7px)}
.pop-up.go .pu-grid{transform:translateY(10px)}
.pop-up.go:hover .pu-cam{transform:translateY(13px) scale(1.02);transition:transform 1s var(--e-molla)}
.pop-up.go:hover .pu-grid{transform:translateY(16px);transition:transform 1s var(--e-molla)}
.pu-dot circle:first-child{transform-box:fill-box;transform-origin:center}
.pop-up.go .pu-dot circle:first-child{animation:pu-pulse 1.4s var(--e-ui) 2.6s infinite}
@keyframes pu-pulse{50%{transform:scale(1.7)}}

/* ---------- 4. the engine: three generations wiped one into the next, each simpler, then it fires ---------- */
.pop-eng{--w:.42em;--et:-.04em;--eh:.8em}
.pe-e{position:absolute;left:50%;top:var(--et);height:var(--eh);width:auto;translate:-50% 0;clip-path:inset(100% 0 0 0)}
.pop-eng.go .pe-1{clip-path:inset(0 0 0 0);animation:pe-rise .8s var(--e-esce) both}
@keyframes pe-rise{from{translate:-50% .2em;opacity:0}}
.pop-eng.g2 .pe-1{clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
.pop-eng.g2 .pe-2{clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
.pop-eng.g3 .pe-2{clip-path:inset(0 0 100% 0)}
.pop-eng.g3 .pe-3{clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
/* the scan line that runs up with each new generation */
.pe-scan{position:absolute;left:12%;right:12%;height:.12em;top:100%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(0deg,transparent,oklch(70% .1 240/.3) 70%,oklch(62% .14 245/.9) 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.pop-eng.scan .pe-scan{animation:pe-scan .7s cubic-bezier(.65,0,.35,1)}
@keyframes pe-scan{0%{top:100%;opacity:1}100%{top:-.12em;opacity:1}}
.pe-n{position:absolute;right:-.1em;top:.02em;z-index:4;font:600 .13em/1 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums}
/* the flame under the nozzle */
.pe-fire{position:absolute;left:50%;top:calc(var(--et) + var(--eh) - .04em);width:.2em;height:.26em;margin-left:-.1em;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;transform-origin:50% 0;transform:scaleY(0);z-index:2;
  background:radial-gradient(55% 80% at 50% 8%,oklch(100% 0 0),oklch(78% .15 240) 32%,oklch(58% .22 270/.75) 58%,transparent 76%);transition:transform .5s var(--e-molla)}
.pop-eng.fire .pe-fire{transform:scaleY(1);animation:pe-flick .09s steps(2) infinite alternate}
.pop-eng.fire:hover .pe-fire{transform:scaleY(1.5) scaleX(1.15)}
.pop-eng.fire:hover .pe-3{animation:pe-shake .08s linear infinite alternate}
@keyframes pe-flick{to{opacity:.82}}
@keyframes pe-shake{to{translate:calc(-50% + .006em) .004em}}

/* ---------- 5. the globe: a plain world, blue and green, that spins in and keeps turning (faster under the pointer) ---------- */
.pop-globe{--w:.9em}
.pop-globe .pop-box{border-radius:50%}
.pg-c{position:absolute;inset:0;transform:scale(.45) rotate(-40deg);opacity:0;transition:transform 1.5s cubic-bezier(.2,.9,.3,1.06),opacity .5s var(--e-ui)}
.pop-globe.go .pg-c{transform:none;opacity:1}
.pg-c canvas{display:block;width:100%;height:100%}
/* the light on the sphere: a soft highlight top left */
.pg-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(42% 32% at 33% 24%,oklch(100% 0 0/.38),transparent 72%);opacity:0;transition:opacity .8s var(--e-ui) .4s}
.pop-globe.go .pg-sheen{opacity:1}

@media (prefers-reduced-motion:reduce){
  .pop,.pop *{transition:none!important;animation:none!important}
}