@font-face {
  font-family: Inter;
  src: url('public/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0B0C0E;
  --bg-2: #131417;
  --text: #F2EFE9;
  --text-dim: #9A968E;
  --accent: #B8A98F;
  --line: rgba(242, 239, 233, 0.14);
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { scroll-behavior: auto; }

body {
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 900px at 62% 38%, #191c22 0%, #0d0f13 46%, #05060a 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--accent);
  color: #14110c;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

#webgl-container {
  position: fixed;
  inset: 0;
  z-index: 0;
}
#webgl { display: block; width: 100%; height: 100%; }

#poster-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("public/hero-poster.png");
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}

main#story {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.story {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 12vh clamp(20px, 6vw, 96px);
}
.story.hero { min-height: 120vh; align-items: center; }
.story.airflow { min-height: 140vh; }

.story .copy {
  max-width: 640px;
  opacity: 1;
  will-change: opacity, transform;
  pointer-events: none;
}

.hero .copy { margin-left: clamp(0px, 2vw, 40px); }

.rotation .copy,
.selection .copy { margin-left: auto; text-align: right; }

.macro .copy { width: 100%; max-width: none; text-align: left; }
.macro .macro-b { display: block; margin-top: 40vh; text-align: right; }
.macro .macro-b { opacity: 0; }

.eyebrow {
  margin: 0 0 18px;
  font-size: clamp(0.7rem, 1vw, 0.82rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-dim);
}

h1, h2 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
h1 { font-size: clamp(3rem, 7.4vw, 8rem); }
h2 { font-size: clamp(2rem, 4.6vw, 4.4rem); }

.sub {
  margin: 22px 0 0;
  max-width: 34ch;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-dim);
}
.rotation .sub, .selection .sub { margin-left: auto; }

.hint {
  margin-top: 56px;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hint-arrow { display: inline-block; margin-left: 10px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.cta-row { margin-top: 30px; }
.cta {
  pointer-events: auto;
  display: inline-block;
  padding: 14px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.cta:hover { border-color: var(--accent); background: rgba(184, 169, 143, 0.08); }
.cta:focus-visible,
a:focus-visible,
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; width: min(320px, 76vw); }
.loader-word {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  color: var(--text);
}
.loader-status { margin: 18px 0 14px; font-size: 0.86rem; color: var(--text-dim); }
.loader-bar { height: 2px; width: 100%; background: rgba(242, 239, 233, 0.12); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.loader-pct { margin: 12px 0 0; font-size: 0.74rem; letter-spacing: 0.2em; color: var(--text-dim); }

.motion-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  padding: 9px 14px;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text-dim);
  background: rgba(19, 20, 23, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.motion-toggle[aria-pressed="true"] { color: var(--text); border-color: var(--accent); }

.debug {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 35;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #cfe3d0;
  background: rgba(6, 8, 7, 0.82);
  border: 1px solid rgba(120, 200, 140, 0.25);
  border-radius: 8px;
  white-space: pre;
  pointer-events: none;
}

.noscript {
  position: relative;
  z-index: 10;
  max-width: 640px;
  margin: 22vh auto 0;
  padding: 0 24px;
  text-align: center;
}
.noscript h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.noscript p { color: var(--text-dim); margin-top: 18px; }

@media (max-width: 768px) {
  .story { padding: 10vh 22px; }
  .rotation .copy, .selection .copy { text-align: left; margin-left: 0; }
  .rotation .sub, .selection .sub { margin-left: 0; }
  .macro .macro-b { margin-top: 46vh; }
  .motion-toggle { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hint-arrow { animation: none; }
  .story .copy { transition: none !important; }
}

/* One fixed stage: copy and camera now share the same normalized timeline. */
body {
  background-image: radial-gradient(ellipse at 71% 29%, #25272a 0%, #121418 43%, #0b0c0e 78%);
  scrollbar-color: var(--accent) var(--bg);
}
::selection { color: var(--bg); background: var(--accent); }
.brand {
  position: absolute;
  top: 36px;
  left: clamp(22px, 6vw, 96px);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 22px;
}
.brand-name { font-size: 22px; font-weight: 500; letter-spacing: 0.24em; }
.brand-category { color: var(--text-dim); font-size: 12px; }
.scene-ready main#story { height: 800vh; }
.scene-ready .story {
  position: fixed;
  inset: 0;
  min-height: 0;
  height: 100%;
  padding: 0 clamp(22px, 6vw, 96px) 12vh;
  align-items: flex-end;
  visibility: hidden;
}
.scene-ready .hero { visibility: visible; }
.hero .copy { margin-left: 0; max-width: 600px; }
h1 { font-size: clamp(3rem, 6.6vw, 6.6rem); font-weight: 700; letter-spacing: -0.035em; max-width: 9ch; }
h2 { font-weight: 650; letter-spacing: -0.03em; }
.hint { margin-top: 32px; font-size: 11px; }
.scene-ready .rotation, .scene-ready .selection { align-items: flex-end; }
.scene-ready .macro .copy { position: relative; min-height: 2.2em; }
.macro .macro-b { position: absolute; inset: 0; margin: 0; text-align: left; }
.motion-toggle { min-height: 44px; backdrop-filter: none; background: #131417; }
#webgl-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 60% 40%, transparent 45%, rgba(3, 4, 6, 0.24) 100%);
}
.reduced-motion .hint-arrow { animation: none; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { transition: none !important; }
@media (max-width: 768px) {
  .brand { top: 24px; gap: 16px; }
  .scene-ready .story { padding: 0 24px 15vh; }
  h1 { font-size: clamp(3rem, 12.4vw, 5.5rem); }
  h2 { font-size: clamp(2rem, 8.8vw, 3.5rem); }
  .sub { font-size: 1rem; max-width: 29ch; margin-top: 18px; }
  .hint { margin-top: 26px; }
  #webgl-container::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .motion-toggle, .debug { background: var(--bg); }
}

.experience-controls {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: flex;
  gap: 8px;
}
.experience-controls button {
  position: static;
  min-height: 44px;
  padding: 9px 14px;
  font: 400 0.78rem var(--font);
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.experience-controls button:hover { color: var(--text); border-color: var(--accent); }
.experience-controls button[aria-pressed="true"] { color: var(--text); border-color: var(--accent); }
.experience-controls button:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 768px) {
  .experience-controls { right: 12px; bottom: 12px; }
}