/* Step 12 hero enhancement: static logo + soft ambient glow + hidden news strip. */

/* The announcement is removed by JS as soon as it appears. This class prevents a flash. */
.lido-announcement-hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Keep the regular navigation in its normal no-announcement state. */
[data-testid="header"] {
  top: 0 !important;
}

/* Replace the original hero animation with the supplied transparent PNG. */
[data-testid="animation_logo"] {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  isolation: isolate;
}

[data-testid="animation_logo"] > .animation-logo_logoWrapper__D23_t,
[data-testid="animation_logo"] .animation-logo_logo__Cv2Ii {
  display: none !important;
}

/* Soft breathing light behind the logo. The logo itself never moves. */
[data-testid="animation_logo"]::before,
[data-testid="animation_logo"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%) scale(0.96);
  will-change: opacity, transform;
}

[data-testid="animation_logo"]::before {
  width: min(72%, 560px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle,
      rgba(104, 191, 255, 0.22) 0%,
      rgba(151, 120, 255, 0.14) 35%,
      rgba(255, 126, 190, 0.08) 57%,
      rgba(255, 255, 255, 0) 76%);
  animation: heroLogoGlowBreath 7.8s ease-in-out infinite alternate;
}

[data-testid="animation_logo"]::after {
  width: min(48%, 390px);
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.44) 0%,
    rgba(182, 222, 255, 0.14) 46%,
    rgba(255, 255, 255, 0) 72%);
  animation: heroLogoInnerGlow 7.8s ease-in-out infinite alternate;
}

.hero-floating-logo {
  display: block;
  width: clamp(270px, 34vw, 560px);
  max-width: 82%;
  height: auto;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;

  /* The logo remains completely static. Only light/clarity breathes subtly. */
  transform: none !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: filter;
  animation: heroLogoClarityBreath 7.8s ease-in-out infinite alternate;
}

@keyframes heroLogoGlowBreath {
  0% {
    opacity: 0.52;
    transform: translate(-50%, -50%) scale(0.96);
  }
  100% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.045);
  }
}

@keyframes heroLogoInnerGlow {
  0% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.98);
  }
  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1.025);
  }
}

@keyframes heroLogoClarityBreath {
  0% {
    filter: saturate(1.02) contrast(1.01) brightness(0.99)
      drop-shadow(0 16px 34px rgba(69, 143, 255, 0.10));
  }
  100% {
    filter: saturate(1.08) contrast(1.04) brightness(1.035)
      drop-shadow(0 18px 42px rgba(87, 151, 255, 0.20));
  }
}

@media (max-width: 899px) {
  .hero-floating-logo {
    width: clamp(210px, 66vw, 390px);
    max-width: 76vw;
  }

  [data-testid="animation_logo"]::before {
    width: min(78vw, 470px);
  }

  [data-testid="animation_logo"]::after {
    width: min(54vw, 320px);
  }
}

@media (max-width: 520px) {
  .hero-floating-logo {
    width: min(72vw, 310px);
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-testid="animation_logo"]::before,
  [data-testid="animation_logo"]::after,
  .hero-floating-logo {
    animation: none !important;
  }

  [data-testid="animation_logo"]::before {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1);
  }

  [data-testid="animation_logo"]::after {
    opacity: 0.52;
    transform: translate(-50%, -50%) scale(1);
  }
}