/* HERO-only translucent spotlights. Disable with data-hero-motion="off".
   Tuning: opacity 0–1, blur in px, travel in px, duration in seconds. */
.hero{
  --hero-light-opacity:.64;
  --hero-light-green-opacity:.37;
  --hero-light-blur:25px;
  --hero-light-travel-x:240px;
  --hero-light-travel-y:80px;
  --hero-light-duration:14s;
  --hero-light-green-duration:19s;
  --hero-light-amber:250,193,133;
  --hero-light-green:161,215,100;
}
.hero .hero-motion{display:none}
.hero[data-hero-motion="on"] .hero-motion{
  display:block;position:absolute;inset:0;z-index:0;overflow:hidden;
  pointer-events:none;contain:paint;
}
.hero .hero-motion::before,.hero .hero-motion::after{
  content:"";position:absolute;pointer-events:none;
  width:clamp(180px,21vw,320px);height:116%;top:-8%;
  border-radius:50%;filter:blur(var(--hero-light-blur));
  animation:hero-spotlight-drift var(--hero-light-duration) ease-in-out infinite;
  animation-delay:calc(var(--hero-light-duration) * -.25);
}
.hero .hero-motion::before{
  left:29%;opacity:var(--hero-light-opacity);
  background:radial-gradient(ellipse at center,rgba(255,244,220,.95) 0%,rgba(var(--hero-light-amber),.58) 18%,rgba(255,224,189,.16) 36%,transparent 58%);
}
.hero .hero-motion::after{
  left:45%;top:14%;height:87%;opacity:var(--hero-light-green-opacity);
  background:radial-gradient(ellipse at center,rgba(242,251,221,.95) 0%,rgba(var(--hero-light-green),.58) 18%,rgba(199,236,199,.14) 36%,transparent 58%);
  animation-name:hero-spotlight-counter;animation-duration:var(--hero-light-green-duration);animation-delay:calc(var(--hero-light-green-duration) * -.35);
}
/* Closed, staggered paths: transform only; no flashing or opacity pulses. */
@keyframes hero-spotlight-drift{
  0%,100%{transform:translate(calc(var(--hero-light-travel-x) * -.5),calc(var(--hero-light-travel-y) * .2)) rotate(-12deg) scale(.98,1.02)}
  33%{transform:translate(calc(var(--hero-light-travel-x) * .1),calc(var(--hero-light-travel-y) * -.5)) rotate(-4deg) scale(1.06,.98)}
  66%{transform:translate(calc(var(--hero-light-travel-x) * .5),calc(var(--hero-light-travel-y) * .35)) rotate(7deg) scale(1,1.04)}
}
@keyframes hero-spotlight-counter{
  0%,100%{transform:translate(calc(var(--hero-light-travel-x) * .35),calc(var(--hero-light-travel-y) * -.3)) rotate(12deg) scale(1.04,.98)}
  33%{transform:translate(calc(var(--hero-light-travel-x) * -.4),calc(var(--hero-light-travel-y) * -.1)) rotate(3deg) scale(.97,1.05)}
  66%{transform:translate(calc(var(--hero-light-travel-x) * -.1),calc(var(--hero-light-travel-y) * .5)) rotate(-8deg) scale(1.06,1)}
}
/* Follow the horizontal white/photo transition on phones. */
@media(max-width:680px){
  .hero{--hero-light-travel-x:100px;--hero-light-travel-y:100px;--hero-light-blur:22px}
  .hero .hero-motion::before{left:-5%;top:42%;width:88%;height:44%}
  .hero .hero-motion::after{left:39%;top:46%;width:72%;height:38%}
}
@media(prefers-reduced-motion:reduce){
  .hero .hero-motion::before,.hero .hero-motion::after{animation:none;transform:none}
}