/* HIRO — seasonal themes (auto by month via season.js) · data-season on <html>: summer | halloween | noel | tet */

/* ---------- palettes ---------- */
html[data-season=halloween]{--cream:#F2EAE2;--cream-2:#FAF5EF;--sand:#E7DACF;--sand-deep:#D8C6B6;--espresso:#1B1322;--espresso-2:#241A2E;--ink:#2A2230;--muted:#83716A;--gold:#C2742A;--gold-deep:#9C5A17;--gold-soft:#E89C4E}
html[data-season=noel]{--cream:#F5F1EA;--cream-2:#FBF9F4;--sand:#E6E1D6;--sand-deep:#D7D0C1;--espresso:#0E261F;--espresso-2:#133129;--ink:#1F2A26;--gold:#B4893B;--gold-deep:#8C6823;--gold-soft:#DDBC6C;--xmas-red:#A82F38}
html[data-season=tet]{--cream:#F9F1E2;--cream-2:#FDF8EE;--sand:#F1E3C8;--sand-deep:#E6D3AE;--espresso:#5E1216;--espresso-2:#6E181C;--ink:#3A1E1A;--muted:#8A6A5A;--gold:#C9A04A;--gold-deep:#A47F2C;--gold-soft:#EACB7A}

/* ---------- hero treatments ---------- */
.hero{position:relative}
.hero::before{content:"";position:absolute;pointer-events:none;z-index:1;border-radius:50%}
html[data-season=summer] .hero::before{top:-12%;right:-6%;width:clamp(260px,34vw,560px);aspect-ratio:1;background:radial-gradient(circle,rgba(255,214,150,.55) 0%,rgba(255,190,110,.25) 35%,transparent 70%);animation:sun-glow 7s ease-in-out infinite}
html[data-season=halloween] .hero::before{top:13%;right:9%;width:clamp(84px,9vw,140px);aspect-ratio:1;background:radial-gradient(circle at 42% 40%,#FFF6DF 0%,#F3DCA8 55%,#DDBB7A 100%);box-shadow:0 0 50px 16px rgba(255,222,160,.35),0 0 150px 60px rgba(255,190,110,.14);animation:moon-breathe 9s ease-in-out infinite}
html[data-season=halloween] .hero-img img{filter:sepia(.28) saturate(1.15) contrast(1.05)}
html[data-season=halloween] .hero-img::after{background:linear-gradient(180deg,rgba(24,12,34,.66) 0%,rgba(24,12,34,.18) 34%,rgba(24,12,34,.36) 64%,rgba(18,10,26,.92) 100%)}
html[data-season=noel] .hero-img img{filter:saturate(.9) brightness(.96)}
html[data-season=noel] .hero-img::after{background:linear-gradient(180deg,rgba(8,30,24,.62) 0%,rgba(8,30,24,.14) 34%,rgba(8,30,24,.34) 64%,rgba(6,24,18,.9) 100%)}
html[data-season=noel] .hero::before{top:9%;right:8%;width:clamp(120px,14vw,200px);aspect-ratio:1;background:radial-gradient(circle,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 40%,transparent 70%)}
html[data-season=tet] .hero-img img{filter:saturate(1.12) sepia(.12)}
html[data-season=tet] .hero-img::after{background:linear-gradient(180deg,rgba(60,8,10,.62) 0%,rgba(60,8,10,.16) 34%,rgba(60,8,10,.34) 64%,rgba(50,6,8,.92) 100%)}
html[data-season=tet] .hero::before{top:-10%;right:-4%;width:clamp(260px,34vw,560px);aspect-ratio:1;background:radial-gradient(circle,rgba(234,203,122,.45) 0%,rgba(234,203,122,.16) 38%,transparent 70%)}
@keyframes moon-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* ---------- seasonal band (reuses .summer layout) ---------- */
html:not([data-season=summer]) .summer .sun,html:not([data-season=summer]) .summer .ocean{display:none}
html:not([data-season=summer]) .summer{padding-bottom:clamp(72px,9vw,120px)}
html:not([data-season=summer]) .summer-copy .eyebrow{color:var(--gold-soft)}
html:not([data-season=summer]) .summer-copy .eyebrow::before,html:not([data-season=summer]) .summer-copy .eyebrow::after{background:var(--gold-soft)}
html:not([data-season=summer]) .summer-copy h2{color:var(--cream-2)}
html:not([data-season=summer]) .summer-copy h2 em{color:var(--gold-soft)}
html:not([data-season=summer]) .summer-copy p{color:rgba(250,245,239,.8)}
.band-deco{display:none;position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
html:not([data-season=summer]) .band-deco{display:block}
html[data-season=halloween] .summer{background:radial-gradient(ellipse at 50% 125%,#3B2545 0%,#241830 45%,#17101F 100%)}
html[data-season=halloween] .band-deco::before{content:"";position:absolute;top:12%;left:9%;width:clamp(56px,6vw,90px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 42% 40%,#FFF6DF,#F3DCA8 55%,#DDBB7A);box-shadow:0 0 40px 12px rgba(255,222,160,.3)}
html[data-season=halloween] .band-deco::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-20px;height:46%;background:radial-gradient(ellipse at 30% 100%,rgba(190,170,215,.32),transparent 62%),radial-gradient(ellipse at 72% 100%,rgba(205,185,230,.26),transparent 60%);filter:blur(22px);animation:fog-drift 16s ease-in-out infinite alternate}
html[data-season=noel] .summer{background:linear-gradient(180deg,#0C221B 0%,#143A30 100%)}
html[data-season=noel] .band-deco::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 28%,rgba(255,255,255,.08),transparent 28%),radial-gradient(circle at 82% 22%,rgba(255,255,255,.07),transparent 26%)}
html[data-season=noel] .band-deco::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(to top,rgba(255,255,255,.92),rgba(255,255,255,.55) 45%,transparent);clip-path:ellipse(70% 100% at 50% 100%)}
html[data-season=tet] .summer{background:linear-gradient(180deg,#5E1216 0%,#8C2126 100%)}
html[data-season=tet] .band-deco::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 110%,rgba(234,203,122,.35),transparent 55%),repeating-radial-gradient(circle at 50% 50%,transparent 0 22px,rgba(234,203,122,.05) 22px 23px)}
html[data-season=tet] .band-deco .lantern{position:absolute;top:-6px}
html[data-season=tet] .band-deco .l-left{left:7%}
html[data-season=tet] .band-deco .l-right{right:7%;animation-delay:-2.2s}
html[data-season=tet] .summer .btn-gold{color:#3A1E1A}
html[data-season=tet] .summer .btn-gold:hover{color:#fff}
@keyframes fog-drift{from{transform:translateX(-5%)}to{transform:translateX(5%)}}

/* ---------- fixed overlays ---------- */
html:not([data-season=summer]) .beach-overlay{display:none}
.season-overlay{position:fixed;inset:0;pointer-events:none;z-index:74}
/* halloween: cobwebs + fog */
.web{position:absolute;top:0;width:clamp(120px,16vw,230px);height:auto;fill:none;stroke:#D8CFE0;stroke-width:1.2;opacity:.6;mix-blend-mode:difference}
.web-l{left:0}
.web-r{right:0;transform:scaleX(-1)}
.fog{position:absolute;left:-30%;right:-30%;bottom:-30px;height:clamp(90px,15vh,170px);background:radial-gradient(ellipse at 28% 100%,rgba(185,165,210,.34),transparent 60%),radial-gradient(ellipse at 70% 100%,rgba(200,180,225,.28),transparent 58%);filter:blur(18px);animation:fog-drift 18s ease-in-out infinite alternate}
/* noel: string lights + ground haze */
.lights{position:fixed;top:0;left:0;right:0;height:22px;display:flex;justify-content:space-evenly;z-index:101;pointer-events:none}
.lights::before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:rgba(120,110,95,.35)}
.bulb{width:9px;height:13px;margin-top:4px;border-radius:50% 50% 50% 50%/42% 42% 58% 58%;background:var(--c);box-shadow:0 0 9px 2px var(--c);animation:twinkle 2.6s ease-in-out infinite;animation-delay:var(--d)}
.bulb::before{content:"";position:absolute;width:5px;height:3px;background:#5e5a52;margin:-3px 0 0 2px;border-radius:1px}
.bulb:nth-child(4n+1){--c:#E04646}.bulb:nth-child(4n+2){--c:#F3C65A}.bulb:nth-child(4n+3){--c:#4FB87A}.bulb:nth-child(4n){--c:#FFF4E0}
@keyframes twinkle{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:.55;filter:brightness(.7)}}
.snowdrift{position:absolute;left:0;right:0;bottom:0;height:clamp(36px,6vh,64px);background:linear-gradient(to top,rgba(255,255,255,.55),transparent)}
/* tet: lanterns */
.lantern{position:absolute;top:0;width:54px;transform-origin:50% 0;animation:lantern-sway 4.6s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(60,8,10,.35))}
.lantern::before{content:"";display:block;width:2px;height:64px;margin:0 auto;background:linear-gradient(#D9B55A,#C9A04A)}
.lantern i{display:block}
.lantern .cap{width:26px;height:8px;margin:0 auto;background:linear-gradient(#EACB7A,#C9A04A);border-radius:2px}
.lantern .body{width:54px;height:66px;margin:-1px auto;position:relative;border-radius:50%/44%;background:radial-gradient(ellipse at 42% 38%,#F05A4A 0%,#D62B2E 45%,#A5171E 100%);box-shadow:inset -9px 0 14px rgba(0,0,0,.25),0 0 26px rgba(255,130,70,.45)}
.lantern .body::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.09) 9px 11px)}
.lantern .tassel{width:4px;height:34px;margin:0 auto;background:linear-gradient(#EACB7A 0 8px,#C9372C 8px);border-radius:0 0 2px 2px}
.so-tet .l-left{left:5vw}
.so-tet .l-right{right:5vw;animation-delay:-2.3s}
@keyframes lantern-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media(max-width:700px){.lantern{transform:scale(.72);transform-origin:50% 0}.so-tet .l-left{left:2vw}.so-tet .l-right{right:2vw}.web{opacity:.45}.lights .bulb:nth-child(n+17){display:none}}
@media(prefers-reduced-motion:reduce){.lantern,.bulb,.fog,.band-deco::after,.hero::before{animation:none}}