/* ══════════════════════════════════════════════════════
   ANIMATIONS & INTERACTIONS
   ══════════════════════════════════════════════════════ */


/* ════════════════════════════════════════
   1. HERO ENTRANCE — staggered on page load
   ════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.hero__eyebrow  { animation: fadeUp 0.70s ease both 0.10s; }
.hero__headline { animation: fadeUp 0.85s ease both 0.28s; }
.hero__subtitle { animation: fadeUp 0.75s ease both 0.48s; }
.hero__bottom   { animation: fadeUp 0.75s ease both 0.68s; }


/* ════════════════════════════════════════
   2. SCROLL REVEAL
   JS adds .reveal to targeted elements.
   IntersectionObserver adds .is-visible.
   ════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.75s ease var(--reveal-delay, 0s),
    transform 0.75s ease var(--reveal-delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* ════════════════════════════════════════
   3. CTA BUTTON PULSE GLOW
   ════════════════════════════════════════ */
@keyframes ctaGlow {
  0%, 100% {
    filter: drop-shadow(0 0  0px rgba(213, 153, 62, 0.00));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(213, 153, 62, 0.55))
            drop-shadow(0 0  6px rgba(213, 153, 62, 0.30));
  }
}
.btn--cta {
  animation: ctaGlow 3.2s ease-in-out 1.2s infinite;
}


/* ════════════════════════════════════════
   4. ORB FLOAT KEYFRAMES
   ════════════════════════════════════════ */
@keyframes orbFloat {
  0%, 100% { transform: translateY(  0px); }
  50%       { transform: translateY(-18px); }
}
@keyframes orbFloatAlt {
  0%, 100% { transform: translateY( 0px); }
  50%       { transform: translateY(14px); }
}


/* ════════════════════════════════════════
   5. LARGE BLURRED GLOWS — opacity breathe
   (.hero__glow and .s3__glow have filter:blur
   already, so we only animate opacity here.)
   ════════════════════════════════════════ */
@keyframes glowBreathe {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1.00; }
}

.hero__glow {
  animation:
    orbFloat     10s ease-in-out 0s   infinite,
    glowBreathe   7s ease-in-out 0s   infinite;
}
.s3__glow {
  animation: glowBreathe 8s ease-in-out 1s infinite;
}
.s7__book-glow {
  animation: glowBreathe 9s ease-in-out 3s infinite;
}


/* ════════════════════════════════════════
   6. MEDIUM SOLID ORBS — float + brightness pulse
   (These have no filter:blur, so filter:brightness
   is safe and makes them visibly breathe.)
   ════════════════════════════════════════ */
@keyframes orbGlowPulse {
  0%, 100% { filter: brightness(0.82); }
  50%       { filter: brightness(1.28); }
}

.hero__orb {
  animation:
    orbFloat      9s ease-in-out 0.0s infinite,
    orbGlowPulse  5s ease-in-out 0.5s infinite;
}
.s6__planet {
  animation:
    orbFloatAlt  14s ease-in-out 0.0s infinite,
    orbGlowPulse  4.5s ease-in-out 0.8s infinite;
}
.s7__orb {
  animation:
    orbFloatAlt  11s ease-in-out 0.5s infinite,
    orbGlowPulse  6s ease-in-out 1.5s infinite;
}
.s9__orb {
  animation:
    orbFloat     12s ease-in-out 2.0s infinite,
    orbGlowPulse  5.5s ease-in-out 0.3s infinite;
}


/* ════════════════════════════════════════
   7. HERO DOTS — ripple rings + twinkle
   ════════════════════════════════════════ */



/* ════════════════════════════════════════
   8. PARALLAX — JS sets transform directly
   will-change hints, smooth transition for
   scroll-based parallax.
   ════════════════════════════════════════ */
.s4__mesh,
.s5__diamond {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Hero elements — JS-driven mouse parallax */
.hero__watermark-wrap,
.hero__glow,
.hero__orb {
  will-change: transform;
}
/* NOTE: .hero__dot intentionally excluded — will-change:transform clips ::before/::after */


/* ════════════════════════════════════════
   9. S7 WORKBOOK HOVER — subtle glow brighten
   ════════════════════════════════════════ */
.s7__book {
  transition: filter 0.3s ease;
}
.s7__book:hover {
  filter: brightness(1.08);
}


/* ════════════════════════════════════════
   10. TESTIMONIAL CARD HOVER
   ════════════════════════════════════════ */
.s8__card {
  transition:
    transform    0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.30s ease,
    box-shadow   0.30s ease;
}
.s8__card:hover {
  transform: translateY(-6px);
  border-color: rgba(213, 153, 62, 0.25);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}