.motion-test-loader {
  display: grid;
  min-height: 100vh;
  place-items: center;
  color: #003e50;
  background: #eef6f7;
  font: 700 1rem "Univers", sans-serif;
}

.glasscape-motion-test-page .benefit-section {
  --assembly-progress: 0;
}

.glasscape-motion-test-page {
  overflow-x: clip;
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .glasscape-motion-test-page .benefit-section {
    height: 240vh;
    min-height: 94rem;
    overflow: clip;
    padding: 0;
    background: #eef7f8;
  }

  .glasscape-motion-test-page .benefit-section::before,
  .glasscape-motion-test-page .benefit-section::after {
    display: none;
  }

  .glasscape-motion-test-page .benefit-section > .glasscape-shell {
    position: sticky;
    z-index: 1;
    top: 5rem;
    display: flex;
    height: calc(100vh - 5rem);
    min-height: 0;
    flex-direction: column;
    padding-top: 2rem;
    isolation: isolate;
  }

  .glasscape-motion-test-page .benefit-section > .glasscape-shell::before,
  .glasscape-motion-test-page .benefit-section > .glasscape-shell::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    pointer-events: none;
    transform: translateX(-50%);
    content: "";
  }

  .glasscape-motion-test-page .benefit-section > .glasscape-shell::before {
    z-index: -2;
    background: linear-gradient(#fff 0 30%, #eef7f8 58%, #00475a 100%);
  }

  .glasscape-motion-test-page .benefit-section > .glasscape-shell::after {
    z-index: -1;
    background: url("../img/glasscape/figma-benefit-network-web.svg") center / cover no-repeat;
    opacity: .25;
  }

  .glasscape-motion-test-page .benefit-section .section-jump {
    flex: 0 0 auto;
  }

  .glasscape-motion-test-page .benefit-intro {
    min-height: 0;
    flex: 1 1 auto;
    padding: 1.75rem 0 1rem;
  }

  .glasscape-motion-test-page .benefit-intro > div {
    transform: none;
  }

  .glasscape-motion-test-page .benefit-cards {
    flex: 0 0 auto;
    padding-bottom: 1.35rem;
  }

  .glasscape-motion-test-page .benefit-cards article {
    min-height: 9.5rem;
    padding-block: 1.15rem;
  }

  .exploded-device {
    position: relative;
    width: min(100%, 37rem);
    aspect-ratio: 1304 / 1000;
    justify-self: end;
    overflow: visible;
    perspective: 90rem;
    transform-origin: 52% 55%;
    isolation: isolate;
  }

  .exploded-stack {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
  }

  .device-layer {
    position: absolute;
    inset: 0;
    margin: 0;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    will-change: transform, opacity;
  }

  .device-layer > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
  }

  .layer-surface {
    position: absolute;
    inset: 0;
    display: block;
    border: 1px solid rgb(153 224 235 / 48%);
    clip-path: polygon(6.2% 4.8%, 68.7% 2.9%, 99.7% 73.1%, 36.2% 95.2%);
    filter: drop-shadow(0 .8rem .8rem rgb(0 38 50 / 20%));
  }

  .layer-rear { z-index: 1; }
  .layer-carrier { z-index: 2; }
  .layer-electronics { z-index: 3; }
  .layer-sensor { z-index: 4; }

  .layer-rear .layer-surface {
    background:
      repeating-linear-gradient(72deg, transparent 0 1.65rem, rgb(65 177 196 / 18%) 1.7rem 1.78rem),
      linear-gradient(145deg, #061f29 0%, #082e3a 58%, #03151d 100%);
  }

  .layer-carrier .layer-surface {
    background:
      radial-gradient(circle, rgb(0 52 66 / 48%) 0 .13rem, transparent .15rem) 0 0 / 1.28rem 1.28rem,
      linear-gradient(145deg, rgb(220 233 235 / 94%), rgb(146 177 184 / 90%));
  }

  .layer-electronics .layer-surface {
    background:
      radial-gradient(circle, rgb(178 240 246 / 74%) 0 .1rem, transparent .13rem) 0 0 / 1.38rem 1.38rem,
      repeating-linear-gradient(90deg, transparent 0 2.4rem, rgb(96 224 234 / 24%) 2.45rem 2.52rem),
      linear-gradient(145deg, rgb(0 100 117 / 92%), rgb(0 60 76 / 94%));
  }

  .layer-sensor .layer-surface {
    background:
      linear-gradient(35deg, transparent 0 48%, rgb(65 215 229 / 34%) 49% 50%, transparent 51%) 0 0 / 2.5rem 2.5rem,
      linear-gradient(145deg, rgb(97 222 232 / 28%), rgb(0 104 122 / 32%));
    backdrop-filter: blur(.15rem);
  }

  .layer-final {
    z-index: 10;
    opacity: 1;
  }

  .layer-final > img {
    filter: drop-shadow(0 1.3rem 1.45rem rgb(0 35 48 / 24%));
  }

}

@media (min-width: 981px) and (max-height: 800px) and (prefers-reduced-motion: no-preference) {
  .glasscape-motion-test-page .exploded-device {
    width: min(100%, 28rem);
    transform: translateY(-.75rem);
  }

  .glasscape-motion-test-page .benefit-cards article {
    min-height: 8.6rem;
    padding-block: .9rem;
  }
}

@media (max-width: 980px), (prefers-reduced-motion: reduce) {
  .glasscape-motion-test-page .exploded-device {
    position: relative;
    width: 100%;
    aspect-ratio: 1304 / 1000;
  }

  .glasscape-motion-test-page .exploded-stack,
  .glasscape-motion-test-page .device-layer {
    position: absolute;
    inset: 0;
  }

  .glasscape-motion-test-page .explosion-layer {
    display: none;
  }

  .glasscape-motion-test-page .layer-final {
    opacity: 1 !important;
    transform: none !important;
  }

  .glasscape-motion-test-page .layer-final > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}