/* Seasonal event themes: applied while an event is live, through
   html[data-site-event] (see app/functions/site/events.php). Loaded last so the
   accents win over the regular yellow ones. */

html[data-site-event="valentine"] {
    --event-a: #ff4d7d;
    --event-b: #ff8fab;
    --event-c: #ffc2d1;
    --event-ink: #2a0611;
    --event-line: linear-gradient(90deg, transparent, #ff4d7d 25%, #ffc2d1 50%, #ff4d7d 75%, transparent);
    --event-ribbon: linear-gradient(90deg, #3a0d1c, #5c1530 50%, #3a0d1c);
}

html[data-site-event="pride"] {
    --event-a: #ff9f43;
    --event-b: #4dabf7;
    --event-c: #ffffff;
    --event-ink: #111215;
    --event-line: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982);
    --event-ribbon: linear-gradient(90deg, rgba(228, 3, 3, 0.32), rgba(255, 140, 0, 0.32), rgba(255, 237, 0, 0.28), rgba(0, 128, 38, 0.32), rgba(36, 64, 142, 0.4), rgba(115, 41, 130, 0.4)), #15161a;
}

html[data-site-event="halloween"] {
    --event-a: #ff7a1a;
    --event-b: #a24bff;
    --event-c: #ffb15c;
    --event-ink: #1c0b00;
    --event-line: linear-gradient(90deg, transparent, #a24bff 20%, #ff7a1a 50%, #a24bff 80%, transparent);
    --event-ribbon: linear-gradient(90deg, #1d0f2e, #3a1606 50%, #1d0f2e);
}

html[data-site-event="christmas"] {
    --event-a: #e8394a;
    --event-b: #2fbf71;
    --event-c: #f5d06f;
    --event-ink: #1d0306;
    --event-line: linear-gradient(90deg, transparent, #2fbf71 25%, #f5d06f 50%, #e8394a 75%, transparent);
    --event-ribbon: linear-gradient(90deg, #0d2a1a, #3a0c12 50%, #0d2a1a);
}

/* Ribbon under the menu */
.site-event-ribbon {
    display: none;
}

html[data-site-event] .site-event-ribbon {
    position: relative;
    z-index: 1031;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 40px;
    padding: 8px 52px;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: center;
    background: var(--event-ribbon);
}

html[data-site-event] .site-event-ribbon[hidden] {
    display: none;
}

.site-event-ribbon-glyph {
    color: var(--event-c);
    font-size: 0.9rem;
}

.site-event-ribbon strong {
    font-weight: 700;
}

.site-event-ribbon a {
    color: var(--event-c);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.site-event-ribbon a:hover,
.site-event-ribbon a:focus {
    color: #fff;
    text-decoration: underline;
}

.site-event-ribbon-close {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 28px;
    height: 28px;
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    background: transparent;
    transform: translateY(-50%);
}

.site-event-ribbon-close:hover,
.site-event-ribbon-close:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.site-event-ribbon-arrow {
    display: inline-block;
}

html[dir="rtl"] .site-event-ribbon-arrow {
    transform: scaleX(-1);
}

html[dir="rtl"] .site-event-ribbon-close {
    right: auto;
    left: 14px;
}

/* Accents: menu line, active link, logo and footer line */
html[data-site-event] .site-navbar::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    content: "";
    pointer-events: none;
    background: var(--event-line);
    opacity: 0.85;
}

html[data-site-event] .site-nav-links .nav-link::after {
    background: var(--event-a);
}

html[data-site-event="pride"] .site-nav-links .nav-link::after {
    background: var(--event-line);
}

html[data-site-event] .site-brand-symbol {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 22px color-mix(in srgb, var(--event-a) 45%, transparent);
}

html[data-site-event] .site-footer::before {
    width: 60%;
    left: 20%;
    background: var(--event-line);
}

/* Ambient particles */
.site-event-ambient {
    display: none;
}

html[data-site-event] .site-event-ambient {
    position: fixed;
    inset: 0;
    z-index: 1020;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.site-event-ambient span {
    position: absolute;
    left: var(--x);
    opacity: 0;
    will-change: transform, opacity;
}

/* Christmas: slow snowfall */
html[data-site-event="christmas"] .site-event-ambient span {
    top: -12px;
    width: calc(6px * var(--s));
    height: calc(6px * var(--s));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    animation: siteEventFall var(--d) linear var(--delay) infinite;
}

/* Saint Valentine: hearts drifting up */
html[data-site-event="valentine"] .site-event-ambient span {
    bottom: -20px;
    width: calc(10px * var(--s));
    height: calc(10px * var(--s));
    background: var(--event-b);
    transform: rotate(45deg);
    animation: siteEventRise var(--d) ease-in var(--delay) infinite;
}

html[data-site-event="valentine"] .site-event-ambient span::before,
html[data-site-event="valentine"] .site-event-ambient span::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 50%;
    background: inherit;
}

html[data-site-event="valentine"] .site-event-ambient span::before {
    left: -50%;
}

html[data-site-event="valentine"] .site-event-ambient span::after {
    top: -50%;
}

/* Halloween: glowing embers rising */
html[data-site-event="halloween"] .site-event-ambient span {
    bottom: -12px;
    width: calc(5px * var(--s));
    height: calc(5px * var(--s));
    border-radius: 50%;
    background: var(--event-c);
    box-shadow: 0 0 8px var(--event-a), 0 0 16px rgba(255, 122, 26, 0.5);
    animation: siteEventRise var(--d) ease-out var(--delay) infinite;
}

html[data-site-event="halloween"] .site-event-ambient span:nth-child(3n) {
    background: #c99bff;
    box-shadow: 0 0 8px var(--event-b), 0 0 16px rgba(162, 75, 255, 0.45);
}

/* Pride: soft rainbow sparkles */
html[data-site-event="pride"] .site-event-ambient span {
    bottom: -12px;
    width: calc(5px * var(--s));
    height: calc(5px * var(--s));
    border-radius: 50%;
    animation: siteEventRise var(--d) ease-out var(--delay) infinite;
}

html[data-site-event="pride"] .site-event-ambient span:nth-child(6n + 1) { background: #ff5c5c; }
html[data-site-event="pride"] .site-event-ambient span:nth-child(6n + 2) { background: #ffa94d; }
html[data-site-event="pride"] .site-event-ambient span:nth-child(6n + 3) { background: #ffe066; }
html[data-site-event="pride"] .site-event-ambient span:nth-child(6n + 4) { background: #51cf66; }
html[data-site-event="pride"] .site-event-ambient span:nth-child(6n + 5) { background: #4dabf7; }
html[data-site-event="pride"] .site-event-ambient span:nth-child(6n) { background: #b197fc; }

@keyframes siteEventFall {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }

    10% {
        opacity: 0.85;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: translate3d(28px, 105vh, 0);
    }
}

@keyframes siteEventRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }

    12% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.45;
    }

    100% {
        opacity: 0;
        transform: translate3d(-24px, -70vh, 0) rotate(45deg);
    }
}

@media (max-width: 575.98px) {
    html[data-site-event] .site-event-ribbon {
        flex-wrap: wrap;
        gap: 4px 10px;
        padding: 8px 44px;
        font-size: 0.76rem;
    }

    /* Fewer particles on phones. */
    .site-event-ambient span:nth-child(even) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-site-event] .site-event-ambient {
        display: none;
    }
}