/* ============================================================
   officina One — styles.css (Cover-Fassung)
   Quelle: ~/Dropbox/Officina One Design System (tokens/ + components/)
   Hex-Werte NUR im Token-Block. Komponenten nutzen Variablen.
   ============================================================ */

/* --- fonts (self-hosted; JohnDoe folgt via Adobe Fonts) --- */
@font-face { font-family: 'Special Elite'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/special-elite-latin.woff2') format('woff2'); }
@font-face { font-family: 'Special Elite'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/special-elite-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/courier-prime-latin.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/courier-prime-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: 'Helvetica'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/helvetica-regular.woff2') format('woff2'); }
@font-face { font-family: 'Helvetica'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/helvetica-bold.woff2') format('woff2'); }

:root {
  /* Farbe — Basis */
  --paper-white: #FCFBF7;
  --paper-aged:  #F6F2E7;
  --ink-black:   #1C1B18;
  /* Tintenstufen */
  --ink-70: rgba(28,27,24,.70);
  --ink-45: rgba(28,27,24,.45);
  --ink-22: rgba(28,27,24,.22);
  --ink-12: rgba(28,27,24,.12);
  --ink-06: rgba(28,27,24,.06);
  /* Zusatzfarbe — Kandidaten */
  --royal-blue: #1F3A93;
  --night-blue: #14213D;
  --racing-red: #C1272D;
  /* Typografie (tokens/typography.css) */
  --font-typewriter: "Special Elite", "JohnDoe", "Courier Prime", Courier, monospace;
  --font-grotesk: "Helvetica", "Helvetica Neue", "Arimo", sans-serif;
  --font-body: var(--font-grotesk);
  --font-mono: "Courier Prime", Courier, monospace;
  --size-hero: clamp(48px, 6.6vw, 104px);
  --size-body-lg: 19px; --size-body: 16px;
  --size-caption: 12px; --size-label: 11px;
  --lh-tight: 1.06; --lh-body: 1.62;
  --track-sperr: .34em; --track-label: .22em; --track-head: .008em;
  /* Tinten-Ausfransung (tokens/borders.css) */
  --ink-bleed: 0 0 .4px currentColor;
  /* Raum */
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px;
  --gutter-page: clamp(24px, 6vw, 120px);
  --band-height: 14px;
  --rule-weight: 1px; --rule-weight-accent: 2px;
  /* Bewegung (tokens/motion.css) */
  --ease-key: cubic-bezier(.2,.7,.2,1);
  --ease-paper: cubic-bezier(.33,0,.2,1);
  --dur-2: 160ms; --dur-3: 320ms;
  --dur-type: 55ms; --caret-blink: 900ms;
}

/* Akzent — umschaltbar per data-accent (royal | night | red) */
[data-accent="royal"] { --accent: var(--royal-blue); }
[data-accent="night"] { --accent: var(--night-blue); }
[data-accent="red"]   { --accent: var(--racing-red); }

/* Semantische Aliase */
:root {
  --surface-page: var(--paper-white);
  --surface-band: var(--paper-aged);
  --text-body: var(--ink-black);
  --text-muted: var(--ink-70);
  --text-faint: var(--ink-45);
}

/* ============================================================
   Basis
   ============================================================ */
* { box-sizing: border-box; border-radius: 0; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: 400 var(--size-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}
em, i { font-style: normal; letter-spacing: var(--track-sperr); }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes o1-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes o1-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Sprachwechsel — Mono-Label, oben rechts */
.lang {
  position: absolute; top: var(--space-5); right: var(--gutter-page); z-index: 6;
  font-family: var(--font-mono); font-size: var(--size-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: var(--rule-weight); text-underline-offset: 5px;
  transition: color var(--dur-2) var(--ease-key);
  padding: var(--space-2);
}
.lang:hover { color: var(--accent); text-decoration-thickness: var(--rule-weight-accent); }

/* Logo — Wortmarke aus gesetzter Schrift (components/brand/Logo.jsx) */
.logo {
  font-family: var(--font-typewriter); font-weight: 400; letter-spacing: .005em;
  color: inherit; text-shadow: var(--ink-bleed); white-space: nowrap; line-height: 1;
}
.logo .one { margin-left: .24em; }

/* Caret — gezogener Unterstrich (components/brand/TypedLine.jsx) */
.caret {
  display: inline-block; width: .52em; margin-left: .06em;
  border-bottom: .09em solid currentColor; vertical-align: baseline;
  animation: o1-caret var(--caret-blink) step-end infinite;
}

/* ============================================================
   Cover — die ganze Seite: Marke + ein Satz
   ============================================================ */
.cover { position: relative; min-height: 100svh; }
/* Marke sitzt am Gutter, vertikal exakt auf Bildschirmmitte —
   dieselbe Geometrie wie die getippte Marke im Video. */
.cover-inner {
  position: absolute;
  left: var(--gutter-page); right: var(--gutter-page);
  top: calc(50% - .53 * var(--size-hero));
}
.hero-mark {
  font-size: var(--size-hero); line-height: var(--lh-tight);
  margin: 0; font-weight: 400; font-family: var(--font-typewriter);
  letter-spacing: var(--track-head);
}
.tag-block {
  margin-top: var(--space-6);
  animation: o1-fade-up var(--dur-3) var(--ease-paper) 1.4s both;
}
.tagline { font-size: var(--size-body-lg); max-width: 44ch; }
.sub { max-width: 44ch; margin-top: var(--space-4); color: var(--text-muted); }
.whisper { color: var(--text-faint); }

/* ============================================================
   Hintergrund-Video — Typenhebel tippen die Marke, danach Text
   ============================================================ */
.veo {
  position: fixed; inset: 0; z-index: 5;
  background: var(--surface-page);
  transition: opacity 600ms var(--ease-paper);
}
/* Video breitenskaliert und so versetzt, dass seine Marke (im Frame: links 5,99 %,
   Größe 6,615 % der Breite, vertikal mittig) exakt auf der HTML-Marke liegt:
   --vidw = clamp(48px,6.6vw,104px) / 0.06615. Kanten weich ins Papier maskiert. */
.veo video {
  --vidw: clamp(725px, 99.77vw, 1572px);
  position: absolute; display: block;
  width: var(--vidw); height: auto;
  top: 50%; transform: translateY(-50%);
  left: calc(var(--gutter-page) - var(--vidw) * .0599);
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%),
                      linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(0deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%),
              linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-composite: intersect;
}
.veo.done { opacity: 0; pointer-events: none; }
body.video-wait .cover-inner { opacity: 0; }
body.video-done .cover-inner { animation: o1-fade-up var(--dur-3) var(--ease-paper) both; }
body.video-done .tag-block { animation-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-type: 0ms; }
  .tag-block { animation: none; }
}

@media (max-width: 768px) {
  /* Video ragt links aus dem Schirm — schmalere Horizontal-Maske, damit die
     Marke am Gutter nicht in den Kanten-Fade fällt. */
  .veo video {
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%),
                        linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(0deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%),
                linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}