/* =============================================================================
   TRAXIO.UK — seasonal.css
   Seasonal themes. Nothing in this file applies unless /assets/js/season.js
   has set <html data-season="…">, so with the theme set to 'default' the site
   looks exactly as it always has.

   Areas
     light:  .pagehead (inner page headers)
     dark:   .hero (home), .band--cta (closing call to action), .site-foot

   Adding an occasion: copy one theme block, change the attribute value and
   the colours/images, then register it in /assets/js/season.js (THEMES +
   schedule). Decorations are background images in /assets/img/seasonal/,
   which browsers only download while the theme that uses them is active.
   ============================================================================= */

/* ===================================================== SHARED ========== */
.season-slot{display:block}
html[data-season][data-season-banner]{--sb-h:56px}
@media (max-width:719.98px){html[data-season][data-season-banner]{--sb-h:72px}}
/* Space is reserved before the banner is drawn, so nothing jumps (no CLS). */
html[data-season][data-season-banner] .season-slot{min-height:var(--sb-h)}

.season-banner{--sb-bg:#14302E;--sb-fg:#fff;--sb-muted:rgba(255,255,255,.82);--sb-accent:#F6C67D;--sb-cta-bg:#EFA135;--sb-cta-fg:#26170B;position:relative;isolation:isolate;overflow:hidden;min-height:var(--sb-h);display:flex;align-items:center;background:var(--sb-bg);color:var(--sb-fg)}
.season-banner-inner{display:flex;align-items:center;gap:12px;padding-top:8px;padding-bottom:8px}
.season-banner-icon{flex:none;display:none}
.season-banner-icon svg{display:block;width:28px;height:28px}
.season-banner-text{flex:1;min-width:0;margin:0;font-size:.875rem;line-height:1.3;color:var(--sb-muted)}
.season-banner-text strong{color:var(--sb-fg);font-family:var(--serif);font-weight:600;font-size:1.05em}
.season-banner-kicker,.season-banner-sub{display:none}
.season-banner-kicker{margin-right:4px;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sb-accent)}
.season-banner-cta{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--sb-cta-bg);color:var(--sb-cta-fg) !important;font-size:.875rem;font-weight:700;text-decoration:none !important;white-space:nowrap}
.season-banner-cta:hover{filter:brightness(1.08)}
.season-banner-close{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-right:-8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sb-muted);cursor:pointer}
.season-banner-close:hover{background:rgba(255,255,255,.1);color:#fff}
.season-banner-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.season-banner :focus-visible{outline:3px solid var(--sb-accent);outline-offset:2px}
@media (min-width:720px){
  .season-banner-icon{display:block}
  .season-banner-kicker{display:inline}
  .season-banner-text{font-size:.9375rem}
}
@media (min-width:1080px){.season-banner-sub{display:inline}}

.season-preview-bar{background:#FEF3C7;color:#78350F;border-bottom:1px solid #FCD34D;font-size:.875rem}
.season-preview-bar p{margin:0;padding:8px 0}
.season-preview-bar a{color:#78350F;font-weight:650;margin-left:12px}

.season-deco{display:none}
html[data-season] .season-deco{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* Low specificity on purpose: each theme switches on only the pieces it uses. */
.season-deco .sd{position:absolute;display:none;background:no-repeat center/contain}
/* The areas that carry decorations clip them and keep them behind the content. */
html[data-season] .hero{isolation:isolate}
html[data-season] :is(.pagehead,.band--cta,.site-foot){position:relative;isolation:isolate;overflow:hidden}

/* ===================================================== HALLOWEEN ======= */
html[data-season="halloween"] .season-banner{--sb-bg:linear-gradient(100deg,#1E1530 0%,#2A1A2E 55%,#3A1D10 100%);--sb-accent:#FDBA74;--sb-cta-bg:#F97316;--sb-cta-fg:#1C1917}
html[data-season="halloween"] .pagehead{background:linear-gradient(180deg,#FFF1E3,#fff)}
html[data-season="halloween"] .hero::before{background:radial-gradient(58rem 30rem at 88% -10%,rgba(249,115,22,.30),transparent 70%),radial-gradient(40rem 24rem at 0% 110%,rgba(126,34,206,.22),transparent 70%)}
html[data-season="halloween"] .band--cta{background:radial-gradient(60% 90% at 85% 0%,rgba(249,115,22,.22),transparent 65%),var(--brand)}

/* light: cobweb, spider, bats */
html[data-season="halloween"] .sd-1{display:block;top:0;left:0;width:clamp(110px,13vw,200px);aspect-ratio:1;background-image:url("/assets/img/seasonal/web.svg?v=c62ea7695f");background-position:top left}
html[data-season="halloween"] .sd-2{display:block;top:0;left:clamp(80px,9vw,140px);width:22px;height:70px;background-image:url("/assets/img/seasonal/spider.svg?v=fd1bf4eaa4");background-position:bottom center;transform-origin:50% 0;animation:tx-dangle 7s ease-in-out infinite alternate}
html[data-season="halloween"] .sd-3{display:block;top:clamp(12px,2.5vw,26px);right:clamp(12px,4vw,70px);width:clamp(120px,15vw,200px);aspect-ratio:200/90;background-image:url("/assets/img/seasonal/bats.svg?v=87fb08eaa9");animation:tx-drift 14s ease-in-out infinite alternate}
/* dark: pale web and bats, a harvest moon, pumpkins on the doorstep */
html[data-season="halloween"] :is(.hero,.band--cta,.site-foot) .sd-1{background-image:url("/assets/img/seasonal/web-light.svg?v=b3c208ac6e")}
html[data-season="halloween"] :is(.hero,.band--cta,.site-foot) .sd-2{display:none}
html[data-season="halloween"] :is(.hero,.band--cta,.site-foot) .sd-3{background-image:url("/assets/img/seasonal/bats-light.svg?v=d10437e6a8")}
html[data-season="halloween"] .band--cta .sd-3{top:auto;bottom:14%}
html[data-season="halloween"] :is(.hero,.band--cta) .sd-4{display:block;bottom:0;right:clamp(8px,3vw,40px);width:clamp(110px,12vw,170px);aspect-ratio:170/90;background-image:url("/assets/img/seasonal/pumpkins.svg?v=1c2bd39433");background-position:bottom right}
html[data-season="halloween"] .band--cta .sd-4{right:auto;left:clamp(8px,3vw,40px)}
html[data-season="halloween"] :is(.hero,.band--cta) .sd-5{display:block;top:9%;right:9%;width:clamp(64px,8vw,110px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#FFF7ED 0%,#FED7AA 45%,#FB923C 100%);opacity:.5;box-shadow:0 0 90px 24px rgba(251,146,60,.28)}
/* Home hero: bats fly in the gap above the board illustration, clear of the copy. */
html[data-season="halloween"] .hero .sd-3{top:3%;right:auto;left:clamp(260px,44vw,640px);width:clamp(110px,11vw,160px)}

/* ===================================================== BONFIRE NIGHT === */
html[data-season="bonfire"] .season-banner{--sb-bg:linear-gradient(100deg,#0A1330 0%,#15224A 60%,#2B1B12 100%);--sb-accent:#FCD34D;--sb-cta-bg:#FBBF24;--sb-cta-fg:#0C1631}
html[data-season="bonfire"] .season-banner::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,#F59E0B 20%,#FBBF24 50%,#EA580C 80%,transparent)}
/* Evening sky: navy replaces the green behind the dark areas. */
html[data-season="bonfire"] :is(.hero,.band--deep,.site-foot){background-color:#0C1631}
html[data-season="bonfire"] .hero::before{background:radial-gradient(58rem 30rem at 88% -10%,rgba(245,158,11,.22),transparent 70%),radial-gradient(40rem 22rem at 0% 110%,rgba(234,88,12,.20),transparent 70%)}
html[data-season="bonfire"] .pagehead{background:linear-gradient(180deg,#EEF2FA,#fff)}

html[data-season="bonfire"] .sd-1{display:block;top:6%;right:4%;width:clamp(100px,12vw,180px);aspect-ratio:1;background-image:url("/assets/img/seasonal/burst-amber.svg?v=05ce310c69");animation:tx-bloom 6s ease-in-out infinite alternate}
html[data-season="bonfire"] .sd-2{display:block;top:34%;right:clamp(90px,16vw,260px);width:clamp(64px,7vw,110px);aspect-ratio:1;background-image:url("/assets/img/seasonal/burst-teal.svg?v=d82587a1e9");animation:tx-bloom 7s ease-in-out -2.5s infinite alternate}
html[data-season="bonfire"] .sd-3{display:block;top:3%;right:clamp(150px,28vw,480px);width:clamp(52px,6vw,90px);aspect-ratio:1;background-image:url("/assets/img/seasonal/burst-gold.svg?v=e409dd916c");animation:tx-bloom 8s ease-in-out -5s infinite alternate}
html[data-season="bonfire"] .sd-4{display:block;top:0;right:0;width:min(560px,70%);aspect-ratio:300/160;background-image:url("/assets/img/seasonal/sparks.svg?v=678dc9bc78");animation:tx-twinkle 5s ease-in-out infinite alternate}
html[data-season="bonfire"] .hero .sd-5{display:block;left:0;right:0;bottom:0;height:120px;background:linear-gradient(0deg,rgba(245,158,11,.16),transparent)}
html[data-season="bonfire"] .band--cta .sd-5{display:block;left:clamp(4px,3vw,48px);bottom:0;width:clamp(100px,12vw,170px);aspect-ratio:180/150;background:url("/assets/img/seasonal/bonfire.svg?v=9e1ec21de3") no-repeat bottom/contain;transform-origin:50% 100%;animation:tx-flicker 3.2s ease-in-out infinite alternate}
/* The home hero's board illustration sits on the right: keep bursts above it. */
html[data-season="bonfire"] .hero .sd-2{top:2%;right:auto;left:clamp(260px,44vw,640px)}
html[data-season="bonfire"] .pagehead :is(.sd-2,.sd-3){display:none}
html[data-season="bonfire"] .site-foot :is(.sd-2,.sd-3){display:none}
html[data-season="bonfire"] .site-foot .sd-1{opacity:.5}

/* ===================================================== CHRISTMAS ======= */
html[data-season="christmas"] .season-banner{--sb-bg:linear-gradient(100deg,#0B1C1A 0%,#14302E 60%,#5C1414 100%);--sb-accent:#FCD34D}
html[data-season="christmas"] .season-banner::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:2px;height:6px;background:radial-gradient(circle,#FCA5A5 0 2px,transparent 2.6px) 0 50%/48px 6px repeat-x,radial-gradient(circle,#FDE68A 0 2px,transparent 2.6px) 16px 50%/48px 6px repeat-x,radial-gradient(circle,#A7F3D0 0 2px,transparent 2.6px) 32px 50%/48px 6px repeat-x;opacity:.9}
html[data-season="christmas"] .hero::before{background:radial-gradient(58rem 30rem at 88% -10%,rgba(63,140,122,.40),transparent 70%),radial-gradient(40rem 22rem at 0% 110%,rgba(185,28,28,.22),transparent 70%)}
html[data-season="christmas"] .band--cta{background:radial-gradient(60% 90% at 0% 100%,rgba(185,28,28,.22),transparent 65%),var(--brand)}

/* Festoon lights along the top of the home hero and the page headers. */
html[data-season="christmas"] :is(.hero,.pagehead) :is(.sd-1,.sd-2,.sd-5){display:block;top:-4px;left:0;right:0;height:56px;background-size:240px 56px;background-repeat:repeat-x;background-position:-12px 0}
html[data-season="christmas"] :is(.hero,.pagehead) .sd-1{background-image:url("/assets/img/seasonal/lights.svg?v=760d4abf3a")}
html[data-season="christmas"] :is(.hero,.pagehead) .sd-2{background-image:url("/assets/img/seasonal/lights-glow-a.svg?v=19b8d322a3");animation:tx-glow 4.5s ease-in-out infinite alternate}
html[data-season="christmas"] :is(.hero,.pagehead) .sd-5{background-image:url("/assets/img/seasonal/lights-glow-b.svg?v=72e8d922f2");animation:tx-glow 4.5s ease-in-out -2.25s infinite alternate}
html[data-season="christmas"] .sd-3{display:block;top:22%;right:clamp(8px,3vw,48px);width:clamp(120px,15vw,220px);aspect-ratio:260/210;background-image:url("/assets/img/seasonal/snowflakes.svg?v=f024f671c7")}
html[data-season="christmas"] :is(.hero,.band--cta,.site-foot) .sd-3{background-image:url("/assets/img/seasonal/snowflakes-light.svg?v=d4b74d4a37");top:12%}
/* Home hero: snowfall only, kept faint so the copy stays easy to read. */
html[data-season="christmas"] .hero .sd-3{display:none}
html[data-season="christmas"] .hero .sd-4{opacity:.55}
/* Gentle snowfall on the dark areas (two layers at different speeds). */
html[data-season="christmas"] :is(.hero,.band--cta) .sd-4,html[data-season="christmas"] .band--cta .sd-5{display:block;left:0;right:0;top:-240px;bottom:0;height:auto;background-size:240px 240px;background-repeat:repeat;background-position:0 0;animation:tx-snow 22s linear infinite}
html[data-season="christmas"] :is(.hero,.band--cta) .sd-4{background-image:url("/assets/img/seasonal/snow-near.svg?v=6162987d8d")}
html[data-season="christmas"] .band--cta .sd-5{background-image:url("/assets/img/seasonal/snow-far.svg?v=569f3f13e5");animation-duration:38s;opacity:.8}
html[data-season="christmas"] .site-foot .sd-3{opacity:.6}

/* Small screens: fewer decorations, well clear of the text. */
@media (max-width:719.98px){
  html[data-season] :is(.pagehead,.hero) .sd-2{display:none}
  html[data-season="christmas"] :is(.hero,.pagehead) .sd-2{display:block}
  html[data-season="halloween"] .hero :is(.sd-4,.sd-5){display:none}
  html[data-season="bonfire"] :is(.hero,.pagehead) :is(.sd-2,.sd-3){display:none}
  html[data-season="bonfire"] :is(.hero,.pagehead) .sd-1{top:6px;right:6px;width:84px;opacity:.75}
  html[data-season="christmas"] :is(.hero,.pagehead) .sd-3{display:none}
  html[data-season] .season-deco .sd-3{opacity:.55}
}

/* ====================================== MOTION / REDUCED MOTION ======= */
@keyframes tx-dangle{from{transform:translateY(-10px) rotate(-2deg)}to{transform:translateY(12px) rotate(2deg)}}
@keyframes tx-drift{from{transform:translate(0,0)}to{transform:translate(-14px,8px)}}
@keyframes tx-bloom{from{transform:scale(.9);opacity:.5}to{transform:scale(1.04);opacity:.92}}
@keyframes tx-twinkle{from{opacity:.45}to{opacity:.9}}
@keyframes tx-flicker{from{transform:scaleY(.97)}to{transform:scaleY(1.03)}}
@keyframes tx-glow{from{opacity:.35}to{opacity:1}}
@keyframes tx-snow{from{transform:translateY(0)}to{transform:translateY(240px)}}

/* Slow, low-contrast changes only: nothing flashes, and it all stops for
   visitors who ask for less motion (or when season.js has motion:false). */
@media (prefers-reduced-motion:reduce){html[data-season] .season-deco .sd{animation:none !important}}
html[data-season-motion="off"] .season-deco .sd{animation:none !important}

@media print{.season-slot,.season-deco,.season-preview-bar{display:none !important}}