@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] [data-8b-motion~="rise"] .line__in { animation-name: motion-rise-line-in-translate; animation-duration: 0.95s; animation-delay: calc(0s + 0.09s * var(--i)); animation-timing-function: var(--ease-power3-out); animation-fill-mode: both; animation-play-state: paused; transform: none; }
[data-8b-live] [data-8b-motion~="rise"].is-in .line__in { animation-play-state: running; }
[data-8b-live] #footer .ft-panel { overflow-x: clip; overflow-y: clip; }
[data-8b-live] [data-8b-motion~="drift"] { view-timeline: --motion-drift block; view-timeline-inset: 0; animation-name: motion-drift-translate, motion-drift-rotate; animation-timeline: --motion-drift; animation-range: cover 0% cover 100%; animation-timing-function: linear; animation-fill-mode: both; transform: none; }
[data-8b-live] [data-8b-motion~="reshape"] { --motion-reshape-from: inset(9% 9% 9% 9% round 50% 50% 50% 50%); animation-name: motion-reshape-clip; animation-duration: 1.15s; animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); animation-fill-mode: backwards; animation-play-state: paused; }
[data-8b-live] [data-8b-motion~="reshape"][data-from="arch"] { --motion-reshape-from: inset(10% 6% 0% 6% round 50% 50% 0% 0%); }
[data-8b-live] [data-8b-motion~="reshape"][data-from="square"] { --motion-reshape-from: inset(14% 14% 14% 14% round 0% 0% 0% 0%); }
[data-8b-live] [data-8b-motion~="reshape"][data-from="diamond"] { --motion-reshape-from: inset(18% 18% 18% 18% round 12% 12% 12% 12%); }
[data-8b-live] [data-8b-motion~="reshape"] img { animation-name: motion-reshape-image; animation-duration: 1.4s; animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); animation-fill-mode: backwards; animation-play-state: paused; }
[data-8b-live] [data-8b-motion~="reshape"].is-in, [data-8b-live] [data-8b-motion~="reshape"].is-in img { animation-play-state: running; }
@keyframes motion-reshape-clip { 0% { clip-path: var(--motion-reshape-from); } 100% { clip-path: inset(0% 0% 0% 0% round 0% 0% 0% 0%); } }
@keyframes motion-reshape-image { 0% { scale: 1.22; } 100% { scale: 1; } }
@keyframes motion-rise-line-in-translate { 0% { translate: 0px calc(105% + 0.126em); } 100% { translate: 0px 0px; } }
@keyframes motion-drift-translate { 0% { translate: 0px var(--drift-translate-y-from, 70px); animation-timing-function: cubic-bezier(0.3333, 0.6667, 0.6667, 1); } 42% { translate: 0px 0px; animation-timing-function: linear(0, 0.0494, 0.0975, 0.1444, 0.19, 0.2344, 0.2775, 0.3194, 0.36, 0.3994, 0.4375, 0.4744, 0.51, 0.5444, 0.5775, 0.6094, 0.64, 0.6694, 0.6975, 0.7244, 0.75, 0.7744, 0.7975, 0.8194, 0.84, 0.8594, 0.8775, 0.8944, 0.91, 0.9244, 0.9375, 0.9494, 0.96, 0.9694, 0.9775, 0.9844, 0.99, 0.9944, 0.9975, 0.9994, 1); } 58% { translate: 0px 0px; animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0.3333); } 100% { translate: 0px var(--drift-translate-y-to, -70px); } }
@keyframes motion-drift-rotate { 0% { rotate: var(--drift-rotate-from, -40deg); animation-timing-function: cubic-bezier(0.3333, 0.6667, 0.6667, 1); } 42% { rotate: 0deg; } 58% { rotate: 0deg; animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0.3333); } 100% { rotate: var(--drift-rotate-to, 40deg); } }
}