/* ============================================================
   SHHHH — studio one-pager
   ============================================================ */
@font-face{font-family:"Oswald";src:url(../fonts/oswald-latin-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald";src:url(../fonts/oswald-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald";src:url(../fonts/oswald-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#06090a;
  --bg-2:#0b1113;
  --ink:#d9dcd4;
  --ink-dim:#7f8b8a;
  --line:rgba(217,220,212,.14);
  --warm:#f1d7a1;
  --neon:#ff3b3b;
  --teal:#5f8a8d;
  --display:"Oswald","Arial Narrow",sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.15,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--display);font-weight:300;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-loading{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block}
::selection{background:var(--warm);color:#111}

/* ---------------- loader ---------------- */
.loader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#030505;transition:opacity 1.2s var(--ease),visibility 0s 1.2s}
.loader__mark{font-family:var(--mono);font-size:13px;letter-spacing:.9em;padding-left:.9em;color:var(--ink-dim);animation:hush 2.4s ease-in-out infinite}
.loader__bar{width:140px;height:1px;background:rgba(255,255,255,.08);overflow:hidden}
.loader__bar i{display:block;height:100%;width:100%;background:var(--warm);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .5s var(--ease)}
@keyframes hush{0%,100%{opacity:.35;letter-spacing:.9em}50%{opacity:1;letter-spacing:1.05em}}
body.is-ready .loader{opacity:0;visibility:hidden}

/* ---------------- nav ---------------- */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:34px 48px;pointer-events:none;opacity:0;transform:translateY(-12px);transition:opacity 1.4s var(--ease) 2.6s,transform 1.4s var(--ease) 2.6s}
.nav > *{pointer-events:auto}
body.is-ready .nav{opacity:1;transform:none}
.nav::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(rgba(3,5,5,.55),transparent);pointer-events:none;z-index:-1;opacity:var(--nav-bg,0);transition:opacity .4s}
.nav__logo{display:flex;align-items:baseline;gap:6px}
.nav__word{font-family:var(--display);font-weight:500;font-size:44px;line-height:1;letter-spacing:.24em;color:#ece8dc;text-shadow:0 0 28px rgba(241,215,161,.28),0 2px 18px rgba(0,0,0,.6);transition:font-size .7s var(--ease),letter-spacing .7s var(--ease)}
.nav__word i{font-style:normal;display:inline-block;opacity:0;transform:translateY(10px);filter:blur(4px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:calc(2.8s + var(--i) * .14s)}
body.is-ready .nav__word i{opacity:1;transform:none;filter:none}
.nav__sub{font-family:var(--mono);font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--warm);opacity:.85;transition:font-size .7s var(--ease)}
.nav.is-compact .nav__word{font-size:24px;letter-spacing:.3em}
.nav.is-compact .nav__sub{font-size:10px}
.nav__logo:hover .nav__word{color:var(--warm)}
.nav__links{display:flex;gap:44px}
.nav__links a{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;position:relative;padding:6px 0;color:rgba(217,220,212,.78);transition:color .4s}
.nav__links a span{color:var(--ink-dim);margin-right:10px;font-size:9px}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--warm);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.nav__links a:hover{color:var(--warm)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------------- hero ---------------- */
.hero{position:relative;height:240vh}
.viewport{position:sticky;top:0;height:100vh;overflow:hidden;background:#030505;--bar:0px}
@supports (height:100svh){.viewport{--bar:calc(100vh - 100svh)}}
.stage{position:absolute;left:50%;top:50%;width:max(104vw,185vh);aspect-ratio:16/9;transform:translate(-50%,-50%);background-size:cover;background-position:center;opacity:0;transition:opacity 2.4s var(--ease)}
body.is-ready .stage{opacity:1}
.layer{position:absolute;inset:0;will-change:transform;transform-origin:70.7% 36%}
.layer picture,.layer img{position:absolute;inset:0;width:100%;height:100%}
.layer img{object-fit:cover}

/* unlit pass over the lit scene: sign flicker = opacity of this layer */
.unlit{opacity:1;will-change:opacity}

.glow{position:absolute;pointer-events:none;border-radius:50%;will-change:opacity}
.glow--sign{left:50%;top:10%;width:42%;height:48%;background:radial-gradient(closest-side,rgba(255,214,150,.16),rgba(255,200,130,.06) 55%,transparent);opacity:0}
.glow--neon{left:78.4%;top:51.5%;width:5%;height:10%;background:radial-gradient(closest-side,rgba(255,60,60,.32),rgba(255,40,40,.08) 60%,transparent);animation:neon 7s steps(1) infinite}
.glow--porch{left:50%;top:63%;width:36%;height:16%;background:radial-gradient(closest-side,rgba(255,206,140,.08),transparent);animation:breathe 6s ease-in-out infinite}
@keyframes neon{0%,100%{opacity:1}31%{opacity:.35}32%{opacity:1}33%{opacity:.2}35%{opacity:1}71%{opacity:.6}72%{opacity:1}}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}

/* fog: tileable texture drifting sideways */
.fog{position:absolute;left:0;width:200%;background:url(../img/fog.webp) repeat-x;background-size:50% 100%;pointer-events:none;will-change:transform;
  -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 65%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 65%,transparent)}
.fog--far{top:22%;height:52%;opacity:.20;animation:drift 160s linear infinite}
.fog--mid{top:48%;height:40%;opacity:.16;animation:drift 95s linear infinite reverse}
.fog--near{top:40%;height:70%;opacity:.10;animation:drift 60s linear infinite;background-size:50% 120%}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.sheet{position:absolute;inset:-6% -6%;overflow:hidden;pointer-events:none;transform:rotate(-2.6deg)}
.sheet::before{content:"";position:absolute;left:0;right:0;bottom:0;background:url(../img/rain-sheet.webp) repeat;will-change:transform}
.sheet--far{opacity:.11}
.sheet--far::before{top:-240px;background-size:240px 240px;animation:fall-far .38s linear infinite}
.sheet--mid{opacity:.08}
.sheet--mid::before{top:-420px;background-size:420px 420px;animation:fall-mid .33s linear infinite}
@keyframes fall-far{to{transform:translate3d(0,240px,0)}}
@keyframes fall-mid{to{transform:translate3d(0,420px,0)}}
.rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 3s var(--ease) .6s}
body.is-ready .rain{opacity:1}
/* hero scrolled away: stop all scene animations */
body.hero-off .viewport{visibility:hidden}
body.hero-off .viewport *,body.hero-off .viewport *::before{animation-play-state:paused}

