/* ============================================================
   5MinHelp — Animations
   animations.css — All keyframes and animation utilities
   ============================================================ */

/* ─── Keyframes ──────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  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 scaleInSpring {
  0%   { opacity: 0; transform: scale(0.7); }
  80%  { opacity: 1; transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.2); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50%       { box-shadow: 0 0 0 20px rgba(99, 102, 241, 0); }
}

@keyframes pulseCyan {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4); }
  50%       { box-shadow: 0 0 0 20px rgba(6, 182, 212, 0); }
}

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

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

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(1deg); }
  66%       { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(40px, -30px) scale(1.05); }
  66%       { transform: translate(-20px, 20px) scale(0.97); }
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0px) rotate(-3deg); }
  50%       { transform: translateY(-12px) rotate(-3deg); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientBorder {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; filter: blur(30px); }
  50%       { opacity: 1; filter: blur(50px); }
}

@keyframes blobMorph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%       { border-radius: 50% 60% 30% 60% / 30% 70% 50% 60%; }
  75%       { border-radius: 60% 30% 50% 40% / 70% 40% 60% 30%; }
}

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

@keyframes lineGrow {
  from { width: 0; }
  to   { width: 100%; }
}

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

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

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

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

@keyframes navbarSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes loaderProgress {
  0%   { width: 0%; }
  20%  { width: 30%; }
  50%  { width: 55%; }
  80%  { width: 80%; }
  100% { width: 100%; }
}

@keyframes particleFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%       { opacity: 1; transform: scale(1.2); }
}

@keyframes waveFlow {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes textReveal {
  from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glitch {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px, 2px); }
  40%  { transform: translate(2px, -2px); }
  60%  { transform: translate(-2px, 0); }
  80%  { transform: translate(2px, 0); }
  100% { transform: translate(0); }
}

@keyframes cardHoverGlow {
  from { box-shadow: var(--shadow-card); }
  to   { box-shadow: var(--shadow-card), 0 0 40px rgba(99,102,241,0.25); }
}

@keyframes rotateIcon {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* ─── Animation Utility Classes ──────────────────────────────── */

.animate-fade-in       { animation: fadeIn        0.6s var(--ease-out) forwards; }
.animate-fade-in-up    { animation: fadeInUp      0.7s var(--ease-out) forwards; }
.animate-fade-in-down  { animation: fadeInDown    0.7s var(--ease-out) forwards; }
.animate-fade-in-left  { animation: fadeInLeft    0.7s var(--ease-out) forwards; }
.animate-fade-in-right { animation: fadeInRight   0.7s var(--ease-out) forwards; }
.animate-scale-in      { animation: scaleIn       0.6s var(--ease-out) forwards; }
.animate-float         { animation: float         6s ease-in-out infinite; }
.animate-pulse         { animation: pulse         2s ease-in-out infinite; }
.animate-spin          { animation: spin          1s linear infinite; }
.animate-spin-slow     { animation: spinSlow     12s linear infinite; }
.animate-gradient      { animation: gradientShift 4s ease infinite; background-size: 200% 200%; }

/* ─── Delay Utilities ────────────────────────────────────────── */
.delay-0   { animation-delay: 0ms; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-1000{ animation-delay: 1000ms; }
.delay-1200{ animation-delay: 1200ms; }

/* ─── AOS-like Reveal on Scroll ──────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
[data-reveal="left"]  { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ─── Stagger Children ───────────────────────────────────────── */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-stagger].is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
[data-stagger].is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
[data-stagger].is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
[data-stagger].is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }
[data-stagger].is-visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 480ms; }
[data-stagger].is-visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 560ms; }
[data-stagger].is-visible > *:nth-child(9) { opacity: 1; transform: none; transition-delay: 640ms; }
[data-stagger].is-visible > *:nth-child(n+10) { opacity: 1; transform: none; transition-delay: 720ms; }

/* ─── Blob Animations ────────────────────────────────────────── */
.blob {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: blobMorph 12s ease-in-out infinite;
  filter: blur(60px);
  pointer-events: none;
  will-change: border-radius, transform;
}
.blob--primary {
  background: radial-gradient(circle, rgba(99,102,241,0.3), rgba(139,92,246,0.1));
}
.blob--cyan {
  background: radial-gradient(circle, rgba(6,182,212,0.25), rgba(6,182,212,0.05));
  animation-delay: -4s;
}
.blob--accent {
  background: radial-gradient(circle, rgba(139,92,246,0.25), rgba(99,102,241,0.05));
  animation-delay: -8s;
}

