.x-transition {
  --x-media-opacity: 0;
  --x-copy-opacity: 1;
  --x-copy-shift: 0px;
  --x-shape-scale: 8;
  --x-image-inverse: 0.125;
}

.x-transition-sticky,
.x-transition-media {
  position: relative;
}

.x-transition-media {
  display: none;
}

@media (min-width: 901px) {
  .foundation.x-transition.is-x-ready {
    height: 220vh;
    min-height: 1440px;
    padding: 0;
    overflow: visible;
    background: #050e19;
  }

  .x-transition.is-x-ready .x-transition-sticky {
    position: sticky;
    top: 72px;
    z-index: 1;
    width: 100%;
    height: calc(100vh - 72px);
    min-height: 680px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #050e19;
  }

  .x-transition.is-x-ready .x-transition-sticky::before {
    content: "";
    position: absolute;
    inset: -4%;
    z-index: 0;
    background:
      linear-gradient(rgba(22, 91, 204, 0.32), rgba(22, 91, 204, 0.32)),
      url("assets/x-transition/chip.jpg") center / cover no-repeat;
    background-blend-mode: color;
    opacity: calc(var(--x-media-opacity) * 0.055);
    transform: scale(1.06);
    pointer-events: none;
  }

  .x-transition.is-x-ready .x-transition-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    opacity: var(--x-media-opacity);
    clip-path: polygon(24.4% 10%, 41.4% 10%, 50% 30%, 58.8% 10%, 75.8% 10%, 58.8% 50%, 75.8% 96%, 58.8% 96%, 50% 70%, 41.2% 96%, 24.2% 96%, 41.2% 50%);
    transform: scale(var(--x-shape-scale));
    transform-origin: center;
    pointer-events: none;
    will-change: opacity, transform;
  }

  .x-transition.is-x-ready .x-transition-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(18, 91, 211, 0.28), rgba(18, 91, 211, 0.28)),
      url("assets/x-transition/chip.jpg") center / cover no-repeat;
    background-blend-mode: color;
    filter: brightness(0.82) saturate(0.78);
    transform: scale(var(--x-image-inverse));
    transform-origin: center;
    will-change: transform;
  }

  .x-transition.is-x-ready .foundation-grid {
    position: relative;
    z-index: 2;
    opacity: var(--x-copy-opacity);
    transform: translate3d(0, var(--x-copy-shift), 0);
    will-change: opacity, transform;
  }

  .x-transition.is-x-complete .x-transition-media::before {
    filter: brightness(0.9) saturate(0.84);
  }
}

@media (max-width: 900px) {
  .foundation.x-transition,
  .foundation.x-transition.is-x-ready {
    height: auto;
    min-height: 0;
    padding: 90px 0;
    overflow: hidden;
  }

  .x-transition-sticky,
  .x-transition.is-x-ready .x-transition-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
  }

  .x-transition .foundation-grid {
    opacity: 1 !important;
    transform: none !important;
  }
}