.mb-wrap { margin: 28px 0; }
.mb { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 12px; isolation: isolate; contain: layout paint; background: var(--s2); }
.mb:focus-visible { outline: 3px solid var(--brand-fill); outline-offset: 3px; }
.mb-bg, .mb-bg img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mb-bg img { object-fit: cover; }
.mb-l { position: absolute; display: block; height: auto; max-width: none; pointer-events: none; user-select: none; }
.mb-cloud { z-index: 1; animation: mb-drift var(--d, 20s) ease-in-out var(--dl, 0s) infinite alternate; }
.mb-up, .mb-down, .mb-none { z-index: 2; }
.mb-up, .mb-down { animation: mb-float var(--d, 6s) ease-in-out var(--dl, 0s) infinite; }
.mb-up { --y: -7%; }
.mb-down { --y: 6%; }
@keyframes mb-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, var(--y), 0) rotate(var(--r, 0deg)); } }
@keyframes mb-drift { from { transform: translate3d(calc(var(--dx, 12%) * -1), 0, 0); } to { transform: translate3d(var(--dx, 12%), 0, 0); } }
@media (max-width: 759px) { .mb-wrap { margin: 20px 0; } .mb-only-d { display: none; } }
@media (min-width: 760px) { .mb-only-m { display: none; } }
.mb-draw { z-index: 3; overflow: hidden; animation: var(--d, 6s) linear var(--dl, 0s) infinite both; }
.mb-draw > img { display: block; width: 100%; height: auto; animation: var(--d, 6s) linear var(--dl, 0s) infinite both; }
.mb-draw-r { animation-name: mb-wipe-r; } .mb-draw-r > img { animation-name: mb-wipe-r-in; }
.mb-draw-l { animation-name: mb-wipe-l; } .mb-draw-l > img { animation-name: mb-wipe-l-in; }
.mb-draw-d { animation-name: mb-wipe-d; } .mb-draw-d > img { animation-name: mb-wipe-d-in; }
@keyframes mb-wipe-r { 0% { transform: translate3d(-101%, 0, 0); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 18%, 80% { transform: translate3d(0, 0, 0); opacity: 1; } 90%, 100% { transform: translate3d(0, 0, 0); opacity: 0; } }
@keyframes mb-wipe-r-in { 0% { transform: translate3d(101%, 0, 0); animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 18%, 100% { transform: translate3d(0, 0, 0); } }
@keyframes mb-wipe-l { 0% { transform: translate3d(101%, 0, 0); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 18%, 80% { transform: translate3d(0, 0, 0); opacity: 1; } 90%, 100% { transform: translate3d(0, 0, 0); opacity: 0; } }
@keyframes mb-wipe-l-in { 0% { transform: translate3d(-101%, 0, 0); animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 18%, 100% { transform: translate3d(0, 0, 0); } }
@keyframes mb-wipe-d { 0% { transform: translate3d(0, -101%, 0); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 18%, 80% { transform: translate3d(0, 0, 0); opacity: 1; } 90%, 100% { transform: translate3d(0, 0, 0); opacity: 0; } }
@keyframes mb-wipe-d-in { 0% { transform: translate3d(0, 101%, 0); animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 18%, 100% { transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .mb-l, .mb-draw > img { animation: none; } }
.mb-hero { container-type: size; padding: 0; }
.mb-hero > .mb { position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--ar, 1.3333))); max-width: none; height: auto; border-radius: 0; background: none; transform: translate(-50%, -50%); }
@media (max-width: 859px) { .mb-hero .mb-hd { display: none; } }
@media (min-width: 860px) { .mb-hero .mb-hm { display: none; } }
.mb-hero .mb-l { height: auto; }
.mb-hero:focus-visible { outline: 3px solid var(--brand-fill); outline-offset: -3px; }