/* AyP Sound — scenes.css
   Every 3D / scroll-linked rule. Scoped to the motion tiers (html[data-tier]) and to
   prefers-reduced-motion: no-preference, so no-JS, lite and still get the flat document.
   --p and --pin are written by scene.js. html.pin = pinned scenes are allowed (>= 1024 x 640). */

@media (prefers-reduced-motion: no-preference) {

/* ================= HERO ================= */
html[data-tier="full"] #top, html[data-tier="touch3d"] #top{--q:clamp(0, calc((var(--p, .5) - .5) * 2.2), 1)}
html[data-tier="full"] .hero-grid, html[data-tier="touch3d"] .hero-grid{perspective:1400px}
html[data-tier="full"] .hero-head{transform:translate3d(0, calc(var(--q, 0) * -40px), 0);opacity:calc(1 - var(--q, 0) * .6)}
html[data-tier="full"] .ribbon--hero, html[data-tier="touch3d"] .ribbon--hero{transform:translate3d(calc(var(--q, 0) * -40px), 0, 0);opacity:calc(1 - var(--q, 0) * .8)}
html[data-tier="full"] .hero-bg .ltx-layer{transform:translate3d(0, calc(var(--q, 0) * 26vh), 0) scale(1.1)}
/* the player's screen panel (picture + controls): tilted at rest, toward the pointer while paused, flat + 3% bigger
   while playing. The label, the deep-link pill and the flag row stay flat (the ribbon lands on the flags). */
@media (min-width:1024px) and (min-aspect-ratio:4/5){
  html[data-tier="full"] .hero-stage .pl-screen{transform-origin:40% 50%;transform:perspective(1400px) rotateY(calc((-12deg + var(--tx, 0) * 4deg) * (1 - var(--q, 0)))) rotateX(calc((4deg - var(--ty, 0) * 4deg) * (1 - var(--q, 0)))) translateZ(calc(-40px - var(--q, 0) * 120px));transition:transform .6s var(--ease)}
  html[data-tier="touch3d"] .hero-stage .pl-screen{transform-origin:40% 50%;transform:perspective(1400px) rotateY(calc(-7deg * (1 - var(--q, 0)))) rotateX(calc(2.4deg * (1 - var(--q, 0)))) translateZ(calc(-24px - var(--q, 0) * 90px));transition:transform .6s var(--ease)}
  html[data-tier="full"] .hero-stage.is-playing .pl-screen, html[data-tier="touch3d"] .hero-stage.is-playing .pl-screen{transform:scale(1.03);transition:transform .3s var(--ease)}
  html[data-tier="full"] .hero-stage.is-touched:not(.is-playing) .pl-screen, html[data-tier="touch3d"] .hero-stage.is-touched:not(.is-playing) .pl-screen{transform:none}
  html[data-tier="full"] .hero-stage:not(.is-playing):not(.is-touched) .player .flag:hover{transform:translateY(-4px)}
}
/* iPad portrait: a 6deg lean that flattens on first touch */
@media (min-width:768px) and (max-width:1023px), (min-width:768px) and (max-width:1180px) and (max-aspect-ratio:4/5){
  html[data-tier="touch3d"] .hero-stage .pl-screen{transform-origin:50% 100%;transform:perspective(1000px) rotateX(calc(6deg * (1 - var(--q, 0) * 3)));transition:transform .5s var(--ease)}
  html[data-tier="touch3d"] .hero-stage.is-touched .pl-screen, html[data-tier="touch3d"] .hero-stage.is-playing .pl-screen{transform:none}
}
/* phones: the ribbon is drawn once and breathes */
html[data-tier="lite"] .ribbon--hero{animation:breath 6s ease-in-out infinite}
@keyframes breath{0%,100%{opacity:.85}50%{opacity:1}}
/* hero intro: the copy settles in once */
html[data-tier="full"] .hero-head>*, html[data-tier="touch3d"] .hero-head>*, html[data-tier="full"] .hero-cta, html[data-tier="full"] .hero-stage{animation:rise .9s var(--ease) both}
html[data-tier="full"] .hero-head .h1{animation-delay:.08s}
html[data-tier="full"] .hero-head .sub{animation-delay:.16s}
html[data-tier="full"] .hero-stage{animation-delay:.22s}
html[data-tier="full"] .hero-cta{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ================= WHO: the room (pinned) ================= */
/* Stage starts below the header; the tile arc + floor are centred in the space left under the intro.
   Tiles sit in one flex row (no overlaps: gaps >= 12 px after 3D), Brands & agencies (C) centred, largest and
   frontmost; the others lean back. The floor (and its voice dot) sits under the arc and stacks above the tiles. */
html.pin #who{height:160vh;padding:0}
html.pin[data-tier="touch3d"] #who{height:130vh}
html.pin #who .stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;padding:calc(var(--hdr) + 24px) 0 12px}
html.pin #who .who-head{margin-bottom:0;flex:none;--rp:clamp(0, calc((var(--p, 0) - .12) / .3), 1)}
html.pin #who .who-head .h2{margin-bottom:10px}
html.pin #who .room{flex:1 1 auto;min-height:0;position:relative;width:100%;max-width:none;padding:0 var(--pad) 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:1400px;perspective-origin:50% 35%;--rp:clamp(0, calc((var(--p, 0) - .12) / .3), 1);--fs:min(40vh, 30vw)}
html.pin[data-tier="touch3d"] #who .room{perspective:1100px}
html.pin #who .tiles{order:1;position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start;gap:2.8%;width:100%;max-width:1440px;transform-style:preserve-3d;pointer-events:none;flex:none}
html.pin #who .tile-li{position:relative;flex:0 0 var(--tw);margin-top:var(--ty);transform-style:preserve-3d;pointer-events:auto;
  --k-rise:clamp(0, calc((var(--rp) - var(--k) * .12) / .4), 1);
  opacity:var(--k-rise);
  transform:translate3d(0, calc((1 - var(--k-rise)) * 50px), var(--tz)) rotateY(var(--try)) scale(var(--ts, 1));transition:opacity .3s}
html.pin #who .tile-li[data-spk="Ls"]{order:1;--k:3;--tw:16.6%;--ty:46px;--tz:-60px;--try:16deg}
html.pin #who .tile-li[data-spk="L"]{order:2;--k:1;--tw:17.9%;--ty:18px;--tz:-28px;--try:7deg}
html.pin #who .tile-li[data-spk="C"]{order:3;--k:0;--tw:19.6%;--ty:0px;--tz:0px;--try:0deg;--ts:1.08;z-index:2}
html.pin #who .tile-li[data-spk="R"]{order:4;--k:2;--tw:17.9%;--ty:18px;--tz:-28px;--try:-7deg}
html.pin #who .tile-li[data-spk="Rs"]{order:5;--k:4;--tw:16.6%;--ty:46px;--tz:-60px;--try:-16deg}
html.pin #who .tile{padding:16px 16px 14px;gap:8px;background:linear-gradient(180deg,rgb(var(--bg2-rgb) / .92),rgb(var(--bg-rgb) / .86));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .35s var(--ease),opacity .3s,border-color .25s,box-shadow .3s}
html.pin #who .tile-name{font-size:clamp(16px,1.4vw,21px);padding-right:36px}
html.pin #who .tile-line{font-size:clamp(13px,1vw,15px)}
html.pin #who .tile-eg{font-size:clamp(12px,.9vw,13.5px)}
html.pin #who .tile-li[data-spk="C"] .tile-name{font-size:clamp(18px,1.6vw,23px)}
html.pin #who .tile-li[data-spk="C"] .tile{border-color:rgb(var(--accent-rgb) / .35)}
html.pin #who .tile-li.is-hot .tile{transform:translateZ(40px)}
html.pin #who .tiles.has-hot .tile-li:not(.is-hot) .tile{opacity:.6}
html.pin #who .room-readout{display:inline-block}
html.pin #who .room-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:6px;margin:0;justify-content:space-between;pointer-events:none;z-index:3}
html.pin #who .room-foot>*{pointer-events:auto}
html.pin #who .room-caption{max-width:48ch;text-align:right}
/* the floor: a square plane tilted back about its bottom edge; pulled up under the arc by a negative margin */
html.pin #who .room-floor{order:2;display:block;position:relative;z-index:2;flex:none;width:var(--fs);aspect-ratio:1;margin-top:calc(var(--fs) * -.3);transform-origin:50% 100%;transform:rotateX(calc(var(--rp) * 58deg));transform-style:preserve-3d;pointer-events:none}
html.pin[data-tier="touch3d"] #who .room-floor{transform:rotateX(calc(var(--rp) * 54deg))}
/* speaker → tile links (room.js draws them in screen space, so they work the same in every engine) */
html.pin #who .room-links{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
html.pin #who .room-links path{fill:none;stroke:rgb(var(--accent-rgb) / .28);stroke-width:1;stroke-dasharray:2 4;transition:stroke .3s}
html.pin #who .room-links path.is-lit{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:none;filter:drop-shadow(0 0 4px var(--accent))}
html.pin #who .room-floor::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--accent-rgb) / .14),transparent 70%);pointer-events:none}
/* the voice dot: above the tiles, with a 52 px invisible hit area */
html.pin #who .voice-dot{transform:translateZ(2px);pointer-events:auto;z-index:5}
html.pin #who .voice-dot::before{inset:-38px -18px;border-radius:40%} /* taller in the tilted floor plane: ~52 x 52 px on screen */
@media (max-height:860px){html.pin #who .tile-eg{display:none}}
@media (max-height:760px){html.pin #who .room{--fs:min(34vh, 28vw)}html.pin #who .tile-line{font-size:13px}}

/* ================= FOR: the rail (pinned) ================= */
/* Hold-and-dolly (rail.js writes --o per chapter and --z / --x / --po per panel): the panel of the chapter you
   are reading sits flat at z = 0, fully opaque, 60vw wide (bleeding off the right edge), tilted at most 6deg. */
#for.is-pinned{height:360vh;padding:0}
html[data-tier="touch3d"] #for.is-pinned{height:300vh}
#for.is-pinned .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:clamp(400px,33vw,520px) minmax(0,1fr);column-gap:clamp(28px,2.6vw,48px);padding:calc(var(--hdr) + 2vh) 0 3vh 118px}
#for.is-pinned .chapters{grid-column:1;grid-row:1;display:grid;padding:0;max-width:none;margin:0;align-items:center;gap:0;position:relative;z-index:2}
#for.is-pinned .chapter{grid-area:1/1;display:block;align-self:center;--o:0;opacity:var(--o);transform:translate3d(0, calc((1 - var(--o)) * var(--dir, 1) * 16px), 0);visibility:visible}
#for.is-pinned .chapter[data-i="0"]{--o:1}
#for.is-pinned .chapter:not(.is-cur){pointer-events:none}
#for.is-pinned .ch-text p,#for.is-pinned .getback li{font-size:15px;line-height:1.48}
#for.is-pinned .ch-text .h2{font-size:clamp(1.7rem,2.4vw,2.5rem);margin-bottom:14px}
#for.is-pinned .ch-text .lead{font-size:17.5px;margin-bottom:14px}
#for.is-pinned .ch-text .label{margin-bottom:12px}
#for.is-pinned .ch-block{margin-bottom:10px}
#for.is-pinned .h-mini{margin-bottom:3px}
#for.is-pinned .getback{gap:2px}
#for.is-pinned .ch-agency{margin-bottom:0}
#for.is-pinned .proof{margin-top:12px;padding-top:12px}
#for.is-pinned .proof .label{margin-bottom:8px}
#for.is-pinned .ch-actions{margin-top:14px}
#for.is-pinned .rail-view{display:block;grid-column:2;grid-row:1;position:relative;perspective:1400px;perspective-origin:10% 50%;z-index:1}
html[data-tier="touch3d"] #for.is-pinned .rail-view{perspective:1100px}
#for.is-pinned .rail-view,#for.is-pinned .rail-track{pointer-events:none}
#for.is-pinned .rail-track{position:absolute;inset:0;transform-style:preserve-3d;z-index:1}
#for.is-pinned .rail-view .panel{position:absolute;left:0;top:50%;width:60vw;transform-origin:0 50%;--z:-900;--x:140;--po:0;
  transform:translate3d(calc(var(--x) * 1px), -50%, calc(var(--z) * 1px)) rotateY(calc(-6deg + var(--ptx, 0) * 3deg)) rotateX(calc(var(--pty, 0) * -3deg));
  opacity:var(--po);pointer-events:none;will-change:auto}
#for.is-pinned .rail-view .panel[data-i="0"]{--z:0;--x:0;--po:1}
#for.is-pinned .rail-view .panel--mock{width:min(50vw,780px)}
#for.is-pinned .rail-view .panel--story{width:min(46vw,660px)}
/* pinned: issue + storyboard side by side, the film under them, so the whole panel fits the screen */
#for.is-pinned .panel--story .story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:14px}
#for.is-pinned .panel--story .st-film,#for.is-pinned .panel--story .mock-foot{grid-column:1 / -1}
#for.is-pinned .panel--story .st-title{font-size:14.5px}
#for.is-pinned .panel--story .st-list{font-size:12.5px}
html[data-tier="touch3d"] #for.is-pinned .rail-view .panel{transform:translate3d(calc(var(--x) * 1px), -50%, calc(var(--z) * 1px)) rotateY(-5deg)}
#for.is-pinned .rail-view .panel.is-front{pointer-events:auto}
#for.is-pinned .rail-view .panel:not(.is-front) .panel-frame{transform:none !important}
#for.is-pinned .rail-view .panel .panel-frame::after{display:none}
#for.is-pinned .rail-view .panel .panel-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;opacity:var(--sheen, 0);background:radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%),rgba(255,255,255,.08),transparent 60%)}
#for.is-pinned .rail-haze{position:absolute;inset:-10%;pointer-events:none;z-index:0;-webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent)}
#for.is-pinned .rail-haze>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.16}
#for.is-pinned .rail-haze>:nth-child(2){opacity:.1;transform:scale(1.4)}
#for.is-pinned .rail-ticks{display:flex;flex-direction:column;gap:14px;position:absolute;left:22px;top:50%;transform:translateY(-50%);list-style:none;z-index:3}
#for.is-pinned .rail-ticks a{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.12em;color:var(--label);text-decoration:none;min-height:24px}
#for.is-pinned .rail-ticks a::before{content:"";width:14px;height:1px;background:currentColor;transition:width .3s var(--ease)}
#for.is-pinned .rail-ticks a.is-cur{color:var(--accent)}
#for.is-pinned .rail-ticks a.is-cur::before{width:24px;box-shadow:0 0 8px var(--accent)}
#for.is-pinned .rail-mini{display:block;position:absolute;right:var(--pad);top:calc(var(--hdr) + 14px);width:72px;height:72px;z-index:4}
.rail-mini svg{width:100%;height:100%;overflow:visible}
.rail-mini circle.ring{fill:none;stroke:var(--line-2)}
.rail-mini .md{fill:var(--bg-2);stroke:var(--line-2);cursor:pointer;transition:fill .3s}
.rail-mini .md.is-on{fill:var(--accent);stroke:var(--accent-hi);filter:drop-shadow(0 0 5px var(--accent))}
.rail-mini .you{fill:var(--soft)}
/* stem chips light in sequence on the Studios panel */
#for .stem-chips span{animation:stems 4.5s infinite}
#for .stem-chips span:nth-child(2){animation-delay:1.5s}
#for .stem-chips span:nth-child(3){animation-delay:3s}
@keyframes stems{0%,30%{color:var(--on-card);background:var(--accent);border-color:var(--accent);box-shadow:0 0 18px var(--glow)}34%,100%{color:var(--muted);background:rgb(var(--bg-rgb) / .8);border-color:var(--line-2);box-shadow:none}}
#for.is-pinned .stem-chips{right:auto;top:auto;left:18px;bottom:18px;flex-direction:row}
/* floating EN/NL chips sit in front of the Brands panel */
html[data-tier="full"] #for.is-pinned .float-chips{transform:translateZ(60px)}
/* Media chapter: the storyboard explodes in depth */
#for.is-pinned .panel--story .story{transform-style:preserve-3d}
#for.is-pinned .panel--story .panel-frame{transform-style:preserve-3d}
#for.is-pinned .panel--story .st-layer{transition:transform .5s var(--ease)}
#for.is-pinned .panel--story.is-front .st-issue{transform:translateZ(calc(var(--ex, 0) * -60px))}
#for.is-pinned .panel--story.is-front .st-film{transform:translateZ(calc(var(--ex, 0) * 70px))}

/* ================= WORK: house lights + the screen rises ================= */
html[data-tier="full"] #work, html[data-tier="touch3d"] #work{--e:clamp(0, calc(var(--p, 0) / .3), 1)}
html[data-tier="full"] #work .house, html[data-tier="touch3d"] #work .house{opacity:calc(var(--e) * .55)}
html[data-tier="full"] #work .screen-rise, html[data-tier="touch3d"] #work .screen-rise{perspective:1600px}
html[data-tier="full"] #work:not(.is-risen) .player--work .pl-main, html[data-tier="touch3d"] #work:not(.is-risen) .player--work .pl-main{transform-origin:50% 100%;transform:rotateX(calc((1 - var(--e)) * 18deg)) translateZ(calc((1 - var(--e)) * -240px)) scale(calc(.92 + var(--e) * .08))}
html[data-tier="full"] #work.is-risen .player--work:not(.is-playing) .pl-frame{transform:perspective(1600px) rotateY(calc(var(--wtx, 0) * 3deg)) rotateX(calc(var(--wty, 0) * -3deg));transition:transform .4s var(--ease)}
html[data-tier="full"] #work.is-risen .player--work.is-playing .pl-frame{transform:none}
/* shelf: every film flat and readable. < 1280 and touch: one flat row that fits all five.
   >= 1280: a vertical list, the active slate highlighted, the others at .86 with at most a 5deg lean. */
html[data-tier="full"] .player--work .slate, html[data-tier="touch3d"] .player--work .slate{transform:none;opacity:.86}
html[data-tier="full"] .player--work .slate[aria-current="true"], html[data-tier="touch3d"] .player--work .slate[aria-current="true"]{transform:none;opacity:1}
html[data-tier="full"] .player--work .slate:hover, html[data-tier="touch3d"] .player--work .slate:hover{opacity:1}
@media (min-width:1280px){
  html[data-tier="full"] .player--work .slate:not([aria-current="true"]){transform:perspective(900px) rotateX(calc(clamp(-1, var(--off, 0), 1) * -5deg)) translateZ(-12px)}
}

/* ================= STATEMENT ================= */
html[data-tier="full"] .statement .w, html[data-tier="touch3d"] .statement .w{display:inline-block;--o:clamp(.12, calc((var(--p, 0) - .14 - var(--w) * .028) / .07), 1);opacity:var(--o);transform:translate3d(0, calc((1 - var(--o)) * 16px), 0)}
html[data-tier="full"] .statement-line, html[data-tier="touch3d"] .statement-line{transform:translate3d(calc((var(--p, .5) - .5) * -14vw), 60px, 0) rotate(-3deg);opacity:calc(.2 + var(--p, 0) * .5)}

/* ================= STUDIO: the aisle (pinned) ================= */
html.pin #studio.is-pinned{height:300vh;padding:0}
html.pin[data-tier="touch3d"] #studio.is-pinned{height:220vh}
html.pin #studio.is-pinned .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html.pin #studio.is-pinned .show-view{display:block;position:absolute;inset:0;z-index:0;isolation:isolate;perspective:1400px;perspective-origin:66% 50%}
html.pin[data-tier="touch3d"] #studio.is-pinned .show-view{perspective:1000px}
html.pin #studio.is-pinned .show-far{position:absolute;inset:0;background:radial-gradient(30% 34% at 68% 46%,rgb(var(--accent-rgb) / .16),transparent 70%)}
html.pin #studio.is-pinned .show-far>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;filter:blur(6px);mix-blend-mode:screen;-webkit-mask:radial-gradient(closest-side at 68% 46%,#000 30%,transparent);mask:radial-gradient(closest-side at 68% 46%,#000 30%,transparent)}
html.pin #studio.is-pinned .show-view{pointer-events:none}
html.pin #studio.is-pinned .show-track .spanel{pointer-events:auto}
html.pin #studio.is-pinned .show-track{position:absolute;inset:0;transform-style:flat;perspective:1400px;perspective-origin:66% 50%;pointer-events:none}
html.pin[data-tier="touch3d"] #studio.is-pinned .show-track{perspective:1000px}
/* showcase.js writes --z / --po / --far per panel (hold-and-dolly). The focus panel is 58vw, flat-ish (<= 5deg),
   fully opaque; the next one waits dim and small further down the aisle on the other side. */
html.pin #studio.is-pinned .show-track .spanel{position:absolute;left:68.5vw;top:50%;width:58vw;--z:-900;--po:0;--far:1;
  transform:translate3d(calc(-50% + var(--side) * 9vw * var(--far)), -50%, calc(var(--z) * 1px)) rotateY(calc(var(--side) * (-5deg - 9deg * var(--far)) + var(--oy, 0deg))) rotateX(calc(2deg + 4deg * var(--far) + var(--ox, 0deg)));
  opacity:var(--po);transition:none}
html.pin #studio.is-pinned .show-track .spanel[data-i="0"]{--z:0;--po:1;--far:0}
html.pin[data-tier="touch3d"] #studio.is-pinned .show-track .spanel{transform:translate3d(calc(-50% + var(--side) * 6vw * var(--far)), -50%, calc(var(--z) * 1px)) rotateY(calc(var(--side) * (-4deg - 5deg * var(--far)))) rotateX(calc(1.5deg + 2deg * var(--far)))}
html.pin #studio.is-pinned .show-track .spanel.is-focus{cursor:grab}
html.pin #studio.is-pinned .show-track .spanel.is-orbit{cursor:grabbing}
html.pin #studio.is-pinned .show-track .spanel.is-spring{transition:transform .3s var(--spring)}
html.pin #studio.is-pinned .spanel .panel-frame::after{display:none}
html.pin #studio.is-pinned .spanel .panel-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;opacity:var(--sheen, 0);background:radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%),rgba(255,255,255,.08),transparent 60%);transition:opacity .2s}
html.pin #studio.is-pinned .spanel .panel-frame{box-shadow:calc(var(--side) * -18px) 0 50px -26px rgb(var(--accent-rgb) / .55),0 40px 100px -50px var(--glow),0 24px 50px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08)}
html.pin #studio.is-pinned .show-text{position:relative;z-index:2;height:100%;max-width:none;margin:0;padding:calc(var(--hdr) + 5vh) var(--pad) 4vh;width:min(36vw, 520px);display:flex;flex-direction:column;background:linear-gradient(90deg,rgb(var(--bg-rgb)) 80%,rgb(var(--bg-rgb) / 0))}
html.pin #studio.is-pinned .show-counter{display:block;position:absolute;right:var(--pad);top:calc(var(--hdr) + 3vh);margin:0;font:500 12px/1 var(--f-mono);letter-spacing:.12em;color:var(--label);z-index:3}
html.pin #studio.is-pinned .show-counter b{color:var(--accent);font-weight:500}
/* the stop captions sit directly under the intro, crossfading (showcase.js writes --so) */
html.pin #studio.is-pinned .stops{position:relative;display:grid;grid-template-columns:minmax(0,1fr);margin:26px 0 0;gap:0}
html.pin #studio.is-pinned .stop{grid-area:1/1;--so:0;opacity:var(--so);transform:translate3d(0, calc((1 - var(--so)) * var(--sd, 1) * 10px), 0)}
html.pin #studio.is-pinned .stop:first-child{--so:1}
html.pin #studio.is-pinned .stop .stop-text{font-size:clamp(19px,1.6vw,24px);line-height:1.35;color:var(--text)}
html.pin #studio.is-pinned .stops .panel-frame{display:none}
html.pin #studio.is-pinned .footnote{margin-top:auto}

/* ================= DAW: the wall (pinned) ================= */
html.pin #daw.is-pinned{height:280vh;padding:0}
html.pin[data-tier="touch3d"] #daw.is-pinned{height:200vh}
html.pin #daw.is-pinned .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
html.pin #daw.is-pinned .wall-view{display:block;position:absolute;inset:0;z-index:0;isolation:isolate} /* the screens' z-indexes stay inside: the text column is always on top */
html.pin #daw.is-pinned .wall-view{pointer-events:none}
html.pin #daw.is-pinned .wscreen{pointer-events:auto}
/* No cylinder, no preserve-3d chain, no zero-size parent (WebKit drew that one shifted): every screen has ONE
   self-contained transform with its own perspective (showcase.js writes --tx / --tz / --ry / --wo per screen and
   the z-index, nearer on top). The focus screen is 65vw, starting where the text column ends. */
html.pin #daw.is-pinned .wall-cyl{position:absolute;inset:0;transform:none;transform-style:flat}
html.pin #daw.is-pinned .wscreen{position:absolute;left:calc(min(38vw, 540px) + 6px);top:52%;width:65vw;transform-origin:0 50%;--tx:0px;--tz:0px;--ry:-5deg;--wo:0;
  transform:perspective(1500px) translate3d(var(--tx), -50%, var(--tz)) rotateY(var(--ry));opacity:var(--wo)}
