/* ─────────────────────────────────────────────────────────────────────────
   Skribe — Site Motion Layer
   Additive Animations-Schicht. Wird auf allen Seiten geladen und ergänzt
   die seiteneigenen .reveal/.hero-anim-Definitionen.

   Designprinzipien:
   - Editorial, dezent, Kanzlei-tauglich. Keine Bouncy- oder Elastic-Easings.
   - Distanzen klein (≤16px), Durationen ≤700ms, Easings: ease-out-quart.
   - prefers-reduced-motion: weiche Variante — Distanzen schrumpfen,
     Bewegung wird nicht hart deaktiviert.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --motion-duration-fast: 200ms;
  --motion-duration-base: 480ms;
  --motion-duration-slow: 720ms;
  --motion-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-ease-exp: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-distance: 16px;
  --motion-distance-sm: 8px;
  --motion-lift: -3px;
  --motion-shadow-rest: 0 1px 2px rgba(12,14,13,0.04), 0 8px 24px rgba(12,14,13,0.05);
  --motion-shadow-hover: 0 2px 6px rgba(12,14,13,0.05), 0 18px 48px rgba(12,14,13,0.10);

  /* ─── Type-Scale Tokens (9-step semantic scale) ─────────────────────────
     Site-weit verbindlich. Reduziert 169 unique font-sizes auf 9 Rollen.
     Ratios sind 1.13-1.83 — eng im Body-Bereich (bewusst, da semantische
     Rollen unterschieden werden), Major-Third-ähnlich im Display-Bereich. */
  --type-eyebrow:  11px;                          /* Mono UPPERCASE eyebrow / kicker */
  --type-caption:  13px;                          /* Captions, attributions, small labels */
  --type-body-sm:  15px;                          /* UI text, list items, sub-body */
  --type-body:     17px;                          /* Standard body reading */
  --type-lead:     clamp(19px, 1.7vw, 22px);      /* Lead paragraphs / italic intros */
  --type-h3:       clamp(22px, 2.4vw, 28px);      /* Card / sub-section heading */
  --type-h2:       clamp(28px, 3.5vw, 40px);      /* Major section heading */
  --type-h1:       clamp(36px, 5vw, 56px);        /* Page main heading */
  --type-hero:     clamp(48px, 7vw, 88px);        /* Hero mega-headline / stat numbers */
}

/* ─── Page Load Choreografie ────────────────────────────────────────────
   Body bekommt .is-loaded sobald JS bootet. CSS-only Fade für Seiten,
   die keine eigene .hero-anim-Markup haben. */
body:not(.is-loaded) [data-motion-fade-load] {
  opacity: 0;
  transform: translateY(var(--motion-distance-sm));
}
[data-motion-fade-load] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration-slow) var(--motion-ease-out),
    transform var(--motion-duration-slow) var(--motion-ease-out);
  transition-delay: calc(var(--motion-load-delay, 0) * 80ms);
}

/* ─── Generic reveal fallback ───────────────────────────────────────────
   Falls eine Seite .reveal-Markup hat, aber kein eigenes CSS definiert.
   Die seiteneigene Regel hat Spezifität-Vorrang, wenn vorhanden. */
.motion-reveal {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition:
    opacity var(--motion-duration-base) var(--motion-ease-out),
    transform var(--motion-duration-base) var(--motion-ease-out);
  will-change: opacity, transform;
}
.motion-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Stagger-Index via custom property (JS setzt --motion-index auf Kinder) */
.motion-reveal[style*="--motion-index"] {
  transition-delay: calc(var(--motion-index) * 70ms);
}

/* ─── Number Counters ───────────────────────────────────────────────────
   Tabular nums + sanfter Wechsel. JS schreibt den Wert hoch. */
[data-counter] {
  font-variant-numeric: tabular-nums;
}
[data-counter]:not(.is-counted) {
  /* Bei Initial-State: leicht hervorheben, dass Wert noch zählt */
  color: inherit;
}

/* ─── Card hover microinteractions ──────────────────────────────────────
   Sanftes Anheben + Schatten. Greift nur auf klickbare/linkbare Karten,
   damit Decorative-Cards nicht ungewollt mitwippen. */