.vignette{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 62% 42%,transparent 45%,rgba(2,4,4,.55) 100%),
  linear-gradient(transparent 70%,rgba(3,5,5,.55))}
.dusk{position:absolute;inset:0;pointer-events:none;background:var(--bg);opacity:0;will-change:opacity}

.hero__ui{position:absolute;inset:auto 48px calc(40px + var(--bar));display:grid;grid-template-columns:1fr auto 1fr;align-items:end;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(217,220,212,.7);opacity:0;transition:opacity 1.6s var(--ease) 3s;will-change:opacity,transform}
body.is-ready .hero__ui{opacity:1}
.hero__note{line-height:1.9}
.hero__meta{text-align:right;line-height:1.9}
.hero__scroll{display:flex;flex-direction:column;align-items:center;gap:14px}
.hero__scroll i{width:1px;height:56px;background:rgba(217,220,212,.15);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:linear-gradient(transparent,var(--warm));animation:drop 2.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes drop{to{top:100%}}

/* ---------------- content ---------------- */
.content{position:relative;z-index:2;margin-top:-70vh;background:linear-gradient(rgba(6,9,10,0) 0,rgba(6,9,10,.55) 30vh,var(--bg) 70vh,var(--bg-2) 80%,#030505)}
.content::before{content:"";position:absolute;inset:60vh 0 0;-webkit-mask-image:linear-gradient(transparent,#000 60vh);mask-image:linear-gradient(transparent,#000 60vh);background:url(../img/fog.webp) repeat-x 0 0/1400px 700px;opacity:.035;pointer-events:none}
.block{position:relative;display:grid;grid-template-columns:minmax(180px,1fr) 3fr;gap:48px;padding:180px 48px 140px;border-top:1px solid var(--line);max-width:1600px;margin:0 auto}
.block:first-child{border-top:0;padding-top:12vh}
.block--studio .title,.block--studio .lead{text-shadow:0 2px 30px rgba(0,0,0,.55)}
.block__label{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);padding-top:22px;position:sticky;top:120px;align-self:start}
.block__label span{color:var(--warm);margin-right:12px}
.block__body{max-width:1040px}
.title{font-weight:400;font-variant-caps:small-caps;font-synthesis:small-caps;font-size:clamp(64px,6.6vw,124px);line-height:.98;letter-spacing:.012em;margin-bottom:56px}
.title em{font-style:normal;color:var(--warm)}
.title--xl{font-size:clamp(72px,8.2vw,150px)}
.lead{font-size:24px;font-weight:300;line-height:1.6;letter-spacing:.012em;max-width:700px;color:rgba(217,220,212,.82);margin-bottom:64px}

.facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.facts li{padding:22px 24px 0 0;display:flex;flex-direction:column;gap:8px}
.facts b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim)}
.facts span{font-size:20px;font-weight:400;letter-spacing:.02em;font-variant-caps:small-caps}

/* key art: full width, shown uncropped (title is part of the art); cool light follows the cursor */
.poster{grid-column:1/-1;position:relative;overflow:hidden;aspect-ratio:2576/1449;margin-top:40px;background:#02070a}
.poster picture,.poster img{position:absolute;inset:0;width:100%;height:100%}
.poster img{object-fit:cover;filter:brightness(.85);transition:filter 1.2s var(--ease)}
.poster:hover img{filter:brightness(1)}
.poster::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 55% at var(--mx,50%) var(--my,50%),rgba(180,225,255,.14),transparent 70%);opacity:0;transition:opacity .6s}
.poster:hover::after{opacity:1}
.poster.reveal{clip-path:inset(10% 6% 10% 6%);transform:none;transition:clip-path 1.8s var(--ease),opacity 1.2s var(--ease)}
.poster.reveal.is-in{clip-path:inset(0)}
.hero__meta em{font-style:normal;color:var(--warm)}
.hero__meta:hover{color:var(--warm)}
.mail{display:inline-block;font-size:clamp(34px,3.4vw,58px);font-weight:400;letter-spacing:.02em;position:relative;padding-bottom:6px}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .8s var(--ease)}
.mail:hover{color:var(--warm)}
.mail:hover::after{animation:underline 1s var(--ease)}
@keyframes underline{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.footer{display:flex;justify-content:space-between;padding:40px 48px 44px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);max-width:1600px;margin:0 auto}
.footer a:hover{color:var(--warm)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease),clip-path 1.6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.title.reveal{clip-path:inset(0 0 100% 0);transform:translateY(60px)}
.title.reveal.is-in{clip-path:inset(0 0 -20% 0);transform:none}

