/* H7-H10 shared styles: one screen, no vertical scroll. Mockup only. */
@property --bx{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --by{syntax:"<percentage>";inherits:true;initial-value:50%}
:root{--ivory:#f3ead6;--gold:#c9a84c;--gold2:#e6c978;--ink:#0b0907;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--ivory);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
h1,h2,h3,p{margin:0;text-wrap:balance}
.stage{position:fixed;inset:0;height:100vh;height:100dvh;overflow:hidden;touch-action:none;background:var(--ink)}
.plate{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform 1.5s var(--ease);will-change:transform}
.plate>img.pic{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.vig{position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(120% 95% at 50% 45%,transparent 50%,#000b),linear-gradient(0deg,#0b0907f0 0,#0b090766 24%,transparent 46%)}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>")}
/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px max(22px,3.5vw);background:linear-gradient(#0b0907cc,transparent);pointer-events:none}
.nav>*{pointer-events:auto}
.brand{display:flex;gap:12px;align-items:center;color:var(--ivory);text-decoration:none;font:500 12px var(--sans);letter-spacing:.34em;text-transform:uppercase}
.brand img{width:32px;height:32px}
.nav nav{display:flex;gap:4px}.nav nav a{color:var(--ivory);text-decoration:none;font:400 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:9px 12px;opacity:.8}.nav nav a:hover,.nav nav a:focus-visible{opacity:1;color:var(--gold2)}
/* words */
.words{position:absolute;left:0;bottom:0;z-index:20;width:min(1100px,100%);padding:0 max(24px,5vw) clamp(96px,16vh,170px);pointer-events:none}
.kick{font:400 12px var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--gold2);margin-bottom:20px;transition:opacity .8s,translate 1s var(--ease)}
.words h1{font:300 clamp(40px,7.4vw,112px)/1 var(--serif);letter-spacing:-.01em;color:var(--ivory)}
.words h1 em{font-style:italic;color:var(--gold2)}
.words .w{display:inline-block;white-space:nowrap}
.words .ch{display:inline-block;transition:transform 1.8s var(--ease),opacity 1.5s ease-out,filter 1.5s ease-out;transition-delay:var(--dl,0s)}
.lede{max-width:500px;margin-top:22px;font-size:clamp(15px,1.4vw,18px);color:#d9ceb4;font-weight:300;text-wrap:pretty;transition:opacity .8s,translate 1s var(--ease)}
body:not([data-step="0"]) .words .ch{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0;filter:blur(8px)}
body:not([data-step="0"]) .kick,body:not([data-step="0"]) .lede{opacity:0;translate:0 -14px}
body:not([data-step="0"]) .words{pointer-events:none}
/* hotspots + labels */
.hot{position:absolute;z-index:12;width:var(--hw,9%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;display:block;color:var(--ivory);text-decoration:none;outline:0;pointer-events:none;cursor:default}
.hot.on{pointer-events:auto;cursor:pointer}
.hot.off{pointer-events:auto;cursor:pointer}
.hot:focus-visible::before{content:"";position:absolute;inset:-6%;border-radius:50%;box-shadow:0 0 0 2px var(--gold2),0 0 40px #e6c97888}
.lab{position:absolute;left:50%;top:var(--lt,110%);translate:-50% 0;transform-origin:50% 0;scale:calc(1/var(--z,1));display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;opacity:0;pointer-events:none;width:max-content;max-width:min(320px,80vw);transition:opacity .9s .5s,filter .9s .5s;filter:blur(6px)}
.hot.on .lab{opacity:1;filter:none}
.lab img{width:42px;height:42px;border-radius:22%;background:#0a0b14;object-fit:contain;box-shadow:0 0 0 1px #c9a84c88,0 6px 22px #000c,0 0 30px #ffa83c55}
.lab b{font:500 clamp(22px,2.1vw,30px)/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);text-shadow:0 0 18px #ffb54acc,0 2px 10px #000}
.lab span{font:400 14px/1.3 var(--sans);color:#f3ead6;text-shadow:0 1px 8px #000,0 0 14px #000}
.lab small,.wip{font:400 9px var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:.7}
.lab .go{font:400 10px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);border-bottom:1px solid #c9a84c88;padding-bottom:3px;margin-top:2px}
/* hint + dots */
.ctl{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 0 max(18px,env(safe-area-inset-bottom));pointer-events:none}
.hint{font:400 11px var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--gold2);display:flex;flex-direction:column;align-items:center;gap:8px;text-indent:.42em}
.hint::after{content:"";width:1px;height:26px;background:linear-gradient(var(--gold2),transparent);animation:drip 2s ease-in-out infinite}
.dots{display:flex;gap:2px;pointer-events:auto}
.dots button{width:min(30px,calc((100vw - 24px)/12));height:30px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.dots button::after{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--gold2);transition:.5s}
.dots button[aria-current=true]::after{background:var(--gold2);scale:1.35;box-shadow:0 0 12px #e6c978}
.dots button:focus-visible{outline:2px solid var(--gold2);border-radius:50%}
body[data-last] .hint::after{display:none}
@keyframes drip{0%,100%{opacity:.3;scale:1 .6;transform-origin:top}50%{opacity:1;scale:1 1}}
.fallback{position:fixed;inset:0;z-index:90;display:grid;place-content:center;background:var(--ink);padding:24px;text-align:center}
.fallback ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.fallback a{color:var(--gold2);font:500 22px var(--serif);letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
@media(max-width:560px){.nav{padding:12px 12px 20px}.brand{font-size:11px;letter-spacing:.24em}.nav nav a{padding:8px 7px;letter-spacing:.14em;font-size:10px}}
@media(max-height:480px){.ctl{flex-direction:row;justify-content:center;gap:18px;padding-bottom:6px}.hint{font-size:10px}.words{padding-bottom:70px}.hint::after{display:none}.kick{margin-bottom:10px}.lede{display:none}.lab img{width:30px;height:30px}.lab b{font-size:20px}.lab span{display:none}}
@media(prefers-reduced-motion:reduce){.plate,.words .ch,.kick,.lede,.lab,.hint::after{transition-duration:.01s!important;animation:none!important}body:not([data-step="0"]) .words .ch{transform:none!important}}
.lab{isolation:isolate}
.lab::before{content:"";position:absolute;z-index:-1;inset:-34px -70px -26px;background:radial-gradient(closest-side,#000b 30%,transparent);pointer-events:none}