/* Seasonal themes for Sissy's Cookie Shoppe - layered over cover.css.
   Palette comes from the inline :root vars printed by SeasonalTheme::headHtml(). No images: all art is CSS / inline SVG. */

/* ---------- accent icons (tiny inline SVG data URIs) ---------- */
.season{--ic:none}
.season-christmas{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M30 26C22 14 10 12 2 16c5 2 6 6 4 9 4-1 7 1 7 5 3-3 7-3 9 0 1-3 4-4 8-4z' fill='%231f6b3a'/%3E%3Cpath d='M34 26c8-12 20-14 28-10-5 2-6 6-4 9-4-1-7 1-7 5-3-3-7-3-9 0-1-3-4-4-8-4z' fill='%23287a45'/%3E%3Cpath d='M30 26C22 18 12 16 4 17M34 26c8-8 18-10 26-9' stroke='%23164d2a' stroke-width='1' fill='none'/%3E%3Ccircle cx='28' cy='30' r='5' fill='%23c8202f'/%3E%3Ccircle cx='37' cy='31' r='5' fill='%23b01c2a'/%3E%3Ccircle cx='32' cy='23' r='5' fill='%23d62636'/%3E%3Ccircle cx='30.5' cy='21.5' r='1.5' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='26.5' cy='28.5' r='1.3' fill='%23fff' opacity='.6'/%3E%3C/svg%3E")}
.season-halloween{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M32 10c-2-6 1-9 5-10l1 3c-3 1-4 3-3 7z' fill='%23557a2a'/%3E%3Cellipse cx='22' cy='28' rx='14' ry='16' fill='%23e8741a'/%3E%3Cellipse cx='42' cy='28' rx='14' ry='16' fill='%23e8741a'/%3E%3Cellipse cx='32' cy='28' rx='11' ry='18' fill='%23f38a26'/%3E%3Cpath d='M22 24l6-2-2 7zM42 24l-6-2 2 7zM20 34c6 6 18 6 24 0l-4 1-2-3-3 3-3-3-3 3-2-3z' fill='%23ffd257'/%3E%3C/svg%3E")}
.season-fall{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M20 4l3 9 7-4-2 9 9-1-6 7 5 4-9 1 1 8-6-5-6 5 1-8-9-1 5-4-6-7 9 1-2-9 7 4z' fill='%23c8551e'/%3E%3Cpath d='M20 10v30' stroke='%237a2e0c' stroke-width='1.2'/%3E%3Cellipse cx='46' cy='30' rx='9' ry='10' fill='%23a5652a'/%3E%3Cpath d='M36 24c2-7 18-7 20 0-6-2-14-2-20 0z' fill='%236b4019'/%3E%3Cpath d='M46 18v-5' stroke='%235a3412' stroke-width='2'/%3E%3C/svg%3E")}
.season-valentines{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cdefs%3E%3CradialGradient id='a' cx='35%25' cy='30%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23ff8fb1'/%3E%3Cstop offset='1' stop-color='%23c2185b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M24 42S6 31 6 19c0-6 4-10 9-10 4 0 7 2 9 6 2-4 5-6 9-6 5 0 9 4 9 10 0 12-18 23-18 23z' fill='url(%23a)'/%3E%3Cpath d='M46 30s-9-5-9-11c0-3 2-5 4.5-5 2 0 3.5 1 4.5 3 1-2 2.5-3 4.5-3 2.5 0 4.5 2 4.5 5 0 6-9 11-9 11z' fill='%23e8487a' opacity='.85'/%3E%3C/svg%3E")}
.season-july4{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M22 6l4.7 9.6 10.6 1.5-7.7 7.5 1.8 10.5L22 30.1l-9.4 5 1.8-10.5-7.7-7.5 10.6-1.5z' fill='%23ffffff' stroke='%23c8102e' stroke-width='2'/%3E%3Cpath d='M44 14l2.6 5.3 5.9.9-4.3 4.1 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.1 5.9-.9z' fill='%23c8102e'/%3E%3C/svg%3E")}

/* ---------- banner ---------- */
.season-banner{position:relative;z-index:3;background:var(--season-banner-bg);color:var(--season-banner-fg);box-shadow:inset 0 -1px 0 rgba(0,0,0,.12),0 2px 10px rgba(0,0,0,.08)}
.season-banner .sb-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.65rem 1rem;flex-wrap:wrap;text-align:center}
.season-banner .sb-lead{font-family:'Dancing Script',cursive;font-size:1.55rem;font-weight:700;line-height:1;letter-spacing:.01em}
.season-banner .sb-text{font-size:.92rem;font-weight:700;letter-spacing:.01em;opacity:.95}
.season-banner .sb-btn{display:inline-block;background:var(--season-banner-fg);color:var(--season-banner-bg);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:.45rem .9rem;border-radius:999px;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .15s}
.season-banner .sb-btn:hover{transform:translateY(-1px)}
.season-banner .sb-ic{width:44px;height:33px;background:var(--ic) center/contain no-repeat;flex:none}
.season-banner .sb-ic-r{transform:scaleX(-1)}
.season-preview-note{background:#fff3cd;color:#664d03;text-align:center;font-size:.8rem;padding:.35rem;border-bottom:1px solid #ffe69c;position:relative;z-index:3}

/* ---------- hero + sections ---------- */
.season .hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,var(--pink-mid) 0%,var(--pink-light) 70%)}
.season .hero>*:not(.season-deco){position:relative;z-index:3}
.season .section-title::before,.season .section-title::after{content:"";display:inline-block;width:40px;height:30px;background:var(--ic) center/contain no-repeat;vertical-align:middle;margin:0 .6rem;position:relative;top:-.12em}
.season .section-title::after{transform:scaleX(-1)}
.season .section-eyebrow{color:var(--pink-accent)}
.season .feature-card{border-color:var(--pink-border);border-top:4px solid var(--pink-accent);box-shadow:0 6px 18px -10px rgba(0,0,0,.25);transition:transform .2s}
.season .feature-card:hover{transform:translateY(-3px)}
.season .feature-icon{width:56px;height:56px;margin:0 auto .6rem;border-radius:50%;background:var(--pink-mid);display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.season .gallery-grid img{border:3px solid #fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.season-featured{padding:2.25rem 1.5rem 0;text-align:center}
.season-featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,240px));gap:1rem;justify-content:center;margin-top:.75rem}
.season-featured-grid img,.season-slot{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:3px solid #fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.season-slot{display:flex;align-items:center;justify-content:center;flex-direction:column;border:2px dashed var(--pink-border);color:var(--text-muted);background:var(--pink-mid);font-size:.9rem;box-shadow:none}

/* ---------- effects plumbing: never takes clicks ---------- */
.season-fx,.season-fx *,.season-deco,.season-deco *{pointer-events:none!important;user-select:none}
.season-fx{position:fixed;inset:0;overflow:hidden;z-index:50}
.season-deco{position:absolute;z-index:1}
.season-toggle{position:fixed;left:12px;bottom:12px;z-index:60;font:700 12px/1 Lato,sans-serif;padding:8px 12px 8px 30px;border-radius:999px;border:1px solid var(--pink-border);background:rgba(255,255,255,.94) var(--ic) 6px center/20px 15px no-repeat;color:var(--pink-deep);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.season-toggle:focus-visible{outline:2px solid var(--pink-accent);outline-offset:2px}
.fx-off .season-fx,.fx-off .season-deco{display:none!important}
.p{position:absolute;top:-8vh;will-change:transform}
@keyframes fall{to{transform:translate3d(var(--dx,0),116vh,0)}}
@keyframes sway{0%,100%{margin-left:0}50%{margin-left:var(--sw,30px)}}
@keyframes rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx,0),-120vh,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes tumble{0%{transform:rotate3d(1,.3,0,0deg) rotate(0)}100%{transform:rotate3d(1,.3,0,360deg) rotate(var(--rot,240deg))}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes drift{from{transform:translateX(-12%)}to{transform:translateX(12%)}}

/* ---------- CHRISTMAS ---------- */
.season-christmas .hero{background:radial-gradient(ellipse at 50% 0%,#ffffff 0%,rgba(255,255,255,0) 60%),linear-gradient(#c9dbea 0%,#e2ecf5 55%,#f7fafd 100%)}
.season-christmas .hero h1{color:#1f5a36;text-shadow:0 1px 0 #fff}
.season-christmas .season-banner{background:linear-gradient(#256b41,#1c5533)}
.season-christmas .season-banner::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:repeating-linear-gradient(90deg,#c8202f 0 14px,#fff 14px 28px);opacity:.9}
.drift{position:absolute;z-index:4;pointer-events:none}
.season-christmas .nav-logo,.season-christmas .section-title,.season-christmas .hero h1{position:relative}
.season-christmas .nav-logo .drift{z-index:2}
.drift svg{display:block;width:100%;height:100%;overflow:visible}
.flake{border-radius:50%;background:radial-gradient(circle,#fff 0 45%,rgba(255,255,255,.6) 60%,rgba(255,255,255,0) 72%);animation:fall var(--t) linear infinite,sway calc(var(--t)/2.5) ease-in-out infinite;animation-delay:var(--d)}
.flake.far{filter:blur(.6px);opacity:.55}.flake.mid{opacity:.85}.flake.near{filter:blur(1.6px);opacity:.9}
.season-christmas .flake{box-shadow:0 0 1px rgba(110,140,175,.45)}
.frost{position:fixed;inset:0;z-index:49;pointer-events:none;
  background:radial-gradient(ellipse 22% 30% at 0 0,rgba(255,255,255,.85),rgba(232,242,250,.35) 55%,rgba(255,255,255,0) 75%),
             radial-gradient(ellipse 22% 30% at 100% 0,rgba(255,255,255,.85),rgba(232,242,250,.35) 55%,rgba(255,255,255,0) 75%),
             radial-gradient(ellipse 25% 28% at 0 100%,rgba(255,255,255,.8),rgba(232,242,250,.3) 55%,rgba(255,255,255,0) 75%),
             radial-gradient(ellipse 25% 28% at 100% 100%,rgba(255,255,255,.8),rgba(232,242,250,.3) 55%,rgba(255,255,255,0) 75%)}
.frost svg{position:absolute;width:190px;height:190px;opacity:.55}
.pine{position:absolute;z-index:2;width:300px;top:-8px}

/* ---------- HALLOWEEN ---------- */
.season-halloween .hero{background:linear-gradient(#120a24 0%,#24143d 45%,#3d1f4a 78%,#5a2a3e 100%);border-bottom:0;min-height:420px;padding-bottom:5rem}
.season-halloween .hero h1{color:#ffe7c2;text-shadow:0 0 18px rgba(255,150,50,.45),0 2px 0 rgba(0,0,0,.35)}
.season-halloween .hero p{color:#e8d8ef}
.season-halloween .hero-eyebrow{color:#ffb36b}
.season-halloween .hero .btn-outline-pink{color:#ffcf99;border-color:#ffb36b;background:rgba(20,10,35,.35)}
.season-halloween .hero .btn-outline-pink:hover{background:#ffb36b;color:#24143d}
.season-halloween .season-banner{background:linear-gradient(90deg,#1b1030,#2e1a47 50%,#1b1030);border-bottom:1px solid #4a2a5e}
.season-halloween .season-banner .sb-lead{color:#ffb36b;text-shadow:0 0 10px rgba(255,140,40,.5)}
.season-halloween .gallery-section,.season-halloween main{background:linear-gradient(#f7ece2,#fbf3ec)}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 4px 1px rgba(255,255,255,.6);animation:twinkle var(--t,3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.moon{position:absolute;right:9%;top:38px;width:92px;height:92px;z-index:1}
.trees{position:absolute;bottom:0;height:230px;z-index:1}
.ground{position:absolute;left:0;right:0;bottom:0;height:60px;z-index:1}.ground svg{width:100%;height:100%;display:block}
.fog{position:absolute;left:-20%;right:-20%;height:110px;bottom:-55px;z-index:2;background:radial-gradient(ellipse 30% 60% at 20% 60%,rgba(230,215,240,.32),transparent 70%),radial-gradient(ellipse 35% 55% at 65% 55%,rgba(230,215,240,.28),transparent 70%),radial-gradient(ellipse 25% 50% at 95% 65%,rgba(230,215,240,.3),transparent 70%);filter:blur(6px);animation:drift 26s ease-in-out infinite alternate}
.fog.f2{bottom:-70px;height:140px;opacity:.6;animation-duration:38s;animation-direction:alternate-reverse}
.bat{position:absolute;width:var(--w,34px);z-index:1;animation:batfly var(--t,22s) linear infinite;animation-delay:var(--d,0s);opacity:.9}
.bat svg{display:block;width:100%;animation:flap .32s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
@keyframes batfly{0%{transform:translate(-10vw,0)}25%{transform:translate(25vw,-18px)}50%{transform:translate(55vw,10px)}75%{transform:translate(85vw,-14px)}100%{transform:translate(115vw,4px)}}
.jol{width:var(--w,120px);z-index:2}
.jol svg{display:block;width:100%;height:auto;overflow:visible}
.jol .glow{opacity:calc(var(--f,.9)*1.1 - .1)}
.jol .face{opacity:calc(.25 + var(--f,.9)*.8)}
.jol .hot{opacity:calc((var(--f,.9) - .65)*1.6)}
.jol .halo{opacity:calc(var(--f,.9)*1.05 - .15);transform-box:fill-box;transform-origin:50% 50%;transform:scale(calc(.85 + var(--f,.9)*.18))}
.jol .spill{opacity:calc(var(--f,.9)*1.1 - .1);transform-box:fill-box;transform-origin:50% 50%;transform:scaleX(calc(.85 + var(--f,.9)*.2))}

/* ---------- FALL ---------- */
.season-fall .hero{background:radial-gradient(ellipse at 50% 120%,#f3c58f 0%,rgba(243,197,143,0) 60%),linear-gradient(160deg,#fbe6cc 0%,#fdf3e7 60%,#fff8ef 100%)}
.season-fall .season-banner{background:linear-gradient(90deg,#7a3f15,#9a5220 50%,#7a3f15)}
.season-fall .season-banner .sb-lead{color:#ffd9a3}
.leaf{animation:fall var(--t) linear infinite,sway calc(var(--t)/3) ease-in-out infinite;animation-delay:var(--d)}
.leaf>span{display:block;width:var(--z,26px);height:var(--z,26px);animation:tumble var(--tt,5s) linear infinite}
.leaf svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(80,30,0,.2))}
.harvest{position:absolute;bottom:-4px;z-index:2;width:210px}

/* ---------- VALENTINE'S ---------- */
.season-valentines .hero{background:radial-gradient(circle at 15% 30%,rgba(255,170,200,.55) 0 60px,transparent 120px),radial-gradient(circle at 85% 25%,rgba(255,140,180,.45) 0 40px,transparent 100px),radial-gradient(circle at 75% 85%,rgba(255,190,210,.5) 0 70px,transparent 140px),linear-gradient(160deg,#ffe0ea 0%,#fff0f4 60%,#fff8fa 100%)}
.season-valentines .season-banner{background:linear-gradient(90deg,#a81442,#d6245a 50%,#a81442)}
.season-valentines .season-banner .sb-lead{color:#ffe0ea}
.heart{top:auto;bottom:-10vh;animation:rise var(--t) ease-in infinite,sway calc(var(--t)/3) ease-in-out infinite;animation-delay:var(--d)}
.heart svg{display:block;width:var(--z,20px);height:var(--z,20px)}
.heart.back{filter:blur(2px);opacity:.45}.heart.front{opacity:.85}
.bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,182,206,.35) 45%,rgba(255,182,206,0) 70%);z-index:1;animation:drift var(--t,18s) ease-in-out infinite alternate}

/* ---------- 4TH OF JULY ---------- */
.season-july4 .hero{background:radial-gradient(ellipse at 50% 110%,#2b4a9a 0%,rgba(43,74,154,0) 60%),linear-gradient(#0b1530 0%,#14244d 60%,#1d3a7a 100%);border-bottom:0;min-height:420px}
.season-july4 .hero h1{color:#fff;text-shadow:0 2px 14px rgba(120,160,255,.45)}
.season-july4 .hero p{color:#dbe4ff}
.season-july4 .hero-eyebrow{color:#ff9aa8}
.season-july4 .hero .btn-outline-pink{color:#fff;border-color:#fff;background:rgba(255,255,255,.06)}
.season-july4 .hero .btn-outline-pink:hover{background:#fff;color:#14244d}
.season-july4 .season-banner{background:#1d3a7a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M9 4l1.3 2.7 3 .4-2.2 2.1.5 3L9 10.8l-2.6 1.4.5-3-2.2-2.1 3-.4zM27 22l1.3 2.7 3 .4-2.2 2.1.5 3-2.6-1.4-2.6 1.4.5-3-2.2-2.1 3-.4z' fill='%23ffffff' opacity='.13'/%3E%3C/svg%3E")}
.season-july4 .season-banner::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:repeating-linear-gradient(90deg,#c8102e 0 18px,#fff 18px 36px)}
.fwcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.spcanvas{position:absolute;pointer-events:none;z-index:4}

@media (max-width:600px){.season-toggle{bottom:10px;left:10px}.jol.side,.trees,.pine,.harvest{display:none}.moon{width:64px;height:64px;right:6%}.season .section-title::before,.season .section-title::after{width:26px;height:20px;margin:0 .3rem}.season-banner .sb-ic{display:none}.season-banner .sb-lead{font-size:1.3rem}}
@media (prefers-reduced-motion:reduce){.p,.bat,.fwcanvas,.spcanvas{display:none!important}.star,.fog,.bokeh{animation:none!important}}