a > .card,
a > .persona-card,
a > .case-card,
a > .pillar,
a > .spotlight,
a > .proof,
a > .bento__card,
a > .audience__tile,
.card[href],
.persona-card[href],
.case-card[href],
.pillar[href],
.spotlight[href],
.card-link,
.card a.card__link {
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-out),
    box-shadow var(--motion-duration-fast) var(--motion-ease-out),
    border-color var(--motion-duration-fast) var(--motion-ease-out);
  will-change: transform;
}
a:hover > .card,
a:hover > .persona-card,
a:hover > .case-card,
a:hover > .pillar,
a:hover > .spotlight,
a:hover > .proof,
a:hover > .bento__card,
a:hover > .audience__tile,
.card[href]:hover,
.persona-card[href]:hover,
.case-card[href]:hover,
.pillar[href]:hover,
.spotlight[href]:hover {
  transform: translateY(var(--motion-lift));
  box-shadow: var(--motion-shadow-hover);
}

/* Arrow-Glyphen in Cards: leichter Schub bei hover */
a:hover > .card .card__arrow,
a:hover > .persona-card .persona-card__arrow,
.card[href]:hover .card__arrow,
.persona-card[href]:hover .persona-card__arrow,
.card a.card__link:hover .card__arrow {
  transform: translateX(4px);
}
.card__arrow,
.persona-card__arrow {
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
  display: inline-block;
  will-change: transform;
}

/* ─── Button-Hierarchie-Erweiterung ─────────────────────────────────────
   .btn--ghost als dritte Stufe der Hierarchie (nach primary + secondary).
   Transparent + accent-tinted hairline für tertiäre Actions:
   - Mid-Page-Outros ("Mehr ansehen", "Erfahrungen lesen")
   - Mailto-Fallbacks (office@skribe.law)
   - Externe Partner-Links wo kein primärer Conversion-Pfad gemeint ist.
   Visual Weight: niedriger als secondary, höher als nackter Text-Link. */
.btn--ghost {
  background: transparent;
  color: var(--accent-600);
  border-color: var(--accent-100);
}
.btn--ghost:hover {
  background: var(--accent-050);
  border-color: var(--accent-500);
  color: var(--accent-700);
}

/* ─── Editorial Body-Link Underline ─────────────────────────────────────
   Greift nur auf Links innerhalb .editorial, .body-copy, p, li — nicht
   auf Buttons, Cards oder Nav. */
.editorial p a:not(.btn):not(.card__link):not(.card__cta),
.body-copy a:not(.btn):not(.card__link):not(.card__cta),
.editorial li a:not(.btn):not(.card__link):not(.card__cta) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition:
    background-size var(--motion-duration-fast) var(--motion-ease-out),
    color var(--motion-duration-fast) var(--motion-ease-out);
}
.editorial p a:not(.btn):not(.card__link):not(.card__cta):hover,
.body-copy a:not(.btn):not(.card__link):not(.card__cta):hover,
.editorial li a:not(.btn):not(.card__link):not(.card__cta):hover {
  background-size: 0 1px;
  background-position: 100% 100%;
}

/* ─── Button microinteraction ───────────────────────────────────────────
   Subtil, nicht hüpfend. */
.btn,
button.btn,
a.btn {
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-out),
    background-color var(--motion-duration-fast) var(--motion-ease-out),
    color var(--motion-duration-fast) var(--motion-ease-out),
    border-color var(--motion-duration-fast) var(--motion-ease-out),
    box-shadow var(--motion-duration-fast) var(--motion-ease-out);
}
.btn:hover,
button.btn:hover,
a.btn:hover {
  transform: translateY(-1px);
}
.btn:active,
button.btn:active,
a.btn:active {
  transform: translateY(0);
  transition-duration: 80ms;
}

/* ─── Section soft-fade on scroll ────────────────────────────────────────
   Sektionen ohne explizite .reveal-Markup bekommen automatisch ein
   sanftes In-View über data-motion-section (JS setzt es). */
