/* Seasonal fun on the homepage (inc/seasons.php). Loaded only on the homepage, only while a season is on.
   Everything here is added on top of the approved design; nothing outside .season-* changes the layout
   except a little extra room above the hero text for the garland. Reduced motion: the theme's global
   prefers-reduced-motion rule already stops every animation below. */

/* ---------- shared ---------- */
.season-garland,.season-snow,.season-bats,.season-web,.season-spider{position:absolute;pointer-events:none}
.season-garland{z-index:2;top:0;left:50%;width:1440px;height:110px;overflow:visible;transform:translateX(-50%) scale(var(--gs,1));transform-origin:50% 0}
.season-garland .wire path{fill:none;stroke-width:2.2}
.season-xmas .hero,.season-easter .hero{padding-top:108px}
.artwork .season-hat,.artwork .season-pumpkin,.artwork .season-ears,.artwork .season-eggs{position:absolute;pointer-events:none}
.season-pill{position:absolute;z-index:3;right:24px;top:-20px;margin:0;display:inline-flex;align-items:center;gap:.55em;background:var(--on-dark);color:var(--text);font-size:.85rem;font-weight:600;line-height:1.3;padding:9px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.season-pill::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:var(--pill,var(--teal));box-shadow:0 0 8px var(--pill,var(--teal))}

