/* ==========================================================================
   ANIMATIONS · keyframes + reveal utilities
   ========================================================================== */

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

@keyframes view-in{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fade-slide-up{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fade-in{ from{ opacity: 0; } to{ opacity: 1; } }

@keyframes pulse-warn{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(251,113,133,.5); }
  50%{ box-shadow: 0 0 0 8px rgba(251,113,133,0); }
}

@keyframes glow-pulse{
  0%, 100%{ filter: drop-shadow(0 0 6px currentColor); }
  50%{ filter: drop-shadow(0 0 18px currentColor); }
}

@keyframes float-y{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

@keyframes nebula-drift-1{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(4vw, 3vh) scale(1.15); }
  100%{ transform: translate(0,0) scale(1); }
}
@keyframes nebula-drift-2{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-3vw, 4vh) scale(1.1); }
  100%{ transform: translate(0,0) scale(1); }
}
@keyframes nebula-drift-3{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(3vw, -3vh) scale(1.12); }
  100%{ transform: translate(0,0) scale(1); }
}
.nebula--1{ animation: nebula-drift-1 26s ease-in-out infinite; }
.nebula--2{ animation: nebula-drift-2 32s ease-in-out infinite; }
.nebula--3{ animation: nebula-drift-3 22s ease-in-out infinite; }

@keyframes particle-burst{
  0%{ transform: translate(0,0) scale(1); opacity: 1; }
  100%{ transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
.particle-burst-item{
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  pointer-events: none; z-index: 500;
  animation: particle-burst .8s ease-out forwards;
}

@keyframes ripple{
  from{ transform: scale(0); opacity: .5; }
  to{ transform: scale(3); opacity: 0; }
}
.ripple{
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.5);
  width: 20px; height: 20px; transform: scale(0); pointer-events: none;
  animation: ripple .6s ease-out forwards;
}

/* orbit map node rotation container */
@keyframes orbit-rotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* scale-in for modal-like elements */
@keyframes scale-in{
  from{ opacity: 0; transform: scale(.92); }
  to{ opacity: 1; transform: scale(1); }
}

/* success check draw */
@keyframes draw-check{
  from{ stroke-dashoffset: 40; }
  to{ stroke-dashoffset: 0; }
}

.reveal-on-load{ animation: fade-slide-up var(--t-slow) var(--ease-out) both; }