/* ==========================================================================
   Sphinx Labs — hero section
   Depends on the tokens defined in variables.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero card
   Figma 48:10865 — 1210x799 rounded card, bright blue upper-left falling to
   deep navy lower-right.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(
    118deg,
    var(--hero-from) 0%,
    #0d67af 42%,
    var(--hero-to) 100%
  );
}

/* --------------------------------------------------------------------------
   Rotating dot field
   The Figma decoration (52:22219) is a radial lattice of ~2,800 dots, so
   spinning it about its own centre reads as continuous circular drift with no
   seam — a tiling background could not do this.

   Placement matches Figma: 1408x1411, 93px from the card's top, centred
   horizontally, which puts the lattice centre low in the card.
   -------------------------------------------------------------------------- */

.hero__dots {
  position: absolute;
  top: 93px;
  left: 50%;
  width: 1408px;
  height: 1411px;
  background: url("../images/doted-bg.svg") center / contain no-repeat;
  transform-origin: 50% 50%;
  /* One turn every 2 minutes — present but never distracting. */
  animation: hero-dots-spin 120s linear infinite;
  pointer-events: none;
  user-select: none;
  /* Promote to its own layer so the spin doesn't repaint the hero text. */
  will-change: transform;
}

/* translateX is kept inside the keyframes: `transform` is one property, so an
   animation on it would otherwise overwrite the centring. */
@keyframes hero-dots-spin {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  /* Hold the lattice larger than the card so no corner is ever left bare. */
  .hero__dots {
    top: 40px;
    width: 1100px;
    height: 1102px;
  }
}

@media (max-width: 767px) {
  .hero__dots {
    top: 20px;
    width: 820px;
    height: 822px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — keep the decoration, drop the movement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__dots {
    animation: none;
  }
}