/* ============================================
   FUNKICK GRD — ANIMATIONS
   Subtle, GPU-accelerated, brand-aligned
   ============================================ */

/* ===== KEYFRAMES ===== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ringPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.5; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) rotate(0deg);
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.3; }
  100% {
    opacity: 0;
    transform: translateY(-10vh) rotate(360deg);
  }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes subtlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* ===== SCROLL-TRIGGERED ANIMATIONS ===== */
.animate-fadeup {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: var(--delay, 0s);
}

.animate-fadein {
  opacity: 0;
  transition: opacity 0.8s ease;
  transition-delay: var(--delay, 0s);
}

.animate-fadeup.is-visible,
.animate-fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== INITIAL LOAD ANIMATIONS ===== */
.hero-content.animate-fadeup {
  animation: fadeUp 0.9s ease 0.2s both;
}

.hero-visual.animate-fadein {
  animation: fadeIn 1.1s ease 0.5s both;
}

/* ===== HOVER EFFECTS ===== */
.btn {
  will-change: transform;
}

.what-card,
.class-card,
.testimonial-card,
.team-card,
.value-card {
  will-change: transform;
}

/* ===== PAGE TRANSITIONS ===== */
body {
  animation: fadeIn 0.4s ease;
}

/* ===== MARQUEE ===== */
.marquee-band:hover .marquee-track {
  animation-play-state: paused;
}

/* ===== HERO RINGS ===== */
.hero-visual-ring {
  will-change: transform, opacity;
}

/* ===== STAGGER HELPER ===== */
.stagger-1 { --delay: 0.1s; }
.stagger-2 { --delay: 0.2s; }
.stagger-3 { --delay: 0.3s; }
.stagger-4 { --delay: 0.4s; }
.stagger-5 { --delay: 0.5s; }

/* ===== LINK HOVER ===== */
a {
  transition: color var(--transition-fast, 0.2s ease);
}

/* ===== SCROLL HIGHLIGHT ===== */
:target {
  scroll-margin-top: 100px;
}