/* ==========================================================================
   StrangeInfinity — Keyframe Animations
   animations.css
   ========================================================================== */

/* ── Loading ── */
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.6)); }
  50%       { transform: scale(1.05); filter: drop-shadow(0 0 40px rgba(168, 85, 247, 0.9)); }
}

@keyframes loaderFill {
  0%   { width: 0%; }
  30%  { width: 45%; }
  60%  { width: 72%; }
  100% { width: 100%; }
}

/* ── Hero ── */
@keyframes orbFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-18px) rotate(1.5deg); }
  66%       { transform: translateY(-8px) rotate(-1deg); }
}

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

@keyframes badgePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.5); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 6px rgba(6, 182, 212, 0); }
}

/* ── Ripple button ── */
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Shine card ── */
@keyframes shineAnim {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Glow pulse ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: var(--shadow-glow-primary); }
  50%       { box-shadow: 0 0 40px rgba(124, 58, 237, 0.7), 0 0 80px rgba(124, 58, 237, 0.3); }
}

/* ── Float up down (generic) ── */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ── Gradient rotation ── */
@keyframes gradientRotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Bounce in (Easter egg) ── */
@keyframes bounceIn {
  0%   { transform: scale(0.4) translateY(40px); opacity: 0; }
  60%  { transform: scale(1.05) translateY(-8px); }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── Typewriter cursor blink ── */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Stars twinkle ── */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.3); }
}

/* ── Nebula drift ── */
@keyframes nebulaDrift {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
  33%  { transform: translate(30px, -20px) rotate(60deg); opacity: 0.5; }
  66%  { transform: translate(-20px, 10px) rotate(120deg); opacity: 0.35; }
  100% { transform: translate(0, 0) rotate(180deg); opacity: 0.3; }
}

/* ── Progress bar fill ── */
@keyframes progressFill {
  from { width: 0; }
  to   { width: var(--fill-width, 80%); }
}

/* ── Radar scan ── */
@keyframes radarScan {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Counter counting ── */
@keyframes countUp { from { opacity: 0.3; } to { opacity: 1; } }

/* ── Slide fade in ── */
@keyframes slideFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideFadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: none; }
}

/* ── Typing animation ── */
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Gradient background animation ── */
.animated-gradient-bg {
  background: linear-gradient(-45deg, #04020a, #0a0614, #120a1e, #04020a);
  background-size: 400% 400%;
  animation: gradientRotate 12s ease infinite;
}

/* ── Floating particles (CSS-only fallbacks) ── */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: floatY var(--dur, 6s) ease-in-out infinite var(--del, 0s);
  opacity: var(--op, 0.4);
}

/* ── Glow text animation ── */
@keyframes glowText {
  0%, 100% { text-shadow: 0 0 10px rgba(124, 58, 237, 0.5); }
  50%       { text-shadow: 0 0 25px rgba(168, 85, 247, 0.9), 0 0 50px rgba(124, 58, 237, 0.4); }
}
.glow-text { animation: glowText 3s ease-in-out infinite; }

/* ── Scroll hint animation ── */
@keyframes scrollHint {
  0%   { transform: translateY(0); opacity: 1; }
  80%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: default;
  animation: slideFadeIn 1s ease 2.5s both;
}
.scroll-hint-arrow {
  font-size: var(--text-xl);
  animation: scrollHint 2s ease infinite;
}

/* ── Hover tilt (applied via JS) ── */
.tilt {
  transform-style: preserve-3d;
  transform: perspective(1000px);
  transition: transform 0.15s ease;
}

/* ── Nav link active line animation ── */
@keyframes activeLine {
  from { width: 0; }
  to   { width: 60%; }
}

/* ── Card entry animation ── */
.card-entry {
  animation: slideFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Easter egg confetti-like ── */
@keyframes confetti {
  0%   { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── Keyboard shortcut hint fade ── */
@keyframes hintFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}

/* ── Light theme particle shift ── */
[data-theme="light"] #particle-canvas { opacity: 0.4; }