html[data-tier="touch3d"] #daw.is-pinned .wscreen{transform:perspective(1200px) translate3d(var(--tx), -50%, var(--tz)) rotateY(var(--ry))}
html.pin #daw.is-pinned .wscreen:first-child{--wo:1}
html.pin #daw.is-pinned .wscreen .panel-frame::after{display:none}
html.pin #daw.is-pinned .wscreen:hover .panel-frame{transform:translateY(-20px)}
html.pin #daw.is-pinned .wscreen .panel-frame{transition:transform .35s var(--ease)}
html.pin #daw.is-pinned .show-text{position:relative;z-index:2;height:100%;max-width:none;margin:0;padding:calc(var(--hdr) + 5vh) var(--pad) 4vh;width:min(38vw, 540px);display:flex;flex-direction:column;background:linear-gradient(90deg,rgb(var(--bg-rgb)) 88%,rgb(var(--bg-rgb) / 0))}
html.pin #daw.is-pinned .stops{position:relative;display:grid;grid-template-columns:minmax(0,1fr);margin:auto 0 18px;gap:0}
html.pin #daw.is-pinned .stop{grid-area:1/1;--so:0;opacity:var(--so);transform:translate3d(0, calc((1 - var(--so)) * var(--sd, 1) * 10px), 0)}
html.pin #daw.is-pinned .stop:first-child{--so:1}
html.pin #daw.is-pinned .stop .stop-text{font-size:clamp(19px,1.6vw,24px);line-height:1.35;color:var(--text)}
html.pin #daw.is-pinned .stops .panel-frame{display:none}
html.pin #daw.is-pinned .wall-nav{display:flex}

