/* Flattened from hermes.module.css. Class map:
   logoStage → hermes-logoStage, logo → hermes-logo, orbit → hermes-orbit,
   ping → hermes-ping, ping2 → hermes-ping2, ping3 → hermes-ping3.
   @keyframes (logoEnter, logoFloat, glowPulse, orbitSpin, pingOut) are left
   unrenamed — they are not class selectors. */

/*
 * Hermes hero logo animation.
 * "Always-on satellite / radar" feel: the logo floats gently, sits inside an
 * orbiting accent ring, and emits soft radar "ping" rings outward.
 * Brand gradient: sky-blue #0ea5e9 -> #0369a1.
 */

.hermes-logoStage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 280px;
  isolation: isolate;
}

/* Soft ambient glow behind everything */
.hermes-logoStage::before {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.35) 0%, rgba(3, 105, 161, 0) 70%);
  filter: blur(8px);
  z-index: -1;
  animation: glowPulse 5s ease-in-out infinite;
}

/* The logo itself — fades + scales in, then floats forever */
.hermes-logo {
  width: 150px;
  height: 150px;
  display: block;
  border-radius: 28%;
  filter: drop-shadow(0 12px 30px rgba(3, 105, 161, 0.45));
  animation:
    logoEnter 900ms cubic-bezier(0.22, 1, 0.36, 1) both,
    logoFloat 6s ease-in-out 900ms infinite;
}

/* Orbiting accent ring (tilted) with a single bright satellite dot */
.hermes-orbit {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 1.5px solid rgba(14, 165, 233, 0.45);
  border-top-color: rgba(14, 165, 233, 0.9);
  transform: rotateX(62deg);
  animation: orbitSpin 9s linear infinite;
  pointer-events: none;
}

.hermes-orbit::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 12px 3px rgba(14, 165, 233, 0.8);
}

/* Radar "ping" signal rings emanating outward */
.hermes-ping {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid rgba(14, 165, 233, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: pingOut 3.6s ease-out infinite;
}

.hermes-ping2 {
  animation-delay: 1.2s;
}

.hermes-ping3 {
  animation-delay: 2.4s;
}

@keyframes logoEnter {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes orbitSpin {
  from {
    transform: rotateX(62deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(62deg) rotateZ(360deg);
  }
}

@keyframes pingOut {
  0% {
    opacity: 0.8;
    transform: scale(0.6);
  }
  70% {
    opacity: 0.12;
  }
  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

/* Responsive: scale the whole stage down on mobile */
@media (max-width: 640px) {
  .hermes-logoStage {
    min-height: 220px;
  }
  .hermes-logo {
    width: 110px;
    height: 110px;
  }
  .hermes-orbit {
    width: 160px;
    height: 160px;
  }
  .hermes-ping {
    width: 110px;
    height: 110px;
  }
  .hermes-logoStage::before {
    width: 180px;
    height: 180px;
  }
}

/* Accessibility: respect reduced-motion — collapse all animation */
@media (prefers-reduced-motion: reduce) {
  .hermes-logo,
  .hermes-orbit,
  .hermes-ping,
  .hermes-logoStage::before {
    animation: none;
  }
  .hermes-logo {
    opacity: 1;
    transform: none;
  }
  .hermes-ping {
    display: none;
  }
}