/* ================================================
   Apna School - Animations Stylesheet
   ================================================ */

/* ---- Keyframes ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes ripple {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes orbitDot {
  0%   { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

/* ---- Hero entrance ---- */
.hero-pretitle  { animation: fadeInUp 0.6s ease 0.1s both; }
.hero-title     { animation: fadeInUp 0.6s ease 0.25s both; }
.hero-desc      { animation: fadeInUp 0.6s ease 0.4s both; }
.hero-actions   { animation: fadeInUp 0.6s ease 0.55s both; }
.hero-stats     { animation: fadeInUp 0.6s ease 0.7s both; }
.dashboard-card { animation: scaleIn 0.7s ease 0.3s both; }

/* ---- Gradient text shimmer on hover ---- */
.gradient-text {
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

/* ---- Feature card icon spin on hover ---- */
.feature-card:hover .feature-icon i {
  animation: rotateSlow 0.5s ease;
}

/* ---- Loading bar animation ---- */
.dash-bar-fill { animation: barGrow 1.8s ease 0.8s both; }

@keyframes barGrow {
  from { width: 0 !important; }
}

/* ---- Pulse rings (for stats banner) ---- */
.pulse-ring {
  position: relative;
  display: inline-block;
}

.pulse-ring::before,
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(14,165,233,0.3);
  border-radius: 50%;
  animation: ripple 2s ease-out infinite;
}

.pulse-ring::after { animation-delay: 1s; }

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sky-primary), var(--accent));
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ---- Page transition overlay ---- */
.page-loader {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--sky-light), var(--sky-mid));
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hidden { opacity: 0; visibility: hidden; }

.loader-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--sky-deep);
}

.loader-logo .loader-icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, var(--sky-primary), var(--sky-deep));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.3rem;
  animation: rotateSlow 1s ease infinite;
}

.loader-dots {
  display: flex;
  gap: 8px;
}

.loader-dots span {
  width: 10px; height: 10px;
  background: var(--sky-primary);
  border-radius: 50%;
  animation: loaderDot 1.2s ease-in-out infinite;
}

.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loaderDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1; }
}

/* ---- Animated counter ---- */
.counter-num { display: inline-block; }

/* ---- Typing cursor ---- */
.typed-cursor { animation: blink 0.8s step-end infinite; color: var(--sky-primary); }

/* ---- Feature card glow on hover ---- */
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 50%, rgba(14,165,233,0.06), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.feature-card:hover::after { opacity: 1; }

/* ---- Smooth section reveal ---- */
.reveal-section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-section.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Staggered children ---- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.staggered > *:nth-child(1)  { transition-delay: 0.0s; opacity:1; transform:none; }
.stagger-children.staggered > *:nth-child(2)  { transition-delay: 0.1s; opacity:1; transform:none; }
.stagger-children.staggered > *:nth-child(3)  { transition-delay: 0.2s; opacity:1; transform:none; }
.stagger-children.staggered > *:nth-child(4)  { transition-delay: 0.3s; opacity:1; transform:none; }
.stagger-children.staggered > *:nth-child(5)  { transition-delay: 0.4s; opacity:1; transform:none; }
.stagger-children.staggered > *:nth-child(6)  { transition-delay: 0.5s; opacity:1; transform:none; }
.stagger-children.staggered > *:nth-child(7)  { transition-delay: 0.6s; opacity:1; transform:none; }
.stagger-children.staggered > *:nth-child(8)  { transition-delay: 0.7s; opacity:1; transform:none; }
.stagger-children.staggered > *:nth-child(9)  { transition-delay: 0.8s; opacity:1; transform:none; }

/* ---- Marquee pause on hover ---- */
.strip-track:hover { animation-play-state: paused; }

/* ---- Button ripple ---- */
.btn { position: relative; overflow: hidden; }

.btn .btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* ---- Input focus glow ---- */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  animation: inputGlow 0.3s ease;
}

@keyframes inputGlow {
  0%   { box-shadow: 0 0 0 0 rgba(14,165,233,0.3); }
  100% { box-shadow: 0 0 0 3px rgba(14,165,233,0.12); }
}