@keyframes zoom-in {
  0% {
    transform: translateZ(-1000px);
    opacity: 0;
    filter: blur(5px);
  }
  50% {
    transform: translateZ(0px);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translateZ(1000px);
    opacity: 0;
    filter: blur(5px);
  }
}

.stuck-grid {
  block-size: 100svh;
  perspective: 1000px;
  transform-style: preserve-3d;
  color: #fff;
  display: grid;
  grid: repeat(4, 25dvh) / repeat(4, 25dvw);
  place-items: center;

  position: sticky;
  top: 0;

  overflow: clip;

  > .grid-item {
    transform-style: preserve-3d;

    font-size: 5vmin;
    font-weight: lighter;

    text-wrap: nowrap;

    @supports (animation-timeline: scroll()) {
      @media (prefers-reduced-motion: no-preference) {
        animation: zoom-in linear both;
        animation-timeline: scroll(root block);
        will-change: transform, opacity, filter;
      }
    }

    &.special.special {
      grid-row: 2 / span 2;
      grid-column: 2 / span 2;
    }

    > b {
      font-size: 15vmin;
    }

    &:nth-of-type(1) {
      animation-range: 40% 50%;
    }
    &:nth-of-type(2) {
      animation-range: 20% 30%;
    }
    &:nth-of-type(3) {
      animation-range: 52% 62%;
    }
    &:nth-of-type(4) {
      animation-range: 50% 60%;
    }
    &:nth-of-type(5) {
      animation-range: 45% 55%;
    }
    &:nth-of-type(6) {
      animation-range: 10% 20%;
    }
    &:nth-of-type(7) {
      animation-range: 90% 100%;
    }
    &:nth-of-type(8) {
      animation-range: 30% 40%;
    }
    &:nth-of-type(9) {
      animation-range: 80% 90%;
    }
    &:nth-of-type(10) {
      animation-range: 70% 80%;
    }
    &:nth-of-type(11) {
      animation-range: -10% 50%;
    }
    &:nth-of-type(12) {
      animation-range: 52% 62%;
    }
    &:nth-of-type(13) {
      animation-range: 15% 25%;
    }
    &:nth-of-type(14) {
      animation-range: 7% 17%;
    }
    &:nth-of-type(15) {
      animation-range: 75% 85%;
    }
    &:nth-of-type(16) {
      animation-range: 3% 13%;
    }
    &:nth-of-type(17) {
      animation-range: 87% 97%;
    }
    &:nth-of-type(18) {
      animation-range: 42% 52%;
    }
    &:nth-of-type(19) {
      animation-range: 57% 67%;
    }
    &:nth-of-type(20) {
      animation-range: 37% 47%;
    }
    &:nth-of-type(21) {
      animation-range: 12% 22%;
    }
    &:nth-of-type(22) {
      animation-range: 8% 18%;
    }
    &:nth-of-type(23) {
      animation-range: 84% 94%;
    }
    &:nth-of-type(24) {
      animation-range: 33% 43%;
    }
    &:nth-of-type(25) {
      animation-range: 48% 58%;
    }
    &:nth-of-type(26) {
      animation-range: 13% 23%;
    }
    &:nth-of-type(27) {
      animation-range: 78% 88%;
    }
    &:nth-of-type(28) {
      animation-range: 62% 72%;
    }
    &:nth-of-type(29) {
      animation-range: 31% 41%;
    }
    &:nth-of-type(30) {
      animation-range: 8% 18%;
    }
    &:nth-of-type(31) {
      animation-range: 4% 14%;
    }
    &:nth-of-type(32) {
      animation-range: 74% 84%;
    }
    &:nth-of-type(33) {
      animation-range: 61% 71%;
    }
    &:nth-of-type(34) {
      animation-range: 26% 36%;
    }
    &:nth-of-type(35) {
      animation-range: 63% 73%;
    }
    &:nth-of-type(36) {
      animation-range: 11% 21%;
    }
    &:nth-of-type(37) {
      animation-range: 89% 99%;
    }
    &:nth-of-type(38) {
      animation-range: 33% 43%;
    }
    &:nth-of-type(39) {
      animation-range: 88% 98%;
    }
    &:nth-of-type(40) {
      animation-range: 22% 32%;
    }
    &:nth-of-type(41) {
      animation-range: 16% 26%;
    }
    &:nth-of-type(42) {
      animation-range: 26% 36%;
    }
    &:nth-of-type(43) {
      animation-range: 66% 76%;
    }
    &:nth-of-type(44) {
      animation-range: 3% 13%;
    }
    &:nth-of-type(45) {
      animation-range: 44% 54%;
    }
    &:nth-of-type(46) {
      animation-range: 11% 21%;
    }
    &:nth-of-type(47) {
      animation-range: 23% 33%;
    }
    &:nth-of-type(48) {
      animation-range: 39% 49%;
    }
    &:nth-of-type(49) {
      animation-range: 59% 69%;
    }
    &:nth-of-type(50) {
      animation-range: 6% 16%;
    }

    @supports (animation-timeline: scroll()) {
      &:nth-of-type(1) {
        grid-area: 1/1;
      }
      &:nth-of-type(2) {
        grid-area: 1/2;
      }
      &:nth-of-type(3) {
        grid-area: 1/3;
      }
      &:nth-of-type(4) {
        grid-area: 1/4;
      }
      &:nth-of-type(5) {
        grid-area: 2/1;
      }
      &:nth-of-type(6) {
        grid-area: 2/2;
      }
      &:nth-of-type(7) {
        grid-area: 2/3;
      }
      &:nth-of-type(8) {
        grid-area: 2/4;
      }
      &:nth-of-type(9) {
        grid-area: 3/1;
      }
      &:nth-of-type(10) {
        grid-area: 3/2;
      }
      &:nth-of-type(11) {
        grid-area: 3/3;
      }
      &:nth-of-type(12) {
        grid-area: 3/4;
      }
      &:nth-of-type(13) {
        grid-area: 4/1;
      }
      &:nth-of-type(14) {
        grid-area: 4/2;
      }
      &:nth-of-type(15) {
        grid-area: 4/3;
      }
      &:nth-of-type(16) {
        grid-area: 4/4;
      }
      &:nth-of-type(17) {
        grid-area: 2/1;
      }
      &:nth-of-type(18) {
        grid-area: 2/2;
      }
      &:nth-of-type(19) {
        grid-area: 2/3;
      }
      &:nth-of-type(20) {
        grid-area: 2/4;
      }
      &:nth-of-type(21) {
        grid-area: 3/1;
      }
      &:nth-of-type(22) {
        grid-area: 3/2;
      }
      &:nth-of-type(23) {
        grid-area: 3/3;
      }
      &:nth-of-type(24) {
        grid-area: 3/4;
      }
      &:nth-of-type(25) {
        grid-area: 1/1;
      }
      &:nth-of-type(26) {
        grid-area: 1/2;
      }
      &:nth-of-type(27) {
        grid-area: 1/3;
      }
      &:nth-of-type(28) {
        grid-area: 1/4;
      }
      &:nth-of-type(29) {
        grid-area: 4/1;
      }
      &:nth-of-type(30) {
        grid-area: 4/2;
      }
      &:nth-of-type(31) {
        grid-area: 4/3;
      }
      &:nth-of-type(32) {
        grid-area: 4/4;
      }
      &:nth-of-type(33) {
        grid-area: 2/1;
      }
      &:nth-of-type(34) {
        grid-area: 2/2;
      }
      &:nth-of-type(35) {
        grid-area: 2/3;
      }
      &:nth-of-type(36) {
        grid-area: 2/4;
      }
      &:nth-of-type(37) {
        grid-area: 3/1;
      }
      &:nth-of-type(38) {
        grid-area: 3/2;
      }
      &:nth-of-type(39) {
        grid-area: 3/3;
      }
      &:nth-of-type(40) {
        grid-area: 3/4;
      }
      &:nth-of-type(41) {
        grid-area: 1/1;
      }
      &:nth-of-type(42) {
        grid-area: 1/2;
      }
      &:nth-of-type(43) {
        grid-area: 1/3;
      }
      &:nth-of-type(44) {
        grid-area: 1/4;
      }
      &:nth-of-type(45) {
        grid-area: 4/1;
      }
      &:nth-of-type(46) {
        grid-area: 4/2;
      }
      &:nth-of-type(47) {
        grid-area: 4/3;
      }
      &:nth-of-type(48) {
        grid-area: 4/4;
      }
      &:nth-of-type(49) {
        grid-area: 3/1;
      }
      &:nth-of-type(50) {
        grid-area: 3/2;
      }
      &:nth-of-type(51) {
        grid-area: 3/3;
      }
      &:nth-of-type(52) {
        grid-area: 3/4;
      }
    }
  }
}

