/* Seasonal themes for the public pages. Selected by the data-theme
   attribute on <html> (set server-side from theme_helpers.php). Each theme
   mostly re-points the color variables from style.css; a few rules with
   hardcoded blue tints get overrides so they don't clash. */

/* ---------- Shared: falling particles + header garland (js/theme.js) ---------- */

.theme-fall-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 900;
}
.theme-particle {
    position: absolute;
    top: -40px;
    will-change: transform;
    animation-name: theme-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.theme-particle svg { display: block; width: 100%; height: 100%; }
.theme-particle > span {
    display: block;
    width: 100%;
    height: 100%;
    animation: theme-sway ease-in-out infinite alternate;
    animation-duration: inherit;
}
@keyframes theme-fall {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(100vh + 80px)); }
}
@keyframes theme-sway {
    from { transform: translateX(-30px) rotate(-40deg); }
    to   { transform: translateX(30px) rotate(50deg); }
}

.theme-garland {
    height: 22px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
}
.theme-garland svg { width: 16px; height: 16px; flex-shrink: 0; }
.theme-garland svg:nth-child(odd) { transform: rotate(-40deg); }
.theme-garland svg:nth-child(even) { transform: rotate(40deg); }

/* Reduced-motion visitors: js/theme.js makes fewer, slower particles;
   here they also stop swaying and spinning. */
.theme-gentle .theme-particle > span { animation: none; transform: rotate(20deg); }

/* ---------- Per-theme tints ----------
   Each theme below sets the style.css color variables plus these:
     --t-hero-sub   paragraph text on the colored hero/page banners
     --t-cta-sub    paragraph text on the CTA banner
     --t-tint / --t-tint-2 / --t-tint-fg / --t-tint-border
                    light tinted boxes (badges, flash messages, map, garland) */

html[data-theme]:not([data-theme="default"]) .hero-text p,
html[data-theme]:not([data-theme="default"]) .page-hero p { color: var(--t-hero-sub); }
html[data-theme]:not([data-theme="default"]) .cta p { color: var(--t-cta-sub); }
html[data-theme]:not([data-theme="default"]) .card .badge,
html[data-theme]:not([data-theme="default"]) .flash {
    background: var(--t-tint); color: var(--t-tint-fg); border-color: var(--t-tint-border);
}
html[data-theme]:not([data-theme="default"]) .map-placeholder {
    background: repeating-linear-gradient(45deg, var(--t-tint), var(--t-tint) 10px, var(--t-tint-2) 10px, var(--t-tint-2) 20px);
    border-color: var(--t-tint-border);
}
html[data-theme]:not([data-theme="default"]) .site-header { border-bottom-color: var(--t-tint-border); }
.theme-garland { background: var(--t-tint-2); border-bottom: 1px solid var(--t-tint-border); }

/* ---------- Fall: amber & brown, red buttons ---------- */
html[data-theme="fall"] {
    --blue: #b45309; --blue-dark: #7c2d12; --orange: #b91c1c; --orange-dark: #991b1b;
    --bg: #fdf8f1; --border: #eddfcb;
    --t-hero-sub: #fde8c8; --t-cta-sub: #fde4e4;
    --t-tint: #fdf0dc; --t-tint-2: #fef6ea; --t-tint-fg: #92400e; --t-tint-border: #f3d6a8;
}

/* ---------- Winter: icy steel blue ---------- */
html[data-theme="winter"] {
    --blue: #2f6690; --blue-dark: #16324f; --orange: #0369a1; --orange-dark: #075985;
    --bg: #f3f8fc; --border: #dbe7f2;
    --t-hero-sub: #dbeafe; --t-cta-sub: #e0f2fe;
    --t-tint: #e3eef8; --t-tint-2: #f1f7fc; --t-tint-fg: #1e4f7a; --t-tint-border: #bfd6ea;
}

/* ---------- Christmas: red banners, green buttons ---------- */
html[data-theme="christmas"] {
    --blue: #b91c1c; --blue-dark: #7f1d1d; --orange: #15803d; --orange-dark: #166534;
    --bg: #fbf8f4; --border: #ecdcd6;
    --t-hero-sub: #fde2e2; --t-cta-sub: #dcfce7;
    --t-tint: #e8f5ec; --t-tint-2: #f4faf6; --t-tint-fg: #166534; --t-tint-border: #bfe3cb;
}

/* ---------- Halloween: purple banners, orange buttons ---------- */
html[data-theme="halloween"] {
    --blue: #6b21a8; --blue-dark: #2e1065; --orange: #ea580c; --orange-dark: #c2410c;
    --bg: #faf7fc; --border: #e9dff2;
    --t-hero-sub: #ead9f7; --t-cta-sub: #ffedd5;
    --t-tint: #f3e8ff; --t-tint-2: #faf5ff; --t-tint-fg: #6b21a8; --t-tint-border: #dcc5f2;
}

