/**
 * THE FIRST BEAT - SEASONAL STYLES
 * Colors, strips and effects are set by seasons.js (inline CSS variables, so a season
 * always beats the Rock / Lo-Fi theme). This file holds the shared look + special effects.
 */

/* ---------- navbar top strip + hero glow (all seasons) ---------- */
body[class*="season-"] .navbar::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: var(--strip-h, 5px);
    background: var(--season-strip); background-repeat: repeat-x;
    z-index: 2000; pointer-events: none;
}
body.season-christmas .navbar::after,
body.season-ber-months .navbar::after { animation: bulbTwinkle 1.8s ease-in-out infinite alternate; }
@keyframes bulbTwinkle { from { opacity: 0.55; } to { opacity: 1; } }

/* Mobile: once you scroll, the navbar becomes a floating rounded pill. A strip along its edge looks
   awkward on a curve, so in the pill the season shows as a colored outline + soft glow instead. */
@media (max-width: 1140px) {
    body[class*="season-"] .navbar.scrolled-pill::after { display: none; }
    body[class*="season-"] .navbar.scrolled-pill {
        border-color: var(--accent-primary) !important;
        border-color: color-mix(in srgb, var(--accent-primary) 60%, transparent) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(255,255,255,0.08), 0 15px 30px rgba(0,0,0,0.5), 0 0 22px var(--season-glow, transparent) !important;
    }
}

body[class*="season-"] .hero { box-shadow: inset 0 -140px 180px -110px var(--season-glow, transparent); }

/* ---------- full-screen ambience layer (under the navbar, never clickable) ---------- */
#seasonOverlay { position: fixed; inset: 0; pointer-events: none; z-index: 800; box-shadow: inset 0 0 150px -30px var(--season-glow, transparent); }
#seasonOverlay::before, #seasonOverlay::after { content: ''; position: absolute; pointer-events: none; }

.so-halloween::before {                     /* drifting fog */
    left: -20%; right: -20%; bottom: 0; height: 260px; filter: blur(18px);
    background: radial-gradient(ellipse at 30% 100%, rgba(200,200,225,.20), transparent 60%), radial-gradient(ellipse at 75% 100%, rgba(249,115,22,.16), transparent 60%);
    animation: fogDrift 18s ease-in-out infinite alternate;
}
.so-halloween::after { inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(249,115,22,.14)); animation: candle 3.5s steps(1) infinite; }
@keyframes fogDrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes candle { 0%, 100% { opacity: 1; } 12% { opacity: .55; } 30% { opacity: .9; } 52% { opacity: .5; } 70% { opacity: 1; } 85% { opacity: .7; } }

.so-summer::before { inset: 0; background: radial-gradient(circle at 94% -6%, rgba(253,186,116,.50), transparent 42%); animation: sunPulse 6s ease-in-out infinite alternate; }
@keyframes sunPulse { from { opacity: .6; } to { opacity: 1; } }

.so-jazz-day::before { inset: 0; background: radial-gradient(ellipse 45% 70% at 50% -10%, rgba(147,197,253,.28), transparent 70%); }

.so-back-to-school::before { inset: 0; background: repeating-linear-gradient(transparent 0 31px, rgba(96,165,250,.06) 31px 32px); }

.so-anniversary::before { inset: 0; background: radial-gradient(ellipse at 50% -10%, rgba(251,191,36,.30), transparent 55%), radial-gradient(circle at 50% 125%, rgba(251,191,36,.14), transparent 50%); animation: sunPulse 5s ease-in-out infinite alternate; }
.so-anniversary.so-day::after { inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,235,170,.10) 50%, transparent 60%); animation: shineSweep 7s ease-in-out infinite; }
@keyframes shineSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* anniversary: gold buttons + glowing logo all day */
body.season-anniversary .btn-primary, body.season-anniversary .nav-enroll-btn { box-shadow: 0 0 24px rgba(251,191,36,.5); }
body.season-anniversary .logo-img { animation: logoGlow 3s ease-in-out infinite alternate; }
@keyframes logoGlow { from { filter: drop-shadow(0 0 4px rgba(251,191,36,.5)); } to { filter: drop-shadow(0 0 16px rgba(251,191,36,.95)); } }

body.season-chin-birthday .logo-img { filter: drop-shadow(0 0 10px rgba(236,72,153,.8)); }