/* ---------- Christmas: snow, fairy lights, a Santa hat on the frame ---------- */
.season-xmas .hero::after{background:radial-gradient(circle,rgba(226,59,59,.42),transparent 70%)}
.season-xmas .artwork .frame{background:linear-gradient(120deg,#E23B3B,#FFC24D 40%,#3DBE6E 70%,var(--teal))}
.season-xmas .season-pill{--pill:#E23B3B}
.season-lights .wire path{stroke:#24412F}
.season-lights .bulb ellipse{filter:drop-shadow(0 0 6px var(--c))}
.season-lights .bulb{animation:tmit-twinkle 1.8s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1)}
@keyframes tmit-twinkle{from{opacity:1}to{opacity:.4}}
.season-snow{inset:0;z-index:2;overflow:hidden}
.season-snow::before,.season-snow::after{content:"";position:absolute;left:0;right:0;top:-420px;height:calc(100% + 420px);background-repeat:repeat}
.season-snow::before{background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.85) 0 2px,transparent 2.5px),radial-gradient(circle at 70% 10%,rgba(255,255,255,.7) 0 2.5px,transparent 3px),radial-gradient(circle at 45% 75%,rgba(255,255,255,.6) 0 1.5px,transparent 2px),radial-gradient(circle at 90% 55%,rgba(255,255,255,.75) 0 2px,transparent 2.5px);background-size:420px 420px;animation:tmit-snow 22s linear infinite}
.season-snow::after{background-image:radial-gradient(circle at 10% 60%,rgba(255,255,255,.55) 0 1.2px,transparent 1.7px),radial-gradient(circle at 60% 40%,rgba(255,255,255,.5) 0 1px,transparent 1.5px),radial-gradient(circle at 35% 15%,rgba(255,255,255,.6) 0 1.4px,transparent 1.9px),radial-gradient(circle at 82% 85%,rgba(255,255,255,.45) 0 1px,transparent 1.5px);background-size:260px 260px;animation:tmit-snow-2 15s linear infinite}
@keyframes tmit-snow{to{transform:translate3d(-40px,420px,0)}}
@keyframes tmit-snow-2{to{transform:translate3d(30px,260px,0)}}
.artwork .season-hat{z-index:2;left:-38px;top:-56px;width:clamp(96px,10.5vw,140px);transform:rotate(-16deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}

/* ---------- Halloween: bats, a cobweb with a spider, a jack-o'-lantern ---------- */
.season-halloween .hero::before{background:radial-gradient(circle,rgba(255,122,24,.5),transparent 70%)}
.season-halloween .hero::after{background:radial-gradient(circle,rgba(140,82,255,.5),transparent 70%)}
.season-halloween .artwork .frame{background:linear-gradient(120deg,#FF7A18,#8C52FF 50%,var(--magenta));box-shadow:0 0 50px rgba(255,122,24,.28),0 0 90px rgba(140,82,255,.22)}
.season-halloween .season-pill{--pill:#FF7A18}
/* Bats keep off the headline: they fly over the picture side only and fade out before the text column. */
.season-bats{z-index:2;left:42%;right:0;top:0;height:60%;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 22%);mask-image:linear-gradient(to right,transparent,#000 22%)}
.bat{position:absolute;left:100%;width:var(--w);animation:tmit-bat-fly var(--t) linear infinite;animation-delay:var(--d)}
.bat>span{display:block;animation:tmit-bat-bob 1.7s ease-in-out infinite alternate}
.bat svg{display:block;width:100%;height:auto;fill:#6A4396;filter:drop-shadow(0 0 2px #FF5C93) drop-shadow(0 0 9px rgba(255,92,147,.7));animation:tmit-bat-flap .22s ease-in-out infinite alternate;transform-origin:50% 40%}
.bat-1{top:8%;--w:72px;--t:19s;--d:-3s}
.bat-2{top:22%;--w:48px;--t:24s;--d:-11s}
.bat-3{top:4%;--w:56px;--t:28s;--d:-19s}
.bat-4{top:34%;--w:40px;--t:21s;--d:-15s}
.bat-5{top:14%;--w:62px;--t:26s;--d:-6s}
.bat-6{top:12%;--w:46px;--t:17s;--d:-9s}
.bat-7{top:28%;--w:54px;--t:30s;--d:-24s}
@keyframes tmit-bat-fly{to{transform:translateX(calc(-100vw - 220px))}}
@keyframes tmit-bat-bob{from{transform:translateY(-10px)}to{transform:translateY(12px)}}
@keyframes tmit-bat-flap{from{transform:scaleY(1)}to{transform:scaleY(.7)}}
.season-web{z-index:1;top:0;right:0;width:clamp(130px,16vw,220px);height:auto}
.season-web path{stroke:rgba(244,241,234,.24);stroke-width:1;vector-effect:non-scaling-stroke}
.season-spider{z-index:2;top:0;right:clamp(54px,8vw,104px);width:28px;animation:tmit-spider 7s ease-in-out infinite alternate}
.season-spider::before{content:"";position:absolute;left:50%;bottom:16px;width:1px;height:400px;background:rgba(244,241,234,.35)}
.season-spider svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 2px #FF5C93) drop-shadow(0 0 7px rgba(255,92,147,.6))}
@keyframes tmit-spider{from{transform:translateY(40px)}to{transform:translateY(150px)}}
.artwork .season-pumpkin{z-index:2;right:-16px;bottom:-36px;width:clamp(78px,8.5vw,112px);filter:drop-shadow(0 0 18px rgba(255,122,24,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.season-pumpkin .face{animation:tmit-flicker 2.6s ease-in-out infinite}
@keyframes tmit-flicker{0%,100%{opacity:1}40%{opacity:.75}45%{opacity:.95}70%{opacity:.82}}
/* "More spook" (Steve, 1 Nov): a darker edge, an orange "Handled.", a full moon, low fog, eyes in the dark, a ghost */
.season-halloween .hero{box-shadow:inset 0 0 180px 50px rgba(0,0,0,.6)}
.season-halloween .hero .glow{color:#FF8A2B;text-shadow:0 0 18px rgba(255,122,24,.6),0 0 42px rgba(255,122,24,.35)}
.season-halloween .eyebrow{color:#FF8A2B}
.season-halloween .eyebrow::before{background:#FF8A2B;box-shadow:0 0 10px #FF8A2B}
.season-moon,.season-fog,.season-eyes{position:absolute;pointer-events:none}
.season-moon{z-index:1;top:30px;left:calc(50% - 30px);width:150px;height:150px;border-radius:50%;opacity:.95;
  background:radial-gradient(circle at 34% 38%,rgba(176,140,70,.35) 0 9px,transparent 10px),radial-gradient(circle at 63% 61%,rgba(176,140,70,.3) 0 14px,transparent 15px),radial-gradient(circle at 58% 27%,rgba(176,140,70,.28) 0 6px,transparent 7px),radial-gradient(circle at 30% 70%,rgba(176,140,70,.22) 0 7px,transparent 8px),radial-gradient(circle at 40% 38%,#FFF6D6,#F3D58A 68%,#DDB25A);
  box-shadow:0 0 40px rgba(255,226,150,.5),0 0 120px rgba(255,170,60,.32)}
.season-fog{z-index:0;left:-15%;right:-15%;bottom:-30px;height:280px;filter:blur(8px);
  background:radial-gradient(38% 60% at 18% 80%,rgba(205,195,240,.17),transparent 70%),radial-gradient(34% 55% at 55% 92%,rgba(205,195,240,.15),transparent 70%),radial-gradient(30% 50% at 88% 78%,rgba(205,195,240,.14),transparent 70%);
  animation:tmit-fog 24s ease-in-out infinite alternate}
.season-fog::after{content:"";position:absolute;inset:0;background:radial-gradient(30% 50% at 35% 85%,rgba(205,195,240,.13),transparent 70%),radial-gradient(28% 45% at 75% 95%,rgba(205,195,240,.12),transparent 70%);animation:tmit-fog 17s ease-in-out infinite alternate-reverse}
@keyframes tmit-fog{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
.season-eyes{inset:0;z-index:1}
.season-eyes span{position:absolute;display:flex;gap:8px;animation:tmit-blink 5.5s infinite}
.season-eyes i{width:10px;height:5px;border-radius:50%;background:#FFD34D;box-shadow:0 0 6px #FFB020,0 0 16px rgba(255,160,30,.7)}
.season-eyes i:first-child{border-radius:50% 50% 50% 50%/80% 80% 20% 20%}
.season-eyes i:last-child{border-radius:50% 50% 50% 50%/80% 80% 20% 20%}
.season-eyes .eyes-1{left:3%;bottom:10%}
.season-eyes .eyes-2{left:47%;bottom:7%;animation-duration:7s;animation-delay:-2s}
.season-eyes .eyes-3{right:4%;bottom:30%;animation-duration:4.6s;animation-delay:-3s}
.season-eyes .eyes-3 i{background:#9BFF6B;box-shadow:0 0 6px #6BE03A,0 0 16px rgba(120,230,70,.7)}
@keyframes tmit-blink{0%,88%,100%{transform:scaleY(1);opacity:1}92%{transform:scaleY(.1)}95%{transform:scaleY(1)}96%{opacity:1}}
.artwork .season-ghost{position:absolute;pointer-events:none;left:-46px;top:32%;width:64px;opacity:.9;filter:drop-shadow(0 0 12px rgba(244,241,234,.5));animation:tmit-ghost 6s ease-in-out infinite}
@keyframes tmit-ghost{0%,100%{transform:translate(20px,0) rotate(8deg)}50%{transform:translate(-6px,-16px) rotate(-6deg)}}

/* ---------- Bonfire Night: fireworks, rising embers, a bonfire glow ---------- */
.season-bonfire .hero::after{background:radial-gradient(circle,rgba(255,120,40,.55),transparent 70%)}
.season-bonfire .artwork .frame{background:linear-gradient(120deg,var(--coral),var(--gold) 40%,var(--magenta) 70%,var(--violet));box-shadow:0 0 50px rgba(255,140,60,.3),0 0 90px rgba(255,92,147,.2)}
.season-bonfire .season-pill{--pill:#FF8A2B}
.season-fireworks,.season-embers{position:absolute;pointer-events:none}
.season-fireworks{z-index:1;left:0;right:0;top:0;height:72%}
.fw{position:absolute;width:var(--s);color:var(--c);opacity:0;animation:tmit-fw 4.4s ease-out infinite;animation-delay:var(--d)}
.fw svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 5px currentColor)}
.fw-1{left:50%;top:4%;--s:150px;--c:var(--teal);--d:0s}
.fw-2{left:69%;top:0;--s:110px;--c:var(--magenta);--d:-1.5s}
.fw-3{left:85%;top:9%;--s:130px;--c:var(--gold);--d:-2.7s}
.fw-4{left:24%;top:-3%;--s:72px;--c:var(--lime);--d:-3.6s}
.fw-5{left:60%;top:24%;--s:84px;--c:var(--violet);--d:-0.8s}
.fw-6{left:93%;top:34%;--s:96px;--c:var(--coral);--d:-2.1s}
@keyframes tmit-fw{0%{opacity:0;transform:scale(.08)}5%{opacity:1}34%{opacity:1;transform:scale(1)}58%{opacity:0;transform:scale(1.12) translateY(16px)}100%{opacity:0;transform:scale(1.12) translateY(16px)}}
.season-embers{inset:0;z-index:1;overflow:hidden;background:radial-gradient(70% 40% at 50% 118%,rgba(255,120,30,.4),transparent 70%)}
.season-embers::before,.season-embers::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 380px);background-repeat:repeat}
.season-embers::before{background-image:radial-gradient(circle at 18% 40%,rgba(255,190,90,.9) 0 1.6px,transparent 2.2px),radial-gradient(circle at 64% 22%,rgba(255,140,50,.85) 0 2px,transparent 2.6px),radial-gradient(circle at 42% 78%,rgba(255,210,120,.8) 0 1.3px,transparent 1.9px),radial-gradient(circle at 86% 60%,rgba(255,120,40,.8) 0 1.6px,transparent 2.2px);background-size:380px 380px;animation:tmit-embers 16s linear infinite;mask-image:linear-gradient(to top,#000 30%,transparent 85%);-webkit-mask-image:linear-gradient(to top,#000 30%,transparent 85%)}
.season-embers::after{background-image:radial-gradient(circle at 30% 70%,rgba(255,170,80,.7) 0 1.2px,transparent 1.7px),radial-gradient(circle at 76% 35%,rgba(255,200,110,.7) 0 1px,transparent 1.5px);background-size:240px 240px;animation:tmit-embers-2 11s linear infinite;mask-image:linear-gradient(to top,#000 20%,transparent 70%);-webkit-mask-image:linear-gradient(to top,#000 20%,transparent 70%)}
@keyframes tmit-embers{from{transform:translate3d(0,0,0)}to{transform:translate3d(30px,-380px,0)}}
@keyframes tmit-embers-2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-24px,-240px,0)}}

/* ---------- Easter: bunting, bunny ears behind the frame, eggs in the grass ---------- */
.season-easter .hero::before{background:radial-gradient(circle,rgba(139,225,90,.38),transparent 70%)}
.season-easter .hero::after{background:radial-gradient(circle,rgba(255,179,204,.45),transparent 70%)}
.season-easter .artwork .frame{background:linear-gradient(120deg,#9FE3DF,#D2CBFF 40%,#FFB3CC 70%,#FFE08A)}
.season-easter .season-pill{--pill:#FF8FB5}
.season-bunting .wire path{stroke:rgba(244,241,234,.55)}
.season-bunting .flag{filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.artwork .season-ears{left:14%;top:clamp(-96px,-7.4vw,-64px);width:clamp(68px,7.4vw,100px);filter:drop-shadow(0 0 10px rgba(255,179,204,.35))}
.artwork .season-eggs{z-index:2;right:-14px;bottom:-34px;width:clamp(116px,12.5vw,170px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}

/* ---------- smaller screens ---------- */
@media (max-width:1020px){
  .season-garland{--gs:.8}
  .season-xmas .hero,.season-easter .hero{padding-top:96px}
  .season-moon{left:auto;right:24%;top:18px;width:96px;height:96px}
  .season-fireworks{top:auto;bottom:0;height:48%}   /* stacked: keep the bursts round the picture, off the text */
  .season-bats{left:0;top:auto;bottom:0;height:38%;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:600px){
  .season-garland{--gs:.6}
  .season-xmas .hero,.season-easter .hero{padding-top:78px}
  .season-pill{right:10px;top:-18px;font-size:.78rem;padding:7px 12px;max-width:72%}
  .artwork .season-hat{left:-12px;top:-40px;width:78px}
  .artwork .season-pumpkin{right:-6px;bottom:16px;width:64px}
  .artwork .season-eggs{right:-6px;bottom:14px;width:96px}
  .artwork .season-ears{left:10%;top:-58px;width:62px}
  .bat-4,.bat-5,.bat-7{display:none}
  .season-moon{right:14px;top:12px;width:58px;height:58px}
  .season-web,.season-spider{display:none}   /* the moon has the top-right corner on phones */
  .artwork .season-ghost{display:none}
  .season-eyes .eyes-2{display:none}
  .fw{width:calc(var(--s) * .6)}
}