/* ============================================================
   TW Projects — Cinematic Redesign · CORE
   Tokens · Reset · Typography · Layout · Chrome · Motion
   ============================================================ */

:root {
  /* DARK (default journey base) */
  --bg-base: #06080F;
  --bg-elevated: #0B1020;
  --bg-overlay: #0F1A30;
  --fg: #F4F8FF;
  --fg-2: rgba(244, 248, 255, 0.66);
  --fg-3: rgba(244, 248, 255, 0.40);
  --line: rgba(122, 178, 255, 0.12);
  --line-2: rgba(122, 178, 255, 0.24);
  --accent: #5BA8FF;
  --accent-bright: #BFE0FF;
  --accent-deep: #1E3A8A;
  --accent-soft: rgba(91, 168, 255, 0.16);
  --glass: rgba(13, 21, 42, 0.45);
  --glass-2: rgba(13, 21, 42, 0.62);
  --glow: 1;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Soft background-coloured halo that hugs text so it stays legible over the
     moving 3D scene. Invisible over the plain bg; only "appears" when the bright
     scene passes behind. Theme-aware via --bg-base. Tune intensity here. */
  --text-halo: 0 0 16px var(--bg-base), 0 0 6px var(--bg-base);
}

html[data-theme="light"] {
  --bg-base: #FAFBFD;
  --bg-elevated: #FFFFFF;
  --bg-overlay: #EEF3FA;
  --fg: #0A1428;
  --fg-2: rgba(10, 20, 40, 0.70);
  --fg-3: rgba(10, 20, 40, 0.45);
  --line: rgba(30, 58, 138, 0.12);
  --line-2: rgba(30, 58, 138, 0.22);
  --accent: #1E3A8A;
  --accent-bright: #2E6FE0;
  --accent-deep: #06224D;
  --accent-soft: rgba(30, 58, 138, 0.07);
  --glass: rgba(255, 255, 255, 0.55);
  --glass-2: rgba(255, 255, 255, 0.74);
  --glow: 0.34;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg-base);
  color: var(--fg);
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 1.1s var(--ease), color 0.7s var(--ease);
}

/* Keep content text legible over the animated 3D scene (halo defined above).
   Only targets text that sits directly on the background — not cards/forms. */
.hero h1,
.hero .lede,
.scroll-cue,
.statement-line,
.statement-sub,
.mono-label,
.headline,
.approach-body h3,
.approach-body p,
.approach-more,
.usp-list li,
.phase-body h3,
.phase-body p,
.loop-caption {
  text-shadow: var(--text-halo);
}

/* The 3D canvas + atmosphere sit behind everything */
#scene3d {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
  display: block;
}
.atmo {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
}
/* subtle vignette + grain to seat content over the 3D */
.atmo::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--bg-base) 130%);
  opacity: 0.7;
}
.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: calc(var(--glow) * 0.9);
  transition: opacity 1.1s var(--ease);
}

main, header.site, footer.site { position: relative; z-index: 2; }

/* ---------- Typography ---------- */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }

h1, h2, h3, h4 { font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; }

.display {
  font-size: clamp(3.1rem, 11vw, 10rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.headline {
  font-size: clamp(2.3rem, 5.6vw, 4.6rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 56ch;
  font-weight: 400;
}
.accent-word { color: var(--accent-bright); }
html[data-theme="light"] .accent-word { color: var(--accent); }

.mono-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

section { position: relative; padding: clamp(90px, 14vh, 190px) 0; }

.section-head { position: relative; margin-bottom: clamp(44px, 7vw, 84px); }
.section-index {
  position: absolute; right: 0; top: -0.3em;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(5rem, 16vw, 13rem);
  line-height: 1; color: var(--accent);
  opacity: 0.10; pointer-events: none; user-select: none; z-index: -1;
}
.section-head .mono-label { margin-bottom: 22px; display: inline-block; }
.section-head .headline { max-width: 18ch; }

/* glass surface — lets the 3D glow bleed through content */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--sans); font-size: 0.96rem; font-weight: 500;
  padding: 0.92em 1.5em; border-radius: 100px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.5s var(--ease), background 0.4s var(--ease),
              box-shadow 0.5s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
  position: relative; white-space: nowrap;
}
.btn .arrow { transition: transform 0.5s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn-primary {
  background: var(--accent); color: #04122e;
  box-shadow: 0 0 0 1px var(--accent), 0 18px 50px -16px var(--accent);
}
html[data-theme="light"] .btn-primary { color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent-bright), 0 26px 70px -18px var(--accent); }
.btn-ghost {
  background: transparent; color: var(--fg); border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-bright); transform: translateY(-2px); }
html[data-theme="light"] .btn-ghost:hover { color: var(--accent); }

