/* React Bits adaptations. See assets/licenses/react-bits.txt. */

[data-blur-text] .blur-word {
  display: inline-block;
  max-width: 100%;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Independent transforms keep the ambient motion separate from the entrance. */
.hero-art > img {
  animation: nox-eclipse-drift 16s ease-in-out infinite,
    nox-eclipse-light 10s ease-in-out infinite;
  animation-play-state: paused;
}

.hero-art[data-ambient-motion] > img {
  animation-play-state: running;
}

@keyframes nox-eclipse-drift {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: -3px -6px; rotate: 0.3deg; }
}

@keyframes nox-eclipse-light {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}

/* The halo overlays the card without intercepting its buttons or focus. */
[data-spotlight] {
  position: relative;
  isolation: isolate;
  --mouse-x: 50%;
  --mouse-y: 65%;
  --spotlight-color: rgba(216, 161, 100, 0.16);
}

[data-spotlight]::after {
  content: '';
  position: absolute;
  inset: -12px;
  z-index: 1;
  border: 1px solid rgba(216, 161, 100, 0.16);
  border-radius: 19px;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    var(--spotlight-color),
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

[data-spotlight-active]::after,
[data-spotlight]:focus-within::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-art > img {
    animation: none;
    translate: none;
    rotate: none;
    filter: none;
  }

  [data-spotlight]::after {
    display: none;
    transition: none;
  }
}