@layer scenes {
      [data-8b-live] {
        --ease-power3-out: linear(0, 0.0963, 0.1855, 0.2679, 0.3439, 0.4138, 0.478, 0.5367, 0.5904, 0.6392, 0.6836, 0.7237, 0.7599, 0.7924, 0.8215, 0.8474, 0.8704, 0.8907, 0.9085, 0.924, 0.9375, 0.9491, 0.959, 0.9674, 0.9744, 0.9802, 0.985, 0.9888, 0.9919, 0.9943, 0.9961, 0.9974, 0.9984, 0.9991, 0.9995, 0.9998, 0.9999, 1, 1, 1, 1);
      }

      [data-8b-live] #opening {
        view-timeline: --opening-t1 block;
        view-timeline-inset: 0;
      }

      [data-8b-live] #opening .op-sub>span:nth-of-type(-n+2)>.ln__i {
        animation-name: opening-span-ln-i-translate;
      }

      [data-8b-live] #opening .op-h1>span:nth-of-type(-n+2)>.ln__i,
      [data-8b-live] #opening .op-sub>span:nth-of-type(3)>.ln__i,
      [data-8b-live] #opening .op-in>.ln__i {
        animation-name: opening-span-ln-i-translate-3;
      }

      [data-8b-live] #opening .op-sub>span:nth-of-type(-n+3)>.ln__i,
      [data-8b-live] #opening .op-h1>span:nth-of-type(-n+2)>.ln__i,
      [data-8b-live] #opening .op-in>.ln__i {
        animation-timeline: --opening-t1;
        animation-range: cover 100vh cover calc(100vh + var(--opening-run, 100vh) * 0.6);
        animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
        animation-fill-mode: both;
        transform: none;
      }

      [data-8b-live] #opening .op-two {
        animation-name: opening-slit;
        animation-timeline: --opening-t1;
        animation-range: cover calc(100vh + var(--opening-run, 100vh) * 0.12) cover calc(100vh + var(--opening-run, 100vh) * 0.82);
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        animation-fill-mode: both;
      }

      [data-8b-live] #opening .op-tiles>li {
        animation-name: opening-li-op-tile-translate;
        animation-timeline: --opening-t1;
        animation-range: cover calc(100vh + var(--opening-run, 100vh) * 0.3) cover calc(100vh + var(--opening-run, 100vh) * 0.92);
        animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
        animation-fill-mode: both;
        transform: none;
      }

      [data-8b-live] #opening .m-text {
        animation-name: opening-p-m-text-translate;
        animation-timeline: --opening-t1;
        animation-range: cover calc(100vh + var(--opening-run, 100vh) * 0.42) cover calc(100vh + var(--opening-run, 100vh) * 0.92);
        animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
        animation-fill-mode: both;
        transform: none;
      }

      [data-8b-live] #opening .op-say>.l-a>.ln__i {
        --opening-at: calc(0.5 + 0.08 * var(--opening-step, 0));
        animation-name: opening-row;
        animation-timeline: --opening-t1;
        animation-range: cover calc(100vh + var(--opening-run, 100vh) * var(--opening-at)) cover calc(100vh + var(--opening-run, 100vh) * (var(--opening-at) + 0.42));
        animation-timing-function: var(--ease-power3-out);
        animation-fill-mode: both;
        transform: none;
      }

      @keyframes opening-span-ln-i-translate {
        0% {
          translate: 0px 0px;
        }

        100% {
          translate: -8vw 0px;
        }
      }

      @keyframes opening-span-ln-i-translate-3 {
        0% {
          translate: 0px 0px;
        }

        100% {
          translate: 8vw 0px;
        }
      }

      @keyframes opening-slit {
        0% {
          clip-path: inset(0px calc(100% - var(--opening-slit, 0px) - 1px) 0px var(--opening-slit, 0px));
        }

        100% {
          clip-path: inset(0px 0px 0px 0px);
        }
      }

      @keyframes opening-li-op-tile-translate {
        0% {
          translate: 0px var(--opening-li-op-tile-translate-from-2, 150px);
        }

        100% {
          translate: 0px 0px;
        }
      }

      @keyframes opening-p-m-text-translate {
        0% {
          translate: 0px 70px;
        }

        100% {
          translate: 0px 0px;
        }
      }

      @keyframes opening-row {
        0% {
          translate: var(--opening-row, 0px) 0px;
        }

        100% {
          translate: 0px 0px;
        }
      }
    }
