/* ============================================================
   DESIGN TOKENS — einheitliche Art Direction der gesamten Seite
   ============================================================ */
:root {
  /* --- Farben: dunkel, elegant, ein elektrischer Akzent --- */
  --bg: #07070b;
  --bg-elevated: #07070b;
  --bg-elevated-2: #07070b;
  --ink: #f4f3ef;
  --ink-dim: #a6a6b3;
  --ink-faint: #6d6d7c;
  --accent: #06060e;
  --accent-ink: #eef0ff;
  --accent-2: #67ffff;
  --line: rgba(244, 243, 239, 0.09);
  --line-strong: rgba(244, 243, 239, 0.16);
  --overlay-scrim: rgb(8 8 19 / 0.49);

  /* --- Typografie --- */
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.6rem, 6vw + 0.5rem, 6.4rem);
  --fs-h1: clamp(2.1rem, 4vw + 0.4rem, 3.6rem);
  --fs-h2: clamp(1.6rem, 2.4vw + 0.4rem, 2.4rem);
  --fs-h3: clamp(1.15rem, 1vw + 0.6rem, 1.5rem);
  --fs-body: clamp(1rem, 0.3vw + 0.85rem, 1.125rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* --- Layout --- */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.45s;
  --dur-slow: 0.9s;

  /* --- Safe areas (iOS) --- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* --- Inter-journey background --- */
  /* --section-transition is used by the Contact section, which sits
     directly under the outro journey. The top starts fully transparent
     (rather than a held black plateau) so there's no flat, solid-colored
     band sitting right under the journey — a flat color reads as a seam
     against real footage no matter how closely it's matched — and only
     picks up color as it eases into the curve from ~40% onward. All
     stops carry 0.5 alpha (not solid) so the tint stays subtle and more
     of what's behind it (the page's base dark and the ambient video)
     shows through. */
  --section-transition: linear-gradient(
    180deg,
    transparent 0%,
    transparent 35%,
    rgb(1 1 2 / 0.5) 40%,
    rgb(2 4 4 / 0.5) 44%,
    rgb(0 0 0 / 0.5) 48%,
    rgba(8, 11, 16, 0.5) 52%,
    rgba(13, 16, 22, 0.5) 56%,
    rgb(11 17 23 / 0.5) 60%,
    rgba(19, 25, 34, 0.5) 64%,
    rgba(17, 22, 29, 0.5) 68%,
    rgb(0 0 0 / 0) 72%,
    rgba(8, 11, 16, 0.5) 77%,
    rgba(5, 6, 10, 0.5) 82%,
    rgba(3, 4, 5, 0.5) 88%,
    rgba(0, 0, 0, 0.5) 95%,
    rgb(5 6 11 / 0.5) 100%
  );

  /* Used only by "Selected Work" (screen-world), which sits directly under
     the hero journey. One flat color in the middle instead of a rising/
     falling curve of shades — the transparent and black stops at the two
     ends stay, though, since those are what keep the hero/outro hand-offs
     seamless (a flat solid color running edge-to-edge would reintroduce
     the hard line a transparent lead-in avoids). */
  --work-transition: linear-gradient(
    180deg,
    transparent 0%,
    transparent 35%,
    #0d1016 55%,
    rgb(20 23 50 / 0.09) 75%,
    #000000 92%,
    #000000 100%
  );

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur-med: 0.01s;
    --dur-slow: 0.01s;
  }
  .brand::before { animation: none; }
}