/* film grain (inline SVG noise, zero network) */
.grain{position:fixed;inset:-6%;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-3%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

@media (prefers-reduced-motion:reduce){
  .fog,.grain,.sheet::before,.glow--neon,.glow--porch,.loader__mark,.hero__scroll i::after{animation:none}
  .reveal{transition-duration:.01s}
  html{scroll-behavior:auto}
}

/* ============================================================
   Portrait screens (phones, tablets held upright)
   The 16:9 scene is sized by width and anchored to the bottom so the
   sign, porch and stranger stay in frame; the dark sky above holds the logo.
   ============================================================ */
@media (max-aspect-ratio: 3/4){
  .viewport{background:var(--sky)}
  .stage{width:250vw;left:calc(50vw - 250vw * .665);top:auto;bottom:var(--bar);transform:none;overflow:hidden}
  .stage::after{content:"";position:absolute;left:0;right:0;top:-2px;height:28%;background:linear-gradient(var(--sky),transparent);pointer-events:none}
  .stage::before{content:"";position:absolute;left:0;right:0;bottom:-30vh;height:calc(30vh + 2px);background:var(--ground);display:none;pointer-events:none}
  .layer{transform-origin:66.5% 40%}
  .vignette{background:linear-gradient(#020404 0,rgba(2,4,4,.75) 9%,transparent 30%),radial-gradient(140% 80% at 55% 55%,transparent 50%,rgba(2,4,4,.5) 100%),linear-gradient(transparent 75%,rgba(3,5,5,.6))}
}
:root{--sky:#22404b;--ground:#12191b}

/* ============================================================
   Small screens: single column
   ============================================================ */
@media (max-width: 1100px){
  .block{grid-template-columns:1fr 3fr;gap:32px;padding:140px 32px 110px}
  .nav{padding:26px 32px}
  .hero__ui{inset:auto 32px calc(32px + var(--bar))}
}
@media (max-width: 760px){
  body{font-size:16px}
  .nav{padding:18px 20px}
  .nav__links{display:none}
  .nav__word{font-size:34px}
  .nav__sub{font-size:10px;letter-spacing:.34em}
  .nav.is-compact .nav__word{font-size:22px}
  .hero__ui{inset:auto 20px calc(22px + var(--bar));font-size:10px;grid-template-columns:1fr auto}
  .hero__note{display:none}
  .hero__scroll{justify-self:start;flex-direction:row;gap:12px}
  .hero__scroll i{height:28px}
  .block{grid-template-columns:1fr;gap:18px;padding:88px 22px 76px}
  .block:first-child{padding-top:10vh}
  .block__label{position:static;padding-top:0;font-size:10px}
  .title,.title--xl{font-size:clamp(44px,13.5vw,72px);line-height:1;margin-bottom:28px}
  .lead{font-size:18px;line-height:1.6;margin-bottom:36px}
  .facts{grid-template-columns:1fr}
  .facts li{padding:16px 0 14px;border-bottom:1px solid var(--line);flex-direction:row;justify-content:space-between;align-items:baseline;gap:16px}
  .facts span{font-size:18px;text-align:right}
  .poster{grid-column:1;margin-top:8px}
  .mail{font-size:clamp(26px,8vw,40px)}
  .footer{flex-direction:column;gap:14px;padding:28px 22px calc(32px + env(safe-area-inset-bottom))}
  .grain{opacity:.05}
}