/* ============================================================
   GOLDEN BROTHERS — base.css
   Tokens, Reset, Typografie, Reveal-System, Atmosphäre
   Design-Brief: "Royal Arabesque — Qasr al-Dhahab"
   ============================================================ */

:root {
  /* Palette */
  --bg: #050403;
  --surface: #0F0B07;
  --surface-core: #17110A;
  --gold-light: #F6E3A9;
  --gold: #D4AF37;
  --gold-deep: #8C6420;
  --text: #F2EADC;
  --muted: #A2937D;
  --oxblood: #40201A;
  --hairline: rgba(212, 175, 55, 0.28);
  --hairline-dim: rgba(212, 175, 55, 0.12);

  --grad-gold: linear-gradient(135deg, #F6E3A9 0%, #D4AF37 45%, #8C6420 100%);
  --grad-sheen: linear-gradient(115deg, #8C6420 0%, #D4AF37 32%, #F6E3A9 50%, #D4AF37 68%, #8C6420 100%);
  --glow: radial-gradient(closest-side, rgba(212, 175, 55, 0.10), transparent 72%);

  /* Motion */
  --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-wipe: cubic-bezier(0.65, 0, 0.13, 1);

  /* Typo */
  --font-display: 'Cinzel', serif;
  --font-edit: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;
  --font-ar: 'Amiri', serif;

  /* Layout */
  --pad-section: clamp(6rem, 12vw, 11rem);
  --radius-shell: 28px;
  --radius-core: 20px;

  /* Ornament-Pattern (Jali-Gitter, 1px-Duktus) */
  --jali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='.55'%3E%3Cpath d='M28 4 45 11 52 28 45 45 28 52 11 45 4 28 11 11Z'/%3E%3Cpath d='M28 0v56M0 28h56M8 8l40 40M48 8 8 48'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
::selection { background: rgba(212, 175, 55, 0.85); color: #050403; }

:focus-visible {
  outline: 2px solid rgba(212, 175, 55, 0.85);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -100px; left: 24px; z-index: 300;
  background: var(--gold); color: #050403;
  padding: 10px 20px; border-radius: 999px; font-weight: 500;
  transition: top 0.3s var(--ease-luxe);
}
.skip-link:focus { top: 20px; }

/* ---------- Film-Korn (3 %, fix, pointer-none) ---------- */
.grain {
  position: fixed; inset: 0; z-index: 140;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; }

.display-1 {
  font-size: clamp(3.2rem, 11vw, 10.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.display-2 {
  font-size: clamp(2.4rem, 5.5vw, 4.75rem);
  letter-spacing: 0.03em;
}
.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  font-family: var(--font-edit);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.6;
  color: var(--muted);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 18px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }
.eyebrow--left::before { display: none; }

/* Arabische Schatten-Ebenen */
.ar { font-family: var(--font-ar); }
.ar-shadow {
  position: absolute;
  font-family: var(--font-ar);
  font-weight: 700;
  color: var(--gold-deep);
  opacity: 0.09;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform;
}

/* ---------- Layout ---------- */
.container { width: min(1200px, 92vw); margin-inline: auto; position: relative; }
.section { padding-block: var(--pad-section); position: relative; overflow: clip; }
.section-head { position: relative; z-index: 2; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-head .display-2 { margin-top: 1.1rem; }

.glow-spot {
  position: absolute; width: min(900px, 120vw); aspect-ratio: 1;
  background: var(--glow); pointer-events: none; z-index: 0;
}

.note { color: var(--muted); font-size: 0.92rem; }

/* ---------- Reveal-System (nur unter .js aktiv) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition:
    opacity 0.8s var(--ease-luxe) var(--rd, 0ms),
    transform 0.8s var(--ease-luxe) var(--rd, 0ms),
    filter 0.8s var(--ease-luxe) var(--rd, 0ms);
}
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }

.js [data-reveal="wipe"] {
  transform: none; filter: none;
  clip-path: inset(100% 0 0 0);
  transition:
    clip-path 0.7s var(--ease-wipe) var(--rd, 0ms),
    opacity 0.45s linear var(--rd, 0ms);
}
.js [data-reveal="wipe"].in { clip-path: inset(0 0 0 0); }

/* Hero-Ladechoreografie: Zeilen steigen aus Masken */
.mask-line { display: block; overflow: hidden; }
.mask-line > span { display: block; }
.js .mask-line > span {
  transform: translateY(112%);
  transition: transform 1.05s var(--ease-luxe) var(--rd, 0ms);
}
.js.loaded .mask-line > span { transform: translateY(0); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0A0805; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-deep), #5c430f);
  border-radius: 5px; border: 2px solid #0A0805;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal], .js .mask-line > span {
    opacity: 1; transform: none; filter: none; clip-path: none;
  }
}