/* ══════════════════════════════════════════════════════════════════════════════
   amireallyfree.no · THE MACHINE · arrival.css (R5 · §7) — once, on ≥40% intersection, ~1.9s, then never again this session
   Load after airf-machine-v2.css. One class does everything: `.is-arrived` on .machine starts the beats (all CSS animation-delays);
   `.is-settled` (added by the snippet at 2650ms) removes the once-only animations so the .52s response transitions take over
   with no jump — every arrival animation ends exactly on the base state the paint contract already describes.
   Hash arrival (#uncover · #key …) and prefers-reduced-motion add `.is-arrived.is-settled` at once (a single 300ms fade for reduced motion).

   .ar  = a once-only arrival animation (paused until .is-arrived, killed on .is-settled)
   .arp = paused until .is-arrived, then persists (the ticker loop, the tiles' pop, the plate's first glare)
   ══════════════════════════════════════════════════════════════════════════════ */
@property --draw{syntax:'<percentage>';inherits:false;initial-value:100%;}

.machine:not(.is-arrived) .ar,.machine:not(.is-arrived) .arp{animation-play-state:paused !important;}
.machine.is-settled .ar{animation:none !important;}
.machine.rm .ar,.machine.rm .arp{animation:none !important;}
.machine.rm:not(.is-arrived){opacity:0;}
.machine.rm.is-arrived{animation:fade-in .3s both;}

/* t = 0     the plate's outer hairline draws clockwise from top-left (700ms); the second hairline follows */
.ar-ring{animation:draw .7s cubic-bezier(.2,.8,.2,1) both;}
.ar-ring2{animation:fade-in .3s .7s both;}
.ar-rail{animation:fade-in .5s .25s both;}
/* t = 120   spine initials type in top → bottom, ? last (60ms stagger), a caret blinks three times beside the ? */
.ar-L{animation:type-in .22s cubic-bezier(.2,.8,.2,1) both;}
.ar-L1{animation-delay:.12s;}.ar-L2{animation-delay:.18s;}.ar-L3{animation-delay:.24s;}.ar-L4{animation-delay:.30s;}.ar-L5{animation-delay:.36s;}.ar-L6{animation-delay:.42s;}.ar-L7{animation-delay:.48s;}
.ar-caret{opacity:0;animation:fade-in .1s .48s backwards,lm-caret .55s .58s 3,fade-out .15s 2.25s forwards;}
/* t = 480   LED on; scanlines fade to .012 */
.ar-led{animation:fade-in .2s .48s both;}
.ar-scan{animation:fade-in .4s .48s both;}
/* t = 560   THE ARC sweeps 0 → Σ, the pin rides, the numeral lights, the tiles pop (the tiles carry .arp with animation-delay: .56s + i·40ms) */
.ar-sweep{animation:arc-in .64s .56s cubic-bezier(.2,.8,.2,1) both,fade-in .1s .56s both;}
.ar-pin{animation:pin-in .64s .56s cubic-bezier(.2,.8,.2,1) both,fade-in .1s .56s both;}
.ar-num,.ar-tiles{animation:fade-in .3s .56s both;}
/* t = 760   THE TILE lifts in; the halo sweeps to Z/118 */
.ar-tile{animation:tile-in .42s .76s cubic-bezier(.2,.8,.2,1) both;}
.ar-halo{animation:halo-in .52s .84s cubic-bezier(.2,.8,.2,1) both;}
/* t = 900   THE WHEEL enters the Oval way (wheelEnter, 1.6s); the hand swings, the plate rides, one glare (the .m-glare carries .arp with animation-delay:1.15s) */
.ar-wheel{animation:wheelEnter 1.6s .9s cubic-bezier(.2,.8,.2,1) both;}
.ar-hand{animation:hand-in .9s 1.1s cubic-bezier(.2,.8,.2,1) both;}
.ar-plate{animation:plate-in .9s 1.1s cubic-bezier(.2,.8,.2,1) both;}
.ar-rd{animation:fade-in .4s 1s both;}
/* t = 640 → 1200   the word appears cycling (JS: cycle from 700 to 1200ms), then FREEDOM lands and blooms cyan once; the definition fades in */
.ar-word{animation:fade-in .3s .64s both;}
.ar-bloom{animation:bloom .9s 1.2s ease-out both;}
.ar-def{animation:fade-in .4s 1.2s both;}
/* t = 1500  the cascade rises 6px; the ticker begins (its loop carries animation-delay:1.5s) */
.ar-cas{animation:rise .5s 1.5s cubic-bezier(.2,.8,.2,1) both;}
.ar-tick{animation:fade-in .5s 1.5s both;}
/* t = 1900  TRY row + lure line + the four doors */
.ar-late{animation:fade-in .4s 1.9s both;}

@keyframes fade-out{from{opacity:1;}to{opacity:0;}}
@keyframes rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes type-in{from{opacity:0;transform:translateX(-5px);}to{opacity:1;transform:none;}}
@keyframes draw{from{--draw:0%;}to{--draw:100%;}}
@keyframes arc-in{from{stroke-dashoffset:292.17px;}to{stroke-dashoffset:calc(292.17px * (1 - var(--sweep,0)));}}
@keyframes pin-in{from{transform:rotate(-135deg);}to{transform:rotate(calc(-135deg + var(--sweep,0) * 270deg));}}
@keyframes halo-in{from{stroke-dashoffset:588.57px;}to{stroke-dashoffset:calc(588.57px * (1 - var(--z,0) / 118));}}
@keyframes tile-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes wheelEnter{from{opacity:0;transform:rotate(-12deg) scale(.94);}to{opacity:1;transform:none;}}
@keyframes hand-in{from{transform:rotate(0deg) scaleY(var(--hl,1));}to{transform:rotate(calc(var(--hour,0) * 30deg)) scaleY(var(--hl,1));}}
@keyframes plate-in{from{transform:translate(-50%,-50%) rotate(0deg) translateY(calc(var(--dw) * -1 * var(--rr,.4125))) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(calc(var(--hour,0) * 30deg)) translateY(calc(var(--dw) * -1 * var(--rr,.4125))) rotate(calc(var(--hour,0) * -30deg));}}
@keyframes bloom{from{opacity:.7;transform:scale(.55);}to{opacity:0;transform:scale(1.6);}}