/* Halloween scene (js/theme.js halloweenScene): witch + ghost flying
   across, and a ghost peeking from behind a jack-o'-lantern in the corner.
   Sits under popups/lightbox (z-index 1000) and never takes clicks. */
.halloween-scene { position: fixed; inset: 0; pointer-events: none; z-index: 950; overflow: hidden; }
.halloween-scene svg { display: block; width: 100%; height: auto; }

.hw-corner { position: absolute; right: 14px; bottom: 10px; width: 84px; height: 150px; overflow: hidden; }
.hw-lantern { position: absolute; left: 0; bottom: 0; width: 84px; z-index: 2; }
.hw-peek {
    position: absolute; left: 14px; bottom: 6px; width: 56px; z-index: 1;
    transform: translateY(26px);
    animation: hw-peek 7s ease-in-out infinite;
}
.hw-boo {
    position: absolute; top: -28px; left: 2px;
    background: #fff; color: #3b0764; border: 2px solid #3b0764; border-radius: 12px;
    font: 800 13px/1 sans-serif; padding: 5px 8px; white-space: nowrap;
    opacity: 0;
    animation: hw-boo 7s ease-in-out infinite;
}
@keyframes hw-peek {
    0%, 50%  { transform: translateY(26px); }
    60%, 85% { transform: translateY(-52px); }
    95%, 100% { transform: translateY(26px); }
}
@keyframes hw-boo {
    0%, 62%  { opacity: 0; }
    66%, 82% { opacity: 1; }
    86%, 100% { opacity: 0; }
}
.halloween-scene.is-still .hw-peek { animation: none; transform: translateY(-30px); }
.halloween-scene.is-still .hw-boo { display: none; }

.hw-fly { position: absolute; left: 0; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
.hw-bob { animation: hw-bob 1.6s ease-in-out infinite alternate; }
.hw-witch { top: 92px; width: 130px; animation-name: hw-fly-right; animation-duration: 30s; animation-delay: 2s; }
.hw-ghost { top: 55vh; width: 60px; opacity: 0.85; animation-name: hw-fly-left; animation-duration: 26s; animation-delay: 11s; }
@keyframes hw-fly-right {
    0%   { transform: translateX(-180px); }
    45%  { transform: translateX(calc(100vw + 40px)); }
    100% { transform: translateX(calc(100vw + 40px)); }
}
@keyframes hw-fly-left {
    0%   { transform: translateX(100vw); }
    50%  { transform: translateX(-120px); }
    100% { transform: translateX(-120px); }
}
@keyframes hw-bob {
    from { transform: translateY(-10px); }
    to   { transform: translateY(10px); }
}
@media (max-width: 720px) {
    .hw-corner { transform: scale(0.75); transform-origin: bottom right; }
    .hw-witch { width: 95px; }
}

/* ---------- Lunar New Year (Tết): red & gold ---------- */
html[data-theme="tet"] {
    --blue: #c8102e; --blue-dark: #7a0a1c; --orange: #facc15; --orange-dark: #eab308;
    --bg: #fffaf0; --border: #f3e1c0;
    --t-hero-sub: #fff1c2; --t-cta-sub: #7a0a1c;
    --t-tint: #fef3c7; --t-tint-2: #fffbeb; --t-tint-fg: #9a3412; --t-tint-border: #f5d98b;
}

/* Bright gold is too light for white text: buttons and the CTA banner use
   deep red text instead, and the gold eyebrow labels use a darker gold. */
html[data-theme="tet"] .btn-primary,
html[data-theme="tet"] .cta { color: #7a0a1c; }
html[data-theme="tet"] .cta .btn { color: #7a0a1c !important; } /* beats the inline color on index.php */
html[data-theme="tet"] .eyebrow { color: #a16207; }

/* ---------- Spring: blossom pink, green buttons ---------- */
html[data-theme="spring"] {
    --blue: #be185d; --blue-dark: #831843; --orange: #16a34a; --orange-dark: #15803d;
    --bg: #fdf7f9; --border: #f3dde6;
    --t-hero-sub: #fce7f3; --t-cta-sub: #dcfce7;
    --t-tint: #fce7f3; --t-tint-2: #fdf2f8; --t-tint-fg: #9d174d; --t-tint-border: #f5c6dc;
}

/* ---------- Summer: bright teal, orange buttons ---------- */
html[data-theme="summer"] {
    --blue: #0891b2; --blue-dark: #155e75; --orange: #f97316; --orange-dark: #ea580c;
    --bg: #f4fbfc; --border: #d5edf1;
    --t-hero-sub: #cffafe; --t-cta-sub: #fff2e6;
    --t-tint: #e0f7fa; --t-tint-2: #f0fbfd; --t-tint-fg: #0e7490; --t-tint-border: #b3e5ee;
}