/* ============================================================
   ANIMATIONS.CSS — Maximum炫酷 Keyframes
   ============================================================ */

/* ── Fade In Up ── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.9);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-60px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-80px); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(80px); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.7); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ── Card Reveal — 3D pop ── */
@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(100px) scale(0.8) rotateX(15deg) rotateY(-10deg);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0) rotateY(0);
    filter: blur(0);
  }
}

/* ── Reveal Classes ── */
.reveal { opacity: 0; }

.reveal--visible.reveal--fade-up    { animation: fadeInUp 0.4s var(--ease-out-expo) forwards; }
.reveal--visible.reveal--fade-down  { animation: fadeInDown 0.4s var(--ease-out-expo) forwards; }
.reveal--visible.reveal--fade-left  { animation: fadeInLeft 0.4s var(--ease-out-expo) forwards; }
.reveal--visible.reveal--fade-right { animation: fadeInRight 0.4s var(--ease-out-expo) forwards; }
.reveal--visible.reveal--scale      { animation: fadeInScale 0.4s var(--ease-out-back) forwards; }
.reveal--visible.reveal--card       { animation: cardReveal 0.4s var(--ease-out-back) forwards; }

.reveal--delay-1 { animation-delay: 0.08s; }
.reveal--delay-2 { animation-delay: 0.16s; }
.reveal--delay-3 { animation-delay: 0.24s; }
.reveal--delay-4 { animation-delay: 0.32s; }
.reveal--delay-5 { animation-delay: 0.40s; }
.reveal--delay-6 { animation-delay: 0.48s; }

/* ── Gentle Float ── */
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-36px); }
}
.animate-float { animation: gentle-float 1.5s ease-in-out infinite; }

/* ── Spin Slow ── */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 5s linear infinite; }

/* ── Shimmer Sweep ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.12) 45%,
    rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.12) 55%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1s ease-in-out infinite;
}

/* ── Glass Glitch ── */
@keyframes glass-glitch {
  0%, 94%, 96%, 100% { opacity: 1; }
  95%                 { opacity: 0.7; transform: translateX(2px); }
}
.glass-glitch { animation: glass-glitch 4s linear infinite; }

/* ── Electric Pulse ── */
@keyframes electric-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--glow-cyan), 0 0 40px var(--glow-blue), 0 0 80px var(--glow-purple); }
  50%      { box-shadow: 0 0 40px var(--glow-cyan), 0 0 80px var(--glow-blue), 0 0 160px var(--glow-purple), 0 0 240px var(--glow-pink); }
}
.electric-pulse { animation: electric-pulse 0.8s ease-in-out infinite; }

/* ── Breathing Glow ── */
@keyframes breathe {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 10px var(--glow-blue)); }
  50%      { filter: brightness(1.3) drop-shadow(0 0 30px var(--glow-cyan)); }
}
.breathe { animation: breathe 1.2s ease-in-out infinite; }

/* ── Rainbow Cycle (background-position) ── */
@keyframes rainbow-cycle {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

/* ── Energy Wave ── */
@keyframes energy-wave {
  0%   { transform: scaleX(0); opacity: 0.8; }
  50%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ── Warp Speed (diagonal lines) ── */
@keyframes warp-speed {
  0%   { background-position: 0 0; }
  100% { background-position: 100px 100px; }
}
/* ════════════════════════════════════════════════════════════
   INSANE — Hyper-speed Glitch / Strobe / Chromatic Aberration
   ════════════════════════════════════════════════════════════ */

/* ── Glitch Text — rapid translateX jitter + color split ── */
@keyframes glitch-text {
  0%   { transform: translateX(0); text-shadow: -2px 0 var(--glow-cyan), 2px 0 var(--glow-pink); }
  10%  { transform: translateX(-3px); text-shadow: -4px 0 var(--glow-cyan), 3px 0 var(--glow-pink); }
  20%  { transform: translateX(2px); text-shadow: 3px 0 var(--glow-cyan), -3px 0 var(--glow-pink); }
  30%  { transform: translateX(-4px); text-shadow: -5px 0 var(--glow-cyan), 4px 0 var(--glow-pink); }
  40%  { transform: translateX(3px); text-shadow: 2px 0 var(--glow-cyan), -4px 0 var(--glow-pink); }
  50%  { transform: translateX(-2px); text-shadow: -3px 0 var(--glow-cyan), 5px 0 var(--glow-pink); }
  60%  { transform: translateX(4px); text-shadow: 4px 0 var(--glow-cyan), -2px 0 var(--glow-pink); }
  70%  { transform: translateX(-3px); text-shadow: -4px 0 var(--glow-cyan), 3px 0 var(--glow-pink); }
  80%  { transform: translateX(1px); text-shadow: 1px 0 var(--glow-cyan), -1px 0 var(--glow-pink); }
  90%  { transform: translateX(-2px); text-shadow: -3px 0 var(--glow-cyan), 2px 0 var(--glow-pink); }
  100% { transform: translateX(0); text-shadow: -2px 0 var(--glow-cyan), 2px 0 var(--glow-pink); }
}

/* ── Strobe — opacity blink 0.15s ── */
@keyframes strobe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── Hyper Spin — 360° in 1s ── */
@keyframes hyper-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Rainbow Shift — background-position cycle 1s ── */
@keyframes rainbow-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

/* ── Chromatic Shift — text-shadow RGB cycling ── */
@keyframes chromatic-shift {
  0%   { text-shadow: 0 0 10px var(--glow-red), -2px 0 0 rgba(255,0,0,0.8), 2px 0 0 rgba(0,255,255,0.8); }
  25%  { text-shadow: 0 0 10px var(--glow-green), -2px 0 0 rgba(0,255,0,0.8), 2px 0 0 rgba(255,0,255,0.8); }
  50%  { text-shadow: 0 0 10px var(--glow-blue), -2px 0 0 rgba(0,0,255,0.8), 2px 0 0 rgba(255,255,0,0.8); }
  75%  { text-shadow: 0 0 10px var(--glow-purple), -2px 0 0 rgba(255,0,255,0.8), 2px 0 0 rgba(0,255,0,0.8); }
  100% { text-shadow: 0 0 10px var(--glow-red), -2px 0 0 rgba(255,0,0,0.8), 2px 0 0 rgba(0,255,255,0.8); }
}

/* ── Utility: Glitch Text ── */
.glitch-text {
  animation: glitch-text 0.3s steps(1) infinite;
}

/* ── Utility: Strobe Text ── */
.strobe-text {
  animation: strobe 0.15s step-end infinite;
}

/* ── Utility: Rainbow Text (hue-rotate cycling) ── */
.rainbow-text {
  animation: rainbow-hue 1s linear infinite;
  filter: hue-rotate(0deg);
}

@keyframes rainbow-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}