/* ================= HOW: the timeline (pinned) ================= */
html.pin #how{height:200vh;padding:0}
html.pin[data-tier="touch3d"] #how{height:150vh}
html.pin #how .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
html.pin #how .how-wrap{width:100%}
html.pin #how .lane-desk{perspective:1600px}
html.pin #how .lane{transform-origin:50% 100%;transform:rotateX(calc(clamp(0, calc(1 - var(--pin, 0) / .78), 1) * 18deg));box-shadow:0 60px 120px -60px var(--glow)}
html.pin #how .lane-body{padding:46px 18px 22px}
html.pin #how .clips{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html.pin #how .clip{height:96px;display:flex;align-items:center;gap:8px;padding:14px 16px;background:rgb(var(--accent-rgb) / .05);border-color:rgb(var(--accent-rgb) / .35);transition:background-color .25s,border-color .25s,box-shadow .25s}
html.pin #how .clip .clip-text{display:none}
html.pin #how .clip.is-on{background:rgb(var(--accent-rgb) / .2);border-color:var(--accent);box-shadow:0 0 30px -8px var(--glow)}
html.pin #how .clip-verb{font-size:28px}
html.pin #how .playhead{display:block;position:absolute;top:8px;bottom:12px;left:calc(18px + (100% - 36px) * var(--pin, 0));width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 12px var(--accent);z-index:3;pointer-events:none}
html.pin #how .ph-dot{position:absolute;left:50%;top:22px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgb(var(--accent-rgb) / .25),0 0 18px var(--accent)}
html.pin #how .tc{position:absolute;left:50%;top:-2px;transform:translateX(-50%);font-size:11px;letter-spacing:.06em;color:var(--text);background:var(--bg);padding:3px 6px;border-radius:5px;border:1px solid var(--line-2);white-space:nowrap;font-variant-numeric:tabular-nums}
html.pin #how .inspector{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:24px;margin-top:28px;padding:22px 26px;border-radius:var(--r);border:1px solid var(--line);background:var(--glass);min-height:120px}
html.pin #how .insp-verb{font-size:64px;line-height:1}
html.pin #how .insp-text{margin:0;font-size:clamp(18px,1.5vw,22px);color:var(--text);max-width:52ch}
html.pin #how .how-head{margin-bottom:28px}

