/* =============================================================
   Guraziu Bau — Design Tokens v2
   DARK CINEMATIC · Apple-Like (Geist) · Brand-Gold von Adems Logo
   ============================================================= */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-100.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-200.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-900.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
/* Instrument Serif komplett raus — Geist ist jetzt überall */

:root {
  /* ----- Farben — DARK CINEMATIC ----- */
  --bg:            #0A0A0A;     /* Tief-Schwarz, kein reines #000 (wirkt edler) */
  --bg-2:          #141414;     /* Karten, abgesetzte Sektionen */
  --surface:       #1A1A1A;     /* Formulare, eingerückt */
  --surface-2:     #242424;     /* Hover-State */
  --line:          #2A2A2A;     /* Trennlinien, sehr leise */
  --line-2:        #3A3A3A;     /* Aktive Borders */

  --text:          #F5F2EA;     /* Cremig-Weiß, wie Adems Helm */
  --text-muted:    #B0AAA0;     /* Sekundär — warm-grau */
  --text-dim:      #7A7468;     /* Captions, Tech-Tags */

  /* Moos sehr selten — nur als sekundärer Akzent (z.B. Erfolgs-States) */
  --moss:          #6B8E5A;
  --moss-deep:     #5B7553;
  --moss-soft:     rgba(107, 142, 90, 0.15);

  /* GOLD — Adems echte Logo-Farbe (Champagner-Gold mit Verlauf) */
  /* WICHTIG: Logo ist Gold → Seite MUSS Gold sein für Stimmigkeit */
  --gold:          #D4AF6A;     /* Champagner-Gold */
  --gold-hover:    #E8C57F;     /* Heller Hover */
  --gold-deep:     #9B7E45;     /* Pressed */
  --gold-soft:     rgba(212, 175, 106, 0.18);
  --gold-glow:     rgba(212, 175, 106, 0.35);

  /* Orange-Variablen bleiben definiert für ggf. zukünftige Verwendung,
     aber NICHT als Haupt-Accent (Logo ist Gold!) */
  --orange:        #F97316;
  --orange-hover:  #FB923C;
  --orange-deep:   #EA580C;
  --orange-soft:   rgba(249, 115, 22, 0.16);

  /* Alias-Tokens — accent zeigt zurück auf GOLD (Brand-konsistent) */
  --accent:        var(--gold);
  --accent-hover:  var(--gold-hover);
  --accent-dim:    var(--gold-soft);

  /* ----- Typo — Apple-like Geist überall ----- */
  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --font-body:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ----- Größen — etwas größer für Apple-Vibe ----- */
  --fs-hero:      clamp(2.75rem, 6.5vw, 6.5rem);   /* Apple-Like — bold aber NICHT absurd */
  --fs-display:   clamp(2.25rem, 5vw, 4.5rem);
  --fs-h2:        clamp(1.875rem, 3.5vw, 3rem);
  --fs-h3:        clamp(1.25rem, 1.9vw, 1.625rem);
  --fs-body:      clamp(1.0625rem, 1.15vw, 1.1875rem);  /* 17-19px */
  --fs-small:     0.9375rem;
  --fs-tiny:      0.8125rem;

  --lh-tight:     1.02;     /* Apple-like ultra-tight */
  --lh-snug:      1.15;
  --lh-body:      1.55;

  /* Apple-Tracking: Display TIGHT (Bold-Sans), Body neutral, Caps WIDE */
  --tracking-display: -0.04em;
  --tracking-tight:   -0.018em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.16em;

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

  --section-y: clamp(5rem, 10vw, 10rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --max-w:     1440px;

  /* ----- Animation ----- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur:         360ms;
  --dur-slow:    720ms;

  /* ----- Shadows + Glows (auf Dark: warme Glows statt dunkle Drops) ----- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.75);
  --glow-gold: 0 0 60px rgba(212, 175, 106, 0.20);
  --glow-gold-strong: 0 0 80px rgba(212, 175, 106, 0.35);

  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
}

/* ----- Reset & Basis ----- */
*,
*::before,
*::after { box-sizing: border-box; }

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

html {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  letter-spacing: var(--tracking-normal);
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

::selection {
  background: var(--gold);
  color: var(--bg);
}

/* =============================================================
   Custom Cursor (Dark Mode — heller Cursor)
   ============================================================= */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: none !important;
  }
}

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur) var(--ease-out);
}

