/* ═══════════════════════════════════════
   ANIMATIONS — Keyframes & Transitions
   ═══════════════════════════════════════ */

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

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.02); }
}

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

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

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

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

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

@keyframes photon-travel {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--photon-dx, 100px), var(--photon-dy, -50px)) scale(0.3); opacity: 0; }
}

/* Ring animations with 3D rotation */
.ring-1 {
  animation: spin-orbit 2s linear infinite;
}
.ring-2 {
  transform: rotateX(60deg);
  animation: spin-orbit 3s linear infinite reverse;
}
.ring-3 {
  transform: rotateY(60deg);
  animation: spin-orbit 4s linear infinite;
}

/* Transition classes */
.anim-fade-in {
  animation: fade-in 300ms ease forwards;
}

.anim-fade-out {
  animation: fade-out 200ms ease forwards;
}

/* Element cell hover animation */
.element-cell {
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

/* Panel transitions */
.panel {
  transition: width 250ms ease, min-width 250ms ease;
}

/* Loading screen exit */
#loading-screen.done {
  animation: fade-out 500ms ease forwards;
  pointer-events: none;
}

/* Photon emission particle */
.photon-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: photon-travel 1.5s ease-out forwards;
}

/* Nucleus pulse */
.nucleus-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Progress bar shimmer */
.progress-fill {
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}