/**
 * Art-directed WebGL landscape for the landing hero.
 * The left fade protects the content while the open right rail carries the 3D.
 */

.sc-3d-landscape-host {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: 1;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 12%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 12%, #000 30%);
}

.sc-landing-hero--3d .sc-3d-landscape-host {
  opacity: 1;
}

.sc-3d-landscape-host::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 9, 19, 0.76) 0%, transparent 24%),
    linear-gradient(0deg, rgba(3, 9, 19, 0.36) 0%, transparent 25%);
}

.sc-3d-landscape-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sc-landing-hero--3d .sc-landing-hero__inner {
  z-index: 3;
}

.sc-landing-hero--3d .sc-landing-hero__art {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .sc-landing-hero--3d {
    cursor: crosshair;
  }

  .sc-landing-hero--3d a,
  .sc-landing-hero--3d button {
    cursor: pointer;
  }
}

@media (max-width: 991px) {
  .sc-3d-landscape-host {
    inset: 20% -16% -8% 31%;
    opacity: 0;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.58) 18%, #000 44%),
      linear-gradient(0deg, transparent 0%, #000 22%, #000 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.58) 18%, #000 44%),
      linear-gradient(0deg, transparent 0%, #000 22%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .sc-landing-hero--3d .sc-3d-landscape-host {
    opacity: 0.72;
  }
}

@media (max-width: 767px) {
  .sc-3d-landscape-host {
    inset: 34% -44% -12% 6%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.56) 20%, #000 48%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.56) 20%, #000 48%, transparent 100%);
  }

  .sc-landing-hero--3d .sc-3d-landscape-host {
    opacity: 0.38;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-3d-landscape-host {
    transition: none;
  }

  .sc-landing-hero--3d .sc-3d-landscape-host {
    opacity: 0.58;
  }
}