[data-motion-section] {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition:
    opacity var(--motion-duration-slow) var(--motion-ease-out),
    transform var(--motion-duration-slow) var(--motion-ease-out);
}
[data-motion-section].is-in {
  opacity: 1;
  transform: none;
}

/* ─── Image kenburns für Hero-Bilder (sehr dezent) ──────────────────────
   Optional via data-motion-kenburns. Sehr langsam, kaum wahrnehmbar. */
[data-motion-kenburns] {
  animation: motion-kenburns 18s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes motion-kenburns {
  from { transform: scale(1.00); }
  to   { transform: scale(1.04); }
}

/* ─── Em-Word-Reveal-Choreografie ───────────────────────────────────────
   Brand-Punchlines à la "Wird *erledigt*" oder "Fall *übergeben*" bekommen
   einen Beat: das `<em>` fadet 200ms NACH dem umgebenden Text ein.
   JS markiert Headlines mit `<em>`-Inhalt via [data-em-reveal]. */
[data-em-reveal] em {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 600ms var(--motion-ease-exp),
    transform 600ms var(--motion-ease-exp);
  transition-delay: 220ms;
  will-change: opacity, transform;
}
[data-em-reveal].is-in em,
[data-em-reveal].hero-anim em {
  opacity: 1;
  transform: none;
}

/* ─── Anchor-Scroll-Pulse ───────────────────────────────────────────────
   Beim Anker-Klick (oder Hash-URL-Load) bekommt das Ziel-Element für
   1.6s einen sanft pulsierenden Akzent-Glow — bestätigt "Du bist da". */
.is-anchor-pulse {
  animation: anchor-pulse 1600ms var(--motion-ease-out);
  border-radius: var(--r-md, 12px);
}
@keyframes anchor-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(42.1% 0.12 252 / 0); }
  12%  { box-shadow: 0 0 0 6px oklch(42.1% 0.12 252 / 0.32); }
  100% { box-shadow: 0 0 0 28px oklch(42.1% 0.12 252 / 0); }
}

/* ─── Reduced motion — Soft Variante ────────────────────────────────────
   User wollte: weichere Reduktion, nicht komplett deaktiviert.
   → Distanzen werden auf 0 reduziert, Opacity-Fade bleibt erhalten,
     Durationen werden gekürzt. So bleibt die zeitliche Choreografie
     spürbar, aber ohne Bewegungsreize. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-distance: 0px;
    --motion-distance-sm: 0px;
    --motion-lift: 0px;
    --motion-duration-fast: 120ms;
    --motion-duration-base: 220ms;
    --motion-duration-slow: 300ms;
  }
  [data-motion-kenburns] { animation: none; }
  [data-em-reveal] em { transition-duration: 200ms; transition-delay: 0ms; transform: none !important; }
  .is-anchor-pulse { animation-duration: 600ms; }
  .card__arrow,
  .persona-card__arrow { transition: none; }
  a:hover > .card,
  a:hover > .persona-card,
  a:hover > .case-card,
  a:hover > .pillar,
  a:hover > .spotlight,
  .card[href]:hover,
  .persona-card[href]:hover,
  .case-card[href]:hover { transform: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   Nav-Link Font-Size site-weit (2026-06-01)
   Hebt die optische Präsenz der Nav-Schrift auf hellem Background.
   Höhere Specificity (0,2,2) überschreibt page-interne .nav__links a Rules.
   ─────────────────────────────────────────────────────────────────────── */
header.nav .nav__links a,
header.nav .nav__links button {
  font-size: 16px;
}

/* ─── Delight Site-Weit: Wordmark-Punkt-Pulse (1× Page-Load) ──────── */
.nav__wordmark--center .wordmark__svg tspan:last-child {
  animation: skribe-dot-glow 1200ms cubic-bezier(0.22, 0.61, 0.36, 1) 600ms 1;
}
@keyframes skribe-dot-glow {
  0%   { fill-opacity: 1; }
  50%  { fill-opacity: 0.55; }
  100% { fill-opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__wordmark--center .wordmark__svg tspan:last-child { animation: none; }
}