/* =========================================
   ANIMATIONS — Skoolapps
   ========================================= */

/* ── Scroll reveal base states ── */
.reveal        { opacity:0; transform:translateY(36px);   transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal-left   { opacity:0; transform:translateX(-40px);  transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal-right  { opacity:0; transform:translateX(40px);   transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal-scale  { opacity:0; transform:scale(0.88);        transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible,.reveal-left.visible,.reveal-right.visible,.reveal-scale.visible {
  opacity:1; transform:none;
}
.delay-1 { transition-delay:0.08s; }
.delay-2 { transition-delay:0.16s; }
.delay-3 { transition-delay:0.24s; }
.delay-4 { transition-delay:0.32s; }
.delay-5 { transition-delay:0.40s; }

/* ── Parallax layers (JS-driven via CSS var) ── */
[data-parallax] {
  will-change: transform;
}

/* ── Hero dot grid parallax ── */
.hero__bg-dots {
  transition: none;
  will-change: transform;
}

/* ── Floating cards: keep existing keyframes, enhance ── */
@keyframes float-a {
  0%,100% { transform: translateY(0px) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(1deg); }
}
@keyframes float-b {
  0%,100% { transform: translateY(-50%) rotate(1deg); }
  50%      { transform: translateY(calc(-50% - 14px)) rotate(-1deg); }
}
@keyframes float-c {
  0%,100% { transform: translateY(0px) rotate(1deg); }
  50%      { transform: translateY(-10px) rotate(-1deg); }
}
.hero__card--fees    { animation: float-a 4s ease-in-out infinite; }
.hero__card--attend  { animation: float-b 5s ease-in-out infinite 0.8s; }
.hero__card--students{ animation: float-c 3.8s ease-in-out infinite 1.6s; }

/* ── Spin rings ── */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.hero__illustration-ring--1 { animation: spin-slow 28s linear infinite; }
.hero__illustration-ring--2 { animation: spin-slow 18s linear infinite reverse; }

/* ── Stat cards count-up pulse ── */
@keyframes countPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.stat-card__number.animating { animation: countPulse 0.3s ease; }

/* ── Feature icon hover ── */
.feature-item__icon-wrap {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
}
.feature-item:hover .feature-item__icon-wrap {
  transform: translateY(-8px) scale(1.04) rotate(-2deg);
  box-shadow: 0 24px 60px rgba(42,122,75,0.30);
}

/* ── Module cards ── */
.module-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.module-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(42,122,75,0.20);
}

/* ── Value / team cards ── */
.value-card, .team-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
}
.value-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 16px 40px rgba(42,122,75,0.18); }
.team-card:hover  { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }

/* ── Buttons ── */
.btn {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.25s ease, background 0.2s ease;
}
.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(0.97); }

/* ── Stat circle hover ── */
.stat-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
}
.stat-card:hover { transform: translateY(-8px) scale(1.05); }

/* ── Section label pop ── */
.section-label {
  display: inline-block;
  animation: none;
  transition: transform 0.3s ease;
}
.section-label:hover { transform: scale(1.04); }

/* ── Ticker / marquee for trust strip ── */
.ticker-wrap {
  overflow: hidden;
  background: var(--clr-primary-dark);
  padding: var(--sp-3) 0;
}
.ticker {
  display: flex;
  gap: var(--sp-12);
  white-space: nowrap;
  animation: ticker 22s linear infinite;
  width: max-content;
}
.ticker-item {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ticker-item span { color: var(--clr-accent); margin-right: var(--sp-3); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Page entrance ── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
body { animation: pageFadeIn 0.5s ease forwards; }

/* ── Ripple on CTA click ── */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple-anim 0.55s linear;
  pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* ── Magnetic hover glow on hero cards ── */
.hero__card {
  transition: box-shadow 0.3s ease, transform 0.15s ease;
}
.hero__card:hover {
  box-shadow: 0 12px 40px rgba(42,122,75,0.22);
}

/* ── About visual stat number count ── */
@keyframes slideUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.about-visual-stat__num.visible { animation: slideUp 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }