/* /static/module/motion/motion.css
 *
 * Shared animation system for all pages.
 * Load BEFORE page-specific CSS so pages can override if needed.
 *
 * Scroll Reveal 2.0
 *   .nv-animate-on-scroll  — hidden by default, revealed by IntersectionObserver
 *   data-anim="fade-up"    — slide up 16px + fade (DEFAULT if no data-anim)
 *   data-anim="fade-in"    — pure opacity fade
 *   data-anim="scale-in"   — scale from 0.97 + fade
 *   data-anim="slide-left" — slide from -18px + fade
 *   data-delay="0..500"    — stagger delay in ms (set via --nv-anim-delay by JS)
 *   .nv-animated           — toggled by JS when element enters viewport
 *
 * Card Tilt + Glow (desktop fine-pointer only)
 *   data-tilt="card"       — enables pointer-following 3D rotation + cursor glow
 *   .nv-tilt-active        — toggled by JS during pointer movement (disables CSS transition)
 *   --nv-tilt-mx/--nv-tilt-my — cursor position in %, set by JS for glow radial-gradient
 */

/* =========================
   Scroll Reveal 2.0
   ========================= */

.nv-animate-on-scroll {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  will-change: opacity, transform;
  /* transition set via inline style by motion.js to prevent page CSS 'transition: all' from
     clobbering the delay. Inline style has highest specificity, guaranteeing stagger works. */
}

.nv-animate-on-scroll.nv-animated {
  opacity: 1;
  transform: none;
}

.nv-animate-on-scroll[data-anim="fade-in"] { transform: none; }
.nv-animate-on-scroll[data-anim="fade-up"] { transform: translate3d(0, 16px, 0); }
.nv-animate-on-scroll[data-anim="scale-in"] { transform: scale(0.97); }
.nv-animate-on-scroll[data-anim="scale-in"].nv-animated { transform: scale(1); }
.nv-animate-on-scroll[data-anim="slide-left"] { transform: translate3d(-18px, 0, 0); }

/* =========================
   Card Tilt + Glow
   ========================= */

[data-tilt="card"] {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

[data-tilt="card"].nv-tilt-active {
  transition: none !important;
}

[data-tilt="card"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity 200ms ease;
  background: radial-gradient(
    500px circle at var(--nv-tilt-mx, 50%) var(--nv-tilt-my, 50%),
    rgba(0, 127, 127, 0.14),
    transparent 55%
  );
}

[data-tilt="card"]:hover::after {
  opacity: 1;
}

/* =========================
   CTA Button: Shine + Glow (Option A)
   .nv-btn-cta — Glow folgt Pointer (Desktop), Shine-Sweep bei Hover/Fokus.
   Tuning: radial size (700px), opacity, sweep duration (650ms).
   ========================= */

.nv-btn-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}

.nv-btn-cta .nv-btn-label {
  position: relative;
  z-index: 2;
}

/* Glow layer (--mx/--my via JS, fallback 50% 50%) */
.nv-btn-cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    700px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 127, 127, 0.3),
    rgba(242, 193, 79, 0.12),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 220ms var(--nv-transition-med, 0.28s cubic-bezier(0.33, 0.02, 0.11, 0.99));
}

/* Shine sweep */
.nv-btn-cta::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -40%;
  width: 40%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-140%) rotate(18deg);
  transition: transform 650ms var(--nv-transition-med, 0.28s cubic-bezier(0.33, 0.02, 0.11, 0.99));
  pointer-events: none;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .nv-btn-cta:hover::before,
  .nv-btn-cta:focus-visible::before {
    opacity: 1;
  }
  .nv-btn-cta:hover::after,
  .nv-btn-cta:focus-visible::after {
    transform: translateX(420%) rotate(18deg);
  }
}

.nv-btn-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 127, 127, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .nv-btn-cta::after {
    transition: none;
  }
  .nv-btn-cta::before {
    transition: none;
  }
}

/* =========================
   Accessibility / Reduced Motion
   ========================= */

@media (prefers-reduced-motion: reduce) {
  .nv-animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  [data-tilt="card"] {
    will-change: auto;
  }

  [data-tilt="card"]::after {
    display: none;
  }
}

@media (pointer: coarse) {
  [data-tilt="card"]::after {
    display: none;
  }
}