/* ============================================================
   VIANMAX ACADEMY — Animations Stylesheet
   ============================================================ */

/* ── Keyframe definitions ────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes borderPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,78,162,.3); }
  50%       { box-shadow: 0 0 0 8px rgba(30,78,162,0); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Utility animation classes ───────────────────────────── */
.animate-fadeInUp    { animation: fadeInUp .7s cubic-bezier(.4,0,.2,1) forwards; }
.animate-fadeInDown  { animation: fadeInDown .7s cubic-bezier(.4,0,.2,1) forwards; }
.animate-fadeInLeft  { animation: fadeInLeft .7s cubic-bezier(.4,0,.2,1) forwards; }
.animate-fadeInRight { animation: fadeInRight .7s cubic-bezier(.4,0,.2,1) forwards; }
.animate-scaleIn     { animation: scaleIn .5s cubic-bezier(.4,0,.2,1) forwards; }
.animate-float       { animation: float 4s ease-in-out infinite; }
.animate-pulse       { animation: pulse 2s ease-in-out infinite; }

.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }
.delay-600 { animation-delay: .6s; }
.delay-700 { animation-delay: .7s; }
.delay-800 { animation-delay: .8s; }

/* ── Shimmer loading skeleton ────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border) 50%, var(--bg-alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ── Animated counter numbers ────────────────────────────── */
.counter-num {
  display: inline-block;
  animation: countUp .6s cubic-bezier(.4,0,.2,1) both;
}

/* ── Gradient text animation ─────────────────────────────── */
.text-gradient-animated {
  background: linear-gradient(270deg, #004aad, #f97316, #10b981, #004aad);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}

/* ── Hover zoom image ────────────────────────────────────── */
.hover-zoom {
  overflow: hidden;
}
.hover-zoom img {
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.hover-zoom:hover img { transform: scale(1.06); }

/* ── Icon wiggle on hover ────────────────────────────────── */
.icon-wiggle {
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.icon-wiggle:hover { transform: rotate(-12deg) scale(1.15); }

/* ── Stagger children ────────────────────────────────────── */
.stagger > *:nth-child(1) { animation-delay: 0s; }
.stagger > *:nth-child(2) { animation-delay: .1s; }
.stagger > *:nth-child(3) { animation-delay: .2s; }
.stagger > *:nth-child(4) { animation-delay: .3s; }
.stagger > *:nth-child(5) { animation-delay: .4s; }
.stagger > *:nth-child(6) { animation-delay: .5s; }

/* ── Typed cursor blink ──────────────────────────────────── */
@keyframes blink { 50% { opacity: 0; } }
.typed-cursor { animation: blink 1s step-start infinite; }

/* ── Glow pulse on primary buttons ──────────────────────── */
.btn-primary { animation: borderPulse 2.5s ease-in-out infinite; }
.btn-primary:hover { animation: none; }

/* ── Slide-in from bottom (used by cookie banner) ─────── */
@keyframes slideInBottom {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner.show { animation: slideInBottom .35s cubic-bezier(.4,0,.2,1) forwards; }