/* ============================================================
   NeoV — Brand Tokens
   Quelle: D:/FiveM-RP/docs/brand/schrift-styleguide.html
   Gemeinsame Basis aller Seiten der Live-Site.
   ============================================================ */

/* ---------- Fonts (aus D:/FiveM-RP/nui/public/fonts) ---------- */
@font-face { font-family: 'Ignazio';        src: url('fonts/Ignazio.woff2') format('woff2');         font-weight: 400; font-display: swap; }
@font-face { font-family: 'IgnazioOutline'; src: url('fonts/Ignazio-Outline.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Corvent';        src: url('fonts/Corvent-400.woff2') format('woff2');     font-weight: 400; font-display: swap; }
@font-face { font-family: 'Corvent';        src: url('fonts/Corvent-500.woff2') format('woff2');     font-weight: 500; font-display: swap; }
@font-face { font-family: 'Corvent';        src: url('fonts/Corvent-600.woff2') format('woff2');     font-weight: 600; font-display: swap; }
@font-face { font-family: 'Corvent';        src: url('fonts/Corvent-700.woff2') format('woff2');     font-weight: 700; font-display: swap; }
@font-face { font-family: 'Helvena';        src: url('fonts/Helvena-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Helvena';        src: url('fonts/Helvena-Medium.woff2') format('woff2');  font-weight: 500; font-display: swap; }
@font-face { font-family: 'Helvena';        src: url('fonts/Helvena-Semibold.woff2') format('woff2');font-weight: 600; font-display: swap; }
@font-face { font-family: 'Helvena';        src: url('fonts/Helvena-Bold.woff2') format('woff2');    font-weight: 700; font-display: swap; }
@font-face { font-family: 'Codent';         src: url('fonts/Codent-Pro.woff2') format('woff2');      font-weight: 400; font-display: swap; }
@font-face { font-family: 'Thegora';        src: url('fonts/Thegora-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* Farben — 1:1 aus dem Server-Styleguide */
  --bg:        #0a0b0d;
  --panel:     #101218;
  --panel-2:   #14161d;
  --line:      #1e2027;
  --line-hi:   #272a33;
  --text:      #e8e9ec;
  --dim:       #9aa0b0;
  --faint:     #6c7180;
  --brass:     #c8973f;
  --brass-hi:  #e0b454;
  --good:      #7ee2b0;
  --bad:       #d98488;
  --green:     #2f6b52;
  --blood:     #7a3436;

  /* Motion-Tokens (transitions.dev-Skala) */
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
  --dur-xl:    620ms;
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  /* Raster */
  --container: 1320px;
  --gut: 24px;

  /* ---------- Display-Schrift ----------
     Corvent (Sekundär-Font laut Styleguide: „trägt die Zwischentöne").
     Ignazio wirkt in großen Graden unruhig, Corvent bleibt bei 6rem+ sauber. */
  --font-display: 'Corvent';
  --fw-display: 700;
  --ls-display: -.015em;
  --lh-display: .95;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Lenis Smooth-Scroll: wenn aktiv, übernimmt es Anker-Scrolls selbst —
   natives smooth-behavior muss dann aus, sonst doppelte Glättung */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Helvena', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }

/* ---------- Filmkorn — seitenweit (Anti-Flat, 2026-Standard) ----------
   Fixed-Layer über allem außer Loader (z300) und Switcher (z999). */
body::after { content: ""; position: fixed; inset: 0; z-index: 240; pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

/* ---------- Seitenübergänge: eine durchgehende Fläche ----------
   Cross-Document View Transitions (Chrome/Edge 126+, progressive):
   alte Seite blurrt weg, neue hebt sich rein — Nav bleibt als eigene
   Ebene stehen, dadurch fühlen sich die 4 Seiten wie EINE an. */
@view-transition { navigation: auto; }
header.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: vtOut .26s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vtIn .46s var(--ease-out) both; }
::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation: none; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-16px); filter: blur(5px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(22px); filter: blur(5px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Typo-Rollen ---------- */
.d-xl { font-family: var(--font-display); font-weight: var(--fw-display);
        font-size: clamp(2.8rem, 6.4vw, 6rem); line-height: .94;
        letter-spacing: var(--ls-display); text-transform: uppercase; margin: 0; }
.d-lg { font-family: var(--font-display); font-weight: var(--fw-display);
        font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1;
        letter-spacing: var(--ls-display); text-transform: uppercase; margin: 0; }
.d-md { font-family: var(--font-display); font-weight: var(--fw-display); }

/* Outline-Zeile: Kontur statt Outline-Font — bleibt in jeder Größe gleichmäßig */
.d-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--brass);
  paint-order: stroke fill;
}
@media (min-width: 900px) { .d-outline { -webkit-text-stroke-width: 3px; } }
.d-md { font-family: 'Corvent'; font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; margin: 0; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--brass); margin: 0 0 14px; }
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--brass), transparent); margin-right: 14px; vertical-align: middle; }
.lead { color: var(--dim); font-size: 1.05rem; max-width: 58ch; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ---------- Messing-Textur: ECHTES Material (goldtextur/4K, verkleinert) ----------
   Drei Lagen: Sheen-Streifen (screen) · Metall-Textur (luminosity färbt sich
   am Grund-Gradient) · Gold-Gradient als Basis + Fallback, falls das JPG fehlt.
   2026-Regel: Metall als Textur, nicht als Verlauf. */
.brass-text {
  background-image:
    linear-gradient(100deg, transparent 42%, rgba(255,243,208,.85) 50%, transparent 58%),
    url('img/goldtextur.jpg'),
    linear-gradient(100deg, #8a6524 0%, var(--brass) 22%, var(--brass-hi) 42%, #f4dfae 50%, var(--brass-hi) 58%, var(--brass) 78%, #8a6524 100%);
  background-size: 250% 100%, auto 170%, 100% 100%;
  background-position: -120% 50%, 50% 38%, 0 0;
  background-blend-mode: screen, luminosity, normal;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheen 7s var(--ease-in-out) infinite;
}
@keyframes sheen {
  0%,100% { background-position: -120% 50%, 50% 38%, 0 0; }
  50%     { background-position: 220% 50%, 50% 38%, 0 0; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--brass);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px;
  font-family: 'Corvent'; font-weight: 700; font-size: .85rem;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--btn-bg); color: #0a0b0d;
  border: 0; cursor: pointer; position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -12px rgba(200,151,63,.75); background: var(--brass-hi); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: rgba(10,11,13,.72); color: var(--text); border: 1px solid var(--line-hi);
  backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-hi); box-shadow: none; background: rgba(200,151,63,.06); }

/* ---------- PLATZHALTER-Kennzeichnung ----------
   Jedes Bild, das du noch liefern musst, trägt diesen Rahmen + Label. */
.ph { position: relative; overflow: hidden; background: var(--panel-2); }
.ph > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.55); }
.ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(200,151,63,.22), rgba(10,11,13,.72) 65%);
  mix-blend-mode: normal;
}
.ph__tag {
  position: absolute; z-index: 3; left: 10px; bottom: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: #0a0b0d; background: var(--brass);
  padding: 5px 9px; max-width: calc(100% - 20px);
}
.ph__frame { position: absolute; z-index: 2; inset: 8px; border: 1px dashed rgba(200,151,63,.6); pointer-events: none; }

/* ---------- Karten ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--brass); transform: translateY(-4px); background: var(--panel-2); }

/* ---------- Section-Rhythmus ---------- */
section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.sec-head { margin-bottom: 56px; }

/* ---------- Reveal ---------- */
[data-rev] { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-xl) var(--ease-out), transform var(--dur-xl) var(--ease-out); }
[data-rev].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-rev] { opacity: 1; transform: none; }
}