html.xmla-motion-ready {
  scroll-behavior: smooth;
}

body {
  --xmla-viewport-progress: 0;
}

.xmla-motion-ready body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .46;
  background:
    radial-gradient(720px 420px at calc(18% + (var(--xmla-viewport-progress) * 14%)) 8%, rgba(77, 163, 255, .12), transparent 64%),
    radial-gradient(620px 420px at calc(92% - (var(--xmla-viewport-progress) * 12%)) 18%, rgba(33, 209, 159, .08), transparent 64%);
}

.xmla-scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(.985);
  transition:
    opacity .72s cubic-bezier(.2, .8, .2, 1),
    transform .72s cubic-bezier(.2, .8, .2, 1),
    filter .72s cubic-bezier(.2, .8, .2, 1);
  filter: blur(10px);
  will-change: opacity, transform, filter;
}

.xmla-scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.xmla-pinfx-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  --xmla-pin-progress: 0;
  --xmla-pin-depth: calc((var(--xmla-pin-progress) - .5) * 1);
}

.xmla-pinfx-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: calc(.16 + (var(--xmla-pin-progress) * .18));
  background:
    url("../img/xmla-lattice-transparent.png") center / min(980px, 86vw) auto no-repeat,
    radial-gradient(560px 360px at calc(18% + (var(--xmla-pin-progress) * 62%)) 18%, rgba(122, 215, 255, .13), transparent 68%);
  transform: translate3d(0, calc((var(--xmla-pin-progress) - .5) * -32px), 0) scale(1.02);
  transition: opacity .18s linear;
}

.xmla-pinfx-section > * {
  position: relative;
  z-index: 1;
}

.xmla-pinfx-section :is(
  .xmla-wrap,
  [class$="-wrap"],
  [class*="-wrap "],
  .container,
  .row
) {
  transform: translate3d(0, calc((var(--xmla-pin-progress) - .5) * -10px), 0);
  transition: transform .12s linear;
}

.xmla-pinfx-section.is-pinned-now :is(
  .xmla-stage,
  .xmla-scroll-visual,
  .xmla-device,
  [class$="-visual"],
  [class*="-visual "],
  [class$="-console"],
  [class*="-console "],
  [class$="-glass"],
  [class*="-glass "]
) {
  filter: saturate(1.1) contrast(1.03);
}

.xmla-powerhouse .xmla-scroll-story {
  --xmla-story-progress: 0;
  --xmla-story-step-progress: 0;
}

.xmla-powerhouse .xmla-scroll-stage {
  overflow: hidden;
}

.xmla-powerhouse .xmla-scroll-visual {
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05)),
    url("../img/xmla-platform-orbit-transparent.png") center / 86% auto no-repeat,
    url("../img/xmla-lattice-transparent.png") center / cover no-repeat,
    var(--xmla-scroll-image, none),
    linear-gradient(135deg, #dfe9f5, #ffffff 42%, #d8e9f7) !important;
  background-blend-mode: screen, normal, screen, normal, normal;
  transform:
    perspective(1200px)
    rotateX(calc(4deg - (var(--xmla-story-progress) * 5deg)))
    rotateY(calc(-7deg + (var(--xmla-story-progress) * 13deg)))
    translate3d(0, calc((var(--xmla-story-progress) - .5) * -18px), 0);
  transition: transform .16s linear, box-shadow .24s ease;
}

.xmla-powerhouse .xmla-scroll-visual::after {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: 1;
  pointer-events: none;
  border-radius: 26px;
  opacity: .72;
  background:
    radial-gradient(circle at calc(18% + (var(--xmla-story-progress) * 60%)) calc(74% - (var(--xmla-story-progress) * 38%)), rgba(255, 255, 255, .86) 0 1.8%, transparent 2.1%),
    linear-gradient(90deg, transparent 0 17%, rgba(122, 215, 255, .48) 17.2% 17.6%, transparent 17.8% 100%),
    linear-gradient(0deg, transparent 0 48%, rgba(122, 215, 255, .34) 48.2% 48.6%, transparent 48.8% 100%),
    linear-gradient(118deg, transparent 0 37%, rgba(255, 255, 255, .26) 38%, transparent 52%);
  mix-blend-mode: screen;
  transform: translate3d(calc((var(--xmla-story-progress) - .5) * 28px), calc((var(--xmla-story-progress) - .5) * -18px), 0);
}

.xmla-powerhouse .xmla-scroll-layers {
  z-index: 2;
}

.xmla-powerhouse .xmla-scroll-layer {
  color: #ffffff;
  text-shadow: 0 10px 30px rgba(2, 8, 18, .42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .14) 48%, rgba(255, 255, 255, .22)),
    rgba(14, 34, 57, .36);
  box-shadow:
    0 24px 70px rgba(5, 11, 24, .18),
    inset 0 1px 0 rgba(255, 255, 255, .46);
}

.xmla-powerhouse .xmla-scroll-layer span {
  color: rgba(255, 255, 255, .78);
}

.xmla-powerhouse .xmla-scroll-layer.design {
  transform: translate3d(calc(var(--xmla-story-progress) * -10px), calc(var(--xmla-story-progress) * 8px), 0);
}

.xmla-powerhouse .xmla-scroll-layer.build {
  transform: translate3d(calc(var(--xmla-story-progress) * 8px), calc(var(--xmla-story-progress) * -16px), 0);
}

.xmla-powerhouse .xmla-scroll-layer.host {
  transform: translate3d(calc(var(--xmla-story-progress) * 15px), calc(var(--xmla-story-progress) * 4px), 0);
}

.xmla-powerhouse .xmla-scroll-layer.support {
  transform: translate3d(calc(var(--xmla-story-progress) * -14px), calc(var(--xmla-story-progress) * 14px), 0);
}

.xmla-powerhouse .xmla-scroll-card {
  cursor: pointer;
}

.xmla-powerhouse .xmla-scroll-card.is-active {
  box-shadow:
    0 24px 70px rgba(77, 163, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}

.xmla-scroll-fallback-note {
  display: none;
}

@media (min-width: 981px) {
  .xmla-pinfx-section.xmla-pinfx-large {
    min-height: max(92vh, var(--xmla-native-min-height, 0px));
  }

  .xmla-pinfx-section.xmla-pinfx-large > :is(.xmla-wrap, [class$="-wrap"], [class*="-wrap "]) {
    position: relative;
  }
}

@media (max-width: 980px) {
  .xmla-scroll-reveal {
    transform: translate3d(0, 20px, 0);
  }

  .xmla-pinfx-section::after {
    opacity: .16;
    background-size: min(720px, 112vw) auto;
  }

  .xmla-pinfx-section :is(.xmla-wrap, [class$="-wrap"], [class*="-wrap "], .container, .row) {
    transform: none;
  }

  .xmla-powerhouse .xmla-scroll-visual {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.xmla-motion-ready {
    scroll-behavior: auto;
  }

  .xmla-scroll-reveal,
  .xmla-scroll-reveal.is-visible,
  .xmla-pinfx-section :is(.xmla-wrap, [class$="-wrap"], [class*="-wrap "], .container, .row),
  .xmla-powerhouse .xmla-scroll-visual,
  .xmla-powerhouse .xmla-scroll-layer {
    opacity: 1 !important;
    transform: none !important;
    transition-duration: .01ms !important;
    filter: none !important;
  }
}