/* ================= ABOUT ================= */
html[data-tier="full"] .about-grid{perspective:1400px}
html[data-tier="full"] .about-card{transform:rotateY(calc(12deg + var(--ax, 0) * 4deg)) rotateX(calc(var(--ay, 0) * -4deg));transition:transform .5s var(--ease)}
html[data-tier="touch3d"] .about-grid{perspective:1200px}
html[data-tier="touch3d"] .about-card{transform:rotateY(calc((var(--p, .5) - .5) * 12deg + 6deg))}

/* ================= CALL: the card comes forward ================= */
html[data-tier="full"] #call .wrap, html[data-tier="touch3d"] #call .wrap{perspective:1400px}
html[data-tier="full"] #call{--e:clamp(0, calc(var(--p, 0) / .55), 1)}
html[data-tier="full"] .card{transform:translateZ(calc((1 - var(--e)) * -400px)) rotateX(calc((1 - var(--e)) * 12deg + var(--rx, 0deg))) rotateY(var(--ry, 0deg));transition:transform .25s ease-out}

/* ================= lite: one-shot "tilt to flat" entrances ================= */
html[data-tier="lite"] .tilt-in{transform:perspective(900px) rotateX(8deg) translateY(20px);opacity:.4;transition:transform .7s var(--ease),opacity .7s var(--ease)}
html[data-tier="lite"] .tilt-in.is-in{transform:none;opacity:1}
}