/* halloween spiderwebs on the program cards */
body.season-halloween .program-card::before {
    content: ''; position: absolute; top: 0; right: 0; width: 90px; height: 90px; opacity: .85; z-index: 5; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='white' stroke-width='1.3' fill='none'%3E%3Cpath d='M100 0L0 0M100 0L0 35M100 0L0 70M100 0L35 100M100 0L70 100M100 0L100 100'/%3E%3Ccircle cx='100' cy='0' r='25'/%3E%3Ccircle cx='100' cy='0' r='50'/%3E%3Ccircle cx='100' cy='0' r='75'/%3E%3C/g%3E%3C/svg%3E") no-repeat top right / contain;
}
body.season-halloween .hero h1 { color: #f97316; }

/* ---------- greeting popup ---------- */
.sg { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow: hidden;
      background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.72), rgba(0,0,0,.93)); backdrop-filter: blur(8px);
      animation: sgIn .6s ease backwards; }
.sg.out { opacity: 0; transition: opacity .5s ease; }
@keyframes sgIn { from { opacity: 0; } to { opacity: 1; } }
.sg-card { position: relative; z-index: 1; text-align: center; max-width: 560px; width: 100%; padding: 2.6rem 2rem; border-radius: 28px;
           background: linear-gradient(145deg, rgba(48,62,90,.60), rgba(12,18,32,.72)); border: 1px solid rgba(255,255,255,.22);
           backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
           box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.06), 0 0 90px var(--season-glow, transparent), 0 30px 80px rgba(0,0,0,.6);
           animation: sgPop .7s cubic-bezier(.2,1.2,.3,1) .15s backwards; }
@keyframes sgPop { from { opacity: 0; transform: translateY(30px) scale(.9); } to { opacity: 1; transform: none; } }
.sg-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 35%, rgba(255,255,255,0) 60%); }
.sg-card > * { position: relative; }
.sg-emoji { font-size: 4.5rem; line-height: 1.1; animation: sgBounce 1.6s ease-in-out infinite; }
@keyframes sgBounce { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
.sg h2 { font-size: clamp(1.7rem, 5vw, 2.7rem); color: var(--accent-primary); margin: .6rem 0 .8rem; }
.sg p { max-width: 440px; margin: 0 auto 1.6rem; }
.sg .sg-btn { border: none; font-family: inherit; cursor: pointer; }

/* anniversary: stage curtains open, THEN the card appears */
.sg-anniv .sg-card { animation-delay: 1.5s; }
.sg-curtain { position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 2;
    background: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 16px, transparent 16px 32px), linear-gradient(90deg, #7f1d1d, #b91c1c 45%, #7f1d1d);
    box-shadow: 0 0 60px rgba(0,0,0,.7); }
.sg-curtain.l { left: 0; animation: curtainL 1.9s cubic-bezier(.7,0,.2,1) .6s forwards; }
.sg-curtain.r { right: 0; animation: curtainR 1.9s cubic-bezier(.7,0,.2,1) .6s forwards; }
@keyframes curtainL { to { transform: translateX(-104%); } }
@keyframes curtainR { to { transform: translateX(104%); } }

/* ---------- announcement bar + preview badge ---------- */
#seasonBar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1400; display: flex; align-items: center; gap: .8rem;
    max-width: calc(100vw - 24px); padding: .55rem .6rem .55rem 1.1rem; border-radius: 999px; font-size: .92rem; color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.03)), rgba(15,23,42,.50);
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.40), inset 0 -1px 0 rgba(255,255,255,.08), 0 8px 30px rgba(0,0,0,.45), 0 0 22px var(--season-glow, transparent);
    animation: barIn .6s cubic-bezier(.2,1.2,.3,1) 1.2s backwards; }
@keyframes barIn { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translateX(-50%); } }
.sb-cta { white-space: nowrap; padding: .4rem .9rem; border-radius: 999px; background: var(--accent-primary); color: #000; font-weight: 700; }
.sb-x { background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer; font-size: 1rem; padding: .3rem .5rem; }
.sb-x:hover { color: #fff; }

#seasonPreviewBadge { position: fixed; left: 16px; top: 96px; z-index: 5000; padding: 8px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.85); color: #fff; font: 600 13px Inter, sans-serif; }

@media (max-width: 640px) {
    #seasonBar { flex-wrap: wrap; justify-content: center; border-radius: 22px; bottom: 12px; padding: .6rem 1rem; text-align: center; }
    .sg-emoji { font-size: 3.6rem; }
}

/* solid fallbacks: no backdrop-filter support, or "reduce transparency" is on */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sg-card { background: linear-gradient(145deg, #1e293b, #0c1220); }
    #seasonBar { background: rgba(15,23,42,.96); }
}
@media (prefers-reduced-transparency: reduce) {
    .sg-card { background: linear-gradient(145deg, #1e293b, #0c1220); backdrop-filter: none; -webkit-backdrop-filter: none; }
    #seasonBar { background: rgb(15,23,42); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .sg-card::before { display: none; }
}