/* A restrained 2D light-and-parallax layer. Load after the visual theme. */
.hero.has-atmosphere {
  --pointer-x: 0;
  --pointer-y: 0;
}

.hero.has-atmosphere .hero-landscape {
  transform:
    translate3d(
      calc(var(--pointer-x) * -18px),
      calc(var(--hero-offset, 0px) + var(--pointer-y) * -12px),
      0
    )
    rotate(calc(var(--pointer-x) * -.14deg))
    scale(1.035);
  transform-origin: 60% 45%;
}

.hero.has-atmosphere .hero-light {
  transform:
    translate3d(
      calc(var(--pointer-x) * 24px),
      calc(var(--pointer-y) * 16px),
      0
    )
    scale(1.06);
}

/* Individual translate composes with the existing haze-drift animation. */
.hero.has-atmosphere .haze {
  translate:
    calc(var(--pointer-x) * -28px)
    calc(var(--pointer-y) * -14px);
}

.hero.has-atmosphere .haze-two {
  translate:
    calc(var(--pointer-x) * 20px)
    calc(var(--pointer-y) * 10px);
}

.hero.atmosphere-live .hero-landscape,
.hero.atmosphere-live .hero-light {
  will-change: transform;
}

.atmosphere-beam {
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: 38%;
  width: clamp(220px, 29vw, 540px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 8%,
    rgba(213, 192, 159, .018) 34%,
    rgba(213, 192, 159, .055) 49%,
    rgba(213, 192, 159, .012) 59%,
    transparent 90%
  );
  transform: translate3d(-45%, 0, 0) rotate(-14deg);
  animation: meridian-light-pass 26s ease-in-out infinite alternate;
}

@keyframes meridian-light-pass {
  from { transform: translate3d(-45%, 0, 0) rotate(-14deg); }
  to { transform: translate3d(125%, 0, 0) rotate(-14deg); }
}

.hero.has-atmosphere:not(.atmosphere-live) .atmosphere-beam,
.hero.has-atmosphere:not(.atmosphere-live) .haze {
  animation-play-state: paused;
}

/* This layer never receives input and never changes a card's dimensions. */
.am-reactive-surface {
  position: relative;
  isolation: isolate;
}

.am-reactive-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    290px 180px at var(--surface-x, 50%) var(--surface-y, 50%),
    rgba(221, 200, 166, .055),
    transparent 76%
  );
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.am-reactive-surface.am-light-active::before,
.am-reactive-surface:hover::before,
.am-reactive-surface:focus-within::before {
  opacity: 1;
}

.am-reactive-surface:focus-within::before {
  --surface-x: 50%;
  --surface-y: 50%;
}

body.motion-paused .am-reactive-surface::before,
html.motion-paused .am-reactive-surface::before {
  transition: none;
}

/* A coarse pointer gets the composition, without cursor-driven movement. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .hero.has-atmosphere .hero-landscape {
    transform: scale(1.02);
  }
  .hero.has-atmosphere .hero-light {
    transform: none;
  }
  .hero.has-atmosphere .haze {
    translate: none;
    animation: none;
  }
  .hero.has-atmosphere .atmosphere-beam {
    animation: none;
    transform: translate3d(5%, 0, 0) rotate(-14deg);
    opacity: .5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.has-atmosphere .hero-landscape,
  .hero.has-atmosphere .hero-light {
    transform: none;
    will-change: auto;
  }
  .hero.has-atmosphere .haze {
    translate: none;
    animation: none;
  }
  .hero.has-atmosphere .atmosphere-beam {
    animation: none;
    transform: translate3d(5%, 0, 0) rotate(-14deg);
    opacity: .5;
  }
  .am-reactive-surface::before {
    transition: none;
  }
}