/* .flat (Safari): interactive video is never inside a transformed box while playing */
.player.is-playing .pl-stage, .cmp-stage.is-playing{transform:none !important}

/* LTX depth layers without a periwinkle version: hue-shift them in the classic palette (one hue per palette) */
html[data-palette="classic"] #for.is-pinned .rail-haze>.ltx-tint.is-pink{filter:hue-rotate(-115deg) saturate(.55)}
html.pin[data-palette="classic"] #studio.is-pinned .show-far>.ltx-tint.is-pink{filter:blur(6px) hue-rotate(-115deg) saturate(.55)}

/* short screens (<= 760 px tall: 1024x640 laptops, Galaxy Tab landscape): the pinned Studio / DAW text column
   is tighter, so its footnote stays on screen */
@media (max-height:760px){
  html.pin #studio.is-pinned .show-text,html.pin #daw.is-pinned .show-text{padding-top:calc(var(--hdr) + 2.5vh);padding-bottom:2.5vh}
  html.pin #studio.is-pinned .show-text .h2,html.pin #daw.is-pinned .show-text .h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:12px}
  html.pin #studio.is-pinned .show-text .intro,html.pin #daw.is-pinned .show-text .intro{font-size:15px;line-height:1.45}
  html.pin #studio.is-pinned .stops{margin-top:16px}
  html.pin #studio.is-pinned .stop .stop-text,html.pin #daw.is-pinned .stop .stop-text{font-size:17px}
  html.pin #studio.is-pinned .footnote,html.pin #daw.is-pinned .footnote,html.pin #daw.is-pinned .pos-line{font-size:9.5px;line-height:1.5}
}