/* ---------- Theme tokens ---------- */
:root {
  --bg: 250 250 250;
  --bg-deep: 235 235 235;
  --text: 10 10 10;
  --text-muted: 90 90 90;
  --glass: 255 255 255 / 0.55;
  --glass-border: 10 10 10 / 0.10;
  --glass-shadow: 0 8px 32px rgb(0 0 0 / 0.08);
  --ambient: 10 10 10;
  --ambient-opacity: 0.05;
  --stroke: 10 10 10 / 0.22;
}

html.dark {
  --bg: 5 5 5;
  --bg-deep: 0 0 0;
  --text: 250 250 250;
  --text-muted: 160 160 160;
  --glass: 255 255 255 / 0.06;
  --glass-border: 255 255 255 / 0.12;
  --glass-shadow: 0 8px 32px rgb(0 0 0 / 0.55);
  --ambient: 255 255 255;
  --ambient-opacity: 0.07;
  --stroke: 255 255 255 / 0.20;
}

html { -webkit-text-size-adjust: 100%; }
body { transition: background-color .4s ease, color .4s ease; }

/* Hide the page until js/i18n.js applies the stored language, preventing a
   flash of the default language for non-default users. */
html.i18n-loading body { visibility: hidden; }

/* Theme-aware hero portrait: show the dark variant in dark mode, light in light. */
html.dark .hero-img-light { display: none; }
html:not(.dark) .hero-img-dark { display: none; }

/* ---------- Ambient backdrop ---------- */
/* Two soft radial gradients give backdrop-filter something to diffuse.
   The noise overlay is what stops #050505 reading as dead flat black. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(60rem 60rem at 12% 8%,
      rgb(var(--ambient) / var(--ambient-opacity)), transparent 70%),
    radial-gradient(50rem 50rem at 88% 72%,
      rgb(var(--ambient) / calc(var(--ambient-opacity) * 0.7)), transparent 70%);
}

.ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Glass ---------- */
.glass {
  background: rgb(var(--glass));
  border: 1px solid rgb(var(--glass-border));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--glass-shadow);
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}

/* ---------- Oversized backdrop words ---------- */
.backdrop-word {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(6rem, 22vw, 20rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--stroke));
  user-select: none;
  white-space: nowrap;
}

/* ---------- Display headings ---------- */
.h-display {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 7rem);
  line-height: .95;
  letter-spacing: -.04em;
}

.eyebrow {
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: rgb(var(--text-muted));
}

/* ---------- Section stacking (natural-height overlap) ---------- */
/* Each section keeps its content height; the next section's rounded top
   overlaps the previous section's bottom so sections stack at the content
   boundary rather than as full viewport cards. No transform is applied to
   the section itself, so the glass panels' backdrop-filter stays stable. */
.section-stack {
  position: relative;
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
  background-color: rgb(var(--bg));
  box-shadow: 0 -18px 44px rgb(0 0 0 / 0.24);
}
@media (min-width: 768px) {
  .section-stack { margin-top: -5rem; }
}

/* ---------- Reveal initial state ---------- */
/* JS removes .reveal-armed once animations run. If JS or GSAP fails to load,
   nothing is ever armed, so content stays visible rather than invisible. */
.reveal-armed .reveal { opacity: 0; transform: translateY(2rem); }

/* ---------- Focus ---------- */
/* Glass gives no focus affordance on its own. */
.focus-ring:focus-visible {
  outline: 2px solid rgb(var(--text));
  outline-offset: 3px;
  border-radius: .5rem;
}

/* ---------- Marquee ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation-play-state: paused; }
  .reveal-armed .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.nav-scrolled { padding-top: .65rem; padding-bottom: .65rem; background: rgb(var(--glass)); }
.image-fallback { min-height: 20rem; background: linear-gradient(135deg, rgb(var(--bg-deep)), rgb(var(--text-muted) / .25)); }
.hero-trail { opacity: .35; transform: translate(-1rem, 1rem) rotate(-6deg); }
@media (max-width: 767px) {
  .backdrop-word { font-size: clamp(5rem, 25vw, 9rem); }
  .section-stack { margin-top: 0; box-shadow: none; border-radius: 1.5rem 1.5rem 0 0; }
  .hero-portrait-card { transform: none !important; }
}

.form-field { transition: border-color .25s ease, background-color .25s ease; }
.form-field:focus { border-color: rgb(var(--text) / .65); background: rgb(var(--glass)); outline: none; }
.timeline-node.is-filled { background: rgb(var(--text)); box-shadow: 0 0 0 5px rgb(var(--text) / .1); }
@media (max-width: 767px) {
  .timeline-line { left: .75rem; }
  .timeline-node { left: -.75rem; }
}

/* ---------- Custom cursor ---------- */
#cursor-dot, #cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 9999px;
  z-index: 9999;
}
#cursor-dot {
  width: 8px;
  height: 8px;
  background: rgb(var(--text));
}
#cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgb(var(--text) / 0.55);
}
@media (pointer: fine) {
  html.has-custom-cursor, html.has-custom-cursor body,
  html.has-custom-cursor a, html.has-custom-cursor button,
  html.has-custom-cursor input, html.has-custom-cursor textarea,
  html.has-custom-cursor select, html.has-custom-cursor label { cursor: none; }
}