/* Only the Halloween hero media; surrounding page layout is unchanged. */
.halloween-hero-animation {
    grid-column: 1 / -1;
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    background: #241a32;
    box-shadow: 8px 10px 0 #51259d20;
}
.halloween-animation-poster { display: block; width: 100%; height: auto; }
.halloween-animation-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.halloween-hero-animation.has-frame .halloween-animation-video { opacity: 1; }
.halloween-animation-toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    border-radius: 24px;
    background: #fffdf4;
    color: #213040;
    font: 800 .85rem/1.2 "Nunito", system-ui, sans-serif;
    cursor: pointer;
}
.halloween-animation-toggle[hidden] { display: none; }
@media (max-width: 900px) {
    .halloween-hero-animation { width: 100%; }
}

.halloween-animation-toggle:focus-visible { outline: 3px solid #ffae54; outline-offset: 3px; }

/* Give the control its own space on phones so it cannot cover the artwork. */
@media (max-width: 600px) {
    .halloween-hero-animation { padding-bottom: 56px; }
    .halloween-animation-video { height: auto; aspect-ratio: 1920 / 824; }
    .halloween-animation-toggle { bottom: 6px; }
}