/* Keep the dot field anchored. Only its two existing rays and one dot move. */
[data-hero-motion] .future-fork-grid-overlay,
[data-hero-motion] .future-fork-particles,
.hero-grid-twinkle-field { pointer-events: none; }

.hero-grid-twinkle-field {
  position: absolute;
  inset: 92px 0 0;
  z-index: -1;
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 78%, transparent 100%);
}

.hero-grid-twinkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #effaff;
  box-shadow: 0 0 5px #dcfaffb3, 0 0 12px #9ae8ff40;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.65);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: no-preference) {
  [data-hero-motion][data-motion-ready] .future-fork-particles {
    animation: none;
    transform: none;
  }

  /* Split the original diagonal rules so their upper origins stay anchored. */
  [data-hero-motion][data-motion-ready] .future-fork-grid-overlay {
    background-image: none;
  }

  [data-hero-motion][data-motion-ready] .future-fork-grid-overlay::before,
  [data-hero-motion][data-motion-ready] .future-fork-grid-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    animation: hero-ray-white 24s ease-in-out infinite paused;
    transform-origin: var(--hero-ray-white-origin, 44%) 0;
    background: linear-gradient(115deg,
      transparent 0 29%,
      #e1efff02 31%, #e1efff06 33.4%,
      #ffffff0f 34.1% 34.3%,
      #e1efff05 35%, #e1efff02 38%, transparent 41% 100%);
  }

  [data-hero-motion][data-motion-ready] .future-fork-grid-overlay::after {
    animation-name: hero-ray-green;
    animation-duration: 32s;
    transform-origin: var(--hero-ray-green-origin, 55%) 0;
    background: linear-gradient(74deg,
      transparent 0 56%,
      #43c8a002 58%, #43c8a006 61.4%,
      #43c8a00d 62.1% 62.3%,
      #43c8a005 63%, #43c8a002 65%, transparent 68% 100%);
  }

  [data-hero-motion][data-motion-state="running"] .future-fork-grid-overlay::before,
  [data-hero-motion][data-motion-state="running"] .future-fork-grid-overlay::after {
    animation-play-state: running;
  }
}

@keyframes hero-ray-white {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3.5deg); }
  75% { transform: rotate(-3.5deg); }
}

@keyframes hero-ray-green {
  0%, 100% { transform: rotate(0deg); }
  33% { transform: rotate(-4deg); }
  70% { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce), print {
  .hero-grid-twinkle-field { display: none; }
}