/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --az-black:      #0A0806;
  --az-dark-1:     #110E0A;
  --az-dark-2:     #1A1510;
  --az-dark-3:     #231C15;
  --az-dark-4:     #2E2419;
  --az-dark-5:     #3A2F22;

  --az-cream-1:    #F7F0E6;
  --az-cream-2:    #EDE4D6;
  --az-cream-3:    #E2D5C3;

  --az-orange:        #F4832E;
  --az-orange-light:  #FF9A4A;
  --az-orange-dark:   #D96A1A;
  --az-orange-dim:    rgba(244,131,46,0.08);
  --az-orange-glow:   rgba(244,131,46,0.18);
  --az-orange-hot:    rgba(244,131,46,0.35);

  --text-primary:     #F5EDE0;
  --text-secondary:   #B8A898;
  --text-muted:       #7A6A5A;
  --text-dark:        #1A1510;
  --text-on-orange:   #0A0806;

  --border-subtle:    rgba(255,255,255,0.05);
  --border-medium:    rgba(255,255,255,0.10);
  --border-orange:    rgba(244,131,46,0.20);

  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  --fs-hero:      clamp(3.2rem, 6.5vw + 1rem, 6.5rem);
  --fs-h1:        clamp(2.4rem, 4vw + 0.8rem, 4.2rem);
  --fs-h2:        clamp(1.9rem, 3vw + 0.5rem, 3rem);
  --fs-h3:        clamp(1.3rem, 1.5vw + 0.4rem, 1.8rem);
  --fs-body:      clamp(0.95rem, 0.4vw + 0.8rem, 1.05rem);
  --fs-body-lg:   clamp(1.05rem, 0.5vw + 0.85rem, 1.2rem);
  --fs-small:     clamp(0.78rem, 0.3vw + 0.68rem, 0.875rem);
  --fs-mono:      0.78rem;
  --fs-overline:  0.68rem;

  --space-xs:   0.5rem;
  --space-sm:   0.875rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  clamp(5rem, 9vw, 8rem);
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);

  --container:         1200px;
  --container-wide:    1400px;
  --container-narrow:  760px;

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  --shadow-sm:         0 2px 8px rgba(0,0,0,0.18);
  --shadow-md:         0 8px 32px rgba(0,0,0,0.28);
  --shadow-lg:         0 20px 60px rgba(0,0,0,0.38);
  --shadow-orange:     0 8px 32px rgba(244,131,46,0.18);
  --shadow-orange-lg:  0 20px 60px rgba(244,131,46,0.14);

  --trans-fast:    150ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --trans-base:    300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --trans-slow:    600ms cubic-bezier(0.16, 1, 0.3, 1);
  --trans-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --nozzle-glow:   0 0 20px rgba(244,131,46,0.5), 0 0 60px rgba(244,131,46,0.15);
}


/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--az-dark-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
::selection { background: var(--az-orange-dim); color: var(--az-orange-light); }

/* ── Film Grain Overlay ──────────────────────────────────────── */
/* SVG feTurbulence noise tiled at 200×200 — no HTTP request.    */
/* pointer-events:none means it never blocks clicks or touch.    */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 300px 300px;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--az-dark-1); }
::-webkit-scrollbar-thumb { background: var(--az-dark-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--az-orange); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Skip Navigation Link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--az-orange);
  color: var(--az-black);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--az-black);
  outline-offset: 2px;
}

/* ── SplitText word spans ── */
/* translateY only works on block/inline-block — SplitText wraps each word  */
/* in a span, which is inline by default, so transforms would be ignored.   */
.split-word { display: inline-block; }

/* ── Screen Reader Only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── CSS Scroll-Driven Animations ────────────────────────────── */
/* @supports guard: zero impact on browsers without support.        */
/* Nested prefers-reduced-motion: never runs for reduced-motion     */
/* users, so these are purely additive progressive enhancements.    */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 1. Page scroll progress bar — fixed orange line at top.
          Fills left-to-right as the user scrolls the full page.    */
    body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(
        to right,
        var(--az-orange-dark),
        var(--az-orange),
        var(--az-orange-light)
      );
      transform-origin: 0 50%;
      z-index: 10000;
      pointer-events: none;
      animation: scroll-progress linear both;
      animation-timeline: scroll(root);
    }

    @keyframes scroll-progress {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    /* 2. Marquee entrance — fades in as it scrolls into the viewport.
          The marquee has no GSAP reveal, so this fills that gap.    */
    .marquee {
      animation: marquee-entrance linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }

    @keyframes marquee-entrance {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

  }
}

/* ── Multi-Page View Transitions ─────────────────────────────── */
/* @view-transition is silently ignored by unsupported browsers.   */
/* Chrome 126+, Edge 126+, Safari 18+. No JavaScript required.    */
@view-transition {
  navigation: auto;
}

/* Old page: fast fade-out so the new page doesn't feel delayed   */
::view-transition-old(root) {
  animation-name: vt-fade-out;
  animation-duration: 0.2s;
  animation-timing-function: ease-in;
}

/* New page: fades in with a 10px upward drift — "surfaces from  */
/* below" effect that fits a fabrication / layered theme.         */
::view-transition-new(root) {
  animation-name: vt-slide-up;
  animation-duration: 0.38s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}

@keyframes vt-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Reduced-motion: keep the transition mechanism (avoids the hard  */
/* flash of unstyled content) but make it effectively instant.     */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
}

/* ── Reduced Motion — target only decorative animations ── */
@media (prefers-reduced-motion: reduce) {
  [class*="reveal-"],
  .gsap-reveal,
  .fade-up,
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ── 404 page ── */
body.error404 {
  background-color: var(--az-black);
}

/* ── Legal pages (Privacy, Terms) ── */
.legal-page {
  padding: 8rem 0 var(--space-2xl);
  min-height: 80vh;
  background: var(--az-dark-1);
}

.legal-page__header {
  max-width: 720px;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.legal-page__overline {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  color: var(--az-orange);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.legal-page__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.legal-page__meta {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.legal-page__body {
  max-width: 720px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.legal-page__body h2 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.legal-page__body p {
  margin-bottom: 1rem;
}

.legal-page__body ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.legal-page__body ul li {
  margin-bottom: 0.4rem;
}

.legal-page__body a {
  color: var(--az-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-page__body a:hover {
  opacity: 0.8;
}

.legal-page__back {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  max-width: 720px;
}

.legal-page__back a {
  font-size: var(--fs-small);
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.legal-page__back a:hover {
  color: var(--az-orange);
}