:root{
  --ink:#1B1B24;--ink2:#14141B;--plate:#2A2733;--plate2:#3A3644;--paper:#F4F1EA;--muted:rgba(244,241,234,.74);
  --gold:#F2C94C;--green:#3FBF5F;--red:#E04B4B;--blue:#3B82F6;--orange:#F28C28;--purple:#8B5CF6;--tan:#C89B6A;
  --sky:#82C9F2;--sky2:#C2E7FA;--pave:#8E8C98;--kerb:#6E6E7A;--road:#494853;
  --pixel:"Silkscreen",ui-monospace,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:var(--sans);background:var(--ink);color:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
img,video{max-width:100%;height:auto;display:block}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Header (shared with privacy/support) */
.bar{position:sticky;top:0;z-index:20;background:var(--plate);border-bottom:3px solid var(--ink2);box-shadow:0 3px 0 rgba(0,0,0,.5)}
.bar .wrap{display:flex;align-items:center;gap:12px;height:60px}
.bar img{width:36px;height:36px;border:2px solid var(--ink2)}
.bar b{font-family:var(--pixel);font-size:15px;letter-spacing:.5px;white-space:nowrap}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:13px}
.bar nav a{color:var(--paper);text-decoration:none;opacity:.85}.bar nav a:hover{opacity:1;color:var(--gold)}
.bar nav .btn{opacity:1;padding:8px 12px;font-size:12px;white-space:nowrap}
@media (max-width:480px){.bar nav .btn .wide{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--pixel);font-size:15px;color:var(--ink);background:var(--gold);padding:14px 20px;border:3px solid var(--ink2);box-shadow:4px 4px 0 var(--ink2);text-decoration:none;transition:transform .08s,box-shadow .08s;cursor:pointer}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink2)}
.btn:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
/* Apple's official badge, used as supplied: no recolouring, effects or animation (Apple's rules).
   Clear space of at least a quarter of its height on every side. */
.store-badge{display:inline-block;padding:14px;margin:-14px;line-height:0;border-radius:12px}
.store-badge img{height:56px;width:auto}
.store-badge:focus-visible{outline:3px solid var(--paper);outline-offset:-4px}
.hero .store-badge:focus-visible{outline-color:var(--ink2)}

