/* ───────────────────────────────────────────────────────────────
   erfolg-overdrive.css — register-konforme „overdrive"-Schicht.
   (1) View-Transitions: Karte → Detail-Hero (Shared-Element-Morph, cross-document).
   (3) Signature Hero-Moment: scroll-gekoppelte Skalierung + feines Licht/Korn + ruhige Typo-Entrance.
   Alles hinter prefers-reduced-motion und @supports; statische Fallbacks.
   Lädt zuletzt (nach erfolg-reading-sans.css bzw. erfolge.css).
   ─────────────────────────────────────────────────────────────── */

/* ===== (1) Cross-Document View Transitions ===== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* Geteilter Morph-Anker: Detail-Hero-Bild. Auf der Übersicht wird der Name
   per JS nur der angeklickten Karte zugewiesen (sonst Namens-Duplikat). */
.mag-hero__visual img { view-transition-name: hero-media; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(hero-media) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* ===== (3) Signature Hero-Moment ===== */

/* Feines Licht + Film-Korn über dem Hero-Bild (premium, nicht grell) */
.mag-hero__visual::before {            /* Korn */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05; mix-blend-mode: overlay;
}
.mag-hero__visual::after {             /* Licht-Sheen oben rechts */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(130% 95% at 74% 6%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 58%);
}

/* Scroll-gekoppelte Hero-Parallaxe: sanfte Skalierung + Drift (nur transform → 60fps) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .mag-hero__visual img {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 460px;
      will-change: transform;
    }
    @keyframes hero-parallax {
      from { transform: scale(1.0) translateY(0); }
      to   { transform: scale(1.06) translateY(-2%); }
    }
  }
}

/* Ruhige, gestaffelte Hero-Typo-Entrance beim Laden */
@media (prefers-reduced-motion: no-preference) {
  .mag-hero__text-top,
  .mag-hero__headline,
  .mag-hero__dek {
    animation: hero-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .mag-hero__headline { animation-delay: 0.06s; }
  .mag-hero__dek { animation-delay: 0.12s; }
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}