/* =========================================================
   CodeKids — animations.css
   Keyframes and animation utility classes
   (GSAP/AOS/Swiper handle most triggered motion via JS;
   this file defines the reusable keyframes and small CSS-only effects)
   ========================================================= */

/* ---------- Ripple effect on buttons ---------- */
@keyframes ripple-anim {
  from {
    transform: scale(0);
    opacity: 0.7;
  }
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* ---------- Floating hero icons ---------- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.hero__float--rocket {
  animation: float-y 4.5s ease-in-out infinite;
}

.hero__float--gamepad {
  animation: float-y 5.5s ease-in-out infinite;
  animation-delay: 0.6s;
}

/* ---------- Gentle pulse for badge ---------- */
@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.25); }
  50% { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
}

.badge {
  animation: pulse-soft 2.6s ease-in-out infinite;
}

/* ---------- Spin for loading / decorative use ---------- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Fade helpers (fallback when AOS/GSAP unavailable) ---------- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.js-reveal {
  opacity: 0;
}

.js-reveal.is-revealed {
  animation: fade-in-up 0.7s var(--ease) forwards;
}

/* ---------- Skeleton shimmer for form submit state ---------- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.is-loading {
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.15) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

/* ---------- Card hover lift (progressive enhancement, JS may add class) ---------- */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-6px);
}

/* ---------- Scroll-triggered underline draw ---------- */
@keyframes underline-draw {
  from { width: 0; }
  to { width: 100%; }
}

.accent-underline.is-inview::after {
  animation: underline-draw 0.6s var(--ease) forwards;
}

/* ---------- Success message pop-in ---------- */
@keyframes pop-in {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

.program-form__success:not([hidden]) {
  animation: pop-in 0.4s var(--ease);
}


.typing-cursor{
    color:#8b5cf6;
    font-weight:bold;
    animation:blink .8s infinite;
}

@keyframes blink{
    50%{
        opacity:0;
    }
}