/* Holiday-only festive accents. Load on the holiday lander and holiday
   sections of the homepage and /events/. Does not restyle the rest of the site. */

.holiday-festive {
    --holiday-gold: #d4a634;
    --holiday-gold-soft: #f3e2a8;
    --holiday-red: #c45a48;
    --holiday-red-deep: #8f3a30;
    --holiday-green: #4e7a5a;
    --holiday-green-deep: #2f5340;
}

.holiday-festive__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    background: #141414;
    border: 1px solid var(--holiday-gold, #d4a634);
    color: #f3e2a8;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
}

.holiday-festive__badge::before,
.holiday-festive__badge::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 8px currentColor;
}

.holiday-festive__badge::before {
    background: #c45a48;
    color: #c45a48;
}

.holiday-festive__badge::after {
    background: #4e7a5a;
    color: #4e7a5a;
}

.holiday-festive__badge--inline {
    margin: 0 0 0.65rem;
}

.holiday-festive__lights,
.holiday-festive__sparkle,
.holiday-festive__fall {
    pointer-events: none;
}

.holiday-festive__lights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' width='240' height='40'%3E%3Cpath d='M0 10 C20 26 40 26 60 10 S100 26 120 10 S160 26 180 10 S220 26 240 10' fill='none' stroke='%235a4020' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='22' r='5' fill='%23d4a634'/%3E%3Ccircle cx='60' cy='10' r='5' fill='%23c45a48'/%3E%3Ccircle cx='100' cy='22' r='5' fill='%234e7a5a'/%3E%3Ccircle cx='140' cy='10' r='5' fill='%23d4a634'/%3E%3Ccircle cx='180' cy='22' r='5' fill='%23c45a48'/%3E%3Ccircle cx='220' cy='10' r='5' fill='%234e7a5a'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center top;
    background-size: 200px 40px;
    filter: drop-shadow(0 0 8px rgba(212, 166, 52, 0.55));
    animation: holiday-twinkle 2.8s ease-in-out infinite;
}

.holiday-festive--hero .holiday-festive__lights {
    top: 72px;
}

.holiday-festive__sparkle {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 24%, rgba(243, 226, 168, 0.85) 0, transparent 100%),
        radial-gradient(1.5px 1.5px at 28% 62%, rgba(255, 255, 255, 0.55) 0, transparent 100%),
        radial-gradient(1.5px 1.5px at 47% 18%, rgba(212, 166, 52, 0.8) 0, transparent 100%),
        radial-gradient(1.5px 1.5px at 63% 48%, rgba(243, 226, 168, 0.7) 0, transparent 100%),
        radial-gradient(1.5px 1.5px at 81% 22%, rgba(255, 255, 255, 0.5) 0, transparent 100%),
        radial-gradient(1.5px 1.5px at 91% 68%, rgba(212, 166, 52, 0.65) 0, transparent 100%);
    animation: holiday-sparkle 5s ease-in-out infinite;
}

.holiday-festive__fall {
    position: absolute;
    top: 0;
    left: 8%;
    z-index: 2;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f3e2a8;
    opacity: 0.45;
    animation: holiday-fall 10s linear infinite;
}

.holiday-festive__fall--2 {
    left: 22%;
    animation-delay: -3s;
    animation-duration: 12s;
}

.holiday-festive__fall--3 {
    left: 58%;
    width: 3px;
    height: 3px;
    animation-delay: -6s;
    animation-duration: 11s;
}

.holiday-festive__fall--4 {
    left: 84%;
    animation-delay: -1.5s;
    animation-duration: 13s;
}

.holiday-festive--hero {
    position: relative;
}

.holiday-festive--hero .landing-hero__overlay,
.holiday-festive--hero.holiday-festive__overlay,
.holiday-festive__overlay {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(212, 166, 52, 0.28) 0%, transparent 46%),
        linear-gradient(
            180deg,
            rgba(47, 20, 16, 0.58) 0%,
            rgba(13, 13, 13, 0.42) 46%,
            rgba(13, 13, 13, 0.9) 100%
        );
}

