/* ============================================
   SHARED ANIMATIONS — Keyframes Library
   ============================================ */

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

@keyframes float-centered {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50%       { transform: translateX(-50%) translateY(-12px); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%      { transform: translateY(-8px) rotate(0.5deg); }
  66%      { transform: translateY(-4px) rotate(-0.3deg); }
}

@keyframes float-gentle {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(3px, -6px); }
  50%      { transform: translate(-2px, -10px); }
  75%      { transform: translate(-4px, -4px); }
}

/* ── Pulse / Glow ── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 163, 255, 0.15), 0 0 40px rgba(0, 163, 255, 0.05); }
  50%      { box-shadow: 0 0 30px rgba(0, 163, 255, 0.3), 0 0 60px rgba(0, 163, 255, 0.1); }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes core-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.05); filter: brightness(1.2); }
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

/* ── Reveal ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-in-scale {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-up-stagger {
  from { opacity: 0; transform: translateY(30px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Energy / Flow ── */
@keyframes energy-flow {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes energy-pulse {
  0%   { stroke-dashoffset: 20; opacity: 0.3; }
  50%  { opacity: 0.8; }
  100% { stroke-dashoffset: -20; opacity: 0.3; }
}

@keyframes dash-flow {
  to { stroke-dashoffset: -40; }
}

@keyframes particle-flow {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ── Orbit ── */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-radius, 180px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-radius, 180px)) rotate(-360deg); }
}

@keyframes orbit-reverse {
  from { transform: rotate(360deg) translateX(var(--orbit-radius, 180px)) rotate(-360deg); }
  to   { transform: rotate(0deg) translateX(var(--orbit-radius, 180px)) rotate(0deg); }
}

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

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

/* ── Shimmer / Reflection ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes glass-shimmer {
  0%   { left: -100%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

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

/* ── Background ── */
@keyframes grid-pulse {
  0%, 100% { opacity: 0.03; }
  50%      { opacity: 0.06; }
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

@keyframes beam-sweep {
  0%   { transform: translateX(-100%) rotate(15deg); opacity: 0; }
  20%  { opacity: 0.15; }
  80%  { opacity: 0.15; }
  100% { transform: translateX(200%) rotate(15deg); opacity: 0; }
}

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

/* ── Counters ── */
@keyframes count-highlight {
  0%   { color: var(--blue-cyan); text-shadow: 0 0 20px rgba(0, 212, 255, 0.5); }
  100% { color: var(--text-primary); text-shadow: none; }
}

/* ── Notification ── */
@keyframes slide-in-notification {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── Wave ── */
@keyframes wave {
  0%   { transform: translateX(0) translateZ(0) scaleY(1); }
  50%  { transform: translateX(-25%) translateZ(0) scaleY(0.55); }
  100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
}

/* ── Scan Line ── */
@keyframes scan-line {
  0%   { top: -2px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ── Ripple ── */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.4; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Section reveal classes ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }
.stagger-8 { transition-delay: 0.8s; }
.stagger-9 { transition-delay: 0.9s; }

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

  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cursor-spotlight,
  #particle-canvas {
    display: none;
  }
}