/* ============================================================
   CHRONOSCOPY — film microsite
   Palette: deep blue-black base · chrono-teal + anomaly-pink
   ============================================================ */

:root{
  --chrono-h: 225;
  --anomaly-h: 345;

  /* surfaces */
  --bg-0: oklch(0.085 0.018 262);
  --bg-1: oklch(0.125 0.028 258);
  --bg-2: oklch(0.175 0.036 256);

  /* ink */
  --ink:       oklch(0.965 0.008 250);
  --ink-dim:   oklch(0.74 0.018 250);
  --ink-faint: oklch(0.55 0.02 252);
  --line:      oklch(0.42 0.03 255 / 0.35);

  /* accents */
  --chrono:        oklch(0.80 0.13 var(--chrono-h));
  --chrono-bright: oklch(0.88 0.16 calc(var(--chrono-h) - 5));
  --anomaly:        oklch(0.70 0.21 var(--anomaly-h));
  --anomaly-bright: oklch(0.80 0.24 calc(var(--anomaly-h) + 6));

  --maxw: 1380px;
  --pad: clamp(1.25rem, 5vw, 6rem);

  --font-disp: "Bricolage Grotesque", sans-serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg-0);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--anomaly); color:var(--bg-0); }

.mono{ font-family:var(--font-mono); font-weight:400; letter-spacing:0.12em;
  text-transform:uppercase; font-variant-numeric:tabular-nums; }

/* ───────── grain + vignette ───────── */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 0.5s steps(2) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 50%{transform:translate(-3%,2%)} 100%{transform:translate(2%,-2%)} }
.vignette{
  position:fixed; inset:0; z-index:8000; pointer-events:none;
  background:radial-gradient(130% 110% at 50% 40%, transparent 55%, oklch(0.04 0.02 262 / 0.7) 100%);
}

/* ───────── orb cursor ───────── */
@media (hover:hover) and (pointer:fine){ *{ cursor:none !important; } }
.cursor{
  position:fixed; top:0; left:0; width:42px; height:42px; z-index:9999;
  background:url("../assets/img/orb-cursor.png") center/contain no-repeat;
  pointer-events:none; transform:translate(-50%,-50%); opacity:0;
  filter:drop-shadow(0 0 10px oklch(0.72 0.16 300 / 0.55));
  transition:width .3s var(--ease), height .3s var(--ease), filter .3s var(--ease), opacity .3s;
}
.cursor.is-active{ width:66px; height:66px;
  filter:drop-shadow(0 0 20px oklch(0.8 0.2 320 / 0.85)) saturate(1.2); }
@media (hover:none){ .cursor{ display:none; } }

/* ───────── loader ───────── */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--bg-0);
  display:grid; place-items:center;
}
.loader__inner{ width:min(520px,80vw); text-align:left; }
.loader__readout{ display:flex; justify-content:space-between; font-size:0.72rem;
  color:var(--ink-dim); margin-bottom:0.8rem; }
.loader__bar{ height:1px; background:var(--line); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--chrono), var(--anomaly)); }
.loader__word{ margin-top:1.4rem; font-size:clamp(0.8rem,2.6vw,1.15rem);
  letter-spacing:0.5em; color:var(--ink-faint); }

