.first-fold .hero__glow {
  background:
    radial-gradient(ellipse at var(--hero-light-x, 78%) var(--hero-light-y, 45%), #1767ed73, transparent 58%),
    radial-gradient(ellipse at 10% 0%, #1767c92e, transparent 45%);
}

.first-fold .hero__glow::after {
  content: "";
  position: absolute;
  inset: 12% 8% 8% 38%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #3a7bff30, transparent 68%);
  animation: home-hero-light 14s ease-in-out infinite alternate;
}

.first-fold .hero__visual.is-in {
  transform: perspective(1600px) rotateX(var(--hero-rotate-x, 0deg)) rotateY(var(--hero-rotate-y, 0deg));
  transition: opacity .9s var(--ease), transform .7s var(--ease);
}

.first-fold .hero__product {
  animation: home-panel-float 7s ease-in-out infinite;
}

.first-fold .hero__orbit {
  animation: home-orbit-drift 20s ease-in-out infinite alternate;
}

.first-fold .hero__orbit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c6e0ff;
  box-shadow: 0 0 10px #80b5ff, 0 0 24px #458bff99;
  offset-path: ellipse(50% 50% at 50% 50%);
  animation: home-orbit-travel 18s linear infinite;
}

.first-fold .hero__insight {
  animation: home-insight-float 7s ease-in-out infinite;
}

.first-fold .hero__insight-symbol {
  animation: home-insight-spark 8s ease-in-out infinite;
}

.first-fold .hero[data-motion-paused] .hero__glow,
.first-fold .hero[data-motion-paused] .hero__glow::after,
.first-fold .hero[data-motion-paused] .hero__product,
.first-fold .hero[data-motion-paused] .hero__orbit,
.first-fold .hero[data-motion-paused] .hero__orbit::after,
.first-fold .hero[data-motion-paused] .hero__insight,
.first-fold .hero[data-motion-paused] .hero__insight-symbol,
.first-fold .hero[data-motion-paused] .hero__title em .w > span {
  animation-play-state: paused;
}

@keyframes home-panel-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

@keyframes home-insight-float {
  0%,
  100% {
    translate: 0 -3px;
  }
  50% {
    translate: 0 5px;
  }
}

@keyframes home-insight-spark {
  0%,
  75%,
  100% {
    rotate: 0deg;
    scale: 1;
  }
  85% {
    rotate: 90deg;
    scale: 1.12;
  }
}

@keyframes home-orbit-drift {
  from {
    transform: rotate(-25deg);
  }
  to {
    transform: rotate(-17deg);
  }
}

@keyframes home-orbit-travel {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

@keyframes home-hero-light {
  from {
    transform: translate3d(-8%, 3%, 0) scale(.9);
    opacity: .6;
  }
  to {
    transform: translate3d(8%, -3%, 0) scale(1.15);
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .first-fold .hero__visual.is-in {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .first-fold .hero__glow,
  .first-fold .hero__glow::after,
  .first-fold .hero__product,
  .first-fold .hero__orbit,
  .first-fold .hero__orbit::after,
  .first-fold .hero__insight,
  .first-fold .hero__insight-symbol {
    animation: none;
  }

  .first-fold .hero__visual.is-in {
    transform: none;
    transition: none;
  }
}
