:root {
  --am-ambient-a: rgba(230, 25, 25, .18);
  --am-ambient-b: rgba(255, 138, 61, .11);
  --am-ambient-c: rgba(232, 240, 236, .07);
  --am-glow-x: 70%;
  --am-glow-y: 24%;
  --am-field-y: 0px;
}

html.am-ambient-ready body {
  isolation: isolate;
}

.am-cinematic-ambient,
#am-ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.am-cinematic-ambient {
  overflow: hidden;
  contain: strict;
  opacity: .92;
}

.am-cinematic-ambient::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    linear-gradient(112deg, transparent 0 36%, rgba(255,255,255,.026) 42%, transparent 49%),
    radial-gradient(ellipse at var(--am-glow-x) var(--am-glow-y), var(--am-ambient-a), transparent 28rem),
    radial-gradient(ellipse at calc(100% - var(--am-glow-x)) calc(86% - var(--am-field-y)), var(--am-ambient-b), transparent 34rem),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 34%, rgba(255,255,255,.014));
  transform: translate3d(0, calc(var(--am-field-y) * -.12), 0);
  transition: background 900ms cubic-bezier(.16,1,.3,1), opacity 900ms cubic-bezier(.16,1,.3,1);
}

.am-cinematic-ambient::after {
  content: "";
  position: absolute;
  inset: -2px;
  opacity: .075;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  transform: translate3d(0, calc(var(--am-field-y) * .08), 0);
}

.am-scan-vector {
  position: absolute;
  left: -18vw;
  width: 56vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--am-ambient-c), transparent);
  opacity: .32;
  transform: rotate(-18deg);
  animation: amVectorDrift 18s linear infinite;
}

.am-scan-vector:nth-child(1) { top: 18%; animation-duration: 21s; }
.am-scan-vector:nth-child(2) { top: 47%; animation-delay: -8s; animation-duration: 26s; opacity: .22; }
.am-scan-vector:nth-child(3) { top: 76%; animation-delay: -14s; animation-duration: 23s; opacity: .18; }

.am-depth-line {
  position: absolute;
  inset-block: 0;
  width: 1px;
  left: var(--am-line-x);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
  opacity: .28;
  transform: translate3d(0, calc(var(--am-field-y) * -.18), 0);
}

#am-ambient-canvas {
  width: 100%;
  height: 100%;
  opacity: .46;
  mix-blend-mode: screen;
  filter: saturate(1.08) contrast(1.04);
}

html.am-ambient-ready .ambient-layer {
  opacity: .48 !important;
  background:
    conic-gradient(from calc(var(--scroll, 0) * .014deg) at var(--am-glow-x) var(--am-glow-y), transparent 0 42deg, var(--am-ambient-a) 50deg, transparent 78deg 360deg),
    linear-gradient(118deg, transparent 0 42%, rgba(255,255,255,.035) 48%, transparent 56%),
    radial-gradient(ellipse at calc(100% - var(--am-glow-x)) 82%, var(--am-ambient-b), transparent 24rem) !important;
  filter: blur(2px) saturate(1.08) !important;
}

html.am-ambient-ready body > header,
html.am-ambient-ready body > main,
html.am-ambient-ready body > footer,
html.am-ambient-ready body > nav,
html.am-ambient-ready .nav,
html.am-ambient-ready .site-shell,
html.am-ambient-ready .page,
html.am-ambient-ready .wrap {
  position: relative;
  z-index: 1;
}

@keyframes amVectorDrift {
  0% { transform: translate3d(-18vw, 0, 0) rotate(-18deg); opacity: 0; }
  12% { opacity: .28; }
  58% { opacity: .2; }
  100% { transform: translate3d(128vw, 0, 0) rotate(-18deg); opacity: 0; }
}

@media (max-width: 760px) {
  .am-cinematic-ambient::after {
    background-size: 64px 64px;
    opacity: .055;
  }

  #am-ambient-canvas {
    opacity: .34;
  }

  .am-scan-vector {
    width: 82vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .am-scan-vector {
    animation: none;
    opacity: .12;
  }

  #am-ambient-canvas {
    display: none;
  }

  .am-cinematic-ambient::before,
  .am-cinematic-ambient::after {
    transform: none;
    transition: none;
  }
}