.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(245, 242, 234, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width var(--dur-fast) var(--ease-out),
              height var(--dur-fast) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              opacity var(--dur) var(--ease-out);
}

.cursor-ring.is-hover {
  width: 56px;
  height: 56px;
  border-color: var(--gold);
}

/* =============================================================
   Reveal-on-Scroll
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }
.reveal[data-delay="4"] { transition-delay: 400ms; }

/* =============================================================
   Wort-für-Wort Reveal in Headlines
   ============================================================= */
.word-reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.word-reveal .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 800ms var(--ease-out);
  will-change: transform;
}
.word-reveal.is-in .word > span {
  transform: translateY(0);
}
.word-reveal .word:nth-child(1) > span  { transition-delay:  80ms; }
.word-reveal .word:nth-child(2) > span  { transition-delay: 160ms; }
.word-reveal .word:nth-child(3) > span  { transition-delay: 240ms; }
.word-reveal .word:nth-child(4) > span  { transition-delay: 320ms; }
.word-reveal .word:nth-child(5) > span  { transition-delay: 400ms; }
.word-reveal .word:nth-child(6) > span  { transition-delay: 480ms; }
.word-reveal .word:nth-child(7) > span  { transition-delay: 560ms; }
.word-reveal .word:nth-child(8) > span  { transition-delay: 640ms; }
.word-reveal .word:nth-child(9) > span  { transition-delay: 720ms; }
.word-reveal .word:nth-child(10) > span { transition-delay: 800ms; }
.word-reveal .word:nth-child(11) > span { transition-delay: 880ms; }
.word-reveal .word:nth-child(12) > span { transition-delay: 960ms; }

/* =============================================================
   Magnetic Button
   ============================================================= */
.magnetic {
  display: inline-block;
  transition: transform 400ms var(--ease-out);
  will-change: transform;
}
.magnetic > * {
  display: inline-block;
  transition: transform 400ms var(--ease-out);
  will-change: transform;
}

/* =============================================================
   3D-Tilt
   ============================================================= */
.tilt {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-z: 0px;
  transform-style: preserve-3d;
  transform: perspective(1200px)
             rotateX(var(--tilt-x))
             rotateY(var(--tilt-y))
             translateZ(var(--tilt-z));
  transition: transform 200ms var(--ease-out);
  will-change: transform;
}
.tilt__layer {
  transform: translateZ(40px);
  transition: transform 600ms var(--ease-out);
}

/* =============================================================
   SVG Bewehrungs-Raster — Scroll-Animation
   ============================================================= */
.rebar-divider {
  position: relative;
  height: 200px;
  margin: 0 auto;
  max-width: var(--max-w);
  padding: 0 var(--gutter);
  pointer-events: none;
  user-select: none;
}
.rebar-divider svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rebar-divider .rebar-line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.8s var(--ease-out);
  opacity: 0.5;
}
.rebar-divider.is-in .rebar-line {
  stroke-dashoffset: 0;
}
.rebar-divider .rebar-node {
  fill: var(--gold);
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  transition-delay: 1.2s;
}
.rebar-divider.is-in .rebar-node {
  opacity: 1;
}

/* =============================================================
   Accessibility — reduzierte Bewegung
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal,
  .word-reveal .word > span {
    opacity: 1;
    transform: none;
  }
  .rebar-divider .rebar-line { stroke-dashoffset: 0; }
  .rebar-divider .rebar-node { opacity: 1; }
}