/* © ONLINE NETWORK VISION S.L. — deine-neue-webseite.org — dnw-wz-kino-20261002
   KINO · 02.10.2026 · Scroll-Erzählung mit GSAP 3.13 (frei seit 04/2025, Standardlizenz)
   Was hier steht, bewegt nur transform und opacity und räumt am Ende auf (kino.js setzt clearProps),
   damit in Safari kein Text als Bitmap stehen bleibt. Bei reduzierter Bewegung passiert nichts. */

/* ── Vorher/Nachher am Rechner: die Linie folgt dem Scrollen, die drei Punkte leuchten nacheinander ── */
.benefit-row > div{transition:opacity .4s ease, transform .4s ease}
.kino-an .benefit-row > div{opacity:.42}
.kino-an .benefit-row > div.an{opacity:1}
.kino-an .benefit-row > div b{transition:color .4s ease, text-shadow .4s ease}
.kino-an .benefit-row > div.an b{color:#ffd77d;text-shadow:0 0 18px rgba(239,183,76,.55)}
#comparison.kino-scrub .compare-after,#comparison.kino-scrub .compare-line{transition:none}

/* ── Preiskarte: einmaliger Goldschein, wenn sie ins Bild kommt ── */
.price-card{position:relative;overflow:hidden}
.price-card::after{
  content:"";position:absolute;inset:-40% -60%;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,215,125,.28) 50%,transparent 58%);
  transform:translateX(-60%);
}
.price-card.leuchtet::after{animation:preis-schein 1.6s cubic-bezier(.2,.7,.2,1) 1 forwards}
@keyframes preis-schein{0%{opacity:0;transform:translateX(-60%)}12%{opacity:1}100%{opacity:0;transform:translateX(60%)}}

/* ── Goldlicht folgt dem Zeiger über den Referenzen (nur feiner Zeiger) ── */
@media (hover:hover) and (pointer:fine){
  .project,.ref{position:relative}
  .project::after,.ref::after{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;
    background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(239,183,76,.16),transparent 62%);
    transition:opacity .35s ease;
  }
  .project:hover::after,.ref:hover::after{opacity:1}
}

/* Platzhalter-Zustand vor der Einblendung – nur mit laufendem Skript (Klasse am html), sonst alles sichtbar */
.kino-an .kino-wort{display:inline-block;will-change:transform}
@media (prefers-reduced-motion:reduce){
  .kino-an .benefit-row > div{opacity:1}
  .price-card.leuchtet::after{animation:none}
}