/* ============================================================
   KV26 THEME LIBRARY — ANIMATIONS
   All @keyframes + animation application rules (scoped under .kv26-theme)
   Load order: after kv26-main.css and kv26-responsive-mobile.css
   ============================================================ */

/* ============================================================
   @KEYFRAMES (global — cannot be scoped)
   ============================================================ */

/* ── Aurora ── */
@keyframes auroraPulse {
  0%   { opacity: 0.65; filter: blur(55px); }
  40%  { opacity: 0.85; filter: blur(45px); }
  100% { opacity: 0.60; filter: blur(65px); }
}

@keyframes aband1 { to { --a1: 360deg; } }
@keyframes aband2 { to { --a2: 420deg; } }
@keyframes aband3 { to { --a3: 480deg; } }
@keyframes aband4 { to { --a4: 560deg; } }

@keyframes barGlow {
  0%   { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 15px rgba(42, 168, 240, 0.1); border-color: rgba(42, 168, 240, 0.2); }
  100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 30px rgba(42, 168, 240, 0.3); border-color: rgba(42, 168, 240, 0.4); }
}

@keyframes navBorderGlow {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 200% 0; }
}

/* ── Text effects ── */
@keyframes textGlowGold {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(212, 168, 67, 0.25)); }
  50%      { filter: drop-shadow(0 0 25px rgba(212, 168, 67, 0.5)); }
}

@keyframes textGlowBlue {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(42, 168, 240, 0.35)); }
  50%      { filter: drop-shadow(0 0 45px rgba(42, 168, 240, 0.6)); }
}

@keyframes shimmerGold {
  0%   { background-position: 200% center; }
  100% { background-position: 0% center; }
}

@keyframes shimmerBlue {
  0%   { background-position: 200% center; }
  100% { background-position: 0% center; }
}

@keyframes shimmerText {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes shimmer {
  to { background-position: 200% center; }
}

@keyframes shimmerWave {
  0%   { left: -100%; }
  100% { left: 100%; }
}

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

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

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

@keyframes tagShimmer {
  0%        { left: -150%; }
  30%, 100% { left: 250%; }
}

/* ── Card / component pulses ── */
@keyframes cardPulseGlow {
  0%   { filter: drop-shadow(0 0 10px rgba(212, 168, 67, 0.15)); transform: translateY(0); }
  100% { filter: drop-shadow(0 15px 35px rgba(212, 168, 67, 0.4)); transform: translateY(-10px); }
}

@keyframes btnPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(212, 168, 67, 0.3); }
  50%      { box-shadow: 0 10px 40px rgba(212, 168, 240, 0.4); }
}

@keyframes glowPulseBlue {
  0%, 100% { box-shadow: 0 20px 60px rgba(10,32,64,0.4); }
  50%      { box-shadow: 0 20px 60px rgba(42,138,240,0.25); }
}

@keyframes benefitsGlow {
  0%, 100% {
    box-shadow: 0 0 30px rgba(42, 168, 240, 0.2), inset 0 0 20px rgba(42, 168, 240, 0.05);
    border-color: rgba(42, 168, 240, 0.3);
  }
  50% {
    box-shadow: 0 0 50px rgba(42, 168, 240, 0.4), inset 0 0 30px rgba(42, 168, 240, 0.1);
    border-color: rgba(42, 168, 240, 0.5);
  }
}

@keyframes pulseHighlight {
  0%, 100% { transform: scale(1);    box-shadow: 0 8px 20px rgba(212, 168, 67, 0.3); }
  50%      { transform: scale(1.05); box-shadow: 0 12px 30px rgba(212, 168, 67, 0.5); }
}

@keyframes allowedPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(16,185,129,0.3); }
  50%      { box-shadow: 0 6px 30px rgba(16,185,129,0.5); }
}

@keyframes prohibitedPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(239,68,68,0.3); }
  50%      { box-shadow: 0 6px 30px rgba(239,68,68,0.5); }
}

@keyframes warningPulse {
  0%, 100% { transform: scale(1) rotate(0deg);    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); }
  45%      { transform: scale(1.1) rotate(0deg);  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5); }
  50%      { transform: scale(1.1) rotate(-3deg); }
  55%      { transform: scale(1.1) rotate(3deg); }
  60%      { transform: scale(1.1) rotate(0deg); }
}

@keyframes noteGlow {
  0%, 100% { border-color: rgba(42,138,240,0.3); box-shadow: 0 0 0 rgba(42,138,240,0); }
  50%      { border-color: rgba(42,138,240,0.6); box-shadow: 0 0 16px rgba(42,138,240,0.15); }
}

@keyframes taglineGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(251,191,36,0.2); }
  50%      { box-shadow: 0 0 40px rgba(251,191,36,0.4); }
}

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

/* ── Float / move ── */
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1);     opacity: 0.6; }
  50%      { transform: translateY(-30px) scale(1.05); opacity: 1; }
}

@keyframes orbMove1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(50px, 50px); }
}

@keyframes orbMove2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-50px, -30px); }
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(5deg); }
}

