/* =========================
   Base reveal states
   ========================= */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
}

/* toggled by JS when element enters/leaves viewport */
.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Keyframes (8 popular effects)
   ========================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes colorWave {
  0%   { color:#ff4b5c; background:#222; }
  25%  { color:#ffb400; background:#333; }
  50%  { color:#3ae374; background:#222; }
  75%  { color:#17c0eb; background:#333; }
  100% { color:#ff4b5c; background:#222; }
}

@keyframes glow {
  0%,100% { text-shadow: 0 0 10px #fff, 0 0 20px #0ff; }
  50%     { text-shadow: 0 0 20px #0ff, 0 0 40px #0ff; }
}

@keyframes bounce {
  0%,20%,50%,80%,100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

@keyframes zoomIn {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes slideInLeft {
  0%   { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0);     opacity: 1; }
}

@keyframes slideInRight {
  0%   { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

@keyframes rotateIn {
  from { transform: rotate(-200deg); opacity: 0; }
  to   { transform: rotate(0);       opacity: 1; }
}

/* =========================
   Effect classes (use with .reveal)
   NOTE: animations read optional CSS var --delay (set by data-delay)
   ========================= */
.animate-fade-in-up.in-view   { animation: fadeInUp 1s ease-out forwards; animation-delay: var(--delay, 0s); }
.animate-color-wave.in-view   { animation: colorWave 3s linear infinite;  animation-delay: var(--delay, 0s); }
.animate-glow.in-view         { animation: glow 1.5s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
.animate-bounce.in-view       { animation: bounce 2s ease infinite; animation-delay: var(--delay, 0s); }
.animate-zoom-in.in-view      { animation: zoomIn 1s ease forwards; animation-delay: var(--delay, 0s); }
.animate-slide-in-left.in-view{ animation: slideInLeft 1s ease forwards; animation-delay: var(--delay, 0s); }
.animate-slide-in-right.in-view{ animation: slideInRight 1s ease forwards; animation-delay: var(--delay, 0s); }
.animate-rotate-in.in-view    { animation: rotateIn 1s ease forwards; animation-delay: var(--delay, 0s); }

/* =========================
   Inner <h2> animations that match the container variant
   Works for your three sections:
   - .class-feature        (zoom in)
   - .class-objectives     (slide in left)
   - .what-learn           (slide in right)
   ========================= */


/* when the section is in view, animate its h2s with the same variant */
.class-feature.animate-zoom-in.in-view h2        { animation: zoomIn 0.7s ease forwards; }
.class-objectives.animate-slide-in-left.in-view h2{ animation: slideInLeft 0.6s ease-out forwards; }
.what-learn.animate-slide-in-right.in-view h2    { animation: slideInRight 0.6s ease-out forwards; }

/* stagger inner <h2> (adjust as needed) */
.class-feature.in-view h2:nth-of-type(1),
.class-objectives.in-view h2:nth-of-type(1),
.what-learn.in-view h2:nth-of-type(1) { animation-delay: 0s; }

.class-feature.in-view h2:nth-of-type(2),
.class-objectives.in-view h2:nth-of-type(2),
.what-learn.in-view h2:nth-of-type(2) { animation-delay: 0.12s; }

.class-feature.in-view h2:nth-of-type(3),
.class-objectives.in-view h2:nth-of-type(3),
.what-learn.in-view h2:nth-of-type(3) { animation-delay: 0.24s; }

.class-feature.in-view h2:nth-of-type(4),
.class-objectives.in-view h2:nth-of-type(4),
.what-learn.in-view h2:nth-of-type(4) { animation-delay: 0.36s; }

/* =========================
   Fallback + Accessibility
   ========================= */
.no-io .reveal {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .class-feature h2,
  .class-objectives h2,
  .what-learn h2 {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}