/* =============================================
   FANMO EDUCATION TECHNOLOGY - ANIMATIONS
   ============================================= */

/* ---- Page Enter ---- */
.page-body { animation:pageEnter 0.7s ease both; }
@keyframes pageEnter { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

/* ---- Shimmer (buttons/cards) ---- */
.shimmer { position:relative; overflow:hidden; }
.shimmer::after {
  content:''; position:absolute; top:-60%; left:-120%;
  width:70%; height:220%;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,0.06) 50%,transparent 62%);
  animation:shimmerMove 3.5s ease infinite;
}
@keyframes shimmerMove { 0%{left:-120%} 100%{left:200%} }

/* ---- Gold pulse border ---- */
.gold-pulse { animation:goldPulse 2.4s ease-in-out infinite; }
@keyframes goldPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0)}
  50%{box-shadow:0 0 22px 5px rgba(201,168,76,0.28)}
}

/* ---- Gradient text ---- */
.gradient-text {
  background:linear-gradient(135deg,var(--gold-dark),var(--gold-light),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ---- Section reveal line ---- */
.rev-line { position:relative; }
.rev-line::after {
  content:''; position:absolute; left:0; bottom:-4px;
  width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.65s var(--ease);
}
.rev-line.vis::after { transform:scaleX(1); }

/* ---- Hero entrance ---- */
@keyframes heroLabelIn {
  from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none}
}
@keyframes heroTitleIn {
  from{opacity:0;transform:translateY(34px)} to{opacity:1;transform:none}
}
@keyframes heroSubIn {
  from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none}
}
@keyframes heroActIn {
  from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none}
}

.hero-label  { animation:heroLabelIn 0.9s ease 0.3s both; }
.hero-title  { animation:heroTitleIn 1.1s ease 0.5s both; }
.hero-sub    { animation:heroSubIn   0.9s ease 0.85s both; }
.hero-actions{ animation:heroActIn  0.9s ease 1.1s both; }

/* ---- Floating shapes ---- */
.float-a { animation:floatA 6.5s ease-in-out infinite; }
.float-b { animation:floatB 8s   ease-in-out infinite; }
.float-c { animation:floatC 7.2s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-18px) rotate(3deg)} }
@keyframes floatB { 0%,100%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-24px) translateX(12px)} }
@keyframes floatC { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-14px) scale(1.03)} }

/* ---- Card hover lift ---- */
.hover-lift { transition:transform 0.32s ease, box-shadow 0.32s ease; }
.hover-lift:hover { transform:translateY(-8px); box-shadow:0 22px 44px rgba(0,0,0,0.42),0 0 30px rgba(201,168,76,0.14); }

/* ---- Number counter ---- */
.count-num { font-variant-numeric:tabular-nums; }

/* ---- Split word animation ---- */
.split-word { display:inline-block; overflow:hidden; }
.split-char {
  display:inline-block;
  opacity:0; transform:translateY(100%);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.split-char.vis { opacity:1; transform:none; }

/* ---- Magnetic btn (JS-powered, CSS setup) ---- */
.btn-mag { will-change:transform; }

/* ---- Scroll progress bar ---- */
.scroll-progress { will-change:transform; }

/* ---- Underline reveal on nav links (already in style.css, reinforced) ---- */
.nav-menu li a { will-change:color; }

/* ---- CTA section radial glow pulse ---- */
@keyframes ctaGlow {
  0%,100%{background:radial-gradient(ellipse at center,rgba(201,168,76,0.05) 0%,transparent 65%)}
  50%{background:radial-gradient(ellipse at center,rgba(201,168,76,0.1) 0%,transparent 65%)}
}
.cta-section::before { animation:ctaGlow 4s ease-in-out infinite; }

/* ---- Service card: number fade on hover ---- */
.service-card:hover .svc-num { color:rgba(201,168,76,0.18); transition:color 0.4s ease; }

/* ---- Section decorative corners ---- */
.deco-corners { position:relative; }
.deco-corners::before,.deco-corners::after {
  content:''; position:absolute; width:30px; height:30px;
  border-color:var(--gold); border-style:solid; opacity:0.35;
}
.deco-corners::before { top:0; left:0; border-width:1px 0 0 1px; }
.deco-corners::after  { bottom:0; right:0; border-width:0 1px 1px 0; }

/* ---- Stats strip number ---- */
.strip-stat-num { will-change:contents; }

/* ---- Particle canvas ---- */
#particles-canvas { will-change:transform; }

/* ---- Phone mockup glow ---- */
.phone-body { will-change:transform; }

/* ---- Timeline dot pulse ---- */
.tl-dot { animation:tlDotPulse 2.5s ease-in-out infinite; }
@keyframes tlDotPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0.4)}
  50%{box-shadow:0 0 0 8px rgba(201,168,76,0)}
}

/* ---- Active nav underline ---- */
.nav-menu li a.active::after { width:100% !important; }

/* ---- Footer links stagger ---- */
.footer-links a { will-change:padding-left, color; }

/* ---- Responsive: reduce animations ---- */
@media(prefers-reduced-motion:reduce) {
  *,.shimmer::after,.gold-pulse,.float-a,.float-b,.float-c,
  .phone-body,.tl-dot,.cta-section::before,.hero-label,.hero-title,.hero-sub,.hero-actions {
    animation:none !important; transition:none !important;
  }
  .fade-up,.fade-in,.slide-left,.slide-right { opacity:1 !important; transform:none !important; }
}