/* Native Design CSS sets the ratio on the element; the preview inherits it. */
.magic-video { display: block; width: 100%; aspect-ratio: var(--magic-video-ratio, 16 / 9); }
.magic-video__preview { position: relative; aspect-ratio: inherit; overflow: hidden; background: #000; }
.magic-video__loop, .magic-video__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.magic-video__preview::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--color-tuna, #b9826b); opacity: .3; pointer-events: none; }
.magic-video__graphic, .magic-video__open { z-index: 2; }
.magic-video__graphic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 85%; object-fit: contain; pointer-events: none; }
.magic-video__open, .magic-video__close { display: grid; place-items: center; padding: 0; width: 56px; height: 56px; border: 1px solid currentColor; color: #f4ece8; background: rgb(0 0 0 / 35%); cursor: pointer; }
.magic-video__open { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); width: 72px; height: 72px; border-radius: 50%; border: 0; background: transparent; --mtvc-purple: var(--color-tuna-darker, #b9826b); --mtvc-light: var(--color-beige, #efe4dd); }
.magic-video__open svg, .magic-video__close svg { width: 30px; height: 30px; }
.magic-video__open svg { width: 100%; height: 100%; filter: none; }
.magic-video__open:hover, .magic-video__close:hover { color: #f4ece8; background: rgb(244 236 232 / 20%); }
.magic-video__open:hover { background: transparent; --mtvc-purple: var(--color-tuna, #b9826b); }
.magic-video__open:focus-visible, .magic-video__close:focus-visible { outline: 2px solid #f4ece8; outline-offset: 4px; }
dialog.magic-video__dialog { position: fixed; inset: 0; box-sizing: border-box; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 80px 4vw 32px; border: 0; background: #000; color: #f4ece8; overflow: auto; }
dialog.magic-video__dialog:not([open]) { display: none; }
dialog.magic-video__dialog[open] { display: flex; align-items: center; }
.magic-video__dialog::backdrop { background: #000; }
.magic-video__close { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 5; border: 0; border-radius: 50%; }
.magic-video__dialog .mtvc-shell { width: 100%; margin: auto; }
.magic-video__dialog .mtvc-video { max-height: calc(100dvh - 112px); object-fit: contain; background: #000; }
.magic-video__dialog .mtvc-panel { max-height: min(var(--mtvc-video-height), calc(100dvh - 112px)); }
.magic-video__dialog .mtvc-control:hover { color: var(--mtvc-light); }
@media (max-width: 800px) {
	dialog.magic-video__dialog { padding: 76px 16px 24px; }
	.magic-video__dialog .mtvc-panel { max-height: 32vh; }
	.magic-video__open { bottom: 44px; width: 60px; height: 60px; }
}

/* Cover is present in the server markup, before the preview can paint black. */
.magic-video__preview { background: var(--color-navy, #081533); isolation: isolate; }
.magic-video__loop { opacity: 0; transition: opacity .35s ease; }
.magic-video--loaded .magic-video__loop { opacity: 1; }
.magic-video__reveal { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: #efe4dd; pointer-events: none; animation: magic-video-cover-fallback .4s 7s forwards; }
.magic-video__reveal > span { position: absolute; inset: 0; background: #b9826b; transform: translateY(100%); }
.l-section:has(.magic-video) .logo_banner { z-index: 4; }
.magic-video__preview > .below_banner {
	position: absolute !important;
	inset: auto 0 0 !important;
	z-index: 4;
	width: 100% !important;
	max-width: none;
	margin: 0 !important;
	box-sizing: border-box;
}
.magic-video__preview--with-footer .magic-video__open {
	bottom: calc(var(--magic-video-footer-height, 0px) + 64px);
}
@media (max-width: 800px) {
	.magic-video__preview--with-footer .magic-video__open {
		bottom: calc(var(--magic-video-footer-height, 0px) + 44px);
	}
}
@keyframes magic-video-cover-fallback { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .magic-video__loop { transition: none; } }
/* Prevent a logo/footer flash before the footer scripts initialize. */
.l-section:has(.magic-video) .logo_banner,
.l-section:has(.magic-video) .below_banner { opacity: 0; animation: magic-banner-content-fallback .4s 7s forwards; }
@keyframes magic-banner-content-fallback { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
 .l-section:has(.magic-video) .logo_banner,
 .l-section:has(.magic-video) .below_banner { opacity: 1; animation: none; }
}