/* STRONG INLINE HERO AURA ANIMATION */
.hero .specimen-frame {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 3px !important;
  animation: hero-frame-pulse 3.8s ease-in-out infinite !important;
}

.hero .specimen-frame .specimen-image {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  animation: hero-image-breathe 4.5s ease-in-out infinite !important;
  will-change: filter, transform !important;
}

.hero .specimen-frame::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: -8% !important;
  pointer-events: none !important;
  border-radius: 50% !important;
  background:
    repeating-radial-gradient(
      circle at 50% 46%,
      transparent 0 8%,
      rgba(75, 225, 255, 0.34) 8.7% 9.9%,
      transparent 10.7% 15.5%,
      rgba(255, 192, 70, 0.32) 16.2% 17.4%,
      transparent 18.2% 23.5%,
      rgba(173, 105, 255, 0.30) 24.3% 25.6%,
      transparent 26.5% 33%
    ) !important;
  mix-blend-mode: screen !important;
  opacity: 0.5 !important;
  filter: blur(0.8px) brightness(1.2) !important;
  transform-origin: 50% 46% !important;
  animation: hero-rings-pulse 3.2s ease-in-out infinite !important;
  will-change: opacity, transform, filter !important;
}

.hero .specimen-frame::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: -25% !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(255, 244, 178, 0.42) 0 5%,
      rgba(69, 217, 255, 0.23) 10%,
      rgba(178, 103, 255, 0.16) 18%,
      transparent 31%
    ),
    conic-gradient(
      from 0deg at 50% 46%,
      transparent 0deg,
      rgba(80, 220, 255, 0.28) 35deg,
      transparent 78deg,
      rgba(255, 184, 62, 0.28) 145deg,
      transparent 205deg,
      rgba(177, 104, 255, 0.26) 275deg,
      transparent 360deg
    ) !important;
  mix-blend-mode: screen !important;
  opacity: 0.42 !important;
  filter: blur(11px) !important;
  transform-origin: 50% 46% !important;
  animation: hero-aura-spin 13s linear infinite,
             hero-aura-flare 4s ease-in-out infinite !important;
  will-change: transform, opacity !important;
}

@keyframes hero-rings-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.97);
    filter: blur(0.6px) brightness(1);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.045);
    filter: blur(1.4px) brightness(1.65);
  }
}

@keyframes hero-aura-spin {
  from { transform: rotate(0deg) scale(1.03); }
  to   { transform: rotate(360deg) scale(1.03); }
}

@keyframes hero-aura-flare {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.64; }
}

@keyframes hero-image-breathe {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
  50% {
    transform: scale(1.012);
    filter: brightness(1.14) saturate(1.22);
  }
}

@keyframes hero-frame-pulse {
  0%, 100% {
    box-shadow:
      0 22px 55px rgba(0, 0, 0, 0.48),
      0 0 20px rgba(64, 205, 255, 0.10),
      0 0 40px rgba(255, 177, 62, 0.08);
  }
  50% {
    box-shadow:
      0 24px 64px rgba(0, 0, 0, 0.5),
      0 0 38px rgba(64, 205, 255, 0.28),
      0 0 82px rgba(255, 177, 62, 0.18);
  }
}