/* ================================================
   PREMIUM FX — Fude Academy
   Additive layer on top of animations.css.
   Zero layout impact: transforms, pseudo-elements,
   fixed/absolute overlays, CSS custom properties only.
   Gated via [data-animations="on"].
   ================================================ */

/* ── 0. Ensure cards can host pseudo overlays ────
   Setting position:relative on static cards is safe —
   they contain no escape-targeting absolute children. */
[data-animations="on"] .teacher-card,
[data-animations="on"] .testimonial-card,
[data-animations="on"] .course-card {
  position: relative;
}

/* ── 1. Scroll progress bar (top of viewport) ──── */
.pfx-scrollbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg,
    var(--color-gradient-start) 0%,
    var(--color-gradient-end) 50%,
    #6b8dff 100%);
  box-shadow: 0 0 10px rgba(40, 74, 255, 0.55);
  z-index: 10000;
  pointer-events: none;
  transform-origin: left center;
  transition: opacity 0.3s ease;
}

[data-animations="off"] .pfx-scrollbar { display: none; }

/* ── 2. Cursor-following spotlight on cards ──────
   Uses --mx / --my CSS vars updated by JS. Pure overlay,
   never affects layout. */
[data-animations="on"] .path-card,
[data-animations="on"] .course-card,
[data-animations="on"] .advantage-card,
[data-animations="on"] .testimonial-card,
[data-animations="on"] .cc-outline-card,
[data-animations="on"] .cc-camp-item,
[data-animations="on"] .teacher-card {
  --mx: 50%;
  --my: 50%;
}

[data-animations="on"] .path-card::before,
[data-animations="on"] .course-card::before,
[data-animations="on"] .advantage-card::before,
[data-animations="on"] .testimonial-card::before,
[data-animations="on"] .cc-outline-card::before,
[data-animations="on"] .cc-camp-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    22vw circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0) 55%
  );
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

[data-animations="on"] .advantage-card::before {
  background: radial-gradient(
    20vw circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0) 55%
  );
}

[data-animations="on"] .path-card:hover::before,
[data-animations="on"] .course-card:hover::before,
[data-animations="on"] .advantage-card:hover::before,
[data-animations="on"] .testimonial-card:hover::before,
[data-animations="on"] .cc-outline-card:hover::before,
[data-animations="on"] .cc-camp-item:hover::before {
  opacity: 1;
}

/* NOTE: overlay paints above static children by spec, but it is
   15–28% white with pointer-events:none — a soft sheen, not a cover.
   We deliberately avoid forcing children to position:relative because
   some (e.g. .step-badge) rely on position:absolute for layout. */

/* ── 3. Gradient-button shimmer sweep ──────────── */
[data-animations="on"] .btn-primary-gradient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-animations="on"] .btn-primary-gradient::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -80%;
  width: 55%;
  height: 180%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.28) 55%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

[data-animations="on"] .btn-primary-gradient:hover::after {
  left: 140%;
}

/* Outline button liquid glow */
[data-animations="on"] .btn-outline-white {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-animations="on"] .btn-outline-white::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 70%);
  transform: translate(-50%, -50%);
  transition: width 0.55s ease, height 0.55s ease;
  pointer-events: none;
  z-index: -1;
}

[data-animations="on"] .btn-outline-white:hover::after {
  width: 260%;
  height: 420%;
}

/* ── 4. Play button pulse ring ──────────────────
   .play-btn::after is used for the ▶ triangle in home.css —
   only ::before is available. Use one richer ring. */
[data-animations="on"] .play-btn {
  overflow: visible;
}

[data-animations="on"] .play-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  animation: pfx-pulse-ring 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: -1;
}

/* Pure transform + opacity keeps animation on the compositor.
   Animating border-width would trigger layout each frame. */
@keyframes pfx-pulse-ring {
  0%   { transform: scale(1);    opacity: 0.9; }
  60%  { opacity: 0.4; }
  100% { transform: scale(2.2);  opacity: 0;   }
}

/* Video thumbnail subtle lift on hover */
[data-animations="on"] .video-thumbnail {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.5s;
}

[data-animations="on"] .video-thumbnail:hover {
  transform: scale(1.015);
  box-shadow: 0 16px 48px rgba(9, 12, 179, 0.35);
}

/* ── 5. Nav logo breathing & hover rotate ─────── */
[data-animations="on"] .nav-logo {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s;
}

[data-animations="on"] .nav-brand:hover .nav-logo {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 6px 22px rgba(40, 74, 255, 0.38);
}

[data-animations="on"] .nav-brand-text {
  background: linear-gradient(90deg,
    var(--color-primary),
    #6b8dff,
    var(--color-primary));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.6s ease;
}

[data-animations="on"] .nav-brand:hover .nav-brand-text {
  background-position: 200% 0;
}

/* ── 6. Section line — flowing gradient ───────── */
[data-animations="on"] .section-line {
  background: linear-gradient(90deg,
    #3D65F3 0%, #6b8dff 50%, #3D65F3 100%);
  background-size: 200% 100%;
  animation: pfx-grad-flow 3.2s linear infinite;
}

@keyframes pfx-grad-flow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── 7. Hero background ultra-subtle Ken Burns ── */
[data-animations="on"] .hero-bg img,
[data-animations="on"] .cc-hero-bg img,
[data-animations="on"] .ab-hero-bg img,
[data-animations="on"] .wp-hero-bg img,
[data-animations="on"] .si-hero-bg img,
[data-animations="on"] .rm-hero-bg img,
[data-animations="on"] .fa-hero-bg img,
[data-animations="on"] .af-hero-bg img {
  animation: pfx-kenburns 24s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes pfx-kenburns {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.06) translate3d(-1.2%, -0.6%, 0); }
}