.holiday-festive--hero .landing-hero__label {
    border-color: rgba(212, 166, 52, 0.55);
    box-shadow: 0 0 18px rgba(212, 166, 52, 0.18);
}

.holiday-festive--hero .landing-hero__content {
    z-index: 3;
}

.holiday-festive-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75rem 0.9rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(212, 166, 52, 0.38);
    background: rgba(13, 13, 13, 0.55);
    box-shadow: 0 0 24px rgba(212, 166, 52, 0.12);
}

.holiday-festive-link__text {
    display: block;
    max-width: 36rem;
}

.holiday-festive-link .holiday-festive__badge {
    margin-bottom: 0.45rem;
}

.landing-hero--convert .holiday-festive-link {
    margin-top: 1rem;
}

.holiday-festive--section {
    position: relative;
    margin-top: 2rem;
    padding: 2.25rem 1rem 1.35rem;
    border-radius: 16px;
    border: 1px solid rgba(212, 166, 52, 0.28);
    background:
        radial-gradient(ellipse at top, rgba(212, 166, 52, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #17140f 0%, #141414 100%);
    overflow: hidden;
}

.holiday-festive--section > .holiday-festive__lights {
    position: absolute;
}

.holiday-festive__banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.75rem 0 1.25rem;
    padding: 1rem 1rem 1.1rem;
    border-radius: 12px;
    background: #16130f;
    border: 1px solid rgba(212, 166, 52, 0.35);
}

.holiday-festive__banner-text {
    margin: 0;
    color: #f5f5f5;
    font-size: 0.95rem;
    line-height: 1.55;
}

.holiday-festive__banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.holiday-festive__card {
    position: relative;
    border-color: rgba(212, 166, 52, 0.32) !important;
    background:
        linear-gradient(#1f1f1f, #1f1f1f) padding-box,
        linear-gradient(135deg, #8f3a30, #d4a634, #2f5340) border-box !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.holiday-festive__card--featured {
    padding-top: 1rem;
}

.holiday-festive__card-photo {
    display: block;
    margin: 0 0 0.9rem;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #0d0d0d;
}

.holiday-festive__card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.holiday-festive--cta {
    position: relative;
    overflow: hidden;
    border-top-color: rgba(212, 166, 52, 0.35);
    border-bottom-color: rgba(143, 58, 48, 0.35);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 166, 52, 0.16) 0%, transparent 50%),
        linear-gradient(135deg, #1a1410 0%, #1a1a1a 55%, #152016 100%);
}

.holiday-festive--cta .holiday-festive__lights {
    position: absolute;
}

.holiday-festive--cta .cta-banner__title,
.holiday-festive--cta .cta-banner__text {
    position: relative;
    z-index: 1;
}

.holiday-festive--cta .btn {
    position: relative;
    z-index: 1;
}

.holiday-festive-heading {
    color: #f3e2a8;
}

@keyframes holiday-twinkle {
    0%, 100% { opacity: 0.82; filter: drop-shadow(0 0 5px rgba(212, 166, 52, 0.35)); }
    50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(212, 166, 52, 0.65)); }
}

@keyframes holiday-sparkle {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
}

@keyframes holiday-fall {
    0% { transform: translate3d(0, -8%, 0); opacity: 0; }
    12% { opacity: 0.45; }
    100% { transform: translate3d(12px, 108%, 0); opacity: 0; }
}

@media (min-width: 640px) {
    .holiday-festive--section {
        padding: 1.5rem 1.35rem 1.6rem;
    }

    .holiday-festive__banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .holiday-festive__lights,
    .holiday-festive__sparkle,
    .holiday-festive__fall {
        animation: none !important;
    }

    .holiday-festive__lights {
        opacity: 1;
        filter: drop-shadow(0 0 6px rgba(212, 166, 52, 0.35));
    }

    .holiday-festive__sparkle {
        opacity: 0.55;
    }

    .holiday-festive__fall {
        display: none;
    }
}