/* SynthAds — 1920×1080 design canvas, scaled as one unit. */
@font-face { font-family: Lora; src: url(../fonts/Lora-VF.woff) format('woff'); font-weight: 400 700; }
@font-face { font-family: Lora; src: url(../fonts/Lora-Italic-VF.woff) format('woff'); font-weight: 400 700; font-style: italic; }
@font-face { font-family: Inter; src: url(../fonts/Inter-Light.woff) format('woff'); font-weight: 300; }
@font-face { font-family: Inter; src: url(../fonts/Inter-Regular.woff) format('woff'); font-weight: 400; }
@font-face { font-family: Inter; src: url(../fonts/Inter-Medium.woff) format('woff'); font-weight: 500; }
@font-face { font-family: Inter; src: url(../fonts/Inter-SemiBold.woff) format('woff'); font-weight: 600; }

:root { --ivory: #eee7db; --ivory2: #cbc3b6; --silver: #a9a8a6; --silver-hi: #dddbd7; --bur: #6d1f2c; --bur-hi: #cf8a97;
  --serif: Lora, Georgia, serif; --sans: Inter, Arial, sans-serif; --ease: cubic-bezier(.22,.7,.18,1); --scale: 1; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #070707; color: var(--ivory); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
button { font: inherit; color: inherit; }
a { color: var(--ivory2); text-decoration: none; border-bottom: 1px solid rgba(207,138,151,.45); }

#stage { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform: scale(var(--scale)); transform-origin: 0 0; overflow: hidden; background: #090909; }
#strip { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 960px 540px; will-change: transform; }
.slide { position: absolute; top: 0; left: calc(var(--i) * 1920px); width: 1920px; height: 1080px; overflow: hidden; background: #0a0a0a; }
.room, .scrim { position: absolute; inset: 0; }
.media { position: absolute; display: block; object-fit: cover; }
.poster { display: none; }
.full { inset: 0; width: 100%; height: 100%; }
.txt { position: absolute; inset: 0; z-index: 3; }
.grain { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
#veil { position: fixed; inset: 0; z-index: 20; background: #070707; transition: opacity .8s, visibility 0s .8s; }
html.ready #veil { opacity: 0; visibility: hidden; }

/* shared architecture: a silver seam at every room boundary and one continuous horizon line */
.seam { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; z-index: 4; background: linear-gradient(180deg, transparent, rgba(221,219,215,.55) 30%, rgba(221,219,215,.55) 70%, transparent); }
.horizon { position: absolute; left: 0; right: 0; top: 1012px; height: 1px; z-index: 4; background: linear-gradient(90deg, rgba(221,219,215,.25), rgba(221,219,215,.08)); }

/* ---------- typography ---------- */
.kicker { margin: 0; font: 500 17px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--silver); }
.head { position: absolute; left: 110px; top: 84px; }
.title { margin: 20px 0 0; font: 400 62px/1.06 var(--serif); letter-spacing: -.01em; }
.intro { margin: 22px 0 0; font: 300 26px/1.4 var(--sans); color: var(--ivory2); }
.foot { position: absolute; left: 110px; right: 110px; top: 1030px; display: flex; justify-content: space-between; font: 400 16px/1.2 var(--sans); color: var(--silver); letter-spacing: .02em; }
.foot__n { letter-spacing: .24em; }
.tag { position: absolute; z-index: 5; font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ivory2); background: rgba(8,8,8,.72); padding: 8px 11px; border: 1px solid rgba(221,219,215,.22); }
.tag--ai { color: #f4ece2; border-color: rgba(207,138,151,.6); }
.tag--br { right: 110px; bottom: 82px; }
.tag--corner { left: 18px; bottom: 18px; transition: opacity .5s; }

/* ---------- points + captions ---------- */
.points { position: absolute; display: flex; flex-direction: column; gap: 12px; }
.pt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: baseline; gap: 16px; padding: 15px 22px 15px 18px; font: 500 25px/1.15 var(--sans); color: var(--ivory);
  background: rgba(10,10,10,.55); border: 1px solid rgba(221,219,215,.24); transition: background .35s, border-color .35s, color .35s; }
.pt__n { font: 500 15px/1 var(--sans); letter-spacing: .2em; color: var(--silver); }
.pt:hover { border-color: rgba(221,219,215,.6); }
.pt:focus-visible { outline: 3px solid var(--bur-hi); outline-offset: 4px; }
.pt[aria-pressed="true"] { background: rgba(109,31,44,.55); border-color: var(--bur-hi); }
.pt[aria-pressed="true"] .pt__n { color: #f2d9de; }
.captions { position: absolute; }
.cap { display: none; border-left: 2px solid var(--bur-hi); padding: 2px 0 2px 24px; }
.cap__k { margin: 0 0 10px; font: 500 15px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--bur-hi); }
.cap__t { margin: 0; font: 400 27px/1.42 var(--sans); color: var(--ivory); }
.cap__c { margin: 12px 0 0; font: 400 17px/1.3 var(--sans); color: var(--silver); }
.cap__hint { margin: 0; font: italic 400 21px/1.4 var(--serif); color: rgba(203,195,182,.6); }
.slide:not([data-sel=""]) .cap__hint { display: none; }
.slide[data-sel="0"] .cap[data-i="0"], .slide[data-sel="1"] .cap[data-i="1"], .slide[data-sel="2"] .cap[data-i="2"], .slide[data-sel="3"] .cap[data-i="3"] { display: block; animation: capIn .5s var(--ease) both; }
@keyframes capIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ================= 01 · DECISION ================= */
.s-decision { background: radial-gradient(1200px 900px at 20% 30%, #161414, #090909 70%); }
.s-decision .room::before { content: ""; position: absolute; left: 820px; top: 0; bottom: 0; width: 1px; background: rgba(221,219,215,.12); }
.f-main { position: absolute; left: 860px; top: 70px; width: 980px; height: 930px; overflow: hidden; background: #050505; box-shadow: 0 40px 120px rgba(0,0,0,.7); }
.wordmark { position: absolute; left: 0; right: 0; top: 54px; text-align: center; opacity: 0; transform: translateY(-10px); transition: opacity .7s, transform .9s var(--ease); }
.wordmark span { display: block; font: 500 54px/1 var(--serif); letter-spacing: .46em; padding-left: .46em; color: #f3ede3; text-shadow: 0 2px 30px rgba(0,0,0,.8); }
.wordmark small { display: block; margin-top: 14px; font: 500 13px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ivory2); }
.formats { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; background: rgba(5,5,5,.55); }
.fmt { position: absolute; bottom: 120px; background: url(../assets/coats-walk.jpg) 45% 50%/cover; border: 1px solid rgba(221,219,215,.5); box-shadow: 0 20px 50px rgba(0,0,0,.6); transform: translateY(30px); transition: transform .9s var(--ease); }
.fmt--story { left: 120px; width: 190px; height: 338px; }
.fmt--feed { left: 350px; width: 270px; height: 338px; }
.fmt--wide { left: 660px; width: 220px; height: 124px; }
.fmt__cap { position: absolute; left: 120px; bottom: 70px; font: 500 15px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory2); }
.signoff { position: absolute; left: 60px; right: 60px; bottom: 70px; padding-top: 18px; border-top: 1px solid rgba(221,219,215,.6); opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .8s var(--ease); }
.signoff span { display: block; font: 500 14px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--silver); }
.signoff b { display: block; margin-top: 12px; font: italic 400 44px/1 var(--serif); }
.signoff em { display: block; margin-top: 10px; font: 400 18px/1 var(--sans); font-style: normal; color: var(--ivory2); }
.f-main .tag-ai { opacity: 0; }
.s-decision[data-sel="0"] .wordmark { opacity: 1; transform: none; }
.s-decision[data-sel="1"] .tag-ai { opacity: 1; } .s-decision[data-sel="1"] .tag-real { opacity: 0; }
.txt--decision .kicker { position: absolute; left: 110px; top: 92px; }
.display { position: absolute; left: 104px; top: 122px; margin: 0; font: 500 148px/1 var(--serif); letter-spacing: -.03em; }
.intro--lede { position: absolute; left: 110px; top: 300px; width: 680px; margin: 0; font: italic 400 29px/1.38 var(--serif); }
.points--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.txt--decision .points { left: 110px; top: 470px; width: 690px; }
.txt--decision .captions { left: 110px; top: 640px; width: 690px; height: 210px; }
.txt--decision .cap__t { font-size: 25px; }
.who { position: absolute; left: 110px; top: 885px; width: 720px; margin: 0; display: flex; gap: 30px; }
.who div { border-top: 1px solid rgba(221,219,215,.3); padding-top: 14px; }
.who dt { white-space: nowrap; font: 500 13px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--silver); }
.who dd { margin: 10px 0 0; font: 400 19px/1.2 var(--sans); white-space: nowrap; }

/* ================= 02 · ETHICS (the long-exposure moment) ================= */
.s-ethics .cam > .full { object-position: 60% 50%; }
.drift { animation: drift 34s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.07) translateX(-18px); } }
.s-ethics .scrim { background: linear-gradient(90deg, rgba(6,6,6,.94) 0%, rgba(6,6,6,.84) 30%, rgba(6,6,6,.15) 48%, transparent 60%); }
.fig { position: absolute; top: 110px; height: 840px; transition: background .7s, box-shadow .7s; }
.fig1 { left: 770px; width: 300px; } .fig2 { left: 1140px; width: 300px; } .fig3 { left: 1540px; width: 330px; }
.fig__tag { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); opacity: 0; transition: opacity .6s; font: 500 14px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; padding: 9px 12px; background: rgba(6,6,6,.8); border: 1px solid rgba(221,219,215,.35); white-space: nowrap; }
.fig__tag--sel { border-color: var(--silver-hi); color: #fff; }
.s-ethics[data-sel="1"] .fig1, .s-ethics[data-sel="1"] .fig2 { background: rgba(4,4,4,.8); }
.s-ethics[data-sel="1"] .fig3 { box-shadow: inset 0 0 0 1px rgba(221,219,215,.55); }
.s-ethics[data-sel="1"] .fig__tag { opacity: 1; }
.ai-stamp { position: absolute; left: 1560px; top: 160px; padding: 16px 22px; border: 1px solid var(--bur-hi); background: rgba(40,10,16,.72); opacity: 0; transform: translateY(-12px); transition: opacity .6s, transform .8s var(--ease); }
.ai-stamp b { display: block; font: 600 26px/1 var(--sans); letter-spacing: .22em; }
.ai-stamp span { display: block; margin-top: 8px; font: 400 15px/1 var(--sans); letter-spacing: .1em; color: var(--ivory2); }
.s-ethics[data-sel="0"] .ai-stamp { opacity: 1; transform: none; }
.chain { position: absolute; inset: 0; width: 1920px; height: 1080px; opacity: 0; transition: opacity .6s; }
.chain path { fill: none; stroke: var(--silver-hi); stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.chain circle { fill: var(--bur-hi); }
.chain text { fill: var(--ivory); font: 600 16px var(--sans); letter-spacing: .24em; text-anchor: middle; }
.s-ethics[data-sel="2"] .chain { opacity: 1; } .s-ethics[data-sel="2"] .chain path { animation: draw 1.4s var(--ease) forwards; }
.s-ethics[data-sel="2"] .fig { background: rgba(4,4,4,.35); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.txt--ethics .title { width: 600px; font-size: 58px; }
.txt--ethics .intro { width: 600px; font-size: 24px; }
.txt--ethics .points { left: 110px; top: 520px; width: 470px; }
.txt--ethics .captions { left: 110px; top: 760px; width: 620px; }
.txt--ethics .cap__t { font-size: 24px; }

/* ================= 03 · LEGAL ================= */

.s-legal .scrim { background: linear-gradient(90deg, rgba(7,7,7,.95) 0%, rgba(7,7,7,.88) 46%, rgba(7,7,7,.4) 60%, rgba(7,7,7,.55) 100%); }
.layers { position: absolute; left: 1040px; top: 200px; width: 780px; perspective: 1400px; }
.layer { margin-bottom: 22px; padding: 24px 30px; border: 1px solid rgba(221,219,215,.2); border-left: 2px solid rgba(221,219,215,.35); background: linear-gradient(90deg, rgba(40,39,42,.55), rgba(20,20,22,.35));
  backdrop-filter: blur(6px); transform: rotateY(-10deg); transform-origin: left center; opacity: .55; transition: opacity .5s, transform .7s var(--ease), border-color .5s, background .5s; }
.layer b { display: block; font: 600 17px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--silver-hi); }
.layer span { display: block; margin-top: 10px; font: 400 23px/1.3 var(--sans); color: var(--ivory); }
.s-legal[data-sel="0"] .layer[data-l="0"], .s-legal[data-sel="1"] .layer[data-l="1"], .s-legal[data-sel="2"] .layer[data-l="2"], .s-legal[data-sel="3"] .layer[data-l="3"] {
  opacity: 1; transform: rotateY(0) translateX(-26px); border-left-color: var(--bur-hi); background: linear-gradient(90deg, rgba(109,31,44,.4), rgba(25,22,24,.6)); }
.s-legal:not([data-sel=""]) .layer { opacity: .3; }
.roles { position: absolute; left: 1040px; top: 820px; width: 760px; display: flex; align-items: center; gap: 0; opacity: .45; transition: opacity .5s; }
.roles span { flex: none; padding: 14px 18px; border: 1px solid rgba(221,219,215,.35); font: 500 18px/1 var(--sans); letter-spacing: .08em; }
.roles small { display: block; margin-top: 6px; font: 400 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--silver); }
.roles i { flex: 1; height: 1px; background: rgba(221,219,215,.45); }
.s-legal[data-sel="1"] .roles { opacity: 1; } .s-legal[data-sel="1"] .r-brand { border-color: var(--bur-hi); background: rgba(109,31,44,.45); }
.txt--legal .title { width: 860px; } .txt--legal .intro { width: 820px; font-size: 24px; }
.txt--legal .points { left: 110px; top: 450px; width: 820px; }
.txt--legal .captions { left: 110px; top: 610px; width: 830px; height: 220px; }
.txt--legal .cap__t { font-size: 25px; }
.qual { position: absolute; left: 110px; top: 880px; width: 830px; margin: 0; font: italic 400 19px/1.45 var(--serif); color: var(--ivory2); border-top: 1px solid rgba(221,219,215,.18); padding-top: 14px; }

/* ================= 04 · CONSEQUENCES ================= */
.s-consequences { background: linear-gradient(180deg, #0d0c0c, #080808); }
.f-cons { position: absolute; left: 780px; top: 150px; width: 520px; height: 800px; overflow: hidden; background: #050505; box-shadow: 0 40px 100px rgba(0,0,0,.7); }
.f-cons .media { inset: 0; width: 100%; height: 100%; transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.f-cons .v-people { object-position: 44% 50%; }
.f-cons .v-company { object-position: 92% 45%; opacity: 0; }
.f-cons .v-society { object-position: 62% 50%; opacity: 0; }
.withdrawn { position: absolute; left: 0; right: 0; top: 46%; padding: 18px; text-align: center; background: rgba(109,31,44,.82); font: 600 17px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; opacity: 0; transform: scaleX(.6); transition: opacity .5s .3s, transform .7s .3s var(--ease); }
.f-cons .t-company, .f-cons .t-society { opacity: 0; }
.s-consequences[data-sel="0"] .v-people { transform: scale(1.08); }
.s-consequences[data-sel="1"] .v-people, .s-consequences[data-sel="2"] .v-people { opacity: 0; }
.s-consequences[data-sel="1"] .v-company { opacity: 1; } .s-consequences[data-sel="1"] .withdrawn { opacity: 1; transform: none; } .s-consequences[data-sel="1"] .t-company { opacity: 1; }
.s-consequences[data-sel="2"] .v-society { opacity: 1; } .s-consequences[data-sel="2"] .t-society { opacity: 1; }
.s-consequences[data-sel="1"] .t-people, .s-consequences[data-sel="2"] .t-people { opacity: 0; }
.case { position: absolute; left: 1360px; top: 130px; width: 460px; height: 830px; padding: 36px 36px 30px; background: #f1ebe1; color: #1d1a18; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.case__logo img { display: block; width: 82px; height: auto; }
.case__k { margin: 6px 0 0; font: 600 13px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #6d1f2c; }
.case h3 { margin: 0; font: 500 30px/1.15 var(--serif); }
.case__f { margin: 0; font: 400 19px/1.42 var(--sans); }
.case__x { margin: 0; font: italic 500 20px/1.35 var(--serif); color: #4a1520; }
.case__lim { margin: auto 0 0; font: 400 15.5px/1.4 var(--sans); color: #4b4540; }
.case__src { margin: 0; padding-top: 10px; border-top: 1px solid rgba(29,26,24,.25); font: 500 14px/1.3 var(--sans); color: #4b4540; }
.txt--cons .title { width: 620px; font-size: 56px; } .txt--cons .intro { width: 620px; font-size: 22px; }
.txt--cons .points { left: 110px; top: 460px; width: 360px; }
.txt--cons .captions { left: 110px; top: 690px; width: 620px; }
.txt--cons .cap__t { font-size: 24px; }

/* ================= 05 · BIAS ================= */
.s-bias .faint { opacity: .22; }
.s-bias .scrim { background: linear-gradient(180deg, rgba(7,7,7,.75), rgba(7,7,7,.9)); }
.track { position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 2; }
.track__line { stroke: rgba(221,219,215,.55); stroke-width: 2; fill: none; }
.track__back { stroke: rgba(207,138,151,.7); stroke-width: 2; fill: none; stroke-dasharray: 8 10; }
.pulse { fill: #fff3e2; filter: drop-shadow(0 0 8px #fff); }
.reduced .pulse { display: none; }
.ex { position: absolute; left: 330px; width: 1260px; top: 470px; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .7s var(--ease); z-index: 2; pointer-events: none; }
.s-bias[data-sel="0"] .ex0, .s-bias[data-sel="1"] .ex1, .s-bias[data-sel="2"] .ex2, .s-bias[data-sel="3"] .ex3 { opacity: 1; transform: none; }
.tile { display: block; width: 96px; height: 120px; background-image: url(../assets/shadow-walk.jpg); background-size: 1280px auto; border: 1px solid rgba(221,219,215,.25); filter: grayscale(.4); }
.grid { display: grid; grid-template-columns: repeat(6, 96px); gap: 8px; }
.tile.odd { border-color: var(--bur-hi); }
.row { display: flex; gap: 18px; align-items: center; }
.row .tile { width: 130px; height: 162px; }
.tile.unused { opacity: .3; }
.tile.pick { border: 2px solid var(--silver-hi); box-shadow: 0 0 0 6px rgba(221,219,215,.12); }
.prompt { margin: 0; font: italic 400 30px/1 var(--serif); color: var(--ivory); }
.meter { width: 360px; height: 14px; background: rgba(221,219,215,.15); position: relative; }
.meter span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bur-hi); }
.meter b { position: absolute; left: 0; top: 24px; font: 500 14px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--silver); }
.ex__c { margin: 0; font: 500 16px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.txt--bias .intro { width: 1250px; font-size: 24px; }
.txt--bias .title { font-size: 58px; }
.points--nodes { left: 0; top: 0; width: 0; }
.pt--node { position: absolute; left: var(--x); top: 300px; transform: translateX(-50%); white-space: nowrap; font-size: 28px; padding: 14px 24px; background: #121111; }
.captions--wide { left: 110px; top: 800px; width: 1700px; }
.captions--wide .cap { max-width: 1500px; }

/* ================= 06 · GATES ================= */
.s-gates .gatesbg { object-position: 50% 78%; opacity: .45; }
.s-gates .scrim { background: linear-gradient(180deg, rgba(7,7,7,.65), rgba(7,7,7,.92) 40%); }
.txt--gates .intro { width: 1300px; font-size: 23px; }
.txt--gates .title { font-size: 56px; }
.gates { position: absolute; left: 110px; top: 300px; width: 1700px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.gate { border-top: 1px solid rgba(221,219,215,.3); padding-top: 18px; transition: border-color .5s, opacity .5s; }
.s-gates:not([data-sel=""]) .gate { opacity: .6; }
.s-gates[data-sel="0"] .gate[data-g="0"], .s-gates[data-sel="1"] .gate[data-g="1"], .s-gates[data-sel="2"] .gate[data-g="2"] { opacity: 1; border-top: 2px solid var(--bur-hi); }
.gate__vis { position: relative; height: 150px; margin-bottom: 16px; background: rgba(20,19,20,.8); border: 1px solid rgba(221,219,215,.14); overflow: hidden; }
.gv-img { position: absolute; inset: 0; background: url(../assets/shadow-walk.jpg) 88% 42%/cover; filter: grayscale(.3) brightness(.85); }
.gv-label, .gv-ok, .gv-sign { position: absolute; transition: opacity .6s, transform .8s var(--ease); }
.gv-label { left: 16px; bottom: 16px; padding: 8px 12px; background: rgba(8,8,8,.85); border: 1px solid var(--bur-hi); font: 600 14px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: 0; transform: translateY(10px); }
.gv-bars { position: absolute; left: 24px; right: 24px; bottom: 44px; top: 20px; display: flex; gap: 14px; align-items: flex-end; }
.gv-bars i { flex: 1; height: 18%; background: rgba(221,219,215,.25); transition: height .9s var(--ease), background .6s; }
.gv-ok { left: 24px; bottom: 14px; font: 500 14px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--silver); opacity: 0; }
.gv-sign { left: 24px; right: 24px; top: 34px; border-top: 1px solid rgba(221,219,215,.5); padding-top: 14px; opacity: 0; transform: translateY(10px); }
.gv-wait { position: absolute; left: 24px; top: 34px; right: 24px; border-top: 1px dashed rgba(221,219,215,.3); padding-top: 14px; font: 500 13px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(169,168,166,.7); transition: opacity .5s; }
.s-gates[data-sel="2"] .gv-wait, .static .gv-wait { opacity: 0; }
.gv-sign span { display: block; font: 500 13px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--silver); }
.gv-sign b { display: block; margin-top: 12px; font: italic 400 27px/1 var(--serif); }
.s-gates[data-sel="0"] .gv-label { opacity: 1; transform: none; }
.s-gates[data-sel="1"] .gv-bars i { height: calc(var(--h) * 100%); background: rgba(207,138,151,.75); } .s-gates[data-sel="1"] .gv-ok { opacity: 1; }
.s-gates[data-sel="2"] .gv-sign { opacity: 1; transform: none; }
.pt--gate { width: 100%; font-size: 26px; }
.gate__a { margin: 16px 0 12px; font: 400 21px/1.4 var(--sans); color: var(--ivory); min-height: 88px; }
.gate__f { margin: 0; }
.gate__f div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(221,219,215,.15); }
.gate__f dt { font: 500 13px/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--silver); }
.gate__f dd { margin: 0; font: 400 19px/1.35 var(--sans); }
.gate__why { margin: 12px 0 0; font: italic 400 18px/1.4 var(--serif); color: var(--ivory2); opacity: 0; transition: opacity .5s; }
.gate__c { font: 400 14px var(--sans); font-style: normal; color: var(--silver); }
.s-gates[data-sel="0"] .gate[data-g="0"] .gate__why, .s-gates[data-sel="1"] .gate[data-g="1"] .gate__why, .s-gates[data-sel="2"] .gate[data-g="2"] .gate__why { opacity: 1; }

/* ================= 07 · RECOMMENDATION ================= */
.s-rec .silk { opacity: .75; }
.s-recommendation .scrim { background: linear-gradient(90deg, rgba(6,6,6,.9) 0%, rgba(6,6,6,.75) 55%, rgba(6,6,6,.3) 100%); }
.txt--rec .kicker { position: absolute; left: 110px; top: 92px; }
.title--rec { position: absolute; left: 110px; top: 118px; margin: 0; font-size: 70px; }
.decision { position: absolute; left: 110px; top: 240px; width: 1100px; margin: 0; font: 400 40px/1.25 var(--serif); }
.why { position: absolute; left: 110px; top: 410px; width: 1060px; margin: 0; font: italic 400 23px/1.45 var(--serif); color: var(--ivory2); }
.points--row { left: 110px; top: 560px; flex-direction: row; gap: 14px; }
.captions--rec { left: 110px; top: 680px; width: 1080px; }
.f-rec { position: absolute; left: 1320px; top: 170px; width: 500px; height: 720px; overflow: hidden; background: #050505; opacity: 0; transform: translateX(30px); transition: opacity .7s, transform .9s var(--ease); box-shadow: 0 40px 100px rgba(0,0,0,.7); }
.s-recommendation:not([data-sel=""]) .f-rec { opacity: 1; transform: none; }
.f-rec .media { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .7s; }
.f-rec .r0 { object-position: 92% 45%; } .f-rec .r1 { object-position: 60% 50%; } .f-rec .r2 { object-position: 52% 45%; filter: grayscale(1) brightness(.55); }
.s-recommendation[data-sel="0"] .r0, .s-recommendation[data-sel="1"] .r1, .s-recommendation[data-sel="2"] .r2 { opacity: 1; }
.rlabel { position: absolute; left: 22px; bottom: 70px; padding: 10px 14px; background: rgba(8,8,8,.85); border: 1px solid var(--bur-hi); font: 600 15px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: 0; transition: opacity .6s .3s; }
.paused { position: absolute; left: 0; right: 0; top: 44%; text-align: center; font: 600 17px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; opacity: 0; transition: opacity .6s .3s; }
.paused i { display: block; width: 46px; height: 52px; margin: 0 auto 18px; border-left: 14px solid var(--ivory); border-right: 14px solid var(--ivory); }
.f-rec .tag--corner { opacity: 0; }
.s-recommendation[data-sel="0"] .rlabel, .s-recommendation[data-sel="0"] .t-r0, .s-recommendation[data-sel="2"] .paused, .s-recommendation[data-sel="1"] .t-r1 { opacity: 1; }

/* ================= 08 · METHOD ================= */
.s-method .dim2 { opacity: .3; filter: blur(1.5px); }
.s-method .scrim { background: rgba(7,7,7,.55); }
.mcols { position: absolute; left: 110px; top: 300px; width: 1700px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.mcol { border-top: 1px solid rgba(221,219,215,.3); padding-top: 18px; transition: opacity .5s, border-color .5s; }
.s-method:not([data-sel=""]) .mcol { opacity: .8; }
.s-method[data-sel="0"] .mcol:nth-child(1), .s-method[data-sel="1"] .mcol:nth-child(2), .s-method[data-sel="2"] .mcol:nth-child(3) { opacity: 1; border-top: 2px solid var(--bur-hi); }
.pt--m { width: 100%; }
.mcol__t { margin: 18px 0 0; font: 400 22px/1.45 var(--sans); }
.closing { position: absolute; left: 110px; top: 790px; width: 1700px; transition: opacity .5s; }
.closing p { margin: 0; font: 400 52px/1.1 var(--serif); }
.closing span { display: block; margin-top: 16px; font: italic 400 25px/1.3 var(--serif); color: var(--ivory2); }
.prov { position: absolute; left: 110px; top: 770px; width: 1700px; display: flex; gap: 26px; opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .8s var(--ease); z-index: 4; }
.prov figure { margin: 0; flex: 1; position: relative; height: 200px; overflow: hidden; border: 1px solid rgba(221,219,215,.22); }
.prov .media { inset: 0; width: 100%; height: 100%; }
.prov figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: rgba(6,6,6,.82); font: 400 15px/1.3 var(--sans); color: var(--ivory2); }
.prov figcaption b { display: block; font: 600 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); margin-bottom: 6px; }
.prov figure:first-child figcaption b { color: var(--bur-hi); }
.s-method[data-sel="1"] .prov { opacity: 1; transform: none; } .s-method[data-sel="1"] .closing { opacity: 0; }

/* ================= 09 · REFERENCES ================= */
.s-references .faint2 { opacity: .12; }
.refs { position: absolute; left: 110px; top: 260px; width: 1700px; margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 90px; font: 400 23px/1.5 var(--sans); }
.refs li { break-inside: avoid; margin: 0 0 24px; padding-left: 1.4em; text-indent: -1.4em; }
.refs i { font-style: italic; }

/* ---------- HUD ---------- */
#hud { position: fixed; right: 14px; bottom: 12px; z-index: 30; display: flex; gap: 6px; align-items: center; padding: 6px; background: rgba(8,8,8,.9); border: 1px solid rgba(221,219,215,.16);
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--silver); transition: opacity .4s; }
#hud button { all: unset; cursor: pointer; padding: 8px 10px; border: 1px solid rgba(221,219,215,.24); }
#hud button:hover { color: var(--ivory); border-color: rgba(221,219,215,.6); }
#hud button:focus-visible { outline: 2px solid var(--bur-hi); }
#count { padding: 0 6px; min-width: 52px; text-align: center; }
html.idle #hud { opacity: 0; } #hud:focus-within { opacity: 1; }

/* ---------- reduced motion: same look, no continuous movement ---------- */
.reduced .drift { animation: none; transform: scale(1.03); }
.reduced *, .reduced *::before { transition-duration: .2s !important; }

/* ================= STATIC / PDF (?static) ================= */
html.static, html.static body { height: auto; overflow: visible; background: #0a0a0a; }
.static #stage { position: static; transform: none; width: 1920px; height: auto; overflow: visible; }
.static #strip { position: static; transform: none !important; height: auto; }
.static .slide { position: relative; left: 0; break-after: page; page-break-after: always; }
.static #hud, .static #veil, .static .grain, .static video { display: none !important; }
.static .poster { display: block; }
.static .pulse { display: none; }
.static .drift { animation: none; }
.static .cap { display: block; margin-bottom: 14px; padding-left: 18px; }
.static .cap__t { font-size: 19px !important; line-height: 1.38; }
.static .cap__k { font-size: 13px; margin-bottom: 6px; }
.static .cap__c { font-size: 14px; margin-top: 4px; }
.static .cap__hint { display: none; }
.static .txt--decision .points, .static .txt--ethics .points, .static .txt--legal .points, .static .txt--cons .points, .static .txt--rec .points { display: none; }
.static .txt--decision .captions { top: 448px; height: auto; } .static .txt--decision .cap__t { font-size: 17.5px !important; } .static .txt--decision .cap { margin-bottom: 10px; } .static .who { top: 925px; }
.static .layer { opacity: .85; }
.static .txt--ethics .captions { top: 500px; }
.static .txt--legal .captions { top: 410px; height: auto; } .static .qual { top: 905px; font-size: 17px; }
.static .txt--cons .captions { top: 430px; }
.static .captions--rec { top: 530px; }
.static .s-recommendation .f-rec { opacity: 1; transform: none; } .static .s-recommendation .r0 { opacity: 1; } .static .rlabel, .static .t-r0 { opacity: 1; }
.static .s-ethics .ai-stamp { opacity: 1; transform: none; }
.static .s-decision .wordmark { opacity: 1; transform: none; }
.static .captions--wide { display: none; }
.static .ex { opacity: 1; transform: scale(.62); transform-origin: top center; left: calc(var(--ex) - 230px); width: 460px; top: 400px; height: auto; justify-content: flex-start; }
.static .ex0 { --ex: 330px; } .static .ex1 { --ex: 750px; } .static .ex2 { --ex: 1170px; } .static .ex3 { --ex: 1590px; }
.static .ex .grid { grid-template-columns: repeat(4, 96px); } .static .ex .meter { width: 200px; }
.static .bias-static { display: grid; }
.static .gate__why { opacity: 1; }
.static .gv-label, .static .gv-ok, .static .gv-sign { opacity: 1; transform: none; }
.static .gv-bars i { height: calc(var(--h) * 100%); background: rgba(207,138,151,.75); }
.static .s-method .prov { display: none; }
.bias-static { display: none; position: absolute; left: 110px; top: 720px; width: 1700px; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.bias-static > div { border-left: 2px solid var(--bur-hi); padding-left: 16px; }
.bias-static .cap__t { font-size: 18px !important; }
@page { size: 1920px 1080px; margin: 0; }
@media print { html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ================= LIVE 3D CAMERA =================
   One perspective camera over the whole strip of rooms. Each room is a deep set: background plane pushed back,
   framed media pulled forward, text on the front plane. The current room drifts slowly (parallax); transitions
   dolly the camera back and swing it between rooms. Text never moves while a slide is on screen. */
#stage { perspective: 2400px; perspective-origin: 50% 46%; }
#strip, .slide { transform-style: preserve-3d; }
.room { transform-style: preserve-3d; transform: translateZ(-160px) scale(1.067); transform-origin: 50% 50%; }
.slide.is-current .room { animation: sway 24s ease-in-out infinite alternate; }
@keyframes sway {
  0%   { transform: translateZ(-160px) scale(1.067) rotateY(-1.6deg) rotateX(.5deg); }
  50%  { transform: translateZ(-120px) scale(1.05) rotateY(0deg) rotateX(0deg); }
  100% { transform: translateZ(-160px) scale(1.067) rotateY(1.6deg) rotateX(-.5deg); } }
.f-main, .f-cons, .f-rec, .case, .layers, .roles, .ex, .prov, .fig, .ai-stamp, .chain { transform-style: preserve-3d; }
.f-main, .f-cons, .f-rec { transform: translateZ(90px); }
.case { transform: translateZ(140px); }
.layers { transform: translateZ(70px); }
.s-recommendation:not([data-sel=""]) .f-rec { transform: translateZ(90px); }
.s-recommendation .f-rec { transform: translateZ(90px) translateX(30px); }
.scrim { transform: translateZ(40px) scale(.98); }
.reduced .slide.is-current .room { animation: none; }
.static .room, .static .scrim, .static .f-main, .static .f-cons, .static .f-rec, .static .case, .static .layers { transform: none !important; animation: none !important; }
.static #stage { perspective: none; }

/* ================= CAMERA-ANGLE CUTS (click → new angle, soft light veil) ================= */
.ang { position: absolute; inset: 0; opacity: 0; transform: scale(1.1); filter: blur(12px) brightness(1.35); transition: opacity .9s var(--ease), transform 1.6s var(--ease), filter 1s var(--ease); }
.ang.on { opacity: 1; transform: scale(1); filter: none; }
.ang .m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ang-d .m { object-position: 42% 50%; }
.ang-0 .m { object-position: 50% 50%; }
.ang-1 .m { object-position: 78% 50%; }
.ang-2 .m { object-position: 30% 60%; transform: scale(1.35); transform-origin: 70% 60%; filter: brightness(.55); }
.ang-3 .m { object-position: 60% 50%; }
.s-decision[data-sel="2"] .formats { opacity: 1; } .s-decision[data-sel="2"] .fmt { transform: none; }
.s-decision[data-sel="3"] .signoff { opacity: 1; transform: none; }
.s-decision[data-sel="1"] .tag-ai { opacity: 1; } .s-decision[data-sel="1"] .tag-real { opacity: 0; }
.veil { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 55% at 50% 55%, rgba(236,232,226,.55), rgba(200,196,190,.18) 55%, transparent 80%); mix-blend-mode: screen; }
.veil.flash { animation: veil 1.1s var(--ease); }
@keyframes veil { 0% { opacity: 0; } 25% { opacity: .55; } 100% { opacity: 0; } }
.reduced .veil.flash { animation: none; }
/* camera reframes for the other rooms (same footage, new angle/lens) */
.room > .media, .room > .full { transition: transform 1.6s var(--ease), object-position 1.6s var(--ease), filter 1s; }
.s-ethics .cam { position: absolute; inset: 0; transition: transform 1.6s var(--ease); }
.s-ethics[data-sel="0"] .cam { transform: scale(1.22) translate(-150px, 30px); }

.s-legal[data-sel="0"] .room > .dim { transform: scale(1.3) translateY(-60px); }
.s-legal[data-sel="1"] .room > .dim { transform: scale(1.5) translate(-200px, 40px); }
.s-legal[data-sel="2"] .room > .dim { transform: scale(1.5) translate(220px, 40px); }
.s-legal[data-sel="3"] .room > .dim { transform: scale(1.15) translateY(-120px); }
.s-gates[data-sel="0"] .gatesbg { transform: scale(1.25) translateX(250px); }
.s-gates[data-sel="1"] .gatesbg { transform: scale(1.4); }
.s-gates[data-sel="2"] .gatesbg { transform: scale(1.25) translateX(-250px); }
.s-recommendation[data-sel="0"] .silk { transform: scale(1.2) translateX(-120px); }
.s-recommendation[data-sel="1"] .silk { transform: scale(1.35) translateY(-60px); }
.s-recommendation[data-sel="2"] .silk { transform: scale(1.12) translateX(140px); filter: brightness(.7); }
.s-method[data-sel="0"] .dim2 { transform: scale(1.3) translateX(-200px); }
.s-method[data-sel="1"] .dim2 { transform: scale(1.5); }
.s-method[data-sel="2"] .dim2 { transform: scale(1.3) translateX(200px); }
.f-cons .media { filter: none; }
.static .ang { transition: none; }
.static .veil { display: none; }

/* =====================================================================
   v3 — every scene full-bleed, unique media per slide, forward camera
   ===================================================================== */
#strip { transform: none !important; transform-style: preserve-3d; }
.slide { left: 0 !important; opacity: 0; visibility: hidden; transform-style: preserve-3d; }
.slide.is-current, .slide.is-leaving { opacity: 1; visibility: visible; }
.slide.is-leaving { z-index: 2; pointer-events: none; }
.slide.is-current { z-index: 1; }
.room { transform: none; }
.slide.is-current .room { animation: sway 26s ease-in-out infinite alternate; }
@keyframes sway { 0% { transform: scale(1.06) rotateY(-1.4deg) translateX(-14px); } 100% { transform: scale(1.06) rotateY(1.4deg) translateX(14px); } }
.reduced .slide.is-current .room { animation: none; transform: scale(1.03); }
/* staged entrance of the scene's elements after the camera arrives */
.slide.arrive .txt > *, .slide.arrive .case, .slide.arrive .layers { animation: rise 1s var(--ease) backwards; }
.slide.arrive .txt > *:nth-child(2) { animation-delay: .75s; } .slide.arrive .txt > *:nth-child(3) { animation-delay: .85s; }
.slide.arrive .txt > *:nth-child(4) { animation-delay: .95s; } .slide.arrive .txt > *:nth-child(n+5) { animation-delay: 1.05s; }
.slide.arrive .txt > *:first-child { animation-delay: .65s; } .slide.arrive .case, .slide.arrive .layers { animation-delay: 1.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.reduced .slide.arrive * { animation-delay: 0s !important; animation-duration: .2s !important; }
.tag--bl { left: 110px; bottom: 82px; }
.horizon, .seam { display: none; }

/* 01 · full-bleed shoot */
.s-decision { background: #0d0c0b; }
.s-decision .room::before { display: none; }
.f-full { position: absolute; inset: 0; overflow: hidden; }
.f-full .ang .m { object-position: 50% 50%; }
.f-full .ang-d .m { object-position: 50% 40%; }
.f-full .ang-0 .m { object-position: 50% 45%; }
.f-full .ang-3 .m { object-position: 50% 50%; }
.s-decision .scrim { background: linear-gradient(90deg, rgba(10,9,8,.86) 0%, rgba(10,9,8,.62) 34%, rgba(10,9,8,.08) 58%, transparent 75%), linear-gradient(0deg, rgba(10,9,8,.55), transparent 30%); }
.wordmark { top: 70px; left: 860px; right: 60px; }
.synth-id { position: absolute; left: 1080px; top: 420px; opacity: 0; transform: translateX(20px); transition: opacity .7s .2s, transform 1s var(--ease); }
.synth-id b { display: block; font: 600 34px/1 var(--sans); letter-spacing: .28em; color: #f4eee6; text-shadow: 0 0 22px rgba(255,255,255,.25); }
.synth-id span { display: block; margin-top: 12px; font: 500 15px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ivory2); }
.s-decision[data-sel="1"] .synth-id { opacity: 1; transform: none; }
.vhs .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 4px); mix-blend-mode: multiply; pointer-events: none; }
.vhs .m { animation: jitter 6s steps(1) infinite; }
@keyframes jitter { 0%, 100% { transform: none; } 31% { transform: translateX(3px); } 32% { transform: translateX(-2px) skewX(.6deg); } 33% { transform: none; } 71% { transform: translateY(2px); } 72% { transform: none; } }
.reduced .vhs .m { animation: none; }
.formats { background: rgba(10,9,8,.35); }
.fmt--story { left: 1010px; } .fmt--feed { left: 1240px; } .fmt--wide { left: 1550px; }
.fmt { bottom: 200px; }
.fmt__cap { left: 1010px; bottom: 150px; }
.signoff { left: 1010px; right: 110px; bottom: 150px; }
.s-decision .tag-vhs { opacity: 0; transition: opacity .5s; } .s-decision .tag-real { transition: opacity .5s; }
.s-decision[data-sel="1"] .tag-vhs { opacity: 1; } .s-decision[data-sel="1"] .tag-real { opacity: 0; }
.txt--decision .captions { width: 700px; }

/* 03 · legal: lighter, the corridor is part of the composition */
.s-legal .hall { opacity: .9; filter: none; }
.s-legal .scrim { background: linear-gradient(90deg, rgba(9,9,9,.9) 0%, rgba(9,9,9,.72) 44%, rgba(9,9,9,.15) 62%, rgba(9,9,9,.35) 100%); }
.s-legal[data-sel="0"] .room > .hall { transform: scale(1.3) translateY(-60px); }
.s-legal[data-sel="1"] .room > .hall { transform: scale(1.5) translate(-200px, 40px); }
.s-legal[data-sel="2"] .room > .hall { transform: scale(1.5) translate(220px, 40px); }
.s-legal[data-sel="3"] .room > .hall { transform: scale(1.15) translateY(-120px); }

/* 04 · consequences: full-bleed runway; the camera finds each consequence */
.s-consequences .runway { object-position: 50% 55%; }
.s-consequences .scrim { background: linear-gradient(90deg, rgba(10,9,8,.88) 0%, rgba(10,9,8,.6) 36%, rgba(10,9,8,.1) 55%, rgba(10,9,8,.3) 100%); }
.s-consequences[data-sel="0"] .runway { transform: scale(1.35) translate(-60px, -40px); }
.s-consequences[data-sel="1"] .runway { transform: scale(1.1); filter: grayscale(1) brightness(.6); }
.s-consequences[data-sel="2"] .runway { transform: scale(1.55) translate(-60px, -60px); object-position: 55% 70%; }
.withdrawn { left: 760px; right: 560px; top: 470px; z-index: 3; }
.withdrawn small { display: block; margin-top: 8px; font: 500 12px/1 var(--sans); letter-spacing: .2em; opacity: .8; }
.s-consequences[data-sel="1"] .withdrawn { opacity: 1; transform: none; }
.craft { position: absolute; left: 780px; right: 580px; bottom: 140px; z-index: 3; font: italic 400 30px/1.3 var(--serif); color: #f3ede4; opacity: 0; transform: translateY(14px); transition: opacity .7s .2s, transform 1s var(--ease); text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.s-consequences[data-sel="2"] .craft { opacity: 1; transform: none; }
.f-cons { display: none; }

/* 05 · bias: the mood board is the data */
.s-bias .board { opacity: .75; }
.s-bias .scrim { background: linear-gradient(180deg, rgba(9,9,9,.82) 0%, rgba(9,9,9,.55) 34%, rgba(9,9,9,.35) 60%, rgba(9,9,9,.85) 100%); }
.s-bias[data-sel="0"] .board { transform: scale(1.05); }
.s-bias[data-sel="1"] .board { transform: scale(1.5) translate(-160px, 40px); }
.s-bias[data-sel="2"] .board { transform: scale(2) translate(120px, 30px); }
.s-bias[data-sel="3"] .board { transform: scale(1.3) translate(0, -60px); filter: saturate(1.4); }
.chip { position: absolute; left: 50%; top: 560px; transform: translate(-50%, 16px); z-index: 3; padding: 16px 26px; background: rgba(10,9,9,.78); border: 1px solid var(--bur-hi); font: 500 24px/1.2 var(--sans); white-space: nowrap; opacity: 0; transition: opacity .6s .2s, transform .9s var(--ease); backdrop-filter: blur(6px); }
.s-bias[data-sel="0"] .ch0, .s-bias[data-sel="1"] .ch1, .s-bias[data-sel="2"] .ch2, .s-bias[data-sel="3"] .ch3 { opacity: 1; transform: translate(-50%, 0); }
.ex { display: none !important; }

/* 06 · gates: backstage before the show */
.s-gates .back { opacity: .6; }
.s-gates .scrim { background: linear-gradient(180deg, rgba(9,9,9,.75), rgba(9,9,9,.82) 45%, rgba(9,9,9,.9)); }
.s-gates[data-sel="0"] .back { transform: scale(1.2) translateX(200px); }
.s-gates[data-sel="1"] .back { transform: scale(1.35); }
.s-gates[data-sel="2"] .back { transform: scale(1.2) translateX(-200px); }
.gv-img { background: linear-gradient(135deg, #2b2826, #141313); }
.gv-img::after { content: "campaign asset"; position: absolute; left: 16px; top: 14px; font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--silver); }

/* 07 · recommendation: silk only, each condition writes onto the scene */
.f-rec { display: none; }
.s-recommendation .silk { opacity: .95; }
.s-recommendation .scrim { background: linear-gradient(90deg, rgba(9,8,8,.85) 0%, rgba(9,8,8,.6) 50%, rgba(9,8,8,.2) 100%); }
.rv { position: absolute; left: 1290px; top: 300px; width: 520px; z-index: 3; opacity: 0; transform: translateY(18px); transition: opacity .7s .15s, transform 1s var(--ease); }
.s-recommendation[data-sel="0"] .rv0, .s-recommendation[data-sel="1"] .rv1, .s-recommendation[data-sel="2"] .rv2 { opacity: 1; transform: none; }
.rv0 { padding: 28px 30px; border: 1px solid var(--bur-hi); background: rgba(30,10,15,.6); }
.rv0 b { display: block; font: 600 32px/1 var(--sans); letter-spacing: .2em; }
.rv0 span { display: block; margin-top: 12px; font: 400 18px/1.3 var(--sans); color: var(--ivory2); }
.rv1 p { margin: 0 0 18px; font: 400 34px/1.2 var(--serif); border-bottom: 1px solid rgba(221,219,215,.25); padding-bottom: 14px; }
.rv1 i { float: right; font-style: normal; color: var(--bur-hi); }
.rv2 { text-align: center; }
.rv2 .pz { display: block; width: 70px; height: 84px; margin: 0 auto 24px; border-left: 22px solid var(--ivory); border-right: 22px solid var(--ivory); }
.rv2 b { display: block; font: 600 26px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.rv2 span { display: block; margin-top: 12px; font: 400 18px/1 var(--sans); color: var(--ivory2); }
.s-recommendation[data-sel="0"] .silk { transform: scale(1.2) translateX(-120px); }
.s-recommendation[data-sel="1"] .silk { transform: scale(1.35) translateY(-60px); }
.s-recommendation[data-sel="2"] .silk { transform: scale(1.12) translateX(140px); filter: grayscale(1) brightness(.55); }

/* 08 · method: the atelier, softly */
.s-method .atelier { opacity: .55; filter: blur(1px); }
.s-method .scrim { background: rgba(9,9,9,.5); }
.s-method[data-sel="0"] .atelier { transform: scale(1.3) translateX(-200px); }
.s-method[data-sel="1"] .atelier { transform: scale(1.5); }
.s-method[data-sel="2"] .atelier { transform: scale(1.3) translateX(200px); }
.prov { display: block; }
.prov p { margin: 0 0 14px; font: 400 22px/1.35 var(--sans); }
.prov b { display: inline-block; min-width: 230px; font: 600 14px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--silver-hi); }
.prov b.ai { color: var(--bur-hi); }

/* 09 · references: pages turning, text on a calm field */
.s-references .pages { opacity: .5; }
.s-references .scrim { background: linear-gradient(90deg, rgba(9,8,8,.9), rgba(9,8,8,.78) 60%, rgba(9,8,8,.55)); }

/* static */
.static .slide { opacity: 1; visibility: visible; }
.static .room { animation: none !important; transform: none !important; }
.static .synth-id, .static .rv, .static .chip, .static .craft, .static .withdrawn { display: none; }
.static .s-decision .wordmark { opacity: 0; }

.signoff { left: 1180px; right: 110px; bottom: 150px; padding: 22px 26px; background: rgba(10,9,8,.6); backdrop-filter: blur(6px); }
.s-gates .back { opacity: .85; }
.s-gates .scrim { background: linear-gradient(180deg, rgba(9,9,9,.6), rgba(9,9,9,.72) 40%, rgba(9,9,9,.85)); }
.s-recommendation .silk { opacity: 1; filter: brightness(1.45) contrast(1.05); }
.s-recommendation .scrim { background: linear-gradient(90deg, rgba(9,8,8,.82) 0%, rgba(9,8,8,.5) 55%, rgba(9,8,8,.15) 100%); }
.s-method .atelier { opacity: .75; }
.txt--method .prov { position: absolute; left: 110px; top: 780px; width: 1700px; z-index: 4; }
.static .txt--method .prov { display: none; }
/* design note on references slide */
.refs-note { position: absolute; left: 110px; bottom: 120px; width: 1500px; margin: 0; padding: 18px 26px; border-left: 2px solid rgba(220,200,160,.7); background: rgba(10,10,12,.55); backdrop-filter: blur(6px); font: 400 21px/1.5 var(--sans); color: rgba(240,236,228,.92); }
/* steadier camera: no rotating sway (it read as shaking) — only a slow, smooth push-in */
.slide.is-current .room { animation: push 40s linear infinite alternate; will-change: transform; backface-visibility: hidden; }
@keyframes push { from { transform: scale(1.04); } to { transform: scale(1.09); } }
.drift { animation: none; transform: scale(1.03); }
.room .media, .room video, .room img { backface-visibility: hidden; transform-style: flat; }
@keyframes jitter { 0%, 100% { transform: none; } 48% { transform: translateX(1px); } 49% { transform: none; } }
.reduced .slide.is-current .room { animation: none; transform: scale(1.04); }
.static .room { animation: none !important; transform: none !important; }
/* steady camera: no continuous room motion at all (the footage itself carries the movement) */
.slide.is-current .room, .slide .room { animation: none !important; transform: none; }
.drift { animation: none !important; transform: none; }
/* slide 4: the video never zooms on click — only the point text and overlays appear */
.s-consequences .runway, .s-consequences[data-sel] .runway { transform: none !important; filter: none !important; object-position: 50% 55% !important; }
.s-consequences .cap { animation: capSoft .7s var(--ease) both; }
@keyframes capSoft { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
/* ===== v4: no zoom on click anywhere — the scene stays put, the frame tells the story ===== */
.slide[data-sel] .room .media, .slide[data-sel] .room .full, .slide[data-sel] .cam,
.slide[data-sel] .room > .dim, .slide[data-sel] .room > .hall, .slide[data-sel] .board, .slide[data-sel] .back,
.slide[data-sel] .gatesbg, .slide[data-sel] .silk, .slide[data-sel] .atelier, .slide[data-sel] .dim2, .slide[data-sel] .runway {
  transform: none !important; filter: none !important; }
.veil.flash { animation: none !important; }
/* slide 1: invisible scene changes — long, soft dissolves between dark, matched shots */
.ang { transform: none !important; filter: none !important; transition: opacity 1.8s cubic-bezier(.4,0,.2,1) !important; }
.ang-2 .m { transform: none; filter: brightness(.8) saturate(.7); object-position: 50% 45%; }
.ang-0 .m, .ang-3 .m { filter: brightness(.82) saturate(.7); }
.s-decision .tag-main, .s-decision .tag-real, .s-decision .tag-vhs { opacity: 0 !important; transition: opacity .8s; }
.s-decision:not([data-sel]) .tag-main, .s-decision[data-sel=""] .tag-main,
.s-decision[data-sel="0"] .tag-real, .s-decision[data-sel="2"] .tag-real, .s-decision[data-sel="3"] .tag-real,
.s-decision[data-sel="1"] .tag-vhs { opacity: 1 !important; }
/* focus bracket + lens: a viewfinder frames what each point is about */
@property --fx { syntax: '<length>'; inherits: true; initial-value: 960px; }
@property --fy { syntax: '<length>'; inherits: true; initial-value: 540px; }
@property --fw { syntax: '<length>'; inherits: true; initial-value: 400px; }
@property --fh { syntax: '<length>'; inherits: true; initial-value: 200px; }
.slide { transition: --fx .9s cubic-bezier(.65,0,.35,1), --fy .9s cubic-bezier(.65,0,.35,1), --fw .9s cubic-bezier(.65,0,.35,1), --fh .9s cubic-bezier(.65,0,.35,1); }
.room .lens { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .8s var(--ease);
  background: radial-gradient(calc(var(--fw) * .95) calc(var(--fh) * 1.25) at var(--fx) var(--fy), rgba(0,0,0,0) 45%, rgba(4,4,6,.42) 100%); }
.slide.focused .room .lens { opacity: 1; }
.room .bracket { position: absolute; z-index: 5; pointer-events: none; opacity: 0;
  left: calc(var(--fx) - var(--fw) / 2); top: calc(var(--fy) - var(--fh) / 2); width: var(--fw); height: var(--fh);
  transition: opacity .5s var(--ease); }
.slide.focused .room .bracket { opacity: 1; }
.bracket b { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(236,214,178,.9); transition: transform .9s cubic-bezier(.65,0,.35,1); }
.bracket b:nth-child(1) { left: -10px; top: -10px; border-left-width: 1.5px; border-top-width: 1.5px; }
.bracket b:nth-child(2) { right: -10px; top: -10px; border-right-width: 1.5px; border-top-width: 1.5px; }
.bracket b:nth-child(3) { left: -10px; bottom: -10px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.bracket b:nth-child(4) { right: -10px; bottom: -10px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.slide.focused .bracket b { animation: snap .7s cubic-bezier(.2,.8,.2,1); }
@keyframes snap { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }
.bracket span { position: absolute; left: -10px; top: -38px; font: 500 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(236,214,178,.95); white-space: nowrap;
  background: rgba(8,8,10,.55); padding: 6px 10px; backdrop-filter: blur(4px); }
.slide.focused .bracket span { animation: tagIn .6s .2s var(--ease) backwards; }
@keyframes tagIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.reduced .bracket b, .reduced .bracket span { animation: none !important; }
.static .lens, .static .bracket { display: none; }
/* no captions or credit strips over the footage — credits live on slide 9 only */
.room .tag, .tag { display: none !important; }
.bracket span { display: none !important; }
.refs { font-size: 20px; line-height: 1.42; top: 240px; }
.refs li { margin-bottom: 18px; }
.refs-note { bottom: 96px; font-size: 18px; padding: 14px 22px; width: 1700px; }
.refs { font-size: 17.5px; line-height: 1.4; top: 232px; }
.refs li { margin-bottom: 14px; }
.s-method .atelier { opacity: 1 !important; filter: none !important; object-position: 50% 50% !important; }