/*
 * Side Rays hero integration
 *
 * Keeps the React Bits-inspired shader behind Ballista's product composition,
 * then uses the existing overlay to protect copy contrast and stage legibility.
 */

.hero-bg {
  background: #020203;
}

.hero-side-rays {
  position: absolute;
  z-index: 0;
  inset: -2%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.9;
  filter: contrast(1.08) brightness(0.96);
  mix-blend-mode: screen;
}

.hero-side-rays::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 52% at 77% 44%, rgba(255, 255, 255, 0.045), transparent 74%),
    linear-gradient(180deg, rgba(2, 2, 3, 0.04), rgba(2, 2, 3, 0.14) 55%, rgba(2, 2, 3, 0.42));
}

.hero-side-rays__canvas {
  width: 100%;
  height: 100%;
}

.hero-bg-video {
  opacity: 0.1 !important;
  filter: grayscale(1) contrast(1.04) brightness(0.3);
  transition: opacity 360ms ease-out;
}

body.side-rays-ready .hero-bg-video {
  opacity: 0 !important;
}

body.side-rays-unavailable .hero-bg-video {
  opacity: 0.2 !important;
}

.hero-bg-overlay {
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(3, 3, 4, 0.86) 0%,
      rgba(3, 3, 4, 0.58) 32%,
      rgba(3, 3, 4, 0.16) 62%,
      rgba(3, 3, 4, 0.46) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 3, 4, 0.52) 0%,
      rgba(3, 3, 4, 0.05) 39%,
      rgba(3, 3, 4, 0.18) 68%,
      rgba(3, 3, 4, 0.88) 100%
    );
}

.hero-sticky::before {
  background: radial-gradient(
    ellipse 29% 43% at 69% 50%,
    rgba(255, 255, 255, 0.04),
    transparent 76%
  );
  opacity: 0.52;
}

/* Keep copy left of the phone with a moderate gutter. */
@media (min-width: 1101px) {
  .story-copy {
    left: clamp(72px, 9vw, 160px);
  }

  .scroll-cue {
    left: clamp(72px, 9vw, 160px);
  }
}

@media (max-width: 1100px) and (min-width: 821px) {
  .story-copy {
    left: clamp(56px, 7vw, 100px);
  }

  .scroll-cue {
    left: clamp(56px, 7vw, 100px);
  }
}

@media (max-width: 820px) {
  .hero-side-rays {
    inset: -1%;
    opacity: 0.72;
    filter: contrast(1.04) brightness(0.88);
  }

  .hero-bg-overlay {
    background:
      linear-gradient(180deg, rgba(3, 3, 4, 0.72), rgba(3, 3, 4, 0.06) 45%, rgba(3, 3, 4, 0.88)),
      radial-gradient(ellipse 74% 48% at 50% 22%, rgba(3, 3, 4, 0.36), transparent 76%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-video {
    transition: none;
  }
}