/*
 * Hero ambient light: a drifting beam from the top right, a faint horizon arc
 * and film grain. Both layers sit above the WebGL canvas and the stage's edge
 * fade and only ever lighten (screen), so they wash evenly over everything
 * instead of revealing the stage box.
 */
/* typed so the tint eases between stocks instead of snapping */
@property --tint {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
.hero {
  --tint: var(--shape-accent, #ffffff);
  position: relative;
  overflow: hidden;
  transition: --tint 1.6s ease;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* light beam: a wide glow plus a diagonal ray, slowly swaying */
.hero::before {
  inset: -20% -10%;
  background:
    radial-gradient(45% 55% at 82% 8%, color-mix(in srgb, var(--tint) 3.2%, transparent), transparent 70%),
    linear-gradient(118deg, transparent 38%, color-mix(in srgb, var(--tint) 1.4%, transparent) 50%, transparent 62%),
    linear-gradient(128deg, transparent 52%, color-mix(in srgb, var(--tint) 0.8%, transparent) 58%, transparent 66%);
  transform-origin: 85% 0;
  /* follows the cursor (hero-light.js); separate from the sway's transform */
  translate: calc(var(--mx, 0) * 28px) calc(var(--my, 0) * 18px);
  animation: hero-light-in 1.4s ease-out 0.9s backwards, hero-sway 22s ease-in-out infinite alternate;
}

/* horizon arc and grain */
.hero::after {
  inset: -16px;
  /* drifts against the cursor, so it reads as a farther plane than the beam */
  translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -6px);
  background:
    radial-gradient(150% 70% at 55% 135%, transparent 62%, color-mix(in srgb, color-mix(in srgb, var(--tint) 60%, white) 1.6%, transparent) 64.5%, transparent 69%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  animation: hero-light-in 1.4s ease-out 1.1s backwards, hero-arc 16s ease-in-out infinite alternate;
}

@keyframes hero-sway {
  from { transform: rotate(-2deg) translateX(-2%); opacity: 0.75; }
  to { transform: rotate(2deg) translateX(2%); opacity: 1; }
}
/* page-load fade (see entry.css); filter so it doesn't fight the opacity loops */
@keyframes hero-light-in {
  from { filter: opacity(0); }
}
@keyframes hero-arc {
  from { opacity: 0.35; }
  to { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { transition: none; }
  .hero::before, .hero::after { animation: none; }
}