/* ============================================
   VEENAPEETH ACADEMY — ANIMATIONS
   Keyframes & Scroll Animation Classes
   ============================================ */

/* ============================================
   SCROLL-TRIGGERED ANIMATION STATES
   ============================================ */

/* Initial hidden states */
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-scale,
.anim-fade {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--duration-slower);
  transition-timing-function: var(--ease-out);
}

.anim-fade-up { transform: translateY(40px); }
.anim-fade-down { transform: translateY(-40px); }
.anim-fade-left { transform: translateX(-40px); }
.anim-fade-right { transform: translateX(40px); }
.anim-scale { transform: scale(0.9); }
.anim-fade { transform: none; }

/* Animated (visible) states */
.anim-fade-up.animated,
.anim-fade-down.animated,
.anim-fade-left.animated,
.anim-fade-right.animated,
.anim-scale.animated,
.anim-fade.animated {
  opacity: 1;
  transform: none;
}

/* Stagger delays for children */
.stagger-children > * {
  transition-delay: calc(var(--i, 0) * 100ms);
}

/* ============================================
   CONTINUOUS ANIMATIONS
   ============================================ */

/* Float up and down */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

.anim-float {
  animation: float 4s ease-in-out infinite;
}

/* Pulse glow */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.anim-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Rotate slowly */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.anim-rotate {
  animation: rotate 20s linear infinite;
}

/* Bounce */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.anim-bounce {
  animation: bounce 2s ease-in-out infinite;
}

/* Scale pulse */
@keyframes scalePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.anim-scale-pulse {
  animation: scalePulse 3s ease-in-out infinite;
}

/* Shimmer */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.anim-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* ============================================
   COUNTER ANIMATION
   ============================================ */

.counter-animated {
  display: inline-block;
}

/* ============================================
   HOVER ANIMATIONS
   ============================================ */

.hover-lift {
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.hover-glow:hover {
  box-shadow: var(--shadow-blue);
}

.hover-scale {
  transition: transform var(--duration-normal) var(--ease-bounce);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ============================================
   LOADING / SKELETON
   ============================================ */

@keyframes skeletonLoading {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-bg-alt) 0%, var(--color-border-light) 50%, var(--color-bg-alt) 100%);
  background-size: 200px 100%;
  animation: skeletonLoading 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ============================================
   PAGE LOAD ANIMATION
   ============================================ */

@keyframes pageLoad {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-load {
  animation: pageLoad 0.6s var(--ease-out) both;
}

/* ============================================
   MARQUEE (for trust bar)
   ============================================ */

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee {
  animation: marquee 40s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}