/*
 * Landing performance patch
 * Loaded after main.840530ac.css to override hover/transition issues
 * without rebuilding the original bundle.
 *
 * Targets the lag observed on:
 *   - Hover on course cards (.video-card)
 *   - Scroll/swipe on Q&A and benefit lists (.video-link, .channel-link)
 *   - Section transitions (.intro-section, .subscription-form-container)
 */

/* ===== Hardware-accelerate hover-animated elements ===== */
.video-card,
.video-link,
.channel-link,
.return-button,
.back-button,
.submit-button,
.play-button,
.footer-link {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Drop the costly backdrop-filter on cards — same visual effect with
   a slightly more opaque background, but no GPU blur per frame. */
.video-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #0009 !important;
}

/* Use cheaper, dedicated transitions instead of `transition: all` */
.video-card {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease !important;
}

.video-card:hover {
  /* translate3d so the GPU keeps it on a layer */
  transform: translate3d(0, -8px, 0) !important;
}

/* The hero/intro section has blur(10–12px) which forces a paint on every
   scroll frame. Drop it; keep the dark gradient. */
.intro-section,
.subscription-form-container {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* `transition: all .3s` is wasteful — narrow it to actually animated props */
.return-button,
.back-button,
.submit-button,
.channel-link,
.play-button {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* Smooth scroll & momentum on lists */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-overflow-scrolling: touch;
}

/* Reduce motion if user prefers — accessibility + extra perf */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}