.kw-parallax-scene {
  position: relative;
  isolation: isolate;
  perspective: 1200px;
}

.kw-parallax-scene > :not(.kw-parallax-layer) {
  position: relative;
  z-index: 2;
}

.kw-parallax-layer {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  transform: translate3d(var(--kw-px, 0), var(--kw-py, 0), 0);
  transition: transform .08s linear;
}

.kw-cloud-layer {
  top: -18%;
  left: 50%;
  width: calc(100vw + 260px);
  height: 56%;
  margin-left: calc(-50vw - 130px);
  opacity: .28;
  background: url("/agent-ui/assets/cloud-status-bg-soft-rays.png") center 18% / cover no-repeat;
  mask-image:
    linear-gradient(90deg, transparent, black 16%, black 84%, transparent),
    linear-gradient(180deg, black, transparent 82%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, black 16%, black 84%, transparent),
    linear-gradient(180deg, black, transparent 82%);
  -webkit-mask-composite: source-in;
}

.kw-cloud-layer.two {
  top: 30%;
  height: 58%;
  opacity: .18;
  background-position: center 62%;
  mask-image:
    linear-gradient(90deg, transparent, black 18%, black 82%, transparent),
    linear-gradient(180deg, transparent, black 24%, transparent 86%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, black 18%, black 82%, transparent),
    linear-gradient(180deg, transparent, black 24%, transparent 86%);
  -webkit-mask-composite: source-in;
}

.kw-light-sweep {
  top: 6%;
  left: 50%;
  width: calc(100vw + 320px);
  height: 58%;
  margin-left: calc(-50vw - 160px);
  opacity: .34;
  background:
    linear-gradient(112deg, transparent 0 34%, rgba(233, 248, 255, .34) 47%, transparent 62%),
    linear-gradient(172deg, transparent 0 50%, rgba(88, 183, 255, .20) 74%, transparent 100%);
  filter: blur(.3px);
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
}

[data-parallax] {
  transform: translate3d(var(--kw-px, 0), var(--kw-py, 0), 0);
  will-change: transform;
}

.kw-hero-copy {
  transform: translate3d(var(--kw-px, 0), var(--kw-py, 0), 0);
}

.kw-shot-slider {
  transform:
    translate3d(var(--kw-px, 0), var(--kw-py, 0), 0)
    rotateX(calc(var(--kw-tilt-y, 0) * -1deg))
    rotateY(calc(var(--kw-tilt-x, 0) * 1deg));
  transform-style: preserve-3d;
}

.kw-shot-frame,
.kw-shot-caption,
.kw-shot-controls {
  transform: translateZ(18px);
}

.kw-shot-frame {
  transform: translateZ(18px) translateY(calc(var(--kw-img-py, 0) * .18));
}

.kw-shot {
  height: 112%;
  transform: translateY(calc(var(--kw-img-py, 0) * .22)) scale(1.035);
}

.kw-shot.active {
  transform: translateY(calc(var(--kw-img-py, 0) * .22)) scale(1.01);
}

.kw-parallax-card {
  transform:
    translate3d(var(--kw-px, 0), var(--kw-py, 0), 0)
    rotateX(calc(var(--kw-tilt-y, 0) * -.25deg))
    rotateY(calc(var(--kw-tilt-x, 0) * .25deg));
}

.kw-media-card {
  transform:
    translate3d(var(--kw-px, 0), var(--kw-py, 0), 0)
    rotateX(calc(var(--kw-tilt-y, 0) * -.18deg))
    rotateY(calc(var(--kw-tilt-x, 0) * .18deg));
}

.kw-media-card img {
  height: 112%;
  transform: translateY(calc(var(--kw-img-py, 0) * .26)) scale(1.04);
  transition: transform .08s linear;
}

.kw-feature {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.kw-feature:hover,
.kw-media-card:hover {
  transform: translate3d(var(--kw-px, 0), calc(var(--kw-py, 0) - 3px), 0);
  box-shadow: 0 22px 48px rgba(0, 24, 70, .18), inset 0 1px rgba(255, 255, 255, .74);
}

@media (max-width: 860px) {
  .kw-cloud-layer,
  .kw-light-sweep {
    opacity: .20;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kw-parallax-layer,
  [data-parallax],
  .kw-shot-slider,
  .kw-parallax-card,
  .kw-media-card,
  .kw-feature {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}