/* ===== Express Lane — Halloween theme =====
   Only applies when theme.js adds class "halloween" to <html> (all of October).
   Logo, lettering gradient, buttons and product cards keep the normal brand look. */
html.halloween {
  --pumpkin: #ff7a18;
  --pumpkin-2: #ffb347;
  --night-1: #140a24;
  --night-2: #2d1248;
  --night-3: #6b2a5e;
  --palm: #0c0714;
  --spooky-grad: linear-gradient(90deg, var(--pumpkin) 0%, var(--pumpkin-2) 30%, var(--lime-2) 55%, var(--lime) 75%, #a855f7 100%);
  background: var(--night-1);
}
html.halloween body {
  background-color: var(--night-1);
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(180deg, var(--night-1), #1b0e2e 60%, var(--night-1));
  background-size: 4px 4px, 100% 100%;
}

/* Bars */
html.halloween .announce { background: var(--spooky-grad); }
html.halloween .nav::after { background: var(--spooky-grad); }
html.halloween .ticker { background: var(--spooky-grad); box-shadow: 0 4px 0 #a855f7; }
html.halloween .ticker-track span::after { content: "🎃"; }
html.halloween .footer::before { background: linear-gradient(90deg, var(--pumpkin), #a855f7); }

/* Hero: full moon over the night freeway */
html.halloween .hero-card {
  box-shadow: 6px 6px 0 var(--pumpkin), inset 0 0 150px rgba(0,0,0,.65);
  background:
    radial-gradient(1.5px 1.5px at 12% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 24%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 10%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 34%, #fff 50%, transparent 51%),
    linear-gradient(180deg, transparent 58%, rgba(0,0,0,.3) 58%, transparent 62%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 28%, var(--night-3) 44%, var(--pumpkin) 52.6%, #1b1226 53%, #120c1a 58%, #3a3c46 58.5%, #25262e 100%);
}
html.halloween .hero-sun { top: 24%; width: 150px; height: 150px; clip-path: none;
  background:
    radial-gradient(circle at 34% 40%, rgba(170,140,70,.35) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 30%, rgba(170,140,70,.3) 0 6%, transparent 7%),
    radial-gradient(circle at 58% 66%, rgba(170,140,70,.28) 0 12%, transparent 13%),
    radial-gradient(circle at 40% 38%, #fffbe8 0%, #fff1b8 45%, #f3d98a 70%, #e8c96f 100%);
  box-shadow: 0 0 40px 12px rgba(255,236,170,.45), 0 0 120px 40px rgba(255,160,60,.18); }
html.halloween .hero-road { opacity: .4; }
html.halloween .hero-copy { box-shadow: 4px 4px 0 var(--pumpkin); }
html.halloween .hero-art img { box-shadow: 0 0 0 4px var(--pumpkin), 10px 10px 0 4px #a855f7; }

/* Bats + jack-o'-lanterns */
.bats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bats span { position: absolute; left: -60px; font-size: 26px; filter: brightness(.5) drop-shadow(0 0 6px rgba(255,160,60,.35)); animation: batFly 14s linear infinite; }
.bats span:nth-child(1) { top: 10%; }
.bats span:nth-child(2) { top: 20%; font-size: 18px; animation-duration: 18s; animation-delay: -6s; }
.bats span:nth-child(3) { top: 6%; font-size: 22px; animation-duration: 16s; animation-delay: -11s; }
.bats span:nth-child(4) { top: 30%; font-size: 16px; animation-duration: 21s; animation-delay: -3s; }
.bats span:nth-child(5) { top: 14%; font-size: 30px; animation-duration: 12s; animation-delay: -8s; }
@keyframes batFly {
  0% { transform: translate(0, 0); } 25% { transform: translate(28vw, 26px); } 50% { transform: translate(56vw, -10px); }
  75% { transform: translate(84vw, 22px); } 100% { transform: translate(115vw, 0); } }
.pumpkins { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: space-between; padding: 0 22px; pointer-events: none; z-index: 0; }
.pumpkins span { font-size: 46px; filter: drop-shadow(0 0 14px rgba(255,122,24,.8)); animation: glow 2.4s ease-in-out infinite; }
.pumpkins span:nth-child(2) { animation-delay: -1.2s; }
@keyframes glow { 50% { filter: drop-shadow(0 0 4px rgba(255,122,24,.5)); } }

/* Cobwebs in the hero corners (and one on the text card) */
.web { position: absolute; top: 0; width: 210px; height: 210px; pointer-events: none; z-index: 2; }
.web svg { width: 100%; height: 100%; display: block; overflow: visible; }
.web path { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.1; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.35)); }
.web-tl { left: 0; }
.web-tr { right: 0; transform: scaleX(-1); }
.web-copy { top: 0; right: 0; width: 120px; height: 120px; transform: scaleX(-1); border-top-left-radius: 18px; overflow: hidden; }
.web-copy path { stroke: rgba(40,20,60,.35); filter: none; }
/* Spider dangling on its thread */
.spider { position: absolute; top: 0; left: 57%; height: 70px; border-left: 1px solid rgba(255,255,255,.6); pointer-events: none; z-index: 2; animation: spiderDrop 7s ease-in-out infinite; }
.spider span { position: absolute; bottom: -18px; left: -14px; font-size: 26px; filter: brightness(.25) drop-shadow(0 0 3px rgba(255,255,255,.4)); animation: spiderSwing 3.5s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes spiderDrop { 0%, 100% { height: 60px; } 45%, 60% { height: 170px; } }
@keyframes spiderSwing { 50% { transform: rotate(8deg); } }
/* Low fog drifting over the road */
.fog { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; z-index: 0; overflow: hidden; }
.fog i { position: absolute; bottom: -20%; left: 0; width: 200%; height: 100%; opacity: .5;
  background: radial-gradient(ellipse 18% 45% at 10% 70%, rgba(220,210,240,.55), transparent 70%),
    radial-gradient(ellipse 22% 40% at 35% 80%, rgba(220,210,240,.45), transparent 70%),
    radial-gradient(ellipse 16% 50% at 60% 75%, rgba(220,210,240,.5), transparent 70%),
    radial-gradient(ellipse 20% 42% at 85% 80%, rgba(220,210,240,.45), transparent 70%);
  animation: fogDrift 38s linear infinite; }
.fog i:nth-child(2) { bottom: -35%; opacity: .35; animation-duration: 55s; animation-direction: reverse; }
@keyframes fogDrift { to { transform: translateX(-50%); } }

/* Cards pop off the dark page with pumpkin-orange shadows */
html.halloween .tile { box-shadow: 4px 4px 0 var(--pumpkin); }
html.halloween .tile:hover { box-shadow: 6px 7px 0 var(--pumpkin); }
html.halloween .card, html.halloween .link-card { box-shadow: 5px 5px 0 var(--pumpkin); }
html.halloween .card:hover, html.halloween .link-card:hover { box-shadow: 7px 7px 0 #a855f7; }
html.halloween .steps li { box-shadow: 5px 5px 0 #a855f7; }
html.halloween .modal-card { box-shadow: 6px 6px 0 var(--pumpkin); }

/* Category tiles: lime slime dripping off the top, a cobweb in the corner, darker haunted fade */
html.halloween .tile {
  background: linear-gradient(160deg, color-mix(in srgb, var(--tile) 78%, #fff) 0%, var(--tile) 42%, color-mix(in srgb, var(--tile) 38%, #000) 100%); }
html.halloween .tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26'%3E%3Cpath d='M0 5 H14 V11.5 A3.5 3.5 0 0 0 21 11.5 V5 H46 V7.5 A2.5 2.5 0 0 0 51 7.5 V5 H78 V18.0 A4.0 4.0 0 0 0 86 18.0 V5 H118 V9.5 A2.5 2.5 0 0 0 123 9.5 V5 H150 V13.5 A3.5 3.5 0 0 0 157 13.5 V5 H196 V8.0 A3.0 3.0 0 0 0 202 8.0 V5 H226 V5.5 A2.5 2.5 0 0 0 231 5.5 V5 H240 V0 H0 Z' fill='%238fe42b'/%3E%3Cpath d='M0 5 H14 V11.5 A3.5 3.5 0 0 0 21 11.5 V5 H46 V7.5 A2.5 2.5 0 0 0 51 7.5 V5 H78 V18.0 A4.0 4.0 0 0 0 86 18.0 V5 H118 V9.5 A2.5 2.5 0 0 0 123 9.5 V5 H150 V13.5 A3.5 3.5 0 0 0 157 13.5 V5 H196 V8.0 A3.0 3.0 0 0 0 202 8.0 V5 H226 V5.5 A2.5 2.5 0 0 0 231 5.5 V5 H240' fill='none' stroke='%230a0a0d' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 240px 26px repeat-x; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
html.halloween .tile:nth-child(odd)::before { background-position: -60px 0; }
html.halloween .tile::after { content: ""; position: absolute; top: 0; left: 0; width: 46%; aspect-ratio: 1; z-index: 1; pointer-events: none; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath d='M0 0L160.0 0.0M0 0L156.0 35.6M0 0L144.2 69.4M0 0L125.1 99.8M0 0L99.8 125.1M0 0L69.4 144.2M0 0L35.6 156.0M0 0L0.0 160.0M20.9 0.0Q17.5 2.0 22.6 5.2M21.4 4.9Q16.6 5.8 19.8 9.5M20.8 10.0Q14.9 9.4 16.4 13.1M16.8 13.4Q12.4 12.4 14.1 17.6M14.1 17.6Q9.4 14.9 9.3 19.3M9.1 18.8Q5.8 16.6 5.2 22.6M4.9 21.4Q2.0 17.5 0.0 22.0M45.1 0.0Q35.0 3.9 41.9 9.6M40.8 9.3Q33.2 11.6 41.7 20.1M39.6 19.1Q29.8 18.7 34.4 27.4M36.1 28.8Q24.9 24.9 26.1 32.8M26.7 33.5Q18.7 29.8 19.6 40.7M19.6 40.6Q11.6 33.2 9.6 41.9M9.3 40.8Q3.9 35.0 0.0 46.3M66.3 0.0Q54.1 6.1 68.0 15.5M68.0 15.5Q51.3 18.0 59.8 28.8M58.2 28.0Q46.1 28.9 56.0 44.6M53.2 42.4Q38.5 38.5 42.4 53.2M44.5 55.8Q28.9 46.1 28.1 58.3M28.8 59.7Q18.0 51.3 15.5 68.0M15.5 68.0Q6.1 54.1 0.0 66.3M98.7 0.0Q74.7 8.4 87.3 19.9M89.4 20.4Q71.0 24.8 86.9 41.8M86.8 41.8Q63.7 40.0 71.7 57.2M69.8 55.7Q53.2 53.2 61.7 77.4M58.6 73.5Q40.0 63.7 40.8 84.7M42.8 88.9Q24.8 71.0 19.9 87.3M20.4 89.4Q8.4 74.7 0.0 96.4M122.0 0.0Q97.0 10.9 118.9 27.1M124.9 28.5Q92.1 32.2 104.7 50.4M107.2 51.6Q82.6 51.9 97.8 78.0M97.8 78.0Q69.0 69.0 74.2 93.1M72.3 90.6Q51.9 82.6 55.7 115.7M52.9 109.9Q32.2 92.1 27.1 118.9M28.5 124.9Q10.9 97.0 0.0 116.2M144.4 0.0Q120.8 13.6 156.0 35.6M148.2 33.8Q114.8 40.2 136.9 66.0M143.8 69.2Q103.0 64.7 113.2 90.3M115.9 92.4Q86.0 86.0 97.2 121.9M97.1 121.8Q64.7 103.0 64.3 133.6M62.7 130.1Q40.2 114.8 35.6 156.0M33.8 148.2Q13.6 120.8 0.0 152.0' fill='none' stroke='white' stroke-opacity='.6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
/* Keep the icon small and clear of the name; text always sits on top */
html.halloween .tile-emoji { z-index: 3; top: 14px; right: 10px; font-size: 38px; line-height: 1; }
html.halloween .tile-name, html.halloween .tile-count { position: relative; z-index: 3; }
html.halloween .tile:hover .tile-emoji { animation: haunt .6s ease-in-out; }
@keyframes haunt { 25% { transform: rotate(-10deg) scale(1.08); } 75% { transform: rotate(10deg) scale(1.08); } }
html.halloween .tile.active { box-shadow: 0 0 0 3px var(--lime), 5px 5px 0 3px var(--pumpkin), 0 0 22px 4px rgba(143,228,43,.45); }
/* A spider hanging over the Full Menu title */
html.halloween .catalog { position: relative; }
.catalog > .spider { left: min(660px, 62%); animation: spiderDropShort 9s ease-in-out infinite; }
@keyframes spiderDropShort { 0%, 100% { height: 34px; } 45%, 60% { height: 96px; } }

/* Text that sits right on the dark page */
html.halloween .links-note, html.halloween .empty { color: #c9bfd8; }
html.halloween .active-filter { color: #fff; }
html.halloween .view-btn { color: var(--muted); }

/* Password screen: night freeway */
html.halloween .gate {
  background:
    radial-gradient(1.5px 1.5px at 15% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 36%, #fff 50%, transparent 51%),
    radial-gradient(circle at 80% 16%, #fff8dc 0 42px, rgba(255,236,170,.25) 44px, transparent 110px),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 24%, var(--night-3) 40%, var(--pumpkin) 49.8%, #1b1226 50.2%, #120c1a 54%);
}
html.halloween .gate-card { box-shadow: 6px 6px 0 var(--pumpkin); }

@media (max-width: 900px) {
  html.halloween .hero-card {
    background:
      radial-gradient(1.5px 1.5px at 12% 6%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 40% 14%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 70% 5%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 88% 18%, #fff 50%, transparent 51%),
      linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 14%, var(--night-3) 24%, var(--pumpkin) 32.6%, #1b1226 33%, #120c1a 37%, #3a3c46 37.5%, #25262e 100%);
  }
  html.halloween .hero-sun { top: 2.5%; left: 86%; width: 70px; height: 70px; }
  .pumpkins span { font-size: 34px; }
  .web { width: 130px; height: 130px; }
  .web-copy { width: 90px; height: 90px; }
  .spider { left: 14%; }
  .catalog > .spider { left: auto; right: 34px; }
  .fog { height: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .bats span, .pumpkins span, .spider, .spider span, .fog i, html.halloween .tile:hover .tile-emoji { animation: none; }
  .spider { height: 110px; }
  .bats span:nth-child(1) { left: 20%; } .bats span:nth-child(2) { left: 55%; } .bats span:nth-child(3) { left: 80%; }
}