/* ══════════════════════════════════════════
   EASY ABACUS — SHARED ANIMATION SYSTEM
   Kid-friendly motion: splash, scroll reveals,
   floating beads, hover bounce, glow pulses
   ══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── SPLASH SCREEN ── */
#splashScreen{
  position:fixed;inset:0;background:#0a0a14;z-index:99999;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:opacity .6s ease, visibility .6s ease;
}
#splashScreen.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.splash-logo-badge{
  width:150px;height:150px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#fff 0%,#fdf6e8 100%);
  opacity:0;transform:scale(.3) rotate(-15deg);
  animation:splashLogoIn 1.1s cubic-bezier(.34,1.56,.64,1) .15s forwards;
  box-shadow:0 0 50px rgba(249,194,0,.4),0 16px 40px rgba(0,0,0,.4);
}
.splash-logo{
  width:100px;height:100px;object-fit:contain;display:block;
}
@keyframes splashLogoIn{
  0%{opacity:0;transform:scale(.3) rotate(-15deg)}
  55%{opacity:1;transform:scale(1.12) rotate(4deg)}
  75%{transform:scale(.94) rotate(-2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.splash-name{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.7rem;
  background:linear-gradient(90deg,#F9C200,#E8420F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(14px);letter-spacing:1px;
  animation:splashTextIn .7s ease .85s forwards;
}
@keyframes splashTextIn{to{opacity:1;transform:translateY(0)}}
.splash-beads{display:flex;gap:8px;margin-top:6px}
.splash-bead{
  width:11px;height:11px;border-radius:50%;
  background:var(--yellow,#F9C200);opacity:0;
  animation:splashBeadPulse 1.3s ease infinite;
}
.splash-bead:nth-child(1){animation-delay:1.1s;background:#E8420F}
.splash-bead:nth-child(2){animation-delay:1.22s;background:#F9C200}
.splash-bead:nth-child(3){animation-delay:1.34s;background:#1A3FA0}
.splash-bead:nth-child(4){animation-delay:1.46s;background:#1DAF62}
.splash-bead:nth-child(5){animation-delay:1.58s;background:#E83F7C}
@keyframes splashBeadPulse{
  0%{opacity:0;transform:translateY(8px) scale(.5)}
  30%{opacity:1;transform:translateY(-6px) scale(1.15)}
  60%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:.35;transform:translateY(0) scale(.85)}
}
.splash-progress{
  width:160px;height:4px;background:rgba(255,255,255,.12);border-radius:10px;
  margin-top:28px;overflow:hidden;opacity:0;animation:splashTextIn .5s ease 1.5s forwards;
}
.splash-progress-bar{
  height:100%;width:0%;border-radius:10px;
  background:linear-gradient(90deg,#E8420F,#F9C200);
  animation:splashProgress 1.4s ease 1.6s forwards;
}
@keyframes splashProgress{to{width:100%}}

/* ── FLOATING DECORATIVE BEADS (ambient background motif) ── */
.float-beads{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.float-bead{
  position:absolute;border-radius:50%;opacity:.5;
  animation:floatDrift ease-in-out infinite;
}
@keyframes floatDrift{
  0%,100%{transform:translateY(0) translateX(0) rotate(0deg)}
  33%{transform:translateY(-22px) translateX(10px) rotate(8deg)}
  66%{transform:translateY(10px) translateX(-14px) rotate(-6deg)}
}
@keyframes floatDriftSlow{
  0%,100%{transform:translateY(0) translateX(0)}
  50%{transform:translateY(-30px) translateX(-16px)}
}

/* ── SCROLL REVEAL (used via JS observer adding .in-view) ── */
.reveal{opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-up{transform:translateY(36px)}
.reveal-left{transform:translateX(-40px)}
.reveal-right{transform:translateX(40px)}
.reveal-scale{transform:scale(.85)}
.reveal-pop{transform:scale(.7) translateY(20px)}
.reveal.in-view{opacity:1;transform:none}

/* Stagger helper delays for grids */
.stagger-1{transition-delay:.05s}
.stagger-2{transition-delay:.14s}
.stagger-3{transition-delay:.23s}
.stagger-4{transition-delay:.32s}
.stagger-5{transition-delay:.41s}
.stagger-6{transition-delay:.50s}

/* ── HOVER MICRO-INTERACTIONS ── */
.hover-bounce{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.hover-bounce:hover{transform:translateY(-8px) scale(1.03)}

.hover-wiggle:hover .wiggle-target{
  animation:wiggle .5s ease;
}
@keyframes wiggle{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-6deg)}
  75%{transform:rotate(6deg)}
}

.icon-pop{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
*:hover > .icon-pop{transform:scale(1.18) rotate(-6deg)}

/* ── PULSE GLOW (CTA / badges) ── */
.pulse-glow{animation:pulseGlow 2.6s ease-in-out infinite}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 6px 22px rgba(249,194,0,.4)}
  50%{box-shadow:0 6px 32px rgba(249,194,0,.7)}
}

/* ── ANIMATED COUNTER NUMBER POP (used on stat reveal) ── */
.count-pop{animation:countPop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes countPop{
  0%{transform:scale(.5);opacity:0}
  60%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1)}
}

/* ── ABACUS BEAD LOADER MOTIF (decorative divider) ── */
.bead-divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto}
.bead-divider .rod{width:60px;height:3px;background:rgba(0,0,0,.08);border-radius:3px;position:relative}
.bead-divider-dot{width:14px;height:14px;border-radius:50%;animation:beadSlide 2.4s ease-in-out infinite}
@keyframes beadSlide{
  0%,100%{transform:translateX(-16px)}
  50%{transform:translateX(16px)}
}

/* ── SHIMMER (for badges / tags) ── */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{
  content:'';position:absolute;top:0;left:-150%;width:80%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  animation:shimmerSlide 3.2s ease-in-out infinite;
}
@keyframes shimmerSlide{
  0%{left:-150%}
  60%{left:150%}
  100%{left:150%}
}

/* ── FLOATING ICON BOB (continuous gentle motion) ── */
.bob{animation:bob 3s ease-in-out infinite}
@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.bob-slow{animation:bob 4.5s ease-in-out infinite}
.bob-delay-1{animation-delay:.4s}
.bob-delay-2{animation-delay:.8s}
.bob-delay-3{animation-delay:1.2s}

/* ── SPIN SLOW (decorative rings/icons) ── */
.spin-slow{animation:spinSlow 12s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* ── CARD ENTRANCE BOUNCE (used for course/service cards) ── */
.bounce-in{animation:bounceIn .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bounceIn{
  0%{opacity:0;transform:scale(.6) translateY(30px)}
  60%{opacity:1;transform:scale(1.05) translateY(-6px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}