/* ───────── HUD ───────── */
.hud{
  position:fixed; top:0; left:0; width:100%; z-index:5000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad); mix-blend-mode:difference;
}
.hud__brand{ font-size:0.8rem; letter-spacing:0.34em; color:#fff; }
.hud__nav{ display:flex; gap:1.6rem; align-items:center; font-size:0.66rem; }
.hud__nav a{ color:#fff; opacity:0.7; transition:opacity .3s; }
.hud__nav a:hover{ opacity:1; }
.hud__cta{ opacity:1 !important; border:1px solid rgba(255,255,255,.45);
  padding:0.45em 0.9em; border-radius:2em; }
.hud__clock{ font-size:0.66rem; color:#fff; opacity:0.6; }
@media (max-width:880px){ .hud__nav, .hud__clock{ display:none; } }

/* ───────── HERO ───────── */
.hero{ position:relative; height:100svh; min-height:640px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__img{ scale:1.18; filter:saturate(1.05) contrast(1.05); }
.hero__scan{ position:absolute; inset:0; pointer-events:none; opacity:0.35;
  background:repeating-linear-gradient(180deg, transparent 0 3px, oklch(0.04 0 0 / 0.5) 3px 4px); }
.hero__grad{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, oklch(0.06 0.02 262 / 0.55) 0%, transparent 28%, transparent 45%, var(--bg-0) 98%),
    radial-gradient(80% 60% at 75% 30%, oklch(0.7 0.2 345 / 0.16), transparent 60%),
    linear-gradient(90deg, oklch(0.06 0.02 262 / 0.7), transparent 60%); }
.hero__orb{ position:absolute; z-index:2; width:clamp(140px,17vw,300px); aspect-ratio:1;
  right:clamp(1.5rem,7vw,9rem); top:clamp(12vh,16vh,20vh); pointer-events:none;
  filter:drop-shadow(0 0 45px oklch(0.7 0.18 300 / 0.5)) drop-shadow(0 0 90px oklch(0.6 0.16 280 / 0.3));
  animation:orbFloat 9s ease-in-out infinite; will-change:transform; }
.hero__orb img{ width:100%; height:100%; object-fit:contain; }
@keyframes orbFloat{ 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-26px) scale(1.04) } }
@media (max-width:880px){ .hero__orb{ width:130px; right:1.2rem; top:9vh; opacity:0.85; } }
@media (prefers-reduced-motion:reduce){ .hero__orb{ animation:none; } }

.hero__content{ position:relative; z-index:2; padding:0 var(--pad) clamp(3rem,7vh,6rem); }
.hero__meta{ display:flex; align-items:center; gap:0.9rem; font-size:0.68rem;
  color:var(--chrono-bright); margin-bottom:1.4rem; }
.hero__meta i{ width:4px; height:4px; background:var(--anomaly); border-radius:50%; }
.hero__title{ font-family:var(--font-disp); font-weight:250;
  font-size:clamp(2.7rem, 12.5vw, 12rem); line-height:0.9; letter-spacing:0.02em;
  text-transform:uppercase; }
.hero__title .char{ display:inline-block; will-change:transform,opacity; }
.hero__tag{ font-family:var(--font-disp); font-weight:300;
  font-size:clamp(1rem,3.4vw,1.9rem); line-height:1.3; margin-top:1.2rem;
  color:var(--ink); max-width:24ch; }
.hero__tag .clip{ display:block; overflow:hidden; }
.hero__tag .clip span{ display:block; }
.hero__tag .clip:last-child{ color:var(--ink-dim); }
.hero__actions{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero__scroll{ position:absolute; right:var(--pad); bottom:clamp(3rem,7vh,6rem); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:0.7rem;
  font-size:0.6rem; color:var(--ink-dim); }
.hero__scroll-line{ width:1px; height:48px; background:linear-gradient(var(--chrono),transparent);
  animation:drop 1.8s var(--ease) infinite; transform-origin:top; }
@keyframes drop{ 0%{transform:scaleY(0)} 40%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }
@media (max-width:880px){ .hero__scroll{ display:none; } }
@media (max-width:560px){ .hero__title{ font-size:11vw; letter-spacing:0; } }

/* ───────── buttons ───────── */
.btn{ position:relative; display:inline-flex; align-items:center; gap:0.65em;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; padding:0.95em 1.5em; border-radius:2.4em;
  border:1px solid var(--line); color:var(--ink); cursor:pointer;
  background:oklch(0.13 0.03 258 / 0.4); backdrop-filter:blur(6px);
  transition:border-color .35s, color .35s, background .35s, transform .3s var(--ease); }
.btn:hover{ border-color:var(--chrono); transform:translateY(-2px); }
.btn--primary{ background:var(--ink); color:var(--bg-0); border-color:var(--ink); }
.btn--primary:hover{ background:var(--chrono-bright); border-color:var(--chrono-bright); color:var(--bg-0); }
.btn--ghost{ background:transparent; }
.btn--lg{ font-size:0.84rem; padding:1.2em 2em; }
.btn__dot{ width:7px; height:7px; border-radius:50%; background:var(--anomaly);
  box-shadow:0 0 12px var(--anomaly-bright); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.7)} }