/* ── 8. Step-badge amplified hover ──────────────
   Works with existing path-card:hover uplift. */
[data-animations="on"] .step-badge {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s;
  will-change: transform;
}

[data-animations="on"] .path-card:hover .step-badge {
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 12px 28px rgba(40, 74, 255, 0.45);
}

/* ── 9. Course-card top accent bar ──────────────
   Reveals on hover, reinforces the uplift. */
[data-animations="on"] .course-card {
  overflow: hidden; /* already set elsewhere — reinforce */
}

[data-animations="on"] .course-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-gradient-start),
    var(--color-gradient-end),
    #6b8dff);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 3;
}

[data-animations="on"] .course-card:hover::after {
  transform: scaleX(1);
}

/* Rating pop on hover */
[data-animations="on"] .course-card:hover .course-rating {
  animation: pfx-rating-pop 0.55s ease;
}

@keyframes pfx-rating-pop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ── 10. Teacher photo — rotating conic halo ──── */
[data-animations="on"] .teacher-card {
  overflow: visible;
}

[data-animations="on"] .teacher-photo {
  isolation: isolate;
}

[data-animations="on"] .teacher-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-0.4vw);
  background: conic-gradient(from 0deg,
    rgba(40, 74, 255, 0) 0%,
    rgba(40, 74, 255, 0.55) 25%,
    rgba(107, 141, 255, 0.35) 50%,
    rgba(40, 74, 255, 0) 75%,
    rgba(40, 74, 255, 0) 100%);
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 0;
  animation: pfx-spin 6s linear infinite;
  animation-play-state: paused; /* Only spin when hovered — saves compositor */
}

[data-animations="on"] .teacher-card:hover::after {
  opacity: 0.65;
  animation-play-state: running;
}

@keyframes pfx-spin {
  from { rotate: 0deg;   }
  to   { rotate: 360deg; }
}

@media (max-width: 1023px) {
  [data-animations="on"] .teacher-card::after {
    width: 120px;
    height: 120px;
  }
}

/* ── 11. Advantage-card icon playful bobbing ──── */
[data-animations="on"] .advantage-img img {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

[data-animations="on"] .advantage-card:hover .advantage-img img {
  transform: translateY(-8px) rotate(-5deg) scale(1.06);
}

/* ── 12. Path-card-link arrow slide ─────────────
   Selector is just text — enhance spacing. */
[data-animations="on"] .path-card-link {
  display: inline-block;
  transition: color 0.3s ease, letter-spacing 0.3s ease,
              transform 0.3s ease;
  position: relative;
}

[data-animations="on"] .path-card-link:hover {
  letter-spacing: 1.5px;
  transform: translateX(2px);
}

/* ── 13. Custom cursor halo (pointer devices only) */
.pfx-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1.5px solid rgba(40, 74, 255, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40, 74, 255, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s,
              background 0.3s,
              opacity 0.3s;
  opacity: 0;
  mix-blend-mode: normal;
}

.pfx-cursor.is-active { opacity: 1; }

.pfx-cursor.is-hover {
  width: 56px;
  height: 56px;
  border-color: rgba(40, 74, 255, 0.85);
  background: radial-gradient(circle, rgba(40, 74, 255, 0.18), transparent 70%);
}

.pfx-cursor.is-pressed {
  width: 22px;
  height: 22px;
  background: rgba(40, 74, 255, 0.25);
}

@media (hover: none), (pointer: coarse) {
  .pfx-cursor { display: none !important; }
}

[data-animations="off"] .pfx-cursor { display: none; }

/* ── 14. Subtle 3D tilt class (applied by JS) ────
   Override transform-transition from animations.css
   (same specificity, premium-fx.css loads later).
   JS drives transform via rAF LERP — compounding a
   CSS transition would create laggy tilt. */
[data-animations="on"] [data-pfx-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0s linear, box-shadow 0.4s;
}

/* ── 15. Footer logo hover warm ──────────────── */
[data-animations="on"] .footer-logo-icon {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.5s;
}

[data-animations="on"] .footer-brand:hover .footer-logo-icon {
  transform: rotate(-6deg) scale(1.06);
  filter: drop-shadow(0 6px 22px rgba(107, 141, 255, 0.55));
}

/* ── 16. Tabs micro-lift ──────────────────────── */
[data-animations="on"] .courses-tabs .tab,
[data-animations="on"] .cc-tabs .tab {
  transition: color 0.3s ease,
              background-color 0.3s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s;
}

[data-animations="on"] .courses-tabs .tab:hover:not(.active),
[data-animations="on"] .cc-tabs .tab:hover:not(.active) {
  transform: translateY(-2px);
}

[data-animations="on"] .courses-tabs .tab.active,
[data-animations="on"] .cc-tabs .tab.active {
  box-shadow: 0 6px 20px rgba(40, 74, 255, 0.28);
}

/* ── 17. Reduced motion safety ──────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-animations="on"] .hero-bg img,
  [data-animations="on"] .cc-hero-bg img,
  [data-animations="on"] .ab-hero-bg img,
  [data-animations="on"] .wp-hero-bg img,
  [data-animations="on"] .si-hero-bg img,
  [data-animations="on"] .rm-hero-bg img,
  [data-animations="on"] .fa-hero-bg img,
  [data-animations="on"] .af-hero-bg img,
  [data-animations="on"] .section-line,
  [data-animations="on"] .play-btn::before,
  [data-animations="on"] .play-btn::after,
  [data-animations="on"] .teacher-card::after {
    animation: none !important;
  }
  .pfx-cursor, .pfx-scrollbar { display: none !important; }
}