/* ============================================================
   ASR CRACKERS — Keyframe Animations
   ============================================================ */

/* Loader Letter Entrance */
@keyframes letterReveal {
  0%   { opacity: 0; transform: translateY(60px) scale(0.8); filter: blur(20px); }
  60%  { opacity: 1; transform: translateY(-5px) scale(1.05); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes letterGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 40px currentColor, 0 0 80px currentColor; }
}

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

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  10%  { transform: translateX(-12px) rotate(-1deg); }
  20%  { transform: translateX(12px) rotate(1deg); }
  30%  { transform: translateX(-10px); }
  40%  { transform: translateX(10px); }
  50%  { transform: translateX(-8px); }
  60%  { transform: translateX(8px); }
  70%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  90%  { transform: translateX(-2px); }
}

/* Pulsing */
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0.3); }
  50%       { box-shadow: 0 0 0 12px rgba(255,193,7,0); }
}

/* Floating */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes floatBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

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

/* Firework Burst */
@keyframes burst {
  0%   { transform: translate(0, 0) scale(0); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* Spark trail */
@keyframes spark {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, -80px)) scale(0); }
}

/* Smoke drift */
@keyframes smokeDrift {
  0%   { opacity: 0.6; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx, 0px), -120px) scale(2.5); }
}

/* Neon flicker */
@keyframes neonFlicker {
  0%, 98%, 100% { opacity: 1; }
  99%            { opacity: 0.85; }
}

/* Gradient shift */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide Up */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* Scale In */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* Draw SVG */
@keyframes drawStroke {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ============================================================
   Applied Animation Utility Classes
   ============================================================ */
.animate-float   { animation: floatY 4s ease-in-out infinite; }
.animate-pulse   { animation: pulseDot 2s ease-in-out infinite; }
.animate-spin    { animation: spinSlow 20s linear infinite; }
.animate-glow    { animation: pulseGlow 2.5s ease-in-out infinite; }
.animate-flicker { animation: neonFlicker 5s linear infinite; }
.animate-grad {
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

/* ============================================================
   Fire Cursor Trail Particles
   ============================================================ */
.fire-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 1);
  animation: spark 0.6s ease-out forwards;
  mix-blend-mode: screen;
}

/* ============================================================
   Background Particle Canvas Animation
   ============================================================ */
.particle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   GSAP SplitText Effect Setup
   ============================================================ */
.split-chars .char {
  display: inline-block;
  overflow: hidden;
}

.split-words .word {
  display: inline-block;
  overflow: hidden;
}

/* ============================================================
   Page Transition
   ============================================================ */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: calc(var(--z-loader) - 1);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-transition-overlay.transitioning {
  transform: translateY(0);
}

/* ============================================================
   Loading Skeleton
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-card) 25%,
    rgba(255,255,255,0.05) 50%,
    var(--color-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton-img  { height: 200px; }
.skeleton-text { height: 14px; margin: 6px 0; }
.skeleton-text.short { width: 60%; }

/* ============================================================
   Accessibility: Reduced Motion Preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fire-particle, #bg-canvas, #hero-canvas, #spark-canvas {
    display: none !important;
  }
}