/*
 * Isolated desktop gallery-beam enhancement.
 * Set data-feature-gallery-beams="off" on .hero to restore the base hero.
 */

.hero-gallery-beams {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}

@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .hero[data-feature-gallery-beams="on"] .hero-collage-wall {
    isolation: isolate;
  }

  .hero[data-feature-gallery-beams="on"] .hero-collage-column {
    position: relative;
    z-index: 1;
  }

  .hero[data-feature-gallery-beams="on"] .hero-gallery-beams {
    --gallery-beam-entrance: clamp(0, calc((var(--hero-progress) - 0.8) * 40), 1);
    --gallery-beam-lead: clamp(0, calc((var(--hero-progress) - 0.8) * 5.55556), 1);
    --gallery-beam-fade: clamp(0, calc((var(--hero-progress) - 0.9) * 10), 1);
    --gallery-beam-head-exit: clamp(0, calc((1 - var(--hero-progress)) * 50), 1);
    --gallery-beam-source-exit: clamp(0, calc((0.94 - var(--hero-progress)) * 25), 1);
    --gallery-beam-trail-exit: clamp(0, calc((1 - var(--hero-progress)) * 100), 1);
    --gallery-beam-head-alpha: min(var(--gallery-beam-entrance), var(--gallery-beam-head-exit));
    /* Leave the structural target and axes visible after the moving heads settle. */
    --gallery-beam-source-alpha: min(var(--gallery-beam-entrance), max(var(--gallery-beam-source-exit), 0.2));
    --gallery-beam-trail-alpha: min(var(--gallery-beam-entrance), max(var(--gallery-beam-trail-exit), 0.34));
    --gallery-beam-leading-clip: calc((1 - var(--gallery-beam-lead)) * 100%);
    --gallery-beam-fade-stop: calc(var(--gallery-beam-fade) * 100%);
    --gallery-beam-fade-feather: min(4%, calc((1 - var(--gallery-beam-fade)) * 100%));
    --gallery-beam-head-long: calc(8px + (var(--gallery-beam-lead) * 8px));
    --gallery-beam-head-thick: calc(1.5px + (var(--gallery-beam-lead) * 3.5px));
    --gallery-beam-core: rgba(104, 201, 255, 0.96);
    --gallery-beam-mid: rgba(49, 157, 224, 0.8);
    --gallery-beam-edge: rgba(42, 96, 124, 0.12);
    z-index: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
    contain: paint;
  }

  .hero[data-feature-gallery-beams="on"] .hero-gallery-beams.is-ready {
    opacity: 1;
  }

  .hero-gallery-beam-axis {
    position: absolute;
  }

  .hero-gallery-beam-axis--horizontal {
    right: 0;
    left: 0;
    height: 0;
  }

  .hero-gallery-beam-axis--top {
    top: var(--gallery-beam-top-y);
  }

  .hero-gallery-beam-axis--bottom {
    top: var(--gallery-beam-bottom-y);
  }

  .hero-gallery-beam-axis--vertical {
    top: 0;
    bottom: 0;
    width: 0;
  }

  .hero-gallery-beam-axis--left {
    left: var(--gallery-beam-left-x);
  }

  .hero-gallery-beam-axis--right {
    left: var(--gallery-beam-right-x);
  }

  .hero-gallery-beam-ray {
    position: absolute;
    display: block;
  }

  .hero-gallery-beam-axis--horizontal .hero-gallery-beam-ray {
    top: -14px;
    height: 28px;
  }

  .hero-gallery-beam-axis--horizontal .hero-gallery-beam-ray--negative {
    right: calc(100% - var(--gallery-beam-source-x));
    left: 0;
  }

  .hero-gallery-beam-axis--horizontal .hero-gallery-beam-ray--positive {
    right: 0;
    left: var(--gallery-beam-source-x);
  }

  .hero-gallery-beam-axis--vertical .hero-gallery-beam-ray {
    left: -14px;
    width: 28px;
  }

  .hero-gallery-beam-axis--vertical .hero-gallery-beam-ray--negative {
    top: 0;
    bottom: calc(100% - var(--gallery-beam-source-y));
  }

  .hero-gallery-beam-axis--vertical .hero-gallery-beam-ray--positive {
    top: var(--gallery-beam-source-y);
    bottom: 0;
  }

  .hero-gallery-beam-ray::before,
  .hero-gallery-beam-ray::after {
    position: absolute;
    display: block;
    content: "";
    pointer-events: none;
  }

  .hero-gallery-beam-ray::before {
    opacity: var(--gallery-beam-trail-alpha);
    will-change: clip-path, opacity;
  }

  .hero-gallery-beam-ray::after {
    inset: 0;
    opacity: var(--gallery-beam-head-alpha);
    will-change: opacity;
  }

  .hero-gallery-beam-axis--horizontal .hero-gallery-beam-ray::before {
    top: calc(50% - 1px);
    right: 0;
    left: 0;
    height: 2px;
    box-shadow:
      0 0 4px rgba(104, 201, 255, 0.46),
      0 0 11px rgba(49, 157, 224, 0.2);
  }

  .hero-gallery-beam-axis--vertical .hero-gallery-beam-ray::before {
    top: 0;
    bottom: 0;
    left: calc(50% - 1px);
    width: 2px;
    box-shadow:
      0 0 4px rgba(104, 201, 255, 0.46),
      0 0 11px rgba(49, 157, 224, 0.2);
  }

  .hero-gallery-beam-axis--horizontal .hero-gallery-beam-ray--negative::before {
    background: linear-gradient(90deg, var(--gallery-beam-edge), var(--gallery-beam-mid) 76%, var(--gallery-beam-core));
    clip-path: inset(0 0 0 var(--gallery-beam-leading-clip));
    -webkit-mask-image: linear-gradient(
      to left,
      transparent 0 calc(var(--gallery-beam-fade-stop) - var(--gallery-beam-fade-feather)),
      #000 var(--gallery-beam-fade-stop),
      #000 100%
    );
    mask-image: linear-gradient(
      to left,
      transparent 0 calc(var(--gallery-beam-fade-stop) - var(--gallery-beam-fade-feather)),
      #000 var(--gallery-beam-fade-stop),
      #000 100%
    );
  }

  .hero-gallery-beam-axis--horizontal .hero-gallery-beam-ray--positive::before {
    background: linear-gradient(90deg, var(--gallery-beam-core), var(--gallery-beam-mid) 24%, var(--gallery-beam-edge));
    clip-path: inset(0 var(--gallery-beam-leading-clip) 0 0);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0 calc(var(--gallery-beam-fade-stop) - var(--gallery-beam-fade-feather)),
      #000 var(--gallery-beam-fade-stop),
      #000 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0 calc(var(--gallery-beam-fade-stop) - var(--gallery-beam-fade-feather)),
      #000 var(--gallery-beam-fade-stop),
      #000 100%
    );
  }

  .hero-gallery-beam-axis--vertical .hero-gallery-beam-ray--negative::before {
    background: linear-gradient(180deg, var(--gallery-beam-edge), var(--gallery-beam-mid) 76%, var(--gallery-beam-core));
    clip-path: inset(var(--gallery-beam-leading-clip) 0 0 0);
    -webkit-mask-image: linear-gradient(
      to top,
      transparent 0 calc(var(--gallery-beam-fade-stop) - var(--gallery-beam-fade-feather)),
      #000 var(--gallery-beam-fade-stop),
      #000 100%
    );
    mask-image: linear-gradient(
      to top,
      transparent 0 calc(var(--gallery-beam-fade-stop) - var(--gallery-beam-fade-feather)),
      #000 var(--gallery-beam-fade-stop),
      #000 100%
    );
  }

  .hero-gallery-beam-axis--vertical .hero-gallery-beam-ray--positive::before {
    background: linear-gradient(180deg, var(--gallery-beam-core), var(--gallery-beam-mid) 24%, var(--gallery-beam-edge));
    clip-path: inset(0 0 var(--gallery-beam-leading-clip) 0);
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0 calc(var(--gallery-beam-fade-stop) - var(--gallery-beam-fade-feather)),
      #000 var(--gallery-beam-fade-stop),
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0 calc(var(--gallery-beam-fade-stop) - var(--gallery-beam-fade-feather)),
      #000 var(--gallery-beam-fade-stop),
      #000 100%
    );
  }

  .hero-gallery-beam-axis--horizontal .hero-gallery-beam-ray--negative::after {
    background: radial-gradient(
      ellipse var(--gallery-beam-head-long) var(--gallery-beam-head-thick)
      at calc((1 - var(--gallery-beam-lead)) * 100%) 50%,
      rgba(229, 249, 255, 0.98) 0%,
      var(--gallery-beam-core) 20%,
      var(--gallery-beam-mid) 48%,
      rgba(49, 157, 224, 0.2) 74%,
      transparent 100%
    );
  }

  .hero-gallery-beam-axis--horizontal .hero-gallery-beam-ray--positive::after {
    background: radial-gradient(
      ellipse var(--gallery-beam-head-long) var(--gallery-beam-head-thick)
      at calc(var(--gallery-beam-lead) * 100%) 50%,
      rgba(229, 249, 255, 0.98) 0%,
      var(--gallery-beam-core) 20%,
      var(--gallery-beam-mid) 48%,
      rgba(49, 157, 224, 0.2) 74%,
      transparent 100%
    );
  }

  .hero-gallery-beam-axis--vertical .hero-gallery-beam-ray--negative::after {
    background: radial-gradient(
      ellipse var(--gallery-beam-head-thick) var(--gallery-beam-head-long)
      at 50% calc((1 - var(--gallery-beam-lead)) * 100%),
      rgba(229, 249, 255, 0.98) 0%,
      var(--gallery-beam-core) 20%,
      var(--gallery-beam-mid) 48%,
      rgba(49, 157, 224, 0.2) 74%,
      transparent 100%
    );
  }

  .hero-gallery-beam-axis--vertical .hero-gallery-beam-ray--positive::after {
    background: radial-gradient(
      ellipse var(--gallery-beam-head-thick) var(--gallery-beam-head-long)
      at 50% calc(var(--gallery-beam-lead) * 100%),
      rgba(229, 249, 255, 0.98) 0%,
      var(--gallery-beam-core) 20%,
      var(--gallery-beam-mid) 48%,
      rgba(49, 157, 224, 0.2) 74%,
      transparent 100%
    );
  }

  .hero-gallery-beam-frame {
    position: absolute;
    top: var(--gallery-beam-target-top);
    left: var(--gallery-beam-target-left);
    width: var(--gallery-beam-target-width);
    height: var(--gallery-beam-target-height);
    border: 1px solid rgba(104, 201, 255, 0.7);
    box-shadow:
      0 0 12px rgba(104, 201, 255, 0.56),
      0 0 28px rgba(49, 157, 224, 0.26),
      inset 0 0 12px rgba(104, 201, 255, 0.18);
    opacity: var(--gallery-beam-source-alpha);
    transform: scale(calc(0.992 + (var(--gallery-beam-source-alpha) * 0.008)));
    transform-origin: center;
  }

  .hero-gallery-beam-port {
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(226, 248, 255, 0.96);
    border-radius: 50%;
    background: var(--gallery-beam-core);
    box-shadow:
      0 0 7px rgba(104, 201, 255, 0.94),
      0 0 18px rgba(49, 157, 224, 0.52);
    opacity: var(--gallery-beam-source-alpha);
    transform: translate(-50%, -50%) scale(var(--gallery-beam-source-alpha));
  }

  .hero-gallery-beam-port--top {
    top: var(--gallery-beam-top-y);
    left: var(--gallery-beam-source-x);
  }

  .hero-gallery-beam-port--right {
    top: var(--gallery-beam-source-y);
    left: var(--gallery-beam-right-x);
  }

  .hero-gallery-beam-port--bottom {
    top: var(--gallery-beam-bottom-y);
    left: var(--gallery-beam-source-x);
  }

  .hero-gallery-beam-port--left {
    top: var(--gallery-beam-source-y);
    left: var(--gallery-beam-left-x);
  }
}

@media (forced-colors: active), (prefers-contrast: more) {
  .hero-gallery-beams {
    display: none !important;
  }
}