@layer scenes {
[data-8b-live] { --ease-cb0991: linear(0, 0.1207, 0.2329, 0.3369, 0.433, 0.5215, 0.6026, 0.6767, 0.744, 0.8048, 0.8594, 0.908, 0.951, 0.9886, 1.0211, 1.0488, 1.072, 1.0909, 1.1059, 1.1171, 1.125, 1.1297, 1.1316, 1.131, 1.128, 1.123, 1.1164, 1.1083, 1.099, 1.0889, 1.0781, 1.0671, 1.056, 1.0452, 1.0349, 1.0254, 1.017, 1.01, 1.0046, 1.0012, 1); }
[data-8b-live] #opening { --opening-u: 1050px; view-timeline: --opening-t1 block; view-timeline-inset: 0; }
[data-8b-live] #opening .op-shape--arch { animation-name: opening-arch-move, opening-arch-hide; animation-timeline: --opening-t1; animation-range: cover 100vh cover calc(100vh + var(--opening-u)), cover calc(100vh + var(--opening-u) - 1px) cover calc(100vh + var(--opening-u)); animation-timing-function: linear; animation-fill-mode: both; transform: none; transform-origin: 0px 0px; }
[data-8b-live] #opening .op-photo { animation-name: opening-photo; animation-timeline: --opening-t1; animation-range: cover 100vh cover calc(100vh + var(--opening-u) * 0.85); animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0.3333); animation-fill-mode: both; transform: none; }
[data-8b-live] #opening .op-shape:not(.op-shape--arch) { animation-name: opening-fling; animation-timeline: --opening-t1; animation-range: cover calc(100vh + var(--opening-u) * var(--opening-at)) cover calc(100vh + var(--opening-u) * (var(--opening-at) + 0.6)); animation-timing-function: cubic-bezier(0.3333, 0.6667, 0.6667, 1); animation-fill-mode: both; transform: none; }
[data-8b-live] #opening .op-shape--circle { --opening-at: 0; --opening-fling: -260px -120px; --opening-turn: -150deg; }
[data-8b-live] #opening .op-shape--plus { --opening-at: 0.04; --opening-fling: 240px 160px; --opening-turn: 140deg; }
[data-8b-live] #opening .op-shape--diamond { --opening-at: 0.08; --opening-fling: -200px 220px; --opening-turn: 120deg; }
[data-8b-live] #opening .op-shape--square { --opening-at: 0.12; --opening-fling: 220px 260px; --opening-turn: -110deg; }
[data-8b-live] #opening .op-visit__title { animation-name: opening-title; animation-timeline: --opening-t1; animation-range: cover calc(100vh + var(--opening-u) * 0.55) cover calc(100vh + var(--opening-u)); animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1); animation-fill-mode: both; transform: none; transform-origin: 50% 100%; }
[data-8b-live] #opening .op-step__mark { animation-name: opening-mark; animation-timeline: --opening-t1; animation-range: cover calc(100vh + var(--opening-u) * (0.7 + 0.05 * var(--i, 0))) cover calc(100vh + var(--opening-u) * (0.95 + 0.05 * var(--i, 0))); animation-timing-function: var(--ease-cb0991); animation-fill-mode: both; transform: none; }
[data-8b-live] #opening .op-door { animation-name: opening-door-show; animation-timeline: --opening-t1; animation-range: cover calc(100vh + var(--opening-u) - 1px) cover calc(100vh + var(--opening-u)); animation-timing-function: linear; animation-fill-mode: both; }
@keyframes opening-arch-move { 0% { translate: 0px 0px; scale: 1; } 100% { translate: var(--opening-dx, 0px) var(--opening-dy, 0px); scale: var(--opening-sx, 1) var(--opening-sy, 1); } }
@keyframes opening-arch-hide { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes opening-photo { 0% { scale: 1; translate: 0px 0px; } 100% { scale: 0.8; translate: 0px -6%; border-radius: 160px 260px 160px 160px; } }
@keyframes opening-fling { 0% { translate: 0px 0px; rotate: 0deg; scale: 1; } 100% { translate: var(--opening-fling); rotate: var(--opening-turn); scale: 1.9; } }
@keyframes opening-title { 0% { scale: 0.86; } 100% { scale: 1; } }
@keyframes opening-mark { 0% { scale: 0.2; rotate: -120deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes opening-door-show { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
}