/**
 * MEDVERSE'26 - Ambient Visuals: ECG Pulse, Aura Rings, Circuit Traces & DNA
 * Theme: AURAMED - The Rhythm of Medical Innovation
 */

/* ----------------------------------------------------
   1. Canvas / Background Viewport Layer
   ---------------------------------------------------- */
.ambient-canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

#ambient-canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.85;
}

/* ----------------------------------------------------
   2. Glowing Aura Rings (AURAMED Theme)
   ---------------------------------------------------- */
.aura-container {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.aura-hero {
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
}

.aura-ring {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.aura-ring-1 {
  width: 380px;
  height: 380px;
  border: 1.5px solid rgba(0, 229, 255, 0.22);
  box-shadow: 0 0 35px rgba(0, 229, 255, 0.18), inset 0 0 25px rgba(0, 229, 255, 0.1);
  animation: auraPulse 6s ease-in-out infinite alternate;
}

.aura-ring-2 {
  width: 580px;
  height: 580px;
  border: 1px dashed rgba(229, 169, 60, 0.25);
  box-shadow: 0 0 45px rgba(229, 169, 60, 0.12);
  animation: auraRotateClockwise 35s linear infinite;
}

.aura-ring-3 {
  width: 780px;
  height: 780px;
  border: 1px solid rgba(0, 102, 255, 0.15);
  animation: auraPulseSlow 10s ease-in-out infinite alternate;
}

.aura-glow-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, rgba(0, 102, 255, 0.08) 45%, rgba(229, 169, 60, 0.04) 70%, transparent 100%);
  filter: blur(40px);
}

@keyframes auraPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0.6;
    border-color: rgba(0, 229, 255, 0.2);
  }
  50% {
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow: 0 0 45px rgba(0, 229, 255, 0.35);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 0.95;
    border-color: rgba(229, 169, 60, 0.35);
  }
}

@keyframes auraPulseSlow {
  0% {
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.8;
  }
}

@keyframes auraRotateClockwise {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ----------------------------------------------------
   3. Medical Monitor ECG Waveform
   ---------------------------------------------------- */
.ecg-strip {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
  opacity: 0.45;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.ecg-strip-hero {
  height: 70px;
  margin: 1.5rem 0 1rem;
  opacity: 0.7;
}

.ecg-svg {
  width: 200%;
  height: 100%;
  display: block;
  animation: ecgFlow 12s linear infinite;
}

.ecg-path {
  fill: none;
  stroke: url(#ecg-gradient);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px #00e5ff);
}

.ecg-glow-line {
  fill: none;
  stroke: rgba(0, 229, 255, 0.4);
  stroke-width: 4;
  stroke-linecap: round;
  filter: blur(3px);
}

@keyframes ecgFlow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ----------------------------------------------------
   4. Circuit Grid & DNA Traces
   ---------------------------------------------------- */
.circuit-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(0, 229, 255, 0.08) 1px, transparent 0),
    linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 32px 32px, 96px 96px, 96px 96px;
  pointer-events: none;
  z-index: 1;
}

.circuit-node {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--electric-cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--electric-cyan);
}

/* ----------------------------------------------------
   5. Subtle Medical Pulse Pill
   ---------------------------------------------------- */
.pulse-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.25);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--electric-cyan);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--electric-cyan);
  box-shadow: 0 0 12px var(--electric-cyan);
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--electric-cyan);
  animation: pulseBeacon 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes pulseBeacon {
  0% {
    transform: scale(0.8);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.pulse-gold {
  background: rgba(229, 169, 60, 0.1);
  border-color: rgba(229, 169, 60, 0.3);
  color: var(--metallic-gold-light);
}

.pulse-gold .pulse-dot {
  background: var(--metallic-gold);
  box-shadow: 0 0 12px var(--metallic-gold);
}

.pulse-gold .pulse-dot::after {
  border-color: var(--metallic-gold);
}

/* ----------------------------------------------------
   6. Responsive Ambient Scaling
   ---------------------------------------------------- */
@media (max-width: 768px) {
  /* Scale the aura rings down so they sit nicely behind the hero on phones */
  .aura-hero {
    width: 560px;
    height: 560px;
    top: 38%;
  }
  .aura-ring-1 { width: 300px; height: 300px; }
  .aura-ring-2 { width: 440px; height: 440px; }
  .aura-ring-3 { width: 560px; height: 560px; }
  .aura-glow-core { width: 340px; height: 340px; }
  .ecg-strip-hero { height: 56px; }
}

@media (max-width: 480px) {
  .aura-hero {
    width: 420px;
    height: 420px;
  }
  .aura-ring-1 { width: 230px; height: 230px; }
  .aura-ring-2 { width: 330px; height: 330px; }
  .aura-ring-3 { width: 420px; height: 420px; }
  .aura-glow-core { width: 260px; height: 260px; }
}

/* Honor reduced-motion preference for ambient animations */
@media (prefers-reduced-motion: reduce) {
  .aura-ring-1,
  .aura-ring-2,
  .aura-ring-3,
  .aura-glow-core,
  .ecg-svg,
  .pulse-dot::after {
    animation: none !important;
  }
  #ambient-canvas {
    opacity: 0.4;
  }
}