/* ============================================================
   Interaktivitäts-Layer (token-basiert, ergänzt style.css)
   Bewusst schlank: Wort-Reveals + Karten-Tilt (+ Benefit-Icons).
   ============================================================ */

/* ---------- Wort-Reveals in Headlines ---------- */
.wsplit .wword {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--wi, 0) * 55ms),
    opacity 0.55s ease calc(var(--wi, 0) * 55ms);
}
.wsplit.in .wword { opacity: 1; transform: none; }

/* ---------- Karten: Glanzlicht folgt dem Cursor ---------- */
.tilt { position: relative; will-change: transform; }
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(18, 20, 46, 0.05), transparent 60%);
}
.tilt:hover::after { opacity: 1; }

/* ---------- Benefit-Icons: nachzeichnen beim Hover ---------- */
.benefit svg path, .benefit svg circle, .benefit svg rect {
  stroke-dasharray: 130;
  stroke-dashoffset: 0;
}
.benefit:hover svg path, .benefit:hover svg circle, .benefit:hover svg rect {
  animation: icon-draw 0.9s ease forwards;
}
@keyframes icon-draw {
  from { stroke-dashoffset: 130; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wsplit .wword { opacity: 1 !important; transform: none !important; transition: none !important; }
  .benefit:hover svg path, .benefit:hover svg circle, .benefit:hover svg rect { animation: none; }
}