/* Sitewide Properties, the cinematic layer.
   ---------------------------------------------------------------------------
   Photography, scroll choreography, and depth. Loads after site.css and only
   adds; it never overrides the token system. Every animation in here has a
   reduced-motion kill switch at the bottom, and every text-over-photo surface
   carries a scrim that keeps white text over 4.5:1 regardless of the image. */

/* ---- reveal choreography ------------------------------------------------- */
/* Elements start hidden ONLY when the html.js class is present, so content is
   fully visible with JavaScript disabled. Stagger via --d custom property. */
html.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms)}
html.js .rv.in{opacity:1;transform:none}
/* Masked line reveal: outer clips, inner slides up. Transform-based because it
   composites reliably everywhere, where clip-path transitions do not. */
.rv-line{display:block;overflow:hidden}
html.js .rv-line>span{display:block;transform:translateY(115%);
  transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
html.js .rv-line.in>span{transform:none}

/* ---- hero: full-bleed graded photography --------------------------------- */
.hero-cine{position:relative;min-height:92vh;display:flex;align-items:flex-end;
  color:#F1F4F9;overflow:hidden;background:#0D121C}
.hero-cine .ph{position:absolute;inset:-6% 0;z-index:0;
  background-image:url('img/entrance.jpg');background-size:cover;background-position:center 38%}
html.js .hero-cine .ph{animation:kenburns 26s ease-out both}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1.0)}}
@media(max-width:700px){.hero-cine .ph{background-image:url('img/entrance-800.jpg')}}
/* The scrim is load-bearing for contrast: ink floor rises to .88 where text sits. */
.hero-cine::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(13,18,28,.42) 0%,rgba(13,18,28,.30) 40%,rgba(13,18,28,.88) 78%,#0D121C 100%)}
.hero-cine .wrap{position:relative;z-index:2;padding-top:19vh;padding-bottom:64px;width:100%}
.hero-cine h1{color:#fff;font-size:clamp(40px,6.6vw,88px);max-width:15ch;line-height:1.02;
  letter-spacing:-.03em}
.hero-cine .lede{color:rgba(241,244,249,.85);max-width:56ch;margin-top:26px}
.hero-cine .eyebrow{color:var(--halo)}
.hero-cine .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.hero-cine .btn-primary{background:var(--halo);color:#101722}
.hero-cine .btn-primary:hover{background:var(--halo-lift)}
.hero-cine .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.hero-cine .btn-ghost:hover{background:rgba(255,255,255,.09)}
.scrollcue{position:absolute;right:clamp(20px,5vw,58px);bottom:26px;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(241,244,249,.55);writing-mode:vertical-rl;display:flex;align-items:center;gap:10px}
.scrollcue::after{content:"";width:1px;height:44px;background:linear-gradient(180deg,var(--halo),transparent)}
html.js .scrollcue::after{animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---- marquee: the gate checks as a ticker --------------------------------- */
.marquee{background:#0D121C;border-block:1px solid rgba(210,184,127,.22);
  overflow:hidden;padding:15px 0;position:relative}
.marquee .track{display:flex;gap:0;width:max-content}
html.js .marquee .track{animation:marq 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee span{font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(241,244,249,.6);padding:0 26px;white-space:nowrap}
.marquee span::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--halo);margin-left:52px;vertical-align:middle;opacity:.75}

/* ---- editorial split: photo beside copy ----------------------------------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split.flip{grid-template-columns:1fr 1.05fr}
.split.flip .media{order:2}
@media(max-width:880px){.split,.split.flip{grid-template-columns:1fr}.split.flip .media{order:0}}
.media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.6}
.media.wide img{aspect-ratio:16/10}
html.js .media img{transform:scale(1.09);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
html.js .rv.in .media img,html.js .media.rv.in img{transform:scale(1.0)}
/* champagne hairline sits on the photo like the datum on the buildings */
.media::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--halo);opacity:.85;mix-blend-mode:screen;pointer-events:none}
.media .tag{position:absolute;left:18px;bottom:16px;z-index:2;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#F1F4F9;
  background:rgba(13,18,28,.72);backdrop-filter:blur(8px);padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14)}

