/* kaufmeingold.de — motion.css — Brutal-Editorial Motion-Sprache
 * Patterns 6.1-6.10 aus BUILD-BRIEF.md (2026-05-26).
 * Statische Styles für Motion-Komponenten. Logik in /js/motion.js.
 * Reduced-Motion: harter Override am Ende der Datei.
 */

/* ─────────────────────────────────────────────────────────────
 * 6.1 Word-Stagger-Reveal (Hero-Title)
 * Wort wird in .lr-word gewrappt; white-space:nowrap verhindert Mid-Word-Break.
 * ───────────────────────────────────────────────────────────── */
.lr-word {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(36%) rotate(2deg);
  transform-origin: 0 100%;
  will-change: transform, opacity;
  transition: opacity var(--dur-slow, 680ms) var(--ease-decel, cubic-bezier(0.16, 1, 0.3, 1)),
              transform var(--dur-slow, 680ms) var(--ease-decel, cubic-bezier(0.16, 1, 0.3, 1));
}
[data-lr].is-visible .lr-word,
[data-lr] .lr-word.is-in {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────
 * 6.2 Spot-Tickdown (Live-Kurs-Update)
 * Bei Update bekommen alle spot-value-Elemente .is-ticking.
 * ───────────────────────────────────────────────────────────── */
[data-spot-value].is-ticking,
[data-spot-value-large].is-ticking {
  color: var(--c-champagne, #c9a44a);
  transition: color var(--dur-base, 420ms) var(--ease-standard, cubic-bezier(0.2, 0.7, 0.2, 1));
}

/* ─────────────────────────────────────────────────────────────
 * 6.3 Sticky-Story-Pin (Bewertung-Pin)
 * Step wird via IntersectionObserver auf .is-current geschaltet.
 * ───────────────────────────────────────────────────────────── */
.bewertung-step {
  opacity: 0.4;
  transition: opacity var(--dur-base, 420ms) var(--ease-standard, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.bewertung-step.is-current {
  opacity: 1;
}
[data-pin-progress] {
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
 * 6.4 Magnetic-CTA (RAF-Lerp via inline transform)
 * Nur Hover+Pointer:Fine. transition für sanftes Reset bei leave.
 * ───────────────────────────────────────────────────────────── */
[data-magnet] {
  transition: transform var(--dur-quick, 220ms) var(--ease-decel, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────────
 * 6.5 Custom-Cursor (Dot + Ring, mix-blend-mode: difference)
 * Aktiv nur wenn html.has-cursor (in JS gesetzt).
 * ───────────────────────────────────────────────────────────── */
.has-cursor,
.has-cursor * {
  cursor: none !important;
}
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor, 90);
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--c-paper, #f7f1de);
  border-radius: 50%;
}
.cursor-ring {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid var(--c-champagne, #c9a44a);
  border-radius: 50%;
  transition: width 180ms ease, height 180ms ease, margin 180ms ease;
}
.has-cursor.is-hovering .cursor-ring {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
}

/* ─────────────────────────────────────────────────────────────
 * 6.6 Reading-Progress (nur /wissen/<slug>/)
 * 2px-Bar oben, Champagne-Farbe.
 * ───────────────────────────────────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--c-champagne, #c9a44a);
  z-index: var(--z-header, 20);
  transition: width 100ms linear;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
 * 6.7 Footer-Marquee (auto-scroll, doppelter Track)
 * Animation kann auf Hover pausieren.
 * ───────────────────────────────────────────────────────────── */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
[data-marquee] {
  overflow: hidden;
}
[data-marquee-track],
.site-footer__marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}
[data-marquee]:hover [data-marquee-track],
.site-footer__marquee:hover .site-footer__marquee-track {
  animation-play-state: paused;
}

/* ─────────────────────────────────────────────────────────────
 * 6.8 View-Transitions (Page-zu-Page)
 * Native CSS — JS triggert document.startViewTransition.
 * ───────────────────────────────────────────────────────────── */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────
 * 6.9 KPI-Counter — keine eigenen Styles (textContent-driven).
 * 6.10 Sticky-Header-Shrink — Klasse .is-scrolled (in site.css definiert).
 * ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
 * Reduced-Motion: deaktiviert alles Bewegliche.
 * ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lr-word,
  [data-spot-value],
  [data-spot-value-large],
  [data-marquee-track],
  .site-footer__marquee-track,
  [data-magnet],
  .cursor-dot,
  .cursor-ring,
  .bewertung-step {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  [data-lr] .lr-word,
  .lr-word {
    opacity: 1 !important;
    transform: none !important;
  }
  .bewertung-step {
    opacity: 1 !important;
  }
  .reading-progress {
    display: none !important;
  }
}