/* Reuse the site's composited fixed background layer. */
html[data-is-halloween="1"] {
    --site-bg-image: url("/static/image/halloween-background.webp?v=4");
    --site-bg-blur: 4px;
    --site-bg-opacity: 0.3;
    --glass-navbar-border: rgba(255, 255, 255, 0.18);
    --glass-navbar-bg: rgba(18, 10, 22, 0.7);
    --glass-navbar-bg-strong: rgba(18, 10, 22, 0.82);
    --glass-navbar-highlight: rgba(255, 255, 255, 0.12);
    --glass-navbar-shadow: 0 18px 60px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --glass-navbar-shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html[data-is-halloween="1"] .glass-navbar-mobile-menu {
    background: rgba(18, 10, 22, 0.88);
}

html[data-is-halloween="1"] .homepage-brand-copy h1 .text-pink-600 {
    color: var(--color-primary);
}

html[data-is-halloween="1"] .drop-shadow-main,
html[data-is-halloween="1"] .hover\:drop-shadow-main:hover {
    --tw-drop-shadow: drop-shadow(-10px 10px 0 var(--color-primary));
}

html[data-is-halloween="1"] .hover\:drop-shadow-main:not(:hover) {
    --tw-drop-shadow: drop-shadow(-10px 10px 0 oklch(77.48% 0.204 60.62 / 0));
}

@media (min-width: 48rem) {
    html[data-is-halloween="1"] .md\:hover\:drop-shadow-main:not(:hover) {
        --tw-drop-shadow: drop-shadow(-10px 10px 0 oklch(77.48% 0.204 60.62 / 0));
    }

    html[data-is-halloween="1"] .md\:hover\:drop-shadow-main:hover {
        --tw-drop-shadow: drop-shadow(-10px 10px 0 var(--color-primary));
    }
}

html[data-is-halloween="1"] .btn.btn-secondary:not(.btn-soft):not(:disabled):not(.btn-disabled) {
    --btn-color: var(--color-primary) !important;
    --btn-fg: var(--color-primary-content) !important;
    border-color: color-mix(in oklch, var(--color-primary) 72%, black) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 42%),
        linear-gradient(135deg, var(--color-primary), color-mix(in oklch, var(--color-primary) 76%, #ff4d00)) !important;
    color: var(--color-primary-content) !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

html[data-is-halloween="1"] .btn.btn-secondary:not(.btn-soft):not(:disabled):not(.btn-disabled):hover {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.36), transparent 42%),
        linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 92%, white), var(--color-primary)) !important;
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-primary) 48%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
}