@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 400vh;
    font-family: system-ui, sans-serif;
    background: var(--body-bg);
  }

  @font-face {
    font-family: "Mona Sans";
    src: url("https://assets.codepen.io/64/Mona-Sans.woff2")
        format("woff2 supports variations"),
      url("https://assets.codepen.io/64/Mona-Sans.woff2")
        format("woff2-variations");
    font-weight: 100 1000;
  }

  @layer properties {
    @property --bg-position {
      syntax: "<number>";
      inherits: true;
      initial-value: 100;
    }
    @property --after-blur {
      syntax: "<number>";
      inherits: true;
      initial-value: 0;
    }
    @property --after-opacity {
      syntax: "<number>";
      inherits: true;
      initial-value: 1;
    }
    @property --before-opacity {
      syntax: "<number>";
      inherits: true;
      initial-value: 0.3;
    }
    @property --btn-offset {
      syntax: "<number>";
      inherits: true;
      initial-value: 1;
    }
    @property --btn-scale {
      syntax: "<number>";
      inherits: true;
      initial-value: 1;
    }
  }

  :root {
    --debug: 0;

    /* colors */
    --body-bg: hsl(0, 0%, 6%);
    --btn-bg: hsl(0, 0%, 0%);
    --btn-border-width: 1.5;
    --btn-offset: 1;
    --btn-scale: 1;
    --after-bg: linear-gradient(
      to right,
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0),
      rgb(0 0 0)
    );
    --after-blur: 10;
    --after-opacity: 1;
    --after-pos-y: 10;

    --before-opacity: 0.3;

    /* positions */
    --bg-position: 100;

    --color-white: hsl(0, 0%, 100%);
    --color-cyan: hsl(180, 100%, 50%);
    --color-blue: hsl(240, 100%, 50%);
    --color-purple: hsl(270, 100%, 50%);
    --color-pink: hsl(330, 40%, 70%);
    --color-red: hsl(0, 100%, 50%);
    --color-yellow: hsl(60, 100%, 50%);
    --color-lime: hsl(90, 100%, 75%);

    --color-orange: oklch(69.1% 0.223 36.85);
  }

  @supports (color: color(display-p3 0 0 0)) {
    :root {
      --color-white: color(display-p3 1 1 1);
      --color-cyan: color(display-p3 0 1 1);
      --color-blue: color(display-p3 0 0 1);
      --color-purple: color(display-p3 0.5 0 1);
      --color-pink: color(display-p3 1 0.4 0.7);
      --color-red: color(display-p3 1 0 0);
      --color-yellow: color(display-p3 1 1 0);
      --color-lime: color(display-p3 0.75 1 0);

      --color-orange: color(display-p3 0.96 0.39 0.2);
    }
  }

  *,
  *:before,
  *:after {
    box-sizing: border-box;
    outline: calc(var(--debug) * 1px) dotted red;
    outline-offset: -1px;
  }
  main {
    display: grid;
    place-items: center;

    & button {
      all: unset;
      background: transparent;
      border-width: 0;
      transform: scale(var(--btn-scale));
      transition: --bg-position 3s ease, --after-blur 0.3s ease,
        --before-opacity 0.3s ease, --btn-offset 0.3s ease,
        --btn-scale 0.2s cubic-bezier(0.76, -0.25, 0.51, 1.13);

      > div {
        display: block;
        padding: 0.8em 1.2em;
        background: var(--btn-bg);
        color: white;
        font-weight: bold;
        border-radius: 8px;
        font-size: 22px;
        position: relative;

        cursor: pointer;

        &:not(:hover) {
          transition: --after-blur 0.3s ease;
        }

        > span {
          background: linear-gradient(
              to right,
              var(--color-white),
              var(--color-white),
              var(--color-cyan),
              var(--color-blue),
              var(--color-purple),
              var(--color-pink),
              var(--color-red),
              var(--color-yellow),
              var(--color-lime),
              var(--color-white),
              var(--color-white)
            )
            no-repeat calc(var(--bg-position) * 1%) 0% / 900%;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          letter-spacing: 0.15ch;
          font-weight: 600;
        }

        &:after {
          display: block;
          position: absolute;
          content: "";
          width: 100%;
          height: 100%;
          background: var(--after-bg) no-repeat calc(var(--bg-position) * 1%) 0% /
            900%;
          transform: translateY(calc(var(--after-pos-y) * 1px));
          left: 0;
          top: 0;
          z-index: -2;
          filter: blur(calc(var(--after-blur) * 1px));
          opacity: var(--after-opacity);
        }

        &:before {
          content: "";
          display: block;
          position: absolute;
          width: calc(100% + calc(calc(var(--btn-border-width) * 2) * 1px));
          height: calc(100% + calc(calc(var(--btn-border-width) * 2) * 1px));
          background: linear-gradient(
              to right,
              var(--color-white),
              var(--color-white),
              var(--color-cyan),
              var(--color-blue),
              var(--color-purple),
              var(--color-pink),
              var(--color-red),
              var(--color-yellow),
              var(--color-lime),
              var(--color-white),
              var(--color-white)
            )
            no-repeat calc(var(--bg-position) * 1%) 0% / 900%;
          border-radius: 9px;
          z-index: -1;
          top: calc(var(--btn-border-width) * -1px);
          left: calc(var(--btn-border-width) * -1px);
          opacity: var(--before-opacity);
        }
      }

      &:hover {
        --btn-scale: 1.05;
        --bg-position: 0;
        --after-bg: linear-gradient(
          to right,
          var(--color-white),
          var(--color-white),
          var(--color-cyan),
          var(--color-blue),
          var(--color-purple),
          var(--color-pink),
          var(--color-red),
          var(--color-yellow),
          var(--color-lime),
          var(--color-white),
          var(--color-white)
        );
        --after-blur: 30;
        --after-opacity: 0.3;
        --after-pos-y: 0;
        --before-opacity: 1;
        --btn-offset: 5;

        &:active {
          --btn-scale: 0.98;
          --after-blur: 15;
        }
      }
    }
  }
}