/* Arcade site: the stage-select home and its reading pages. Dark ink / cream / orange / cobalt, with magenta, acid and cyan accents.
   Scene motion lives in the home canvas; page motion is the CSS block at the end, plus motion.js for the parts that need a measurement or a trigger. */
@font-face{font-family:Archivo;src:url(/personal-site/assets/fonts/archivo/archivo-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{--ink:#0b0a14;--ink2:#15132a;--line:#34325c;--cream:#f3ead7;--dim:#b9b2c9;--orange:#ff5a1f;--cobalt:#2f55ff;--magenta:#ff2e93;--acid:#d7ff3e;--cyan:#2fe6ff;--violet:#7b3cff;--acc:var(--orange);--focus:#fff;--pad:clamp(1rem,4vw,2.5rem);color-scheme:dark}
/* --lift: how far a plate stands off the page, 0 flat to 1 full depth. --ex: how far the name's cyan and violet extrusion stands out,
   0 flat to 1 at rest. Both rest at their full values; only the motion block and motion.js animate them */
@property --lift{syntax:"<number>";inherits:false;initial-value:1}
@property --ex{syntax:"<number>";inherits:false;initial-value:1}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Page colour is static and stays dark: three low glows behind the hero, then plain ink for the reading sections */
body{margin:0;background:radial-gradient(52rem 30rem at 100% 0,rgba(123,60,255,.26),transparent 70%),radial-gradient(40rem 26rem at 0 12rem,rgba(47,85,255,.2),transparent 70%),radial-gradient(34rem 20rem at 60% 44rem,rgba(255,46,147,.12),transparent 70%),var(--ink);background-repeat:no-repeat;color:var(--cream);font:400 1.0625rem/1.55 Archivo,system-ui,sans-serif;font-stretch:100%;overflow-wrap:break-word}
body::before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--cobalt) 0 34%,var(--magenta) 0 67%,var(--acid) 0)}
h1,h2,h3,p,ul,ol,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
img,svg,canvas{max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--pad);top:-5rem;z-index:9;display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;background:var(--cream);color:var(--ink);font-weight:700}
.skip:focus{top:.5rem}

/* Type: one family, width does the talking */
.arc,.nav__home{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.88;letter-spacing:-.005em}
.arc{font-size:clamp(2.5rem,6vw,4.75rem)}
.label{font-size:.72rem;font-weight:650;font-stretch:112%;line-height:1.3;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.note{font-size:.9rem;color:var(--dim)}

/* Shared widths. main clips sideways so a plate swinging or turning into place never widens the page */
.nav,.hero,.band,.foot{max-width:85rem;margin-inline:auto;padding-inline:var(--pad)}
main{overflow-x:clip}

/* Nav */
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.25rem;padding-block:.5rem}
.nav a,.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 .75rem;text-decoration:none;font-weight:600}
.nav ul,.foot ul{display:flex;flex-wrap:wrap;gap:0 .25rem;margin-inline:-.75rem}
.nav nav{order:3;flex:1 0 100%}
.nav li a:hover,.foot li a:hover{color:var(--orange)}
.nav li a[aria-current]{box-shadow:inset 0 -3px 0 var(--acid)}
.nav .nav__home{margin-right:auto;padding-left:0;font-size:1.5rem;font-weight:800;line-height:1}
/* Home wordmark: original arcade-title lettering in Archivo. Slanted, hot gradient face, hard ink outline, cyan then violet drop.
   motion.js splits it into letters (.ch) under .wm, with a spark between the words; the face then sits on each letter, and its first,
   hidden layer is the shine that sweeps across. Without the split it is one span and looks the same */