/* ---- stats band with count-up --------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.stat{padding:26px 4px 22px;border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(44px,5.6vw,72px);letter-spacing:-.045em;line-height:.9;
  color:var(--accent-text-lg);font-variant-numeric:tabular-nums}
.stat b sub{font-size:.38em;letter-spacing:0;vertical-align:baseline;color:var(--muted)}
.stat span{display:block;margin-top:12px;font-size:14px;color:var(--soft);max-width:26ch}

/* ---- photo cards: glass over graded photography --------------------------- */
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:380px;
  display:flex;align-items:flex-end;box-shadow:var(--shadow-sm);color:#F1F4F9}
.pcard .bg{position:absolute;inset:0;background-size:cover;background-position:center}
html.js .pcard .bg{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.pcard:hover .bg{transform:scale(1.05)}
.pcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,18,28,.18) 30%,rgba(13,18,28,.9) 78%)}
.pcard .in{position:relative;z-index:2;padding:24px;width:100%;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.16)}
.pcard .in::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.pcard h3{color:#fff;margin-bottom:8px}
.pcard p{color:rgba(241,244,249,.82);font-size:14.5px;max-width:none}
.pcard .n{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--halo);
  display:block;margin-bottom:10px}

/* ---- terminal typewriter -------------------------------------------------- */
html.js .term.tw pre span.row{display:block;opacity:0;transform:translateX(-6px);
  transition:opacity .01s steps(1),transform .3s ease}
html.js .term.tw.play pre span.row{opacity:1;transform:none}
.term .cursor{display:inline-block;width:8px;height:15px;background:#DFCBA0;
  vertical-align:-2px;margin-left:2px}
html.js .term .cursor{animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- closing CTA over photography ----------------------------------------- */
.close-cta{position:relative;color:#F1F4F9;overflow:hidden;background:#0D121C}
.close-cta .ph{position:absolute;inset:0;background-image:url('img/night.jpg');
  background-size:cover;background-position:center 60%}
@media(max-width:700px){.close-cta .ph{background-image:url('img/night-800.jpg')}}
.close-cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,18,28,.94) 0%,rgba(13,18,28,.72) 55%,rgba(13,18,28,.45) 100%)}
.close-cta .wrap{position:relative;z-index:2}
.close-cta h2{color:#fff;max-width:20ch}
.close-cta .lede{color:rgba(241,244,249,.85)}
.close-cta .btn-primary{background:var(--halo);color:#101722}
.close-cta .btn-primary:hover{background:var(--halo-lift)}

/* ---- inner-page photo band ------------------------------------------------ */
.band{position:relative;min-height:44vh;display:flex;align-items:flex-end;color:#F1F4F9;
  overflow:hidden;background:#0D121C}
.band .ph{position:absolute;inset:-6% 0;background-size:cover;background-position:center}
html.js .band .ph{animation:kenburns 22s ease-out both}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,18,28,.5) 0%,rgba(13,18,28,.9) 88%)}
.band .wrap{position:relative;z-index:2;padding-top:15vh;padding-bottom:44px;width:100%}
.band h1{color:#fff}
.band .eyebrow{color:var(--halo)}
.band .lede{color:rgba(241,244,249,.85)}
.band .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.band .btn-primary{background:var(--halo);color:#101722}
.band .btn-primary:hover{background:var(--halo-lift)}
.band .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.band .btn-ghost:hover{background:rgba(255,255,255,.09)}

/* ---- grand footer wordmark ------------------------------------------------ */
.fword{display:block;margin:54px 0 6px;opacity:.98}
.fword img{width:min(760px,92%);height:auto;display:block}

/* ---- parallax hooks ------------------------------------------------------- */
html.js [data-para]{will-change:transform}

/* ---- reduced motion: everything lands, nothing moves ---------------------- */
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  html.js .rv-line>span{transform:none;transition:none}
  html.js .hero-cine .ph,html.js .band .ph{animation:none}
  html.js .marquee .track{animation:none;flex-wrap:wrap;width:auto}
  html.js .media img,.pcard .bg{transition:none;transform:none}
  html.js .term.tw pre span.row{opacity:1;transform:none}
  html.js .scrollcue::after,.term .cursor{animation:none}
}