/* ─── Typing Cursor ──────────────────────────────────────────── */
.typing-cursor::after {
  content: '|';
  animation: blink 1.2s step-start infinite;
  color: var(--clr-primary);
  font-weight: 300;
}

/* ─── Loading Bar ────────────────────────────────────────────── */
.loading-progress-bar {
  animation: loaderProgress 3s var(--ease-out) forwards;
}

/* ─── Particle Canvas ────────────────────────────────────────── */
#particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ─── Ripple Effect ──────────────────────────────────────────── */
.ripple-wrapper {
  position: relative;
  overflow: hidden;
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  pointer-events: none;
  animation: ripple 0.6s linear forwards;
  transform-origin: center;
}

/* ─── Hardware Acceleration ──────────────────────────────────── */
.gpu { will-change: transform; transform: translateZ(0); }

/* ─── Animated Gradient Text ─────────────────────────────────── */
.gradient-text-animate {
  background: linear-gradient(135deg, #6366f1, #a78bfa, #06b6d4, #8b5cf6, #6366f1);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

/* ─── Neon Glow Effect ───────────────────────────────────────── */
.neon-glow {
  text-shadow: 0 0 10px rgba(99,102,241,0.5), 0 0 30px rgba(99,102,241,0.3), 0 0 60px rgba(99,102,241,0.1);
}

/* ─── Animated Underline ─────────────────────────────────────── */
.hover-underline {
  position: relative;
  display: inline-block;
}
.hover-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--gradient-primary);
  transition: width var(--transition-md);
}
.hover-underline:hover::after { width: 100%; }

/* ─── Floating Badges ────────────────────────────────────────── */
.floating-badge {
  animation: floatBadge 3s ease-in-out infinite;
}
.floating-badge:nth-child(2) { animation-delay: -1s; }
.floating-badge:nth-child(3) { animation-delay: -2s; }

/* ─── Glow Ring ──────────────────────────────────────────────── */
.glow-ring {
  position: relative;
}
.glow-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--gradient-primary);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition-md);
  filter: blur(12px);
}
.glow-ring:hover::before { opacity: 0.6; }

/* ─── Stars Background ───────────────────────────────────────── */
.star {
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: starTwinkle var(--duration, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ─── 3D Enhancement Keyframes ───────────────────────────────── */

/* Ripple click effect */
@keyframes rippleEffect {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(1); opacity: 0; }
}

/* 3D float with Z-axis rotation */
@keyframes float3d {
  0%,100% { transform: translateY(0) translateZ(0) rotateX(0) rotateY(0); }
  25%     { transform: translateY(-10px) translateZ(5px) rotateX(2deg) rotateY(3deg); }
  75%     { transform: translateY(6px) translateZ(-3px) rotateX(-1.5deg) rotateY(-2deg); }
}

/* Bloom pulse — for glowing elements */
@keyframes bloomPulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(99,102,241,0.4)); }
  50%     { filter: drop-shadow(0 0 22px rgba(99,102,241,0.8)) drop-shadow(0 0 40px rgba(99,102,241,0.3)); }
}

/* Spin 3D — for rotating decorative objects */
@keyframes spin3d {
  0%   { transform: rotateY(0deg) rotateX(0deg); }
  100% { transform: rotateY(360deg) rotateX(15deg); }
}

/* Depth reveal — scroll entrance with Z perspective */
@keyframes depthReveal {
  0%   { opacity: 0; transform: perspective(800px) translateZ(-60px) translateY(20px); }
  100% { opacity: 1; transform: perspective(800px) translateZ(0)     translateY(0); }
}

/* Gradient border rotate */
@keyframes gradBorderRotate {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* Orbit — circular movement */
@keyframes orbit {
  0%   { transform: rotate(0deg)   translateX(60px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

/* Number glow — for stat counter completion */
@keyframes numberGlow {
  0%   { text-shadow: none; }
  50%  { text-shadow: 0 0 20px rgba(99,102,241,0.8), 0 0 40px rgba(99,102,241,0.4); }
  100% { text-shadow: none; }
}

/* Wave footer animation */
@keyframes wavePath {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(-30px); }
}

/* Shimmer sweep — button/card highlight */
@keyframes shimmerSweep {
  0%   { background-position: -200% center; }
  100% { background-position: 200%  center; }
}

/* ─── Reduce Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}