.nav__home>span{color:#ffd23f;transform:skewX(-10deg) rotate(-2deg);transform-origin:0 100%;filter:drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(calc(.1em*var(--ex,1)) calc(.1em*var(--ex,1)) 0 var(--cyan)) drop-shadow(calc(.06em*var(--ex,1)) calc(.06em*var(--ex,1)) 0 var(--violet))}
.nav__home .ch{display:inline-block;transform-origin:50% 100%}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .nav__home>span,.nav__home .ch{background:linear-gradient(100deg,transparent 42%,#fff 50%,transparent 58%) 0 0/300% 100% no-repeat,linear-gradient(180deg,#fff36b 18%,#ffb21f 46%,#ff5a1f 68%,#ff2e93 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .nav__home>.wm{background:none}
}
.wm__spark{position:relative;display:inline-block;width:0;height:1em;vertical-align:top;transform-origin:-.12em 50%;opacity:0;pointer-events:none}
.wm__spark::before{content:"";position:absolute;left:-.12em;top:50%;width:1.5em;height:1.5em;translate:-50% -50%;background:var(--acid);clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%)}
.nav .nav__cta{border:2px solid var(--acid);font-size:.95rem}
.nav .nav__cta:hover{background:var(--cream);color:var(--ink)}

/* Hero: a plain lower-case hello, then the stage. The arcade name lives in the nav wordmark. */
.hero{display:grid;gap:1rem;padding-block:.75rem 3.5rem}
.name{font-size:clamp(2.1rem,9.5vw,4rem);font-weight:450;line-height:1.05;letter-spacing:-.02em}
.hero__say,.say{max-width:34ch;font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:500;line-height:1.35}
.hero__then{display:grid;gap:1.25rem;max-width:44ch;margin-top:.5rem}
.hero__cta,.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
/* Hooks motion.js adds on Home: the waving hand, the opener's words (.w) and the coin that skips across them, and the AI line's scan.
   The scan's band waits above the line, unpainted, until its animation runs */
.hero .wave{display:inline-block;transform-origin:70% 85%}
.hero__say{position:relative}
.hero__say .w{display:inline-block;transform-origin:50% 100%}
.coin{position:absolute;left:0;top:0;width:.42em;height:.42em;background:#ffd23f;box-shadow:inset -.1em -.1em 0 #ff8a1f,0 0 0 2px var(--ink);opacity:0;pointer-events:none}
.hero__then>p:first-child{position:relative}
.scan::after{content:"";position:absolute;inset:-.3em -.5em;background:linear-gradient(transparent,rgba(47,230,255,.24) 90%,var(--cyan) 90%) 0 -2.6em/100% 2.6em no-repeat;mix-blend-mode:screen;pointer-events:none}

/* The cabinet. 800px box = 2px border + 14px pad + a 768x448 screen, exactly 2x the 384x224 art. */
.cab{width:100%;max-width:800px;padding:8px;background:var(--ink2);border:2px solid var(--cream);--depth:6px}
/* Plates: two hard offsets, cobalt then magenta, scaled by --lift */
.cab,.cover{box-shadow:calc(var(--depth)*var(--lift,1)) calc(var(--depth)*var(--lift,1)) 0 var(--cobalt),calc(2*var(--depth)*var(--lift,1)) calc(2*var(--depth)*var(--lift,1)) 0 var(--magenta)}
.cab__screen{background:#000;box-shadow:0 0 0 2px #000}
.cab__screen img,.cab__screen canvas{display:block;width:100%;height:auto;aspect-ratio:384/224;image-rendering:pixelated}
#stage,.canvas-ready #stage-fallback{display:none}
.canvas-ready #stage{display:block}
/* Animate artwork off: every CSS animation on the page goes, and the static design shows */
html:has(#arcade.paused) *,html:has(#arcade.paused) ::before,html:has(#arcade.paused) ::after{animation:none!important}

.cab__bar{display:flex;align-items:center;min-height:32px;margin-top:8px}
.cab__now,.status{display:flex;align-items:center;gap:.6rem;color:var(--cream)}
.cab__now::before,.status::before{content:"";flex:none;width:.6rem;height:.6rem;background:var(--acc)}
.cab__now span{display:none}
#arcade[data-stage="made4sport"] [data-for="made4sport"],#arcade[data-stage="ultralabs"] [data-for="ultralabs"],#arcade[data-stage="inverted"] [data-for="inverted"]{display:inline}
.cab__h{margin:6px 0 8px;padding-top:8px;border-top:2px solid var(--line)}
.cab .note{margin-top:8px}

/* Accents: one per business, shared by the stage, its pick, its Work section and its Work row */
[data-stage="made4sport"],.card--m4s{--acc:#e5352b}
[data-stage="ultralabs"],.card--ul{--acc:#4f7bff}
[data-stage="inverted"],.card--inv{--acc:#ff4d00}

/* Stage select. Disabled (no JS) stays fully legible; only the cursor changes. The link rows on Work and Links share the build. */
.picks,.rows{display:grid;gap:8px}
.pick,.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;min-height:60px;padding:.6rem .8rem;background:var(--ink);border:2px solid var(--line);color:var(--cream);text-align:left;cursor:pointer}
.pick:disabled{color:var(--cream);opacity:1;cursor:default}
.pick:enabled:hover,.row:hover{border-color:var(--cream)}
.pick[aria-pressed="true"]{border-color:var(--acc);box-shadow:inset 0 5px 0 var(--acc)}
.pick__cap{font-size:.82rem;font-weight:500;color:var(--dim)}
.pick[aria-pressed="true"] .pick__cap{color:var(--cream)}
/* Business names set in the site's own condensed caps, not their logos */
.pick__name{font-size:1.3rem;font-weight:800;font-stretch:62%;line-height:.95;text-transform:uppercase}
.rows{max-width:40rem}
.row{position:relative;isolation:isolate;padding-left:1.1rem;box-shadow:inset 5px 0 0 var(--acc);font-weight:750;text-decoration:none}
/* Menu select: hover, focus or a press inverts the row under a cream wipe, and an ink cursor drops in ahead of the words */
.row::after{content:"";position:absolute;inset:0;background:var(--cream);mix-blend-mode:difference;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.row::before{content:"";position:absolute;z-index:1;left:.45rem;top:50%;border:solid transparent;border-width:.32em 0 .32em .44em;border-left-color:var(--ink);transform:translateY(-50%) scale(0);pointer-events:none}
.row:hover::after,.row:focus-visible::after,.row:active::after{transform:none}
.row:hover::before,.row:focus-visible::before,.row:active::before{transform:translateY(-50%)}

/* Links and buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.25rem;background:var(--orange);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--magenta);color:var(--ink);font-weight:750;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--cream)}
.go{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:.3em}
.go:hover{color:var(--acc)}

/* Bands */
.band{display:grid;gap:1.75rem;padding-block:clamp(3.5rem,9vw,7rem);border-top:2px solid var(--line)}
.band p{max-width:62ch}
.band--magenta{border-top-color:var(--magenta)}
.band--cobalt{border-top-color:var(--cobalt)}
.band--acid{border-top-color:var(--acid)}
.band--magenta .arc{text-shadow:3px 3px 0 var(--magenta)}
.band--cobalt .arc{text-shadow:3px 3px 0 var(--cobalt)}
.card,.stack{display:grid;gap:1rem;align-content:start}
.card__links{display:flex;flex-direction:column;align-items:flex-start}

.cards{display:grid;gap:3rem}
.card{padding-top:1.5rem;border-top:5px solid var(--acc)}
.card h3,.biz h2,.tl h3,.steps h3{font-size:1.3rem;font-weight:750;line-height:1.2}
/* About: each business in the story reads as a chapter title, in condensed caps over a drop in its own colour */
.tl h3{font-size:clamp(1.75rem,5vw,2.6rem);font-weight:800;font-stretch:62%;line-height:.95;text-transform:uppercase;text-shadow:.07em .07em 0 var(--acc);transform-origin:0 80%}
.card li{padding-block:.4rem;border-bottom:2px solid var(--line)}
.card__tag .label{margin-top:.25rem;color:var(--acc)}
.card--m4s .card__tag .label{color:#ff7a6e}
.card--ul .card__tag .label{color:#8ea9ff}

.lede{max-width:24em!important;font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:550;font-stretch:88%;line-height:1.15}

/* Emails: the one cream panel on the page. The form is switched off and says so. */
.emails{--focus:var(--ink);--acc:var(--cobalt);margin-block:0 clamp(3rem,7vw,5rem);padding-block:clamp(2rem,5vw,3.5rem);background:var(--cream);border:0;box-shadow:calc(8px*var(--lift,1)) calc(8px*var(--lift,1)) 0 var(--cobalt);color:var(--ink)}
.emails__lede{margin-top:1rem;font-size:1.15rem;font-weight:500}
.emails .label{display:block;margin-bottom:.5rem;color:var(--ink)}
.signup__row{display:flex;flex-wrap:wrap;gap:.75rem}
.signup input{flex:1 1 14rem;min-width:0;min-height:48px;padding:0 .9rem;background:#fffaf0;border:2px solid var(--ink);border-radius:0;color:var(--ink)}
.signup fieldset:disabled input,.signup fieldset:disabled .btn{background:none;border-style:dashed;box-shadow:none;color:#4a4658;opacity:1;cursor:not-allowed}
.signup fieldset:disabled .btn{text-decoration:line-through}
.emails .note{margin-top:1rem;padding-left:.75rem;border-left:5px solid var(--orange);color:var(--ink);font-weight:650}

/* Footer */
.foot{display:grid;gap:.5rem;padding-block:1.5rem 2.5rem;border-top:2px solid var(--line);border-image:linear-gradient(90deg,var(--cobalt),var(--magenta),var(--acid)) 1}
.foot__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 2rem}
/* Display: a native disclosure in the home footer. scene.js enables the checkbox; without it the box stays off. */
.display-settings summary{padding-block:.9rem;cursor:pointer}
.display-settings label{display:flex;align-items:center;gap:.5rem;min-height:44px}
.display-settings input{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--acid)}

/* Reading pages: About, Work, Book and Links reuse the bands. The first band carries the page title. */
.band--top{padding-top:clamp(1rem,3vw,2.5rem);border-top:0}
.band--top .arc{font-size:clamp(3rem,10vw,6rem)}
.groups{display:grid;gap:2.25rem}
p a:not([class]){text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:.2em}
/* Cobalt, magenta and acid in turn, down a list */
.tri>:nth-child(3n+1){--acc:var(--cobalt)}
.tri>:nth-child(3n+2){--acc:var(--magenta)}
.tri>:nth-child(3n){--acc:var(--acid)}

/* About: a small portrait beside the name, held in acid select brackets, then a ruled timeline with square markers */
.me{display:flex;align-items:center;gap:1.25rem}
.me__pic{position:relative;flex:none}
.me__pic::after{content:"";position:absolute;inset:-9px;--b:linear-gradient(var(--acid),var(--acid));background:var(--b) 0 0/14px 3px,var(--b) 0 0/3px 14px,var(--b) 100% 0/14px 3px,var(--b) 100% 0/3px 14px,var(--b) 0 100%/14px 3px,var(--b) 0 100%/3px 14px,var(--b) 100% 100%/14px 3px,var(--b) 100% 100%/3px 14px;background-repeat:no-repeat;pointer-events:none}
.me img{display:block;width:clamp(4.5rem,14vw,6.5rem);height:auto;border:2px solid var(--cream);box-shadow:calc(5px*var(--lift,1)) calc(5px*var(--lift,1)) 0 var(--magenta)}
.tl{display:grid;gap:2rem;margin:.5rem 0 1rem 5px;border-left:2px solid var(--line)}
.tl li{position:relative;display:grid;gap:.35rem;padding-left:1.4rem}
.tl li::before{content:"";position:absolute;left:-7px;top:.1rem;width:12px;height:12px;background:var(--acc)}

/* Work: one section per business. Its home stage sits in the same cabinet, as a still. */
.biz{border-top:5px solid var(--acc)}
.biz .cab{grid-area:auto}

/* Book: the real cover, true 848x1264 shape, on a solid book: --d thick, a blank spine in the cover's own red-orange, and a magenta
   plate behind it. Its resting angle is --ty; motion.js turns it toward the pointer. The method keeps its list, with big numbers drawn alongside */
.cover{display:block;align-self:start;width:min(100% - 1rem,20rem);height:auto;--depth:8px}
.tome{--d:clamp(14px,1.6vw,22px);position:relative;align-self:start;width:min(100% - 2rem,20rem);margin-left:calc(var(--d)/2);transform-style:preserve-3d;transform:perspective(1600px) rotateY(var(--ty,18deg)) rotateX(var(--tx,0deg))}
.tome::before{content:"";position:absolute;inset:0;background:var(--magenta);transform:translateZ(calc(var(--d)/-2)) translate(10px,10px)}
.tome .cover{width:100%;box-shadow:none;transform:translateZ(calc(var(--d)/2))}
.tome__spine{position:absolute;top:0;left:calc(var(--d)/-2);width:var(--d);height:100%;background:linear-gradient(90deg,#6e1606,#c4361a 40%,#e24a24 55%,#8f220e);transform:rotateY(-90deg)}
.steps{display:grid;gap:1.5rem;margin-block:.5rem;padding-left:clamp(3.25rem,7vw,4.5rem);list-style:decimal;counter-reset:step}
.steps li{position:relative;counter-increment:step}
.steps li::marker{color:transparent}
.steps li::before{content:counter(step);position:absolute;right:calc(100% + .3em);top:-.08em;font-size:clamp(2.5rem,5vw,3.4rem);font-weight:800;font-stretch:62%;line-height:1;color:var(--acid);text-shadow:.05em .05em 0 var(--magenta);transform-origin:50% 100%}
.steps p{margin-top:.35rem}

/* Links: the email panel opens the link column, at row width, in one column, under the small heading */
.groups .emails{max-width:40rem;margin:0;grid-template-columns:none}
.groups .emails .arc{font-size:2.5rem;text-shadow:none}

@media (min-width:600px){
  .cab{padding:14px;--depth:10px}
  .picks{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .pick{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;min-height:104px;padding:1rem .9rem .75rem}
  .pick__name{font-size:clamp(1.3rem,2vw,1.6rem)}
}
@media (min-width:720px){
  .nav{padding-block:.75rem}
  .nav nav{order:0;flex:0 1 auto}
  .nav .nav__home{font-size:1.75rem}
}
@media (min-width:900px){
  .nav .nav__home{font-size:2.25rem}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .emails{grid-template-columns:1fr 1fr;column-gap:3.5rem;align-items:end}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:3rem}
  .book{grid-template:auto 1fr / minmax(0,1fr) minmax(0,24rem);column-gap:clamp(2.5rem,6vw,6rem)}
  .book .tome{grid-column:2;grid-row:1 / 3;width:calc(100% - var(--d))}
}
/* Below desktop: the AI line moves above the stage, CTAs stay under it */
@media (max-width:1239px){
  .hero__then{display:contents}
  .hero__then>p:first-child{grid-row:3;max-width:44ch}
  .cab{grid-row:4}
  .hero__cta{grid-row:5}
}
/* Desktop: name, opener and AI context sit beside the 2x stage. Work puts each still beside its words the same way. */
@media (min-width:1240px){
  .hero{grid-template:"name cab" auto "say cab" auto "then cab" 1fr / minmax(0,1fr) 800px;column-gap:clamp(2rem,4vw,4.5rem);align-items:start;padding-block:1.5rem 5rem}
  .hero__name{grid-area:name;margin-top:.5rem}
  .hero__say{grid-area:say}
  .hero__then{grid-area:then}
  .cab{grid-area:cab}
  .name{font-size:clamp(2.4rem,3.1vw,3.25rem)}
  .biz{grid-template-columns:minmax(0,1fr) 800px;column-gap:clamp(2rem,4vw,4.5rem);align-items:start}
}

/* Motion (revision-v6-personality/MOTION-MAP.md). Every page moves differently: the name dashes in and clashes (motion.js), the Home
   screen powers on, About's portrait locks on and its chapter titles punch in, Work's cabinets swing round while the camera pulls back,
   the book turns to face you and its method numbers flip, link rows light up like a menu, the Notes panel is dealt onto the page.
   Text is never hidden, faded or clipped: only transforms, colour, shadows and decoration move, and all of it stops. Everything here is
   progressive: without support, with reduced motion or with Animate artwork off, the static design above stands */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  a,button{transition:color .12s,background-color .12s,border-color .12s,transform .08s,box-shadow .08s}

  /* Press: controls lift a little under the pointer and sink into their own shadow when pressed. Link rows wipe in hard steps */
  @media (hover:hover){
    .btn:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--magenta)}
  }
  .btn:not(:disabled):active{transform:translate(4px,4px);box-shadow:0 0 0 var(--magenta)}
  .pick:enabled:active,.row:active,.nav .nav__cta:active{transform:translate(2px,2px)}
  .row::after{transition:transform .2s steps(5,end)}
  .row::before{transition:transform .1s steps(2,end) .1s}

  /* Cut: same-origin page changes. The nav holds, the old page sinks back, the new one cuts in over it in 12 hard steps over the stage
     curtain's 420ms, H1 corner first. Nothing intercepts links, so history, new tabs, focus and scroll restoration stay native */
  @view-transition{navigation:auto}
  .nav{view-transition-name:nav}
  ::view-transition{background:#0b0a14}
  ::view-transition-group(nav){animation-name:none}
  ::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:.42s;animation-fill-mode:both}
  ::view-transition-old(root){animation-name:sink;animation-timing-function:ease-in}
  ::view-transition-new(root){animation-name:cut;animation-timing-function:steps(12,end)}
  @keyframes sink{to{transform:scale(.97);filter:brightness(.45)}}
  @keyframes cut{from{clip-path:polygon(0 0,0 0,0 0)}to{clip-path:polygon(0 0,200% 0,0 200%)}}
  /* phones: a top-down shutter along the reading axis instead of the diagonal */
  @media (max-width:599px){::view-transition-new(root){animation-name:shutter}}
  @keyframes shutter{from{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}}

  /* Arrivals, CSS only so they run without JS too. Home: the cabinet rises and its screen powers on, a line opening to the picture.
     About: the portrait comes up from grey as the select brackets snap onto it. Book: the book swings round from its spine to face you */
  @keyframes lift{from{--lift:0}}
  .hero .cab{animation:lift .6s .3s cubic-bezier(.2,.7,.2,1) both}
  .hero .cab__screen{animation:crt .6s .1s cubic-bezier(.2,.7,.2,1) backwards}
  @keyframes crt{0%{transform:scale(.4,.012);filter:brightness(2.6)}40%{transform:scale(1,.012);filter:brightness(2.2)}75%{transform:scale(1,1.04);filter:brightness(1.25)}}
  .me img{animation:lift .6s .3s cubic-bezier(.2,.7,.2,1) both,colour .7s .2s ease-out backwards}
  @keyframes colour{from{filter:grayscale(1) brightness(.55)}}
  .me__pic::after{animation:lock .45s .15s steps(5,end) backwards}
  @keyframes lock{from{transform:scale(1.8) rotate(45deg)}}
  .tome{animation:turn 1.1s .15s cubic-bezier(.2,.8,.3,1.12) backwards;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  @keyframes turn{from{transform:perspective(1600px) rotateY(74deg) rotateX(0deg)}}
  /* Home AI line: one cyan scan passes down it, the scan the AI station runs in the film. motion.js adds .scan once it is in view */
  .scan::after{animation:scan 1.1s cubic-bezier(.45,0,.25,1) both}
  @keyframes scan{from{background-position:0 -2.6em}to{background-position:0 calc(100% + 2.6em)}}

  /* Home: the selected business's bar fills on the film's own clock (scene.js sets --p on #arcade) over a dim track, and shows full
     whenever the film is still. The caption types in each time the stage changes, since a newly displayed span starts its animation afresh */
  .pick{position:relative}
  .pick[aria-pressed="true"]{box-shadow:inset 0 5px 0 color-mix(in srgb,var(--acc) 30%,transparent)}
  .pick[aria-pressed="true"]::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--acc);transform:scaleX(var(--p,1));transform-origin:left}
  #arcade.paused .pick::before{transform:none}
  /* Business identity stays readable throughout stage changes. */

  /* Scroll: tied to your scroll, so it moves only while you do. Story beats use a reading line 60% down the viewport */
  @supports (animation-timeline:view()){
    /* The Notes panel is dealt onto the page as it arrives, tilted and low to square and flat; motion.js then stamps its heading.
       On Links it opens the page, so it is already down */
    .emails{transform-origin:0 100%;animation:deal 1ms linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .groups .emails{animation:none}
    @keyframes deal{from{translate:0 3.5rem;rotate:-3deg;--lift:0}}
    /* About: a cream thread runs down the timeline with its tip on the reading line, each marker fills as the thread reaches it, and
       that chapter's title punches in from a squeezed lean to its full width and drop. Chapters still ahead wait, dim and squeezed */
    .tl{position:relative;view-timeline:--tl block;view-timeline-inset:0% 40%}
    .tl::after{content:"";position:absolute;top:0;bottom:0;left:-2px;width:2px;background:var(--cream);transform-origin:top;animation:thread 1ms linear both;animation-timeline:--tl;animation-range:entry-crossing 0% entry-crossing 100%}
    @keyframes thread{from{transform:scaleY(0)}}
    .tl li,.steps li{view-timeline:--step block;view-timeline-inset:0% 40%}
    .tl li::before{z-index:1;animation:light 1ms linear both;animation-timeline:--step;animation-range:entry-crossing 0% entry-crossing 14px}
    @keyframes light{from{background:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}}
    .tl h3{animation:slam 1ms linear both;animation-timeline:--step;animation-range:entry-crossing 0% entry-crossing 80px}
    @keyframes slam{0%{transform:translateX(-.35em) skewX(-18deg) scaleX(.7);text-shadow:0 0 0 var(--acc);color:var(--dim)}60%{transform:translateX(.05em) skewX(6deg) scaleX(1.06)}100%{transform:none}}
    /* Work: each business's cabinet swings round to face you as it arrives, and inside it the camera pulls back from the work itself
       (the bag, the monitor, the counter) to the whole scene */
    .biz .cab{view-timeline:--cab block;transform-origin:100% 50%;animation:swing 1ms linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    @keyframes swing{from{transform:perspective(1100px) rotateY(-34deg) rotateX(8deg) translateY(2.5rem);--lift:0}}
    .biz .cab__screen{overflow:hidden}
    .biz .cab__screen img{animation:pull 1ms linear both;animation-timeline:--cab;animation-range:entry 30% cover 50%}
    @keyframes pull{from{transform:scale(2)}}
    #made4sport .cab__screen img{transform-origin:18% 45%}
    #ultralabs .cab__screen img{transform-origin:70% 55%}
    #inverted .cab__screen img{transform-origin:64% 62%}
    /* Book: each method number flips over like a scoreboard card as its step reaches the reading line, one thing at a time; the three
       Parts open like pages off a left-hand spine as they arrive, one after another */
    .steps li::before{animation:flap 1ms linear both;animation-timeline:--step;animation-range:entry-crossing 0% entry-crossing 70px}
    @keyframes flap{0%{transform:perspective(320px) rotateX(78deg);color:var(--line)}55%{transform:perspective(320px) rotateX(-22deg)}100%{transform:none}}
    .cards .card{transform-origin:0 50%;animation:leaf 1ms linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    .cards .card:nth-child(2){animation-range:entry 15% cover 38%}
    .cards .card:nth-child(3){animation-range:entry 30% cover 46%}
    @keyframes leaf{from{transform:perspective(1300px) rotateY(-58deg)}}
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .pick[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:-5px}
  .nav__home>span{filter:none}
  .row::after,.row::before{display:none}
}