/* bright, glowing teaser button */
.btn--teaser{ color:#fff; border:none; font-weight:700; letter-spacing:0.16em;
  background:linear-gradient(110deg, var(--chrono-bright), var(--anomaly-bright));
  background-size:200% 100%;
  box-shadow:0 0 0 1px oklch(0.95 0.05 320 / 0.4),
             0 6px 26px oklch(0.7 0.21 345 / 0.5),
             0 6px 40px oklch(0.8 0.13 225 / 0.4);
  animation:teaserGlow 3.2s ease-in-out infinite; }
.btn--teaser:hover{ color:#fff; transform:translateY(-3px) scale(1.02);
  background-position:100% 0;
  box-shadow:0 0 0 1px oklch(0.95 0.05 320 / 0.6),
             0 10px 34px oklch(0.7 0.21 345 / 0.65),
             0 10px 54px oklch(0.8 0.13 225 / 0.55); }
.btn--teaser .btn__dot{ background:#fff; box-shadow:0 0 14px #fff; }
@keyframes teaserGlow{
  0%,100%{ filter:brightness(1); box-shadow:0 0 0 1px oklch(0.95 0.05 320 / 0.4),
           0 6px 26px oklch(0.7 0.21 345 / 0.45), 0 6px 40px oklch(0.8 0.13 225 / 0.35); }
  50%{ filter:brightness(1.12); box-shadow:0 0 0 1px oklch(0.97 0.06 320 / 0.7),
       0 8px 34px oklch(0.72 0.22 345 / 0.7), 0 8px 56px oklch(0.82 0.14 225 / 0.55); }
}
@media (prefers-reduced-motion:reduce){ .btn--teaser{ animation:none; } }

/* ───────── shared section bits ───────── */
.sec-index{ display:inline-block; font-size:0.66rem; color:var(--chrono);
  margin-bottom:1.6rem; padding-left:1.5rem; position:relative; }
.sec-index::before{ content:""; position:absolute; left:0; top:0.5em; width:1rem;
  height:1px; background:var(--anomaly); }
.h2{ font-family:var(--font-disp); font-weight:300;
  font-size:clamp(2rem,6vw,4.6rem); line-height:0.98; letter-spacing:-0.01em; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--ink); }
section p{ color:var(--ink-dim); font-size:clamp(1rem,1.3vw,1.12rem); margin-top:1.1rem; }
section p strong{ color:var(--ink); font-weight:500; }
section p em{ color:var(--anomaly-bright); font-style:italic; }

/* ───────── LOGLINE ───────── */
.logline{ padding:clamp(7rem,16vh,14rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.logline__big{ font-family:var(--font-disp); font-weight:300;
  font-size:clamp(1.7rem,5.2vw,4.2rem); line-height:1.06; letter-spacing:-0.015em;
  color:var(--ink-faint); max-width:18ch; }
.logline__big .w{ display:inline-block; color:var(--ink); }
.logline__big em{ color:var(--anomaly-bright); font-style:italic; }
.paradox{ margin-top:clamp(3.5rem,8vh,7rem); max-width:62ch; margin-left:auto;
  padding-left:clamp(1.5rem,4vw,4rem); border-left:1px solid var(--line); }
.paradox__label{ font-size:0.66rem; color:var(--anomaly); }
.paradox__text{ font-family:var(--font-body); font-size:clamp(1.15rem,2.4vw,1.7rem);
  line-height:1.45; color:var(--ink-dim); margin-top:1.2rem; }
.paradox__text strong{ color:var(--anomaly-bright); font-weight:500; }

/* ───────── SYNOPSIS ───────── */
.synopsis{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,6rem);
  align-items:center; max-width:var(--maxw); margin:0 auto;
  padding:clamp(4rem,10vh,9rem) var(--pad); }
.synopsis__media{ position:relative; aspect-ratio:3/4; overflow:hidden;
  border:1px solid var(--line); }
.synopsis__media img{ filter:grayscale(0.15) contrast(1.05); scale:1.16; }
.caption{ position:absolute; left:1rem; bottom:1rem; font-size:0.6rem;
  color:var(--ink); background:oklch(0.08 0.02 262 / 0.7); padding:0.45em 0.7em;
  backdrop-filter:blur(4px); }
.pull{ font-family:var(--font-disp); font-weight:300;
  font-size:clamp(1.5rem,3.6vw,2.6rem); line-height:1.1; color:var(--ink);
  margin-top:2rem; padding-top:2rem; border-top:1px solid var(--line); }
.pull span{ color:var(--anomaly-bright); font-style:italic; }
@media (max-width:820px){ .synopsis{ grid-template-columns:1fr; } }

/* ───────── WORLD ───────── */
.world{ padding:clamp(4rem,10vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.world__head{ max-width:62ch; margin-bottom:clamp(2.5rem,6vh,5rem); }
.world__sub{ max-width:54ch; }
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.7rem,1.4vw,1.2rem);
  grid-auto-flow:dense; }
.g{ position:relative; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line);
  background:var(--bg-1); }
