/* ================= SCROLL REVEAL ANIMATIONS =================
   Add these rules to your styles.css (main page CSS)
   
   Usage: add class="reveal" to any element you want to animate on scroll.
   The JS in reveal.js handles triggering.
   
   For course/module cards: add class="reveal reveal--up"
   For hero text: add class="reveal reveal--left"
   For stats cards: add class="reveal reveal--scale"
======================================================== */

/* ---- Base state (hidden before reveal) ---- */
.reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Variants */
.reveal--up     { transform: translateY(32px); }
.reveal--left   { transform: translateX(-28px); }
.reveal--right  { transform: translateX(28px); }
.reveal--scale  { transform: scale(0.94); }

/* Active state (JS adds this class) */
.reveal.active {
  opacity: 1;
  transform: none;
}

/* Stagger delays for sibling groups */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.40s; }

/* ---- Respect reduced motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ================= HERO BADGE PULSE =================
   Add to .hero-badge in styles.css
======================================================== */

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.25); }
  50%       { box-shadow: 0 0 0 8px rgba(255, 204, 0, 0); }
}

.hero-badge {
  animation: badgePulse 2.8s ease infinite;
}


/* ================= COUNTER ANIMATION =================
   Applied automatically by main.js counter logic.
   The .counter element in stats-card will animate via JS.
======================================================== */

.counter {
  transition: color 0.3s ease;
}

.stats-card:hover .counter {
  color: #fff;
}


/* ================= CARD HOVER GLOW IMPROVEMENT =================
   Enhances existing .cours-intro and .module-card hover states
======================================================== */

.cours-intro,
.module-card,
.stats-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* ================= NAVBAR LINK ACTIVE UNDERLINE =================
   Highlights the current page link in the navbar
======================================================== */

.nav-link a.active {
  color: #ffcc00;
}

.nav-link a.active::after {
  width: 100%;
}

/* ================= BUTTON LOADING STATE =================
   For checkout and form submit buttons
======================================================== */

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

.payBtn.loading .btn-text::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0,0,0,0.3);
  border-top-color: #111;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}


/* ================= PAGE TRANSITION =================
   Smooth fade when navigating between pages.
   Add this to styles.css and the JS snippet to every page.
   
   JS snippet (add to the bottom of each page's script):
   
   document.querySelectorAll("a[href]").forEach(link => {
     link.addEventListener("click", e => {
       const href = link.getAttribute("href");
       if (href && !href.startsWith("#") && !href.startsWith("http") && !href.startsWith("mailto")) {
         e.preventDefault();
         document.body.classList.add("fade-out");
         setTimeout(() => window.location.href = href, 280);
       }
     });
   });
======================================================== */

body {
  animation: pageFadeIn 0.35s ease both;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.fade-out {
  animation: pageFadeOut 0.28s ease both;
}

@keyframes pageFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* ================= MODAL OPEN BODY LOCK =================
   Add js: document.body.classList.toggle("modal-open", isOpen)
======================================================== */

body.modal-open {
  overflow: hidden;
}


/* ================= COURSE CARD PROGRESS BAR ANIMATION =================
   For dashboard course cards — progress bar animates on load.
   The bar starts at width:0 and JS sets the final width with a transition.
   The CSS transition here provides the smooth animation.
======================================================== */

.course-card .progress {
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}