/* motion.css — Angelova Motion-Layer (non-invasiv, greift nicht ins Claude-Design-Markup ein)
   Quellen: 21st.dev Spotlight-GlowCard + Container-Scroll · referenz-prompts/
   Marke: Pink #ab126e (hue ~322) → Indigo #364c9e (hue ~226) */

/* ---------- Spotlight-Glow auf Karten ---------- */
.mo-card { position: relative; }

/* leuchtender Rand, folgt der Maus */
.mo-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; padding: 2px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              hsl(var(--mo-hue, 322) 92% 70%) 0%, transparent 72%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease;
}
/* weicher Schein innen */
.mo-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              hsl(var(--mo-hue, 322) 88% 58% / .28) 0%, transparent 68%);
  opacity: 0; transition: opacity .4s ease;
}
.mo-card.is-hot::after,
.mo-card.is-hot::before { opacity: 1; }

/* leichtes Anheben + farbiger Schatten */
.mo-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.mo-card.is-hot { transform: translateY(-4px);
  box-shadow: 0 18px 40px -12px hsl(var(--mo-hue,322) 80% 30% / .45); }

/* ---------- Scroll-Tilt (21st.dev Container-Scroll):
     kippt beim Reinscrollen aus der 3D-Perspektive nach vorn.
     Transform hier EXPLIZIT kombiniert, damit Tilt + Hover-Anheben sich nicht überschreiben. ---------- */
/* Die Bühne ist eine eigene Hülle um die Karte — so kollidiert unsere Rotation nicht
   mit dem Inline-transform, den Claude Design auf die Karte selbst schreibt. */
.mo-tilt {
  transform-origin: center top;
  transform: perspective(1100px) rotateX(var(--mo-rx, 0deg));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .mo-tilt { transform: none !important; }
}

/* ---------- Scroll-Reveal (Klasse wird nach dem Einblenden entfernt,
     damit die eigenen Hover-Effekte der Seite unberührt bleiben) ---------- */
.mo-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1) var(--mo-delay, 0s),
              transform .7s cubic-bezier(.22,1,.36,1) var(--mo-delay, 0s);
  will-change: opacity, transform;
}
.mo-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Barrierefrei: wer Bewegung reduziert, bekommt keine ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mo-card::after, .mo-card::before { display: none; }
}