@layer sections {
      #opening {
        position: relative;
        overflow-x: clip;
      }

      #opening .op-one {
        position: relative;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        padding: 20px var(--space-1) calc(clamp(44px, 6.25vw, 112px) * 0.9 + 34px) 0;
      }

      #opening .op-rule {
        transform-origin: 50% 0;
      }

      #opening .op-where {
        display: grid;
        gap: 2px;
        margin-top: 2px;
      }

      #opening .op-head {
        margin-top: auto;
        padding-top: 40px;
      }

      #opening .op-name {
        display: grid;
        grid-template-columns: var(--space-3) minmax(0, 1fr);
        align-items: end;
      }

      #opening .op-what {
        padding: 0 var(--space-4) 4px var(--space-2);
      }

      #opening .op-h1 {
        padding-left: var(--space-4);
      }

      #opening .ln {
        display: block;
      }

      #opening .ln__i {
        display: inline-block;
        position: relative;
      }

      #opening .op-sub {
        margin-top: 0.12em;
      }

      #opening .op-a .ln__i {
        background: var(--color-1);
        padding-right: 0.08em;
      }

      #opening .op-in {
        padding-left: 1.6em;
      }

      #opening .op-foot {
        display: grid;
        grid-template-columns: var(--space-3) minmax(0, 1fr);
        align-items: center;
        margin-top: clamp(22px, 4vh, 40px);
      }

      #opening .op-actions {
        margin-left: var(--space-4);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px 26px;
      }

      #opening .op-level {
        position: relative;
        margin: 0 var(--space-4) 0 var(--space-2);
        height: 26px;
        border: 1px solid var(--color-2);
        border-radius: var(--radius-1);
        --op-travel: max(18px, calc((var(--space-3) - var(--space-2) - var(--space-4)) / 2 - 22px));
      }

      #opening .op-level::before,
      #opening .op-level::after {
        content: "";
        position: absolute;
        top: 4px;
        bottom: 4px;
        width: 1px;
        background: var(--color-2);
      }

      #opening .op-level::before {
        left: calc(50% - 14px);
      }

      #opening .op-level::after {
        left: calc(50% + 14px);
      }

      #opening .op-level__bubble {
        position: absolute;
        top: 5px;
        left: calc(50% - 8px);
        width: 16px;
        height: 14px;
        border-radius: 50%;
        background: var(--color-6);
      }

      #opening .op-two {
        position: relative;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: clamp(28px, 6vh, 64px);
        padding: clamp(72px, 13vh, 132px) var(--space-1) clamp(48px, 9vh, 96px) 0;
        color: var(--color-1);
        background: var(--color-2);
        clip-path: inset(0 0 0 0);
        --op-tile: clamp(112px, 13vw, 220px);
      }

      #opening .op-two>* {
        position: relative;
      }

      #opening .op-tiles {
        height: var(--op-tile);
      }

      #opening .op-tile {
        position: absolute;
        top: 0;
        width: var(--op-tile);
        height: var(--op-tile);
        overflow: hidden;
      }

      #opening .op-tile:nth-child(1) {
        left: var(--space-1);
      }

      #opening .op-tile:nth-child(2) {
        left: calc(var(--space-3) + var(--space-4));
      }

      #opening .op-tile:nth-child(3) {
        left: calc(var(--space-3) + var(--space-4) + var(--op-tile) + 10px);
      }

      #opening .op-tile:nth-child(4) {
        right: 0;
      }

      #opening .op-para {
        max-width: 40ch;
        margin-right: var(--space-1);
      }

      #opening .op-para .m-link-2 {
        margin-left: 0.2em;
      }

      #opening .op-say {
        white-space: nowrap;
      }

      @media (max-width: 700px) {
        #opening .op-foot {
          grid-template-columns: var(--space-3) minmax(0, 1fr);
          align-items: start;
        }

        #opening .op-level {
          margin-top: 11px;
        }

        #opening .op-actions {
          flex-direction: column;
          align-items: flex-start;
        }

        #opening .op-tiles {
          height: auto;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
          padding-left: var(--space-1);
        }

        #opening .op-tile {
          position: relative;
          left: auto;
          right: auto;
          width: auto;
          height: auto;
          aspect-ratio: 1;
        }

        #opening .op-tile:nth-child(n) {
          left: auto;
          right: auto;
        }

        #opening .op-para {
          margin-left: var(--space-1);
        }
      }

      @media (prefers-reduced-motion: no-preference) {
        #opening .op-rule {
          animation: op-draw 1s cubic-bezier(0.7, 0, 0.2, 1) backwards;
        }

        #opening .op-one .ln {
          animation: op-from-rule-r 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
        }

        #opening .op-one .op-a {
          animation-name: op-from-rule-l;
        }

        #opening .op-h1 .ln:nth-child(2) {
          animation-delay: 0.06s;
        }

        #opening .op-sub .ln:nth-child(1) {
          animation-delay: 0.12s;
        }

        #opening .op-sub .ln:nth-child(2) {
          animation-delay: 0.18s;
        }

        #opening .op-sub .ln:nth-child(3) {
          animation-delay: 0.24s;
        }

        #opening .op-sub .ln:nth-child(4) {
          animation-delay: 0.3s;
        }

        #opening .op-foot {
          animation: op-rise 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
        }

        #opening .op-level__bubble {
          animation: op-level 5.4s ease-in-out infinite;
        }

        #opening .op-level.is-paused .op-level__bubble {
          animation-play-state: paused;
        }
      }

      @keyframes op-draw {
        from {
          transform: scaleY(0);
        }
      }

      @keyframes op-from-rule-r {
        from {
          transform: translateX(-44px);
        }
      }

      @keyframes op-from-rule-l {
        from {
          transform: translateX(44px);
        }
      }

      @keyframes op-rise {
        from {
          transform: translateY(14px);
        }
      }

      @keyframes op-level {

        0%,
        100% {
          transform: translateX(0);
        }

        20% {
          transform: translateX(calc(var(--op-travel) * -1));
        }

        45% {
          transform: translateX(calc(var(--op-travel) * 0.75));
        }

        65% {
          transform: translateX(calc(var(--op-travel) * -0.35));
        }

        82% {
          transform: translateX(calc(var(--op-travel) * 0.12));
        }
      }
    }