/* Hero */
.hero{padding:0;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 100%);color:var(--ink)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"top phone" "cta phone";column-gap:48px;align-items:end;padding-top:36px}
.hero-top{grid-area:top;align-self:end}
.hero-cta{grid-area:cta;align-self:start;padding-bottom:236px}
.hero .phone-wrap{grid-area:phone;align-self:end}
.wordmark{width:min(300px,72%);height:auto;margin:0 0 20px}
.hero h1{font-family:var(--sans);font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-1.2px}
.hero h1 em{font-style:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--ink);color:var(--gold);padding:0 .18em;box-shadow:4px 4px 0 rgba(0,0,0,.18)}
.hero .lead{font-size:18px;margin:18px 0 24px;max-width:520px;color:#26252f}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .note{font-family:var(--pixel);font-size:12px;margin-top:18px;color:rgba(27,27,36,.75)}
.phone{width:300px;margin:0 auto;border:8px solid var(--ink2);border-bottom:none;border-radius:40px 40px 0 0;overflow:hidden;background:#000;box-shadow:10px 0 0 rgba(0,0,0,.18)}
.phone video{width:100%;height:auto;aspect-ratio:430/932}
.phone-wrap{position:relative}
.phone-wrap .tag{position:absolute;left:-18px;top:40%;font-family:var(--pixel);font-size:12px;background:var(--gold);border:3px solid var(--ink2);padding:6px 10px;box-shadow:3px 3px 0 var(--ink2);transform:rotate(-4deg)}
.street{position:relative;z-index:3;height:120px;background:var(--road)}   /* above the phone, so passers-by walk in front of it */
.street::before{content:"";position:absolute;left:0;right:0;top:0;height:44px;background:var(--pave);border-bottom:6px solid var(--kerb)}
.street::after{content:"";position:absolute;left:0;right:0;top:78px;height:6px;background:repeating-linear-gradient(90deg,#D9C65A 0 34px,transparent 34px 70px);animation:lines 5.1s linear infinite}
/* Road markings scroll at the street's pace (321 art px × scale per 70 s) */
@keyframes lines{to{background-position-x:-70px}}
/* Hero scenery: flattened strips composed from the game's own city sprites
   (scripts/make-site-scene.swift), each panning at its own speed for depth. */
.hero{--s:3}
.scene{position:absolute;left:0;right:0;top:0;bottom:120px;z-index:0;pointer-events:none;overflow:hidden}
.layer{position:absolute;left:0;width:calc(100% + var(--w));background-repeat:repeat-x;image-rendering:pixelated;image-rendering:crisp-edges;animation:pan var(--t) linear infinite}
.layer.clouds-far{--k:calc(var(--s) * 2 / 3);--w:calc(600px * var(--k));--t:240s;top:6px;height:calc(90px * var(--k));background-image:url(img/scene/scene-clouds-far.png);background-size:var(--w) 100%}
.layer.clouds{--w:calc(520px * var(--s));--t:150s;top:14px;height:calc(80px * var(--s));background-image:url(img/scene/scene-clouds.png);background-size:var(--w) 100%}
.layer.flyers{--w:calc(520px * var(--s));--t:95s;top:70px;height:calc(40px * var(--s));background-image:url(img/scene/scene-flyers.png);background-size:var(--w) 100%;animation-direction:reverse}
.layer.far{--k:calc(var(--s) * 5 / 3);--w:calc(301px * var(--k));--t:120s;bottom:0;height:calc(42px * var(--k));background-image:url(img/scene/scene-far.png);background-size:var(--w) 100%}
.layer.near{--w:calc(321px * var(--s));--t:70s;bottom:0;height:calc(66px * var(--s));background-image:url(img/scene/scene-near.png);background-size:var(--w) 100%}
/* Passers-by on the pavement: each group walks at its own pace, stepping through four walk frames */
.layer.walk{height:calc(16px * var(--s));background-size:var(--w) calc(64px * var(--s));animation:pan var(--t) linear infinite,walkcycle .64s steps(4) infinite}
.layer.walk.back{--w:calc(520px * var(--s));--t:34s;top:calc(-9px * var(--s));background-image:url(img/scene/scene-walk-left.png)}
.layer.walk.front{--w:calc(480px * var(--s));--t:80s;top:calc(-4px * var(--s));background-image:url(img/scene/scene-walk-right.png);animation-direction:reverse,normal}
@keyframes pan{to{transform:translateX(calc(var(--w) * -1))}}
@keyframes walkcycle{to{background-position-y:calc(-64px * var(--s))}}

/* Floors: section headers styled as the game's floor nameplates */
section{padding:84px 0}
.floor{border-top:6px solid var(--ink2)}
.floor.alt{background:var(--plate)}
.plate{display:inline-flex;align-items:stretch;margin-bottom:22px;border:3px solid var(--ink2);box-shadow:4px 4px 0 var(--ink2);background:var(--ink)}
.plate .n{font-family:var(--pixel);font-size:13px;background:var(--gold);color:var(--ink);padding:6px 10px;display:flex;align-items:center}
.plate .t{font-family:var(--pixel);font-size:13px;padding:6px 12px;color:var(--paper);display:flex;align-items:center;letter-spacing:.5px}
h2{font-family:var(--sans);font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.12;letter-spacing:-.8px;margin-bottom:12px;max-width:760px}
h2+p,.intro{color:var(--muted);font-size:17px;max-width:640px;margin-bottom:36px}
h3{font-family:var(--pixel);font-size:16px;font-weight:700;letter-spacing:.3px;margin-bottom:8px}

/* Tour carousel */
.tour{padding:64px 0 72px;background:var(--ink2)}
.tour .head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}
.tour h2{margin:0}
.arrows{display:flex;gap:10px}
.arrows button{font-family:var(--pixel);font-size:18px;width:46px;height:46px;background:var(--plate2);color:var(--paper);border:3px solid #000;box-shadow:3px 3px 0 #000;cursor:pointer}
.arrows button:hover{background:var(--gold);color:var(--ink)}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:250px;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 20px 22px;max-width:1120px;margin:0 auto;scrollbar-color:var(--plate2) transparent}
.card{scroll-snap-align:start;background:var(--plate);border:3px solid #000;box-shadow:5px 5px 0 #000}
.card p{font-family:var(--pixel);font-size:13px;line-height:1.35;padding:12px 12px 10px;min-height:62px;color:var(--paper)}
.card img{width:100%;height:auto;border-top:3px solid #000}

/* The loop */
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.beat{background:var(--plate);border:3px solid var(--ink2);box-shadow:5px 5px 0 var(--ink2);display:flex;flex-direction:column}
.beat img{width:100%;height:220px;object-fit:cover;object-position:top;border-bottom:3px solid var(--ink2)}
.beat div{padding:18px 18px 20px}
.beat h3{color:var(--gold)}
.beat p{color:var(--muted);font-size:15px}
.facts{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:36px;border:3px solid var(--ink2);background:var(--ink2)}
.facts div{background:var(--ink);padding:16px 10px;text-align:center;border-right:3px solid var(--ink2)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:var(--pixel);font-size:28px;color:var(--gold);line-height:1.1}
.facts span{font-size:13px;color:var(--muted)}

/* Staff: lanyard ID badges */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:30px}
.badge{position:relative;background:var(--paper);color:var(--ink);border:3px solid var(--ink2);box-shadow:5px 5px 0 #000;padding:30px 16px 18px;text-align:center}
.badge::before{content:"";position:absolute;left:50%;top:-34px;width:14px;height:40px;transform:translateX(-50%);background:var(--c,var(--red));border:3px solid var(--ink2)}
.badge::after{content:"";position:absolute;left:50%;top:10px;width:30px;height:8px;transform:translateX(-50%);background:var(--plate2);border-radius:4px}
.badge{--r:-1.4deg;transform-origin:50% -34px;animation:swing 4.5s ease-in-out infinite alternate}
.badge:nth-child(even){--r:1.6deg;animation-delay:-1.8s;animation-duration:5.2s}
.badge:hover{animation-duration:.7s}
.face{width:64px;height:64px;margin:6px auto 12px;background:var(--c,var(--red));border:3px solid var(--ink2);display:grid;place-items:center;font-family:var(--pixel);font-size:24px;color:var(--ink)}
.badge h3{font-size:15px;margin-bottom:2px}
.badge .role{font-size:12px;color:#5a5866;margin-bottom:12px}
.badge .quirk{font-size:14px;font-weight:600;line-height:1.4;border-top:2px dashed #c9c4b8;padding-top:12px}

/* Clients */
.marquee{overflow:hidden;margin:6px 0 40px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .row{display:flex;gap:14px;width:max-content;animation:scroll 60s linear infinite;margin-bottom:14px}
.marquee .row.r2{animation-duration:75s;animation-direction:reverse}
.marquee span{font-family:var(--pixel);font-size:15px;white-space:nowrap;padding:10px 16px;border:3px solid var(--ink2);box-shadow:3px 3px 0 var(--ink2);background:var(--plate2)}
.marquee span:nth-child(5n+1){background:var(--red)}.marquee span:nth-child(5n+2){background:var(--blue)}
.marquee span:nth-child(5n+3){background:var(--green);color:var(--ink)}.marquee span:nth-child(5n+4){background:var(--gold);color:var(--ink)}
@keyframes scroll{to{transform:translateX(-50%)}}
.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.panel{background:var(--plate);border:3px solid var(--ink2);box-shadow:4px 4px 0 var(--ink2);padding:18px 18px 18px 24px;position:relative}
.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--accent,var(--plate2))}
.floor.alt .panel{background:var(--ink)}
.panel p{color:var(--muted);font-size:15px}

/* Between floors */
.split{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start}
.shot{border:4px solid #000;box-shadow:6px 6px 0 #000;background:#000}
.stack{display:grid;gap:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips span{font-family:var(--pixel);font-size:12px;padding:5px 9px;background:var(--plate2);border:2px solid var(--ink2)}
.dash{margin-top:56px;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.dash video{width:100%;height:auto;aspect-ratio:640/570;border:4px solid #000;box-shadow:6px 6px 0 #000;background:#82C9F2}

/* Fair and free */
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* Rooftop */
.rooftop{background:linear-gradient(180deg,#2C2148 0%,#6B3F7A 55%,#E0855A 100%);text-align:center;padding:96px 0 0;border-top:6px solid var(--ink2)}
.rooftop h2{margin:0 auto 12px}
.rooftop p{color:rgba(244,241,234,.85);margin:0 auto 30px;max-width:560px;font-size:17px}
.rooftop .skyline{margin-top:70px;height:90px;background:
 linear-gradient(var(--ink2),var(--ink2)) 4% 100%/7% 60px no-repeat,
 linear-gradient(var(--ink2),var(--ink2)) 13% 100%/5% 82px no-repeat,
 linear-gradient(var(--ink2),var(--ink2)) 22% 100%/9% 46px no-repeat,
 linear-gradient(var(--ink2),var(--ink2)) 50% 100%/12% 90px no-repeat,
 linear-gradient(var(--ink2),var(--ink2)) 71% 100%/6% 66px no-repeat,
 linear-gradient(var(--ink2),var(--ink2)) 80% 100%/9% 50px no-repeat,
 linear-gradient(var(--ink2),var(--ink2)) 93% 100%/8% 74px no-repeat}

/* Footer (shared) */
footer{padding:30px 0 40px;font-size:13px;color:var(--muted);background:var(--ink2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
footer nav{margin-left:auto;display:flex;gap:16px}

/* Privacy / support pages */
.doc{max-width:760px;margin:0 auto;padding:50px 20px}
.doc h1{font-family:var(--pixel);font-size:28px;margin-bottom:6px}.doc .meta{color:var(--muted);font-size:13px;margin-bottom:30px}
.doc h2{font-family:var(--pixel);font-size:18px;margin:30px 0 8px;color:var(--gold);letter-spacing:0}.doc p,.doc li{font-size:15px;margin-bottom:10px;color:var(--paper)}.doc ul{padding-left:20px}
.doc .panel{margin:18px 0}

@media (max-width:980px){
  .badges,.roster{grid-template-columns:repeat(2,1fr)}
  .split,.dash{grid-template-columns:1fr}.split .shot{max-width:360px}
  .beats,.promises{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  section{padding:60px 0}
  .hero .wrap{grid-template-columns:1fr;grid-template-areas:"top" "cta" "phone";padding-top:34px}
  .hero{--s:2}
  .street::after{animation-duration:7.6s}
  .wordmark{width:240px;margin-bottom:18px}
  .hero-cta{padding:22px 0 8px}
  .hero .phone{width:250px;margin-top:24px}
  .phone-wrap .tag{left:4px}
  .beats,.promises,.roster{grid-template-columns:1fr}
  .badges{grid-template-columns:1fr 1fr;gap:20px 14px}
  .badge{padding:26px 10px 14px}.badge .quirk{font-size:13px}
  .facts{grid-template-columns:repeat(2,1fr)}.facts div{border-right:0!important;border-top:3px solid var(--ink2)}.facts div:first-child,.facts div:nth-child(2){border-top:0}
  .facts div:nth-child(odd){border-right:3px solid var(--ink2)!important}
  .facts div:last-child{grid-column:1/-1;border-right:0!important}
  .track{grid-auto-columns:220px}
  .arrows{display:none}
  .bar nav a:not(.btn){display:none}
}
/* ---------- Motion ---------- */
@keyframes swing{from{transform:rotate(var(--r))}to{transform:rotate(calc(var(--r) * -1))}}
@keyframes drop{from{opacity:0;transform:translateY(-46px) scale(.96)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes rise-big{from{opacity:0;transform:translateY(160px)}}
@keyframes wipe{to{background-size:100% 100%;color:var(--gold)}}
@keyframes pop{from{transform:rotate(-4deg) scale(0)}to{transform:rotate(-4deg) scale(1)}}
@keyframes nudge{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-1deg) translateY(-4px)}}
@keyframes drive{to{translate:calc(100vw + 200px) 0}}
@keyframes drive-back{to{translate:calc(-100vw - 200px) 0}}
@keyframes ding{0%,100%{background:var(--gold)}50%{background:#fff}}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}

/* Hero entrance */
html.js .wordmark{animation:drop .9s cubic-bezier(.34,1.56,.64,1) both}
html.js .hero h1{animation:rise .8s .15s cubic-bezier(.2,.7,.2,1) both}
html.js .hero h1 em{background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/0% 100%;color:var(--ink);animation:wipe .7s 1s cubic-bezier(.7,0,.2,1) forwards}
html.js .hero-cta{animation:rise .8s .35s cubic-bezier(.2,.7,.2,1) both}
html.js .phone-wrap{animation:rise-big 1.1s .2s cubic-bezier(.2,.8,.2,1) both}
html.js .phone-wrap .tag{animation:pop .5s 1.4s cubic-bezier(.34,1.56,.64,1) both,nudge 3.2s 2s ease-in-out infinite}

/* Scroll reveals */
html.js :is(.plate,.floor h2,.floor .intro,.beat,.facts,.roster .panel,.split>*,.stack>.panel,.dash>*,.promises .panel,.tour .card,#get .wrap>:not(.store-badge)){opacity:0;translate:0 34px;transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
html.js .badge{opacity:0;translate:0 -60px;transition:opacity .5s var(--d,0s),translate .9s cubic-bezier(.34,1.56,.64,1) var(--d,0s)}
html.js .in{opacity:1!important;translate:0 0!important}
.plate.in .n{animation:ding .3s .5s steps(1) 3}

/* Lift progress indicator */
.liftbar{position:fixed;right:18px;top:50%;z-index:15;display:flex;flex-direction:column;align-items:center;gap:8px;translate:0 -50%;opacity:0;pointer-events:none;transition:opacity .4s}
.liftbar.show{opacity:1}
.liftbar .lf{font-family:var(--pixel);font-size:14px;background:var(--gold);color:var(--ink);border:3px solid #000;min-width:42px;text-align:center;padding:4px 6px;box-shadow:3px 3px 0 #000}
.liftbar .lf.ding{animation:ding .25s steps(1) 3}
.liftbar .shaft{position:relative;width:28px;height:200px;background:var(--plate) repeating-linear-gradient(0deg,transparent 0 30px,rgba(0,0,0,.45) 30px 33px);border:3px solid #000;box-shadow:3px 3px 0 #000}
.liftbar .car{position:absolute;left:2px;right:2px;bottom:2px;height:26px;background:var(--gold);border:2px solid #000;box-shadow:inset 0 -8px 0 #c79a2a;translate:0 calc(var(--p,0) * -164px);transition:translate .15s linear}
.liftbar .car::before{content:"";position:absolute;left:4px;right:4px;top:3px;height:7px;background:#2a2733}
@media (max-width:1100px){.liftbar{display:none}}

/* Hover and ambient touches */
.card{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:9px 14px 0 #000}
.beat{overflow:hidden;transition:transform .25s,box-shadow .25s}
.beat img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.beat:hover{transform:translateY(-6px);box-shadow:8px 11px 0 var(--ink2)}
.beat:hover img{transform:scale(1.06)}
.panel{transition:transform .2s,box-shadow .2s}
.panel:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink2)}
.marquee:hover .row{animation-play-state:paused}
.marquee span{transition:transform .2s}
.marquee span:hover{transform:translateY(-4px) rotate(-2deg)}
.shot{transition:transform .3s}
.split .shot:hover{transform:rotate(-1.2deg) scale(1.02)}
.rooftop{position:relative;overflow:hidden}
.rooftop::before{content:"";position:absolute;inset:0 0 45% 0;pointer-events:none;animation:twinkle 1.6s steps(2) infinite alternate;background:
 linear-gradient(#fff,#fff) 8% 22%/3px 3px no-repeat,linear-gradient(#fff,#fff) 17% 60%/3px 3px no-repeat,
 linear-gradient(#fff,#fff) 26% 15%/4px 4px no-repeat,linear-gradient(#fff,#fff) 39% 42%/3px 3px no-repeat,
 linear-gradient(#fff,#fff) 61% 18%/3px 3px no-repeat,linear-gradient(#fff,#fff) 72% 55%/4px 4px no-repeat,
 linear-gradient(#fff,#fff) 83% 28%/3px 3px no-repeat,linear-gradient(#fff,#fff) 92% 66%/3px 3px no-repeat}
.rooftop::after{content:"";position:absolute;inset:0 0 45% 0;pointer-events:none;animation:twinkle 2.3s steps(2) infinite alternate-reverse;background:
 linear-gradient(#ffe9a8,#ffe9a8) 12% 40%/3px 3px no-repeat,linear-gradient(#fff,#fff) 33% 70%/3px 3px no-repeat,
 linear-gradient(#fff,#fff) 48% 12%/3px 3px no-repeat,linear-gradient(#ffe9a8,#ffe9a8) 66% 36%/3px 3px no-repeat,
 linear-gradient(#fff,#fff) 78% 10%/3px 3px no-repeat,linear-gradient(#fff,#fff) 95% 38%/4px 4px no-repeat}
.rooftop .wrap{position:relative;z-index:1}

/* ---------- Full motion (html.motion, set unless reduced motion is on; driven by motion.js) ---------- */
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}

/* Hero headline: letters stack in, the punchline slams down and shakes the street */
html.motion .hero h1:not(.kinetic){visibility:hidden}
html.motion .hero h1.kinetic{animation:none}
.hero h1 .w{display:inline-block;white-space:nowrap}
.hero h1 .ch{display:inline-block;animation:stack .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--delay,calc(200ms + var(--i) * 18ms))}
.hero h1 em .ch{animation-name:slamin;animation-duration:.33s;animation-timing-function:cubic-bezier(.55,0,1,.45)}
html.motion .hero h1 em{animation:none}
html.motion .hero h1 em:not(.slam){box-shadow:none}
html.motion .hero h1 em.slam{animation:wipe .3s .04s cubic-bezier(.7,0,.2,1) forwards}
.hero h1.done .ch{animation:none;transition:transform .35s cubic-bezier(.34,1.8,.64,1)}
.hero h1.done .ch:hover{transform:translateY(-.22em) rotate(-10deg) scale(1.18)}
.hero.shake .wrap,.hero.shake .scene{animation:shake .4s steps(8)}
@keyframes stack{from{opacity:0;transform:translateY(-1.6em) rotate(var(--rot))}}
@keyframes slamin{from{opacity:0;transform:translateY(-3.2em) scale(1.5) rotate(-6deg)}}
@keyframes shake{0%,100%{translate:0 0}20%{translate:-6px 4px}40%{translate:5px -3px}60%{translate:-4px 2px}80%{translate:3px -1px}}

/* Headings: each word slots up out of a slit */
html.motion .words .wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .06em .16em;margin:0 -.06em -.16em}
html.motion .words .wi{display:inline-block;transform:translateY(118%) rotate(12deg);transform-origin:0 100%;transition:transform .8s cubic-bezier(.2,1.3,.35,1) calc(var(--i) * 70ms)}
html.motion .words.in .wi{transform:none}

/* Elevator doors part as each floor arrives */
html.motion .floor{position:relative;overflow:hidden}
.doors{position:absolute;inset:0;z-index:6;display:flex;pointer-events:none}
.doors i{flex:1;background:repeating-linear-gradient(90deg,#4A4656 0 10px,#423E4D 10px 20px);border-top:10px solid #2A2733;transition:transform 1s cubic-bezier(.75,0,.2,1) .3s}
.doors i:first-of-type{border-right:4px solid #000;box-shadow:inset -8px 0 0 rgba(0,0,0,.25)}
.doors i:last-of-type{border-left:4px solid #000;box-shadow:inset 8px 0 0 rgba(0,0,0,.25)}
.doors b{position:absolute;left:50%;top:70px;translate:-50% 0;font-family:var(--pixel);font-size:44px;line-height:1;padding:10px 18px;background:var(--gold);color:var(--ink);border:4px solid #000;box-shadow:5px 5px 0 #000;transition:opacity .2s .25s,scale .3s .1s cubic-bezier(.34,1.56,.64,1)}
.doors.open i:first-of-type{transform:translateX(-101%)}
.doors.open i:last-of-type{transform:translateX(101%)}
.doors.open b{opacity:0;scale:1.4}
.doors.open{visibility:hidden;transition:visibility 0s 1.4s}

/* Facts: slot-machine reels */
.facts .reel,.facts .reel>span{font-size:inherit;color:inherit}
.reel{display:inline-block;height:1.1em;overflow:hidden;vertical-align:top}
.reel>span{display:block;line-height:1.1;transition:transform 1.7s cubic-bezier(.15,.85,.2,1) calc(var(--i) * .22s)}
.facts.in .reel>span{transform:translateY(calc(var(--to) * -1.1em))}

/* Marching ants round the buttons */
.btn{position:relative}
.btn::before{content:"";position:absolute;inset:-9px;pointer-events:none;opacity:0;transition:opacity .15s;--a:var(--ant,var(--gold));
 background:linear-gradient(90deg,var(--a) 50%,transparent 0) 0 0/12px 3px repeat-x,linear-gradient(90deg,var(--a) 50%,transparent 0) 0 100%/12px 3px repeat-x,
 linear-gradient(0deg,var(--a) 50%,transparent 0) 0 0/3px 12px repeat-y,linear-gradient(0deg,var(--a) 50%,transparent 0) 100% 0/3px 12px repeat-y;animation:ants .5s linear infinite}
.btn:hover::before,.btn:focus-visible::before{opacity:1}
.hero .btn{--ant:var(--ink2)}
@keyframes ants{to{background-position:12px 0,-12px 100%,0 -12px,100% 12px}}

/* Pixel wipe on the floor pictures, glare on tilted cards, a leaning marquee */
html.motion .beat img{clip-path:inset(0 0 100% 0);transition:clip-path .7s steps(8) calc(var(--d,0s) + .3s),transform .6s cubic-bezier(.2,.7,.2,1)}
html.motion .beat.in img{clip-path:inset(0)}
html.motion :is(.tour .card,.beat){transition:transform .2s ease-out,box-shadow .25s,opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.tour .card{position:relative}
.tour .card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.25),transparent 55%);opacity:0;transition:opacity .2s}
.tour .card:hover::after{opacity:1}
html.motion .marquee{transform:skewX(var(--sk,0deg))}
html.motion .badge{cursor:pointer}
html.motion #get{cursor:crosshair}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  html.js :is(.plate,.floor h2,.floor .intro,.beat,.facts,.badge,.roster .panel,.split>*,.stack>.panel,.dash>*,.promises .panel,.tour .card,#get .wrap>:not(.store-badge)){opacity:1;translate:none}
  html.js .hero h1 em{background-size:100% 100%;color:var(--gold)}
}