/* ==========================================================================
   SXPRESS FESTIVAL 2026 — KEYFRAME ANIMATIONS LIBRARY
   Centralized animation definitions for the brutal/acid design system
   Default easing: cubic-bezier(0.16, 1, 0.3, 1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   FADE
   -------------------------------------------------------------------------- */

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

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

/* --------------------------------------------------------------------------
   SLIDE
   -------------------------------------------------------------------------- */

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

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

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

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

/* --------------------------------------------------------------------------
   SCALE
   -------------------------------------------------------------------------- */

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

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

/* --------------------------------------------------------------------------
   ROTATE
   -------------------------------------------------------------------------- */

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-8deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* --------------------------------------------------------------------------
   SHAKE (error states)
   -------------------------------------------------------------------------- */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%      { transform: translateX(-6px); }
  20%      { transform: translateX(6px); }
  30%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  50%      { transform: translateX(-2px); }
  60%      { transform: translateX(2px); }
  70%      { transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   PULSE
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   BORDER GLOW (acid green box-shadow pulse)
   -------------------------------------------------------------------------- */

@keyframes borderGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(187, 255, 0, 0.2),
                0 0 20px rgba(187, 255, 0, 0.05);
  }
  50% {
    box-shadow: 0 0 20px rgba(187, 255, 0, 0.5),
                0 0 60px rgba(187, 255, 0, 0.15);
  }
}

/* --------------------------------------------------------------------------
   TEXT GLITCH (brief position shift + RGB split)
   -------------------------------------------------------------------------- */

@keyframes textGlitch {
  0% {
    transform: translate(0);
    text-shadow: -2px 0 #BBFF00, 2px 0 #FF3333;
  }
  15% {
    transform: translate(-3px, 1px);
    text-shadow: 2px 0 #BBFF00, -2px 0 #FF3333;
  }
  30% {
    transform: translate(2px, -1px);
    text-shadow: -1px 0 #BBFF00, 1px 0 #FF3333;
  }
  45% {
    transform: translate(-1px, 2px);
    text-shadow: 1px 0 #BBFF00, -1px 0 #FF3333;
  }
  60% {
    transform: translate(1px, -1px);
    text-shadow: -2px 0 #BBFF00, 2px 0 #FF3333;
  }
  75% {
    transform: translate(-1px, 0);
    text-shadow: 0 0 transparent, 0 0 transparent;
  }
  100% {
    transform: translate(0);
    text-shadow: 0 0 transparent, 0 0 transparent;
  }
}

/* --------------------------------------------------------------------------
   SCANLINE (moving horizontal line top to bottom)
   -------------------------------------------------------------------------- */

@keyframes scanline {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   FLICKER (neon flicker simulation)
   -------------------------------------------------------------------------- */

@keyframes flicker {
  0%   { opacity: 1; }
  5%   { opacity: 0.85; }
  10%  { opacity: 1; }
  15%  { opacity: 0.9; }
  20%  { opacity: 1; }
  50%  { opacity: 1; }
  52%  { opacity: 0.7; }
  53%  { opacity: 1; }
  80%  { opacity: 1; }
  83%  { opacity: 0.8; }
  87%  { opacity: 1; }
  100% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   COUNTDOWN FLIP
   -------------------------------------------------------------------------- */

@keyframes countdownFlip {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  50% {
    transform: perspective(400px) rotateX(-90deg);
    opacity: 0;
  }
  51% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   STROKE DRAW (SVG stroke-dashoffset)
   -------------------------------------------------------------------------- */

@keyframes strokeDraw {
  from {
    stroke-dashoffset: var(--stroke-length, 1000);
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   UTILITY ANIMATION CLASSES
   -------------------------------------------------------------------------- */

.anim-fade-in       { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-fade-out      { animation: fadeOut 0.4s ease both; }
.anim-slide-up      { animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-slide-down    { animation: slideDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-slide-left    { animation: slideLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-slide-right   { animation: slideRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-scale-in      { animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-scale-out     { animation: scaleOut 0.4s ease both; }
.anim-rotate-in     { animation: rotateIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-shake         { animation: shake 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.anim-pulse         { animation: pulse 2s ease-in-out infinite; }
.anim-border-glow   { animation: borderGlow 2s ease-in-out infinite; }
.anim-glitch        { animation: textGlitch 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.anim-scanline      { animation: scanline 4s linear infinite; }
.anim-flicker       { animation: flicker 3s linear infinite; }
.anim-countdown     { animation: countdownFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

.anim-stroke-draw {
  stroke-dasharray: var(--stroke-length, 1000);
  stroke-dashoffset: var(--stroke-length, 1000);
  animation: strokeDraw 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Delay modifiers */
.anim-delay-100 { animation-delay: 100ms; }
.anim-delay-200 { animation-delay: 200ms; }
.anim-delay-300 { animation-delay: 300ms; }
.anim-delay-400 { animation-delay: 400ms; }
.anim-delay-500 { animation-delay: 500ms; }
.anim-delay-600 { animation-delay: 600ms; }
.anim-delay-800 { animation-delay: 800ms; }
.anim-delay-1000 { animation-delay: 1000ms; }

/* ── Hero rond floating + glow pulse ─── */
@keyframes heroRondFloatL {
  0%   { transform: translateX(0) scaleY(1); }
  20%  { transform: translateX(4px) scaleY(1.01); }
  40%  { transform: translateX(-2px) scaleY(.99); }
  60%  { transform: translateX(3px) scaleY(1.005); }
  80%  { transform: translateX(-1px) scaleY(.995); }
  100% { transform: translateX(0) scaleY(1); }
}

@keyframes heroRondFloatR {
  0%   { transform: translateX(0) scaleY(1); }
  15%  { transform: translateX(-3px) scaleY(1.005); }
  35%  { transform: translateX(4px) scaleY(.99); }
  55%  { transform: translateX(-2px) scaleY(1.01); }
  75%  { transform: translateX(1px) scaleY(.995); }
  100% { transform: translateX(0) scaleY(1); }
}

@keyframes heroRondPulse {
  0%, 100% {
    filter: drop-shadow(0 0 14px rgba(187,255,0,.2))
            drop-shadow(0 0 40px rgba(187,255,0,.06));
    opacity: 1;
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(187,255,0,.45))
            drop-shadow(0 0 60px rgba(187,255,0,.15));
    opacity: .92;
  }
}

/* Duration modifiers */
.anim-fast    { animation-duration: 0.3s; }
.anim-normal  { animation-duration: 0.6s; }
.anim-slow    { animation-duration: 1s; }
.anim-slower  { animation-duration: 1.5s; }

/* Iteration modifiers */
.anim-infinite { animation-iteration-count: infinite; }
.anim-once     { animation-iteration-count: 1; }