.g img{ scale:1.18; transition:scale 1s var(--ease), filter 1s var(--ease);
  filter:saturate(0.92); }
.g:hover img{ scale:1.24; filter:saturate(1.15); }
.g figcaption{ position:absolute; left:0.9rem; bottom:0.9rem; font-size:0.58rem;
  color:var(--ink); opacity:0; transform:translateY(8px); transition:.4s var(--ease);
  background:oklch(0.08 0.02 262 / 0.6); padding:0.4em 0.6em; backdrop-filter:blur(3px); }
.g:hover figcaption{ opacity:1; transform:none; }
.g--tall{ grid-row:span 2; aspect-ratio:3/4; }
.g--core img{ object-position:57% 26%; }
.g--wide{ grid-column:span 2; aspect-ratio:16/9; }
@media (max-width:820px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .g--wide{ grid-column:span 2; } .g--tall{ grid-row:span 1; aspect-ratio:4/3; }
}

/* ───────── WHY ───────── */
.why{ padding:clamp(4rem,10vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.why__head{ margin-bottom:clamp(2.5rem,6vh,4rem); }
.why__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(0.8rem,1.6vw,1.4rem); }
.card{ position:relative; padding:clamp(1.6rem,3vw,2.6rem); border:1px solid var(--line);
  background:linear-gradient(160deg, var(--bg-1), var(--bg-0));
  border-radius:4px; overflow:hidden; transition:border-color .4s, transform .4s var(--ease); }
.card::after{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background:radial-gradient(60% 80% at 0% 0%, oklch(0.7 0.2 345 / 0.1), transparent 70%); }
.card:hover{ border-color:var(--anomaly); }
.card:hover::after{ opacity:1; }
.card__no{ font-size:0.7rem; color:var(--anomaly); }
.card h3{ font-family:var(--font-disp); font-weight:500; font-size:clamp(1.2rem,2.4vw,1.7rem);
  margin:0.8rem 0 0; line-height:1.1; }
.card p{ margin-top:0.8rem; font-size:1rem; }
@media (max-width:820px){ .why__grid{ grid-template-columns:1fr; } }

.stats{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); margin-top:clamp(2.5rem,5vh,4rem); border:1px solid var(--line); }
.stat{ background:var(--bg-0); padding:clamp(1.6rem,3vw,2.4rem) 1.2rem; text-align:center; }
.stat__num{ display:block; font-size:clamp(2.2rem,5vw,3.6rem); font-weight:700;
  line-height:1; color:var(--ink); letter-spacing:-0.02em; }
.stat__lbl{ display:block; font-size:0.58rem; color:var(--ink-faint); margin-top:0.7rem; }
@media (max-width:680px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ───────── TEAM ───────── */
.team{ padding:clamp(4rem,10vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; }
.team__head{ margin-bottom:clamp(2rem,5vh,3.5rem); }
.roster{ list-style:none; border-top:1px solid var(--line); }
.roster__row{ display:grid; grid-template-columns:1.2fr 1.3fr 1.5fr; align-items:baseline;
  gap:1.5rem; padding:clamp(1.4rem,3vh,2.4rem) 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding .4s var(--ease); }
.roster__row::before{ content:""; position:absolute; left:-2vw; top:0; bottom:0; width:2px;
  background:var(--anomaly); transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease); }
.roster__row:hover{ padding-left:1.2rem; }
.roster__row:hover::before{ transform:scaleY(1); }
.roster__role{ font-size:0.62rem; color:var(--chrono); }
.roster__name{ font-family:var(--font-disp); font-weight:400; font-size:clamp(1.4rem,3.4vw,2.6rem);
  line-height:1; }
.roster__cred{ font-size:0.95rem; color:var(--ink-dim); }
@media (max-width:760px){ .roster__row{ grid-template-columns:1fr; gap:0.4rem; } }

/* ───────── PACKAGE ───────── */
.package{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-1); }
.package__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,6vh,4rem) var(--pad);
  display:flex; align-items:center; gap:clamp(1.5rem,4vw,4rem); flex-wrap:wrap; }
.package__inner .sec-index{ margin:0; }
.package__list{ display:flex; gap:0.7rem; flex-wrap:wrap; }
.pill{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line);
  padding:0.7em 1.2em; border-radius:2em; transition:.35s var(--ease);
  background:transparent; appearance:none; -webkit-appearance:none;
  display:inline-block; line-height:1; }
.pill:hover{ color:var(--bg-0); background:var(--chrono-bright); border-color:var(--chrono-bright);
  transform:translateY(-2px); }

/* ───────── CONTACT ───────── */
.contact{ position:relative; overflow:hidden; padding:clamp(6rem,16vh,13rem) var(--pad) 0; }
.contact__bg{ position:absolute; inset:0; z-index:0; }
.contact__bg img{ scale:1.2; filter:brightness(0.4) saturate(1.1); }
.contact__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, oklch(0.085 0.018 262 / 0.7), oklch(0.085 0.018 262 / 0.95)); }
.contact__inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; text-align:center; }
.contact__kicker{ font-size:0.66rem; color:var(--chrono-bright); }
.contact__title{ font-family:var(--font-disp); font-weight:250;
  font-size:clamp(2.4rem,8vw,7rem); line-height:0.96; text-transform:uppercase;
  letter-spacing:0.01em; margin:1.4rem 0 2.4rem; }
.contact__cta{ display:flex; justify-content:center; }
.contact__rows{ display:flex; justify-content:center; gap:clamp(1rem,4vw,3rem);
  flex-wrap:wrap; margin-top:2.4rem; font-size:0.7rem; color:var(--ink-dim); }
.contact__rows a:hover{ color:var(--chrono-bright); }
.foot{ position:relative; z-index:1; max-width:var(--maxw); margin:clamp(5rem,12vh,9rem) auto 0;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.6rem 0; border-top:1px solid var(--line); font-size:0.6rem; color:var(--ink-faint); }

/* ───────── LIGHTBOX ───────── */
.lb{ position:fixed; inset:0; z-index:9800; background:oklch(0.04 0.02 262 / 0.94);
  backdrop-filter:blur(10px); display:grid; place-items:center; opacity:0;
  pointer-events:none; transition:opacity .4s; padding:var(--pad); }
.lb.is-open{ opacity:1; pointer-events:auto; }
.lb__close{ position:absolute; top:1.4rem; right:var(--pad); font-size:0.7rem;
  color:var(--ink); cursor:pointer; background:none; border:1px solid var(--line);
  padding:0.6em 1em; border-radius:2em; }
.lb__close:hover{ border-color:var(--anomaly); }
.lb__frame{ width:min(1100px,100%); aspect-ratio:16/9; border:1px solid var(--line); overflow:hidden; }
.lb__embed{ width:100%; height:100%; }
.lb__embed iframe{ width:100%; height:100%; border:0; }

/* ───────── reveal states ───────── */
.reveal-up{ opacity:0; transform:translateY(28px); }
[data-reveal-img]{ clip-path:inset(0 0 100% 0); }

@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; } .btn__dot{ animation:none; } .hero__scroll-line{ animation:none; }
  .reveal-up{ opacity:1; transform:none; } [data-reveal-img]{ clip-path:none; }
}