@keyframes goldFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes floatRing {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-15px) rotate(1deg); }
}

@keyframes floatingCard {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-20px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

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

@keyframes floatLabel {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes crownBounce {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
  50%      { transform: translateX(-50%) translateY(-8px) rotate(5deg); }
}

@keyframes rotateGlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes rotateBorderAngle {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

@keyframes sparkleAnim {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-10deg); }
  75%      { transform: rotate(10deg); }
}

@keyframes tw {
  0%, 100% { opacity: var(--a, .2); transform: scale(1); }
  50%      { opacity: var(--b, .9); transform: scale(1.4); }
}

/* ── Entrance ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ANIMATION APPLICATIONS (scoped to .kv26-theme)
   ============================================================ */

/* Text effects */
.kv26-theme .text-gold {
  animation: shimmerGold 4s linear infinite, textGlowGold 3s ease-in-out infinite;
}

.kv26-theme .text-blue {
  animation: textGlowBlue 3s ease-in-out infinite;
}

.kv26-theme .welcome-text span,
.kv26-theme .tema-full,
.kv26-theme .topics-title,
.kv26-theme .cta-title,
.kv26-theme .hikmah-arabic {
  animation: shimmerGold 4s linear infinite;
}

.kv26-theme .about-hero-title span {
  animation: shimmerBlue 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.kv26-theme .cta-heading .highlight {
  animation: shimmerText 4s linear infinite;
}

.kv26-theme .timeline-step-card.active .step-num-bg,
.kv26-theme .step-icon-wrap.bg-blue,
.kv26-theme .step07-icon,
.kv26-theme .step07-num-ghost {
  animation: crystalShift 4s ease infinite;
}

.kv26-theme .tag-modern::after {
  animation: tagShimmer 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Aurora */
.kv26-theme .aurora-css { animation: auroraPulse 14s ease-in-out infinite alternate; }
.kv26-theme .ab-1       { animation: aband1 20s linear infinite; }
.kv26-theme .ab-2       { animation: aband2 26s linear infinite reverse; }
.kv26-theme .ab-3       { animation: aband3 22s linear infinite; }
.kv26-theme .ab-4       { animation: aband4 30s linear infinite reverse; }

/* Nav + top bar */
.kv26-theme nav         { animation: navBorderGlow 8s linear infinite; }
.kv26-theme .top-bar-pill { animation: barGlow 4s ease-in-out infinite alternate; }

/* Hero entrance */
.kv26-theme .hero-eyebrow         { animation: fadeInUp .6s ease both; }
.kv26-theme .hero-title           { animation: fadeInUp .6s .1s ease both; }
.kv26-theme .hero-subtitle        { animation: fadeInUp .6s .15s ease both; }
.kv26-theme .hero-fullname        { animation: fadeInUp .6s .18s ease both; }
.kv26-theme .hero-theme-badge     { animation: fadeInUp .6s .2s ease both; }
.kv26-theme .prize-highlight-badge { animation: fadeInUp .6s .22s ease both; }
.kv26-theme .hero-desc            { animation: fadeInUp .6s .25s ease both; }
.kv26-theme .hero-ctas            { animation: fadeInUp .6s .3s ease both; }

/* Card pulses + glows */
.kv26-theme .hero-prize-img       { animation: cardPulseGlow 3s ease-in-out infinite alternate, floatingCard 5s ease-in-out infinite; }
.kv26-theme .btn-img-overlay      { animation: btnPulse 3s infinite ease-in-out; }
.kv26-theme .step07-card          { animation: rotateBorderAngle 6s linear infinite; }
.kv26-theme .hero-visual-img      { animation: floatRing 6s ease-in-out infinite; }
.kv26-theme .benefits-note-card   { animation: benefitsGlow 4s ease-in-out infinite; }
.kv26-theme .benefits-note-card::before { animation: shimmerWave 3s infinite; }
.kv26-theme .benefits-icon        { animation: iconFloat 3s ease-in-out infinite; }
.kv26-theme .benefits-highlight   { animation: pulseHighlight 2s ease-in-out infinite; }

/* Button gradient shift */
.kv26-theme .btn-cta-primary,
.kv26-theme .btn-tor,
.kv26-theme .vc_btn3.vc_btn3-style-flat {
  animation: movingGradient 6s ease infinite;
}

.kv26-theme .btn-daftar-sekarang,
.kv26-theme .btn-lihat-tor {
  animation: btnGradientShift 4s ease infinite;
}

.kv26-theme .btn-unduh-surat {
  animation: btnGradientShift 4s ease infinite reverse;
}

/* Header badge */
.kv26-theme .header-badge {
  animation: warningPulse 3s infinite, shimmerText 3s linear infinite;
}

/* Tech rules */
.kv26-theme .tech-icon-main   { animation: iconFloat 3s ease-in-out infinite; }
.kv26-theme .allowed-badge    { animation: allowedPulse 2s ease-in-out infinite; }
.kv26-theme .prohibited-badge { animation: prohibitedPulse 2s ease-in-out infinite; }
.kv26-theme .prohibited-badge i { animation: shake 1.5s ease-in-out infinite; }

/* Podium */
.kv26-theme .podium-gold      { animation: goldFloat 4s ease-in-out infinite; }
.kv26-theme .podium-card::after { animation: rotateGlow 8s linear infinite; }
.kv26-theme .crown-float      { animation: crownBounce 2s ease-in-out infinite; }
.kv26-theme .sparkle          { animation: sparkleAnim 2s ease-in-out infinite; }
.kv26-theme .sparkle-1        { animation-delay: 0s; }
.kv26-theme .sparkle-2        { animation-delay: 0.5s; }
.kv26-theme .sparkle-3        { animation-delay: 1s; }
.kv26-theme .sparkle-4        { animation-delay: 1.5s; }

/* Topic cards */
.kv26-theme .topic-label-outer { animation: floatLabel 5s ease-in-out infinite; }
.kv26-theme .label-ring        { animation: ringPulse 4s ease-in-out infinite; }
.kv26-theme .ring-2            { animation-delay: 1.5s; }

/* CTA */
.kv26-theme .cta-tagline      { animation: taglineGlow 3s ease-in-out infinite; }
.kv26-theme .cta-social-wrapper { animation: fadeInUp 0.8s 0.4s ease both; }

/* Pernyataan */
.kv26-theme .pernyataan-note { animation: noteGlow 3s ease-in-out infinite; }

/* Particles */
.kv26-theme .particle { animation: floatParticle linear infinite; }
.kv26-theme .particle:nth-child(1) { animation-duration: 15s; }
.kv26-theme .particle:nth-child(2) { animation-duration: 20s; animation-delay: -5s; }
.kv26-theme .particle:nth-child(3) { animation-duration: 18s; animation-delay: -10s; }
.kv26-theme .particle:nth-child(4) { animation-duration: 22s; animation-delay: -8s; }
.kv26-theme .particle:nth-child(5) { animation-duration: 16s; animation-delay: -3s; }
.kv26-theme .particle:nth-child(6) { animation-duration: 25s; animation-delay: -12s; }

/* Glow orbs */
.kv26-theme .glow-orb.blue { animation: orbMove1 8s ease-in-out infinite; }
.kv26-theme .glow-orb.gold { animation: orbMove2 10s ease-in-out infinite; }

/* Stars */
.kv26-theme .star { animation: tw var(--d, 3s) ease-in-out infinite; animation-delay: var(--dl, 0s); }

/* Orbs */
.kv26-theme .orb { animation: orbFloat var(--of, 8s) ease-in-out infinite; animation-delay: var(--od, 0s); }

/* req-cards entrance */
.kv26-theme .req-card {
  opacity: 0;
  transform: translateY(30px);
  animation: cardIn 0.6s ease forwards;
}
.kv26-theme .req-card:nth-child(1) { animation-delay: 0.1s; }
.kv26-theme .req-card:nth-child(2) { animation-delay: 0.2s; }
.kv26-theme .req-card:nth-child(3) { animation-delay: 0.3s; }
.kv26-theme .req-card:nth-child(4) { animation-delay: 0.4s; }
.kv26-theme .req-card:nth-child(5) { animation-delay: 0.5s; }
.kv26-theme .req-card:nth-child(6) { animation-delay: 0.6s; }
.kv26-theme .req-card:nth-child(7) { animation-delay: 0.7s; }

/* Podium + bento entrance */
.kv26-theme .podium-card,
.kv26-theme .bento-card {
  opacity: 0;
  animation: fadeInUp 0.7s ease forwards;
}

.kv26-theme .podium-silver { animation-delay: 0.1s; }
.kv26-theme .podium-gold   { animation-delay: 0.2s; }
.kv26-theme .podium-bronze { animation-delay: 0.3s; }
.kv26-theme .bento-card:nth-child(1) { animation-delay: 0.4s; }
.kv26-theme .bento-card:nth-child(2) { animation-delay: 0.5s; }
.kv26-theme .bento-card:nth-child(3) { animation-delay: 0.6s; }
.kv26-theme .bento-card:nth-child(4) { animation-delay: 0.7s; }

/* ============================================================
   ANIMATION UTILITY CLASSES (opt-in)
   ============================================================ */
.kv26-theme .anim-fade-in-up   { animation: fadeInUp 0.6s ease both; }
.kv26-theme .anim-float        { animation: iconFloat 3s ease-in-out infinite; }
.kv26-theme .anim-pulse        { animation: pulseHighlight 2s ease-in-out infinite; }
.kv26-theme .anim-shimmer-gold { animation: shimmerGold 4s linear infinite; }
.kv26-theme .anim-shimmer-blue { animation: shimmerBlue 3s linear infinite; }
.kv26-theme .anim-glow-blue    { animation: glowPulseBlue 4s ease-in-out infinite; }
.kv26-theme .anim-rotate-border { animation: rotateBorderAngle 6s linear infinite; }