/* ---------- Header ---------- */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
header.site.scrolled {
  background: color-mix(in oklab, var(--bg-base) 72%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
header .nav { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand-mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--fg); }
.brand-mark img { width: 30px; height: 30px; object-fit: contain; }
.brand-tag-line, .brand-mark span { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 30px; list-style: none; margin-left: auto; }
.nav-links a {
  color: var(--fg-2); text-decoration: none; font-size: 0.92rem; font-weight: 450;
  position: relative; transition: color 0.3s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0;
  background: var(--accent); transition: width 0.4s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { width: 100%; }
.theme-toggle {
  background: transparent; border: 1px solid var(--line-2); color: var(--fg);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; transition: border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.theme-toggle:hover { border-color: var(--accent); transform: rotate(-15deg); }
.theme-toggle svg { width: 17px; height: 17px; }
.icon-sun { display: none; }
html[data-theme="light"] .icon-moon { display: none; }
html[data-theme="light"] .icon-sun { display: block; }
.header-cta { padding: 0.7em 1.2em; font-size: 0.9rem; }

/* Hamburger — hidden on desktop, shown ≤940px */
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--line-2);
  color: var(--fg); width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin-left: 4px; transition: border-color 0.3s var(--ease);
}
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle-bar {
  display: block; width: 16px; height: 1.6px; background: currentColor; border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
header.menu-open .nav-toggle-bar:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
header.menu-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
header.menu-open .nav-toggle-bar:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  .header-cta { margin-left: auto; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0; padding: 6px 0 14px;
    background: color-mix(in oklab, var(--bg-base) 94%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
    max-height: calc(100dvh - 64px); overflow-y: auto;
  }
  header.menu-open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 13px 24px; font-size: 1rem; color: var(--fg); }
  .nav-links a::after { display: none; }
}
body.nav-locked { overflow: hidden; }
@media (max-width: 600px) {
  header .nav { gap: 12px; height: 64px; }
  .brand-mark img { width: 26px; height: 26px; }
  .brand-tag-line, .brand-mark span { font-size: 0.92rem; white-space: nowrap; }
  .theme-toggle { width: 34px; height: 34px; }
  .header-cta { padding: 0.58em 0.9em; font-size: 0.8rem; }
}
@media (max-width: 480px) {
  /* phones: logo-only brand so the row always fits next to the CTA */
  .brand-mark .brand-tag, .brand-mark > span { display: none; }
}

/* ---------- Motion primitives ---------- */
/* zoom-parallax feel: every revealed block eases up AND scales in from slightly small */
.reveal { opacity: 0; transform: translateY(34px) scale(0.965); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal.in { opacity: 1; transform: none; }

.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.line-inner { display: block; transform: translateY(108%); transition: transform 1.15s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal-lines.is-revealed .line-inner, .reveal-lines.in .line-inner { transform: none; }

/* ---------- Per-word choreography (split text) ----------
   When an element is word-split, the old line-mask/line-inner is neutralised
   and each word flies in individually with a staggered, blurred entrance. */
.has-split .line-mask { overflow: visible; }
.has-split .line-inner { transform: none !important; transition: none !important; }

.w {
  display: inline-block; will-change: transform, opacity, filter;
  opacity: 0;
  transition:
    opacity 0.7s var(--ease),
    transform 1s var(--ease),
    filter 0.9s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--i) * 52ms);
}
/* default "rise": lift up out of a blur, with a touch of rotation */
[data-anim="rise"] .w { transform: translateY(0.85em) rotate(3deg); transform-origin: 0% 100%; filter: blur(10px); }
/* "wave": scale up from small, alternating depth — for the centred statement */
[data-anim="wave"] .w { transform: translateY(0.6em) scale(0.72); filter: blur(12px); }
[data-anim="wave"] .w:nth-child(even) { transform: translateY(-0.5em) scale(0.72); }
/* "side": slide in from the left with a slight skew — editorial headlines */
[data-anim="side"] .w { transform: translateX(-0.45em) translateY(0.3em) skewX(7deg); filter: blur(7px); }

/* Global text-flow override (Tweaks) — beats per-section [data-anim] from-states */
.flow-rise  .w { transform: translateY(0.85em) rotate(3deg); transform-origin: 0% 100%; filter: blur(10px); }
.flow-wave  .w { transform: translateY(0.7em) scale(0.7); filter: blur(12px); }
.flow-wave  .w:nth-child(even) { transform: translateY(-0.55em) scale(0.7); }
.flow-drift .w { transform: scale(1.06); filter: blur(20px); }

.in .w, .is-revealed .w {
  opacity: 1 !important; transform: none !important; filter: none !important;
}
/* the serif/accent words get a softer, slightly slower settle for emphasis */
.serif .w { transition-duration: 0.9s, 1.2s, 1.1s; }

/* ---------- Text ↔ background MERGE ----------
   The big display type blends with the moving 3D scene behind it
   (multiply on light keeps navy crisp while the crystal lines tint through;
   screen on dark lets the glow bleed into the letterforms). */
@media (prefers-reduced-motion: no-preference) {
  #statement .statement-line { mix-blend-mode: var(--merge-blend); isolation: auto; }
}
html[data-theme="light"] { --merge-blend: multiply; }
html[data-theme="dark"]  { --merge-blend: screen; }
/* Hero headline — clean two-line mask reveal (crisp curtain rise, no blur-pop).
   Line 1 rises briskly; the serif accent line follows a beat later, easing up from a
   slight scale for a deliberate, special second act. A soft halo ties it to the scene. */
.hero h1 { display: grid; gap: 0.02em; }
.hero h1 .line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero h1 .line-inner { display: block; transform: translateY(118%); transition: transform 1.2s var(--ease); will-change: transform; }
.hero h1 .line-mask:nth-child(2) .line-inner { transform: translateY(118%) scale(0.965); transform-origin: 0% 50%; transition: transform 1.4s var(--ease) 0.2s; }
.hero h1.in .line-inner,
.hero h1.is-revealed .line-inner { transform: none; }
.hero h1.in .line-mask:nth-child(2) .line-inner,
.hero h1.is-revealed .line-mask:nth-child(2) .line-inner { transform: none; }
.hero .container { will-change: transform, opacity; }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  box-shadow: 0 0 14px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .line-inner, .w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  #scene3d, .stars { display: none !important; }
}