/* ═══════════════════════════════════════════════════════════
   TheDevStudio — Index Page Animations
   All classes are prefixed/scoped so nothing bleeds elsewhere
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. HERO STAGGERED ENTRANCE ─────────────────────────── */
.hero-tagline {
  animation: heroSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.hero-title1 {
  animation: heroSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
.hero-title2 {
  animation: heroSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both;
}
.hero > .container > p {
  animation: heroSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
}
.hero .buttons {
  animation: heroSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.64s both;
}
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ─── 2. ROCKET FLOAT ────────────────────────────────────── */
.hero-tagline i {
  display: inline-block;
  animation: rocketFloat 2.6s ease-in-out infinite;
}
@keyframes rocketFloat {
  0%, 100% { transform: translateY(0)    rotate(0deg);   }
  50%       { transform: translateY(-5px) rotate(-12deg); }
}

/* ─── 3. SCROLL ANIMATION BASE CLASSES ───────────────────── */
.scroll-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-slide-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-slide-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Opacity-only fade marker — NO transition set here.
   The element keeps its own CSS transition (which must include opacity).
   This avoids wiping out hover transitions (glow, lift, border-color).  */
.scroll-fade-opacity {
  opacity: 0;
}

/* Revealed state */
.scroll-in-view {
  opacity: 1 !important;
}
/* Only kill the transform for classes that actually animate it */
.scroll-fade-up.scroll-in-view,
.scroll-slide-left.scroll-in-view,
.scroll-slide-right.scroll-in-view {
  transform: none !important;
}

/* ─── 4. ICON HOVER BOUNCE (Why DevStudio cards) ─────────── */
.learning-card .icon {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.learning-card:hover .icon {
  transform: scale(1.3) rotate(-10deg);
}

/* ─── 5. BUTTON SHIMMER (Get Started CTA) ────────────────── */
.learning-btn {
  position: relative;
  overflow: hidden;
}
.learning-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 100%
  );
  transform: translateX(-150%) skewX(-15deg);
  pointer-events: none;
  animation: btnShimmer 3.5s ease-in-out 1.5s infinite;
}
@keyframes btnShimmer {
  0%,  35% { transform: translateX(-150%) skewX(-15deg); }
  65%, 100% { transform: translateX(320%)  skewX(-15deg); }
}

/* ─── 6. CHALLENGE CARDS — DIFFICULTY GLOWS + HOVER LIFT ─── */
/* Extend home.css transition to also cover opacity (for scroll-fade-opacity),
   transform and box-shadow (for hover lift + glow).                           */
.challenges-card {
  transition: border-color 0.2s,
              transform    0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow   0.3s ease,
              opacity      0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Unified brand hover glow for all challenge cards */
.challenges-card:hover {
  transform:    translateY(-4px);
  border-color: var(--teal) !important;
  box-shadow:   0 0 28px rgba(96, 163, 166, 0.35), 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ─── 7. FEATURED COURSE CARDS — add opacity to existing transition ── */
/* home.css has transform/box-shadow/border-color — we extend it with opacity
   so scroll-fade-opacity can animate the fade without a separate transition. */
.featured-courses .courses-card {
  transition: transform     0.25s ease,
              box-shadow    0.25s ease,
              border-color  0.25s ease,
              opacity       0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── 8. DIFFICULTY DOT PULSE ────────────────────────────── */
.challenge-category-dot {
  animation: dotPulse 2.2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(1.65); opacity: 0.65; }
}

/* ─── 9. CTA SECTION PULSE ───────────────────────────────── */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 8px 40px rgba(255, 64, 160, 0.15); }
  50%       { box-shadow: 0 8px 64px rgba(96, 163, 166, 0.3);  }
}
.start-learning {
  animation: ctaGlow 5s ease-in-out infinite;
}

/* ─── 10. STAT CARD HOVER BORDER PULSE ───────────────────── */
@keyframes borderGlow {
  0%, 100% { border-color: transparent; }
  50%       { border-color: var(--pink, #FF40A0); }
}