/* ==========================================================================
   nessvyuh - Animations & NASA-Inspired Moving Logo
   ========================================================================== */

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(204, 120, 92, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(204, 120, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(204, 120, 92, 0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dashLine {
  to { stroke-dashoffset: 0; }
}

/* NASA-inspired Logo Animations */
@keyframes orbitRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes orbitParticle {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes vectorGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(204, 120, 92, 0.5)); }
  50% { filter: drop-shadow(0 0 8px rgba(204, 120, 92, 0.9)); }
}

@keyframes latticePulse {
  0%, 100% { stroke-opacity: 0.25; }
  50% { stroke-opacity: 0.7; }
}

/* Animated Classes */
.nasa-logo-wrap {
  display: inline-block;
  position: relative;
  transition: transform var(--transition-normal);
}

.nasa-logo-wrap:hover {
  transform: scale(1.04);
}

.nasa-vector-path {
  animation: vectorGlow 3s ease-in-out infinite;
}

.nasa-star-1 { animation: starTwinkle 2.4s ease-in-out infinite; transform-origin: center; }
.nasa-star-2 { animation: starTwinkle 3.1s ease-in-out 0.7s infinite; transform-origin: center; }
.nasa-star-3 { animation: starTwinkle 2.8s ease-in-out 1.2s infinite; transform-origin: center; }
.nasa-star-4 { animation: starTwinkle 3.5s ease-in-out 1.8s infinite; transform-origin: center; }

.nasa-lattice-line {
  animation: latticePulse 3.5s ease-in-out infinite;
}

/* Animated Dark Blue Pulsar Star with Flames */
.pulsar-logo {
  position: relative;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: middle;
}

/* Pulsar Outer Flaming Jets */
.pulsar-flames {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 255, 0.65) 0%, rgba(30, 90, 255, 0.35) 45%, rgba(0, 15, 80, 0) 75%);
  filter: blur(3px);
  animation: pulsarFlamesAnim 2s infinite ease-in-out alternate;
  pointer-events: none;
}

/* Solar Flares & Outward Flame Spikes (Counter-rotating) */
.pulsar-spikes {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 15deg,
    rgba(64, 180, 255, 0.9) 25deg,
    transparent 35deg 70deg,
    rgba(0, 100, 255, 0.95) 85deg,
    transparent 95deg 150deg,
    rgba(80, 220, 255, 0.9) 165deg,
    transparent 175deg 235deg,
    rgba(32, 140, 255, 0.95) 255deg,
    transparent 265deg 320deg,
    rgba(64, 190, 255, 0.85) 340deg,
    transparent 350deg 360deg
  );
  filter: blur(2px);
  animation: pulsarSpikesRotate 5s infinite linear;
  pointer-events: none;
}

/* Secondary Corona Flame layer (Clockwise turbulent jets) */
.pulsar-corona {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 45deg,
    transparent 0deg 30deg,
    rgba(0, 210, 255, 0.75) 45deg,
    transparent 60deg 120deg,
    rgba(20, 80, 255, 0.8) 135deg,
    transparent 150deg 210deg,
    rgba(0, 230, 255, 0.75) 225deg,
    transparent 240deg 300deg,
    rgba(30, 110, 255, 0.8) 315deg,
    transparent 330deg 360deg
  );
  filter: blur(1.5px);
  animation: pulsarCoronaRotate 3.5s infinite linear reverse;
  pointer-events: none;
}

/* Core Pulsar Solid Ball — Pure Flame-Colored Glowing Sphere (replacing photo) */
.pulsar-core-ball {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #67e8f9 22%, #0ea5e9 45%, #1d4ed8 72%, #0b1329 100%);
  box-shadow: 
    0 0 10px #0ea5e9,
    0 0 18px rgba(29, 78, 216, 0.85),
    inset -1.5px -1.5px 3px rgba(3, 7, 18, 0.8),
    inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.9);
  animation: pulsarCorePulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

/* Core Pulsar Image (Legacy fallback) */
.pulsar-core-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 12px rgba(0, 150, 255, 0.9), inset 0 0 4px #00ffff;
  animation: pulsarCorePulse 2s infinite ease-in-out;
}

@keyframes pulsarFlamesAnim {
  0% { transform: scale(0.88); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; filter: blur(4px) drop-shadow(0 0 10px rgba(0, 180, 255, 0.9)); }
  100% { transform: scale(0.92); opacity: 0.65; }
}

@keyframes pulsarSpikesRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulsarCoronaRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulsarCorePulse {
  0%, 100% { transform: scale(0.96); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.35) drop-shadow(0 0 8px #00c8ff); }
}

.animate-pulse-glow {
  animation: pulseGlow 2s infinite ease-out;
}

.animate-slide-down {
  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* SVG Line Animation */
.svg-draw-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: dashLine 1.4s ease-out forwards;
}

/* SVG Diagram Interactive Hover & Node Effects */
.svg-node-hover:hover circle {
  fill: var(--accent-terracotta) !important;
  transition: fill 0.2s ease;
}

.svg-node-hover:hover text {
  fill: #FFFFFF !important;
}

/* Print Styles */
@media print {
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  .site-header,
  .sticky-filter-toolbar,
  .quick-jump-panel,
  .header-actions,
  .card-footer,
  .minimap-toggle-btn,
  .btn-secondary,
  .btn-terracotta,
  .modal-backdrop,
  .slide-drawer,
  .toast-notice {
    display: none !important;
  }
  .feed-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .question-card {
    border: 1px solid #CCCCCC !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 2rem !important;
  }
  .solution-container {
    display: block !important;
  }
}