/* 1D3R seasonal themes (home page). Loaded only while a theme is showing.
   The moving decorations are drawn on .ss-canvas, which sits behind the page content. */

/* The decorations sit at z-index -1 inside the page body: above its background, below every
   bit of content, so bats and snow pass behind buttons, text and cards on any page. */
html[data-season] body { position: relative; z-index: 0; }
.ss-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.ss-back { position: absolute; left: 0; right: 0; top: 0; z-index: -1; overflow: hidden; pointer-events: none; }
html[data-season] .hero-slash { opacity: .26; }

/* Each theme's colours: --ss (main), --ss-hot (light), --ss-soft (tint), --ss-glow (r, g, b) */
html[data-season="halloween"]    { --ss: #ff8a2a; --ss-hot: #ffb15c; --ss-glow: 255, 128, 32; }
html[data-season="christmas"]    { --ss: #ff4d5e; --ss-hot: #ff8a95; --ss-glow: 255, 77, 94; }
html[data-season="valentines"]   { --ss: #ff5c8a; --ss-hot: #ff9ab6; --ss-glow: 255, 92, 138; }
html[data-season="stpatricks"]   { --ss: #3fbf6f; --ss-hot: #7fe0a3; --ss-glow: 63, 191, 111; }
html[data-season="easter"]       { --ss: #b99cff; --ss-hot: #d6c6ff; --ss-glow: 185, 156, 255; }
html[data-season="july4"]        { --ss: #5aa9ff; --ss-hot: #9ccbff; --ss-glow: 90, 169, 255; }
html[data-season="thanksgiving"] { --ss: #e9a23b; --ss-hot: #ffc46b; --ss-glow: 233, 140, 50; }
html[data-season="newyear"]      { --ss: #e7b04a; --ss-hot: #ffd27a; --ss-glow: 231, 176, 74; }
html[data-season="winter"]       { --ss: #8ecbff; --ss-hot: #c4e4ff; --ss-glow: 142, 203, 255; }
html[data-season="spring"]       { --ss: #ff9ec4; --ss-hot: #ffc8dd; --ss-glow: 255, 158, 196; }
html[data-season="summer"]       { --ss: #ffd166; --ss-hot: #ffe29a; --ss-glow: 255, 209, 102; }
html[data-season="fall"]         { --ss: #e9a23b; --ss-hot: #ffc46b; --ss-glow: 233, 140, 50; }
html[data-season] { --ss-soft: rgba(var(--ss-glow), .14); }

/* Greeting chip above the headline */
.ss-chip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 12px 6px 8px; border: 1px solid rgba(var(--ss-glow), .45); border-radius: 999px; background: var(--ss-soft); color: var(--ss-hot); font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.ss-chip b { font-size: 15px; letter-spacing: 0; }
html[data-season-scope="home"] .stat:first-child dd { color: var(--ss-hot); }

/* Buttons take the holiday colour where it reads well with dark text */
html[data-season="halloween"] .btn-brass, html[data-season="thanksgiving"] .btn-brass, html[data-season="valentines"] .btn-brass,
html[data-season="stpatricks"] .btn-brass, html[data-season="easter"] .btn-brass {
  background: linear-gradient(180deg, var(--ss-hot), var(--ss)); color: #160b06; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 10px 30px -10px rgba(var(--ss-glow), .75); }
html[data-season="halloween"] .btn-brass:hover, html[data-season="thanksgiving"] .btn-brass:hover, html[data-season="valentines"] .btn-brass:hover,
html[data-season="stpatricks"] .btn-brass:hover, html[data-season="easter"] .btn-brass:hover { background: var(--ss-hot); }
html[data-season="christmas"] .btn-brass { background: linear-gradient(180deg, #ff6b78, #e23446); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 10px 30px -10px rgba(226, 52, 70, .75); }
html[data-season="christmas"] .btn-brass:hover { background: #ff6b78; }

/* A soft glow behind the ticket window */
.ss-glow { position: absolute; top: -10%; right: 4%; width: min(60vw, 820px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--ss-glow), .2) 0%, rgba(var(--ss-glow), .07) 38%, transparent 66%); }

/* Halloween: harvest moon, cobweb, spider */
.ss-moon { position: absolute; top: clamp(0px, 1.5vw, 24px); right: clamp(-40px, 5vw, 140px); width: clamp(220px, 25vw, 380px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffd9a0 0%, #ffb062 28%, #f07a24 62%, #b84a10 100%);
  box-shadow: 0 0 80px 20px rgba(255, 138, 42, .28), 0 0 220px 80px rgba(255, 110, 20, .12); opacity: .82; }
.ss-moon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .35;
  background: radial-gradient(circle at 30% 60%, rgba(120, 40, 0, .55) 0 7%, transparent 8%), radial-gradient(circle at 62% 30%, rgba(120, 40, 0, .45) 0 5%, transparent 6%), radial-gradient(circle at 70% 68%, rgba(120, 40, 0, .4) 0 9%, transparent 10%), radial-gradient(circle at 46% 46%, rgba(120, 40, 0, .3) 0 4%, transparent 5%); }
.ss-web { position: absolute; top: 0; left: 0; width: clamp(140px, 16vw, 230px); opacity: .22; color: #c9cfd8; }
.partners { position: relative; }
.ss-spider { position: absolute; top: 0; right: 14%; width: 26px; pointer-events: none; transform-origin: 50% 0; animation: ss-bob 4.5s ease-in-out infinite; }
.ss-spider i { display: block; width: 1px; height: 90px; margin: 0 auto; background: linear-gradient(rgba(201, 207, 216, .5), rgba(201, 207, 216, .25)); }
.ss-spider svg { display: block; width: 26px; margin-top: -2px; color: #0b0c10; filter: drop-shadow(0 0 6px rgba(255, 138, 42, .5)); }
@keyframes ss-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(18px) rotate(3deg); } }

/* Christmas: string lights across the top */
.ss-lights { position: absolute; top: -4px; left: -2%; width: 104%; }
.ss-lights svg { display: block; width: 100%; height: clamp(60px, 7vw, 96px); overflow: visible; }
.ss-bulb ellipse { filter: drop-shadow(0 0 6px var(--c)); animation: ss-twinkle 2.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ss-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* St. Patrick's: a faint rainbow behind the ticket window */
.ss-rainbow { position: absolute; top: clamp(20px, 3vw, 60px); right: clamp(-120px, 1vw, 60px); width: clamp(360px, 46vw, 720px); aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; opacity: .3;
  background: radial-gradient(circle at 50% 100%, transparent 0 44%, #a06bff 44% 50%, #4d8dff 50% 56%, #3fbf6f 56% 62%, #ffd166 62% 68%, #ff9a3c 68% 74%, #ff4d5e 74% 80%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }

/* Valentine's: one big soft heart */
.ss-bigheart { position: absolute; top: clamp(10px, 2vw, 40px); right: clamp(-40px, 6vw, 160px); width: clamp(240px, 28vw, 420px); opacity: .22; filter: blur(2px); }
.ss-bigheart svg { display: block; width: 100%; fill: #ff5c8a; }

/* Easter: pastel glows */
.ss-blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .32; }
.ss-blob-a { top: 20px; right: 12%; width: 320px; height: 320px; background: #cdb4db; }
.ss-blob-b { top: 240px; right: 30%; width: 260px; height: 260px; background: #bde0fe; }

/* Summer: a warm sun behind the ticket window */
.ss-sun { position: absolute; top: clamp(-60px, -2vw, 0px); right: clamp(-80px, 3vw, 120px); width: clamp(260px, 30vw, 460px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 140, .55) 0%, rgba(255, 196, 90, .28) 30%, rgba(255, 170, 60, .08) 58%, transparent 70%); }
/* Spring: soft pink and green glows */
html[data-season="spring"] .ss-blob-a { background: #ffc8dd; }
html[data-season="spring"] .ss-blob-b { background: #b9fbc0; opacity: .2; }

/* Dashboard: the button in the top bar that hides or shows the decorations */
.ss-toggle { font-size: 16px; line-height: 1; }
.ss-toggle.is-off { filter: grayscale(1); opacity: .55; }
.ss-toggle.is-off::after { content: ""; position: absolute; width: 18px; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
.ss-toggle { position: relative; }

@media (max-width: 640px) {
  .ss-moon { right: -90px; top: -70px; width: 230px; opacity: .45; }
  .ss-spider { right: 8%; }
  .ss-bigheart { right: -60px; top: 30px; opacity: .16; }
  .ss-rainbow { right: -140px; top: 40px; opacity: .22; }
}
@media (prefers-reduced-motion: reduce) { .ss-spider { display: none; } .ss-bulb ellipse { animation: none; } }