/* ============ Seasonal themes (set on <html data-theme>) ============ */

/* ---------- Winter ---------- */
[data-theme="winter"] .hero-beam {
  background:
    radial-gradient(ellipse 30% 50% at 50% 0%, rgba(255,120,40,.5), transparent 70%),
    radial-gradient(ellipse 70% 85% at 50% 0%, rgba(150,190,255,.16), transparent 72%);
}
[data-theme="winter"] .bigtext-row:not(.outline) {
  background-image: linear-gradient(90deg, #1b2735, var(--orange) 35%, #eef5ff 55%, var(--orange) 75%, #1b2735);
}
[data-theme="winter"] .listing { position: relative; }
/* snow settled on top edges: a lumpy tile repeats so bumps keep their size on any width, and the ends taper off */
.snowcap {
  position: absolute; z-index: 2; top: -8px; left: 10px; right: 10px; height: 13px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V8C8 4 14 6 22 5 32 3 38 8 48 6 58 4 64 1 74 4 84 7 90 6 96 8V14Z' fill='%23eef3fa'/%3E%3C/svg%3E") 0 0 / 96px 100% repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.5));
}
.nav > .snowcap { left: 48px; right: 48px; top: -6px; height: 11px; }
[data-theme="winter"] .sold-toast { z-index: 3; }
.frost {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .55;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .93 0 0 0 0 1 0 0 0 2.4 -1.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at center, transparent 55%, rgba(170,200,240,.12) 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at center, transparent 60%, #000 100%);
  mask-image: radial-gradient(ellipse 75% 70% at center, transparent 60%, #000 100%);
}
.snow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }

/* ---------- Halloween ---------- */
[data-theme="halloween"] .hero-video { opacity: .38; }
[data-theme="halloween"] .floaters span { color: rgba(255,200,160,.7); border-color: rgba(255,160,100,.3); }
[data-theme="halloween"] .hero-beam { animation: candle 4s steps(1) infinite; }
@keyframes candle { 0%, 100% { opacity: .85; } 12% { opacity: .7; } 14% { opacity: .9; } 37% { opacity: .78; } 39% { opacity: .95; } 61% { opacity: .72; } 63% { opacity: .88; } 84% { opacity: .8; } }
[data-theme="halloween"] .bigtext-row:not(.outline) {
  background-image: linear-gradient(90deg, #2a1430, var(--orange) 35%, #ffd2b0 55%, var(--orange) 75%, #2a1430);
}
@property --x { syntax: "<length-percentage>"; initial-value: 50%; inherits: false; }
@property --y { syntax: "<length-percentage>"; initial-value: 40%; inherits: false; }
.flashlight {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at var(--x) var(--y), rgba(6,5,4,0) 0 90px, rgba(6,5,4,.55) 210px, rgba(6,5,4,.9) 380px);
}
/* every so often the torch cuts out for a blink */
.flashlight::after { content: ""; position: absolute; inset: 0; background: rgba(6,5,4,.9); opacity: 0; animation: torch 11s steps(1) infinite; }
@keyframes torch { 0%, 90% { opacity: 0; } 91% { opacity: 1; } 92% { opacity: .2; } 93% { opacity: 1; } 95% { opacity: 0; } }
.flashlight.wander { animation: wander 14s ease-in-out infinite alternate; }
@keyframes wander { 0% { --x: 20%; --y: 30%; } 35% { --x: 75%; --y: 25%; } 70% { --x: 60%; --y: 65%; } 100% { --x: 25%; --y: 55%; } }
.fog {
  position: absolute; left: 0; bottom: 0; z-index: -1; width: calc(100% + 1200px); height: 45%; pointer-events: none; opacity: .35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .02' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .8 0 0 0 0 .78 0 0 0 1.5 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 1200px 100% repeat-x;
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent);
  mask-image: linear-gradient(to top, #000 25%, transparent);
  animation: fog 80s linear infinite;
}
.fog-2 { height: 30%; opacity: .25; transform: scaleX(-1); animation-duration: 120s; animation-direction: reverse; }
@keyframes fog { to { translate: -1200px 0; } }
.spider {
  position: fixed; top: 0; right: clamp(20px, 7vw, 120px); z-index: 45; width: 34px; pointer-events: none;
  transform-origin: 50% 0; animation: sway 5s ease-in-out infinite alternate;
}
.spider .thread { position: absolute; left: 50%; top: 0; width: 1px; height: 100vh; background: rgba(239,233,222,.22); transform-origin: top; transform: scaleY(calc((88px + var(--drop, 0) * 55vh) / 100vh)); }
.spider svg { width: 34px; height: 34px; transform: translateY(calc(70px + var(--drop, 0) * 55vh)); }
.spider svg .legs { stroke: #6b5e52; stroke-width: 1.6; }
.spider svg ellipse, .spider svg circle { fill: #2c2520; stroke: #6b5e52; stroke-width: 1; }
.spider svg .eye { fill: var(--orange); stroke: none; filter: drop-shadow(0 0 2px var(--orange)); }
.spider.moving .legs { animation: crawl .18s steps(2) infinite; transform-origin: 24px 26px; }
@keyframes sway { from { rotate: -2deg; } to { rotate: 2deg; } }
@keyframes crawl { 50% { transform: scaleY(.92) rotate(3deg); } }

/* ---------- Summer ---------- */
[data-theme="summer"] .hero-beam {
  background:
    radial-gradient(ellipse 36% 55% at 50% 0%, rgba(255,170,80,.55), transparent 70%),
    radial-gradient(ellipse 70% 75% at 50% 0%, rgba(255,110,130,.16), transparent 72%);
}
[data-theme="summer"] .hero-video { opacity: .26; }
[data-theme="summer"] .bigtext-row:not(.outline) {
  background-image: linear-gradient(90deg, #3a1a24, var(--orange) 30%, #ffd27a 50%, #ff7a9a 70%, #3a1a24);
}
/* low sun in the top corner: two ray images drawn once, crossfading. Only opacity animates, nothing is masked */
.sunrays { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.sunrays.b { opacity: 0; animation: rays 9s ease-in-out infinite alternate; }
@keyframes rays { to { opacity: 1; } }
/* grass along the bottom of the hero: clumps sway on their own timing */
.grass { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: -1; pointer-events: none; }
.grass > div { position: absolute; inset: 0; transform-origin: 50% 100%; animation: blow var(--dur) ease-in-out var(--delay) infinite alternate; }
.grass svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
@keyframes blow { from { transform: skewX(-3deg); } to { transform: skewX(4deg); } }
.dust { position: absolute; z-index: -1; width: 3px; height: 3px; border-radius: 50%; background: #ffd9a0; pointer-events: none; opacity: 0;
  animation: float-dust var(--dur) linear var(--delay) infinite; }
@keyframes float-dust { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .7; } 85% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--dx), -160px); } }
/* product photos catch the sun on hover */
[data-theme="summer"] .p-media::after, [data-theme="summer"] .listing-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,236,200,.22) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
[data-theme="summer"] .product:hover .p-media::after, [data-theme="summer"] .listing:hover .listing-media::after { transform: translateX(120%); }

@media (max-width: 720px) {
  .spider { width: 26px; } .spider svg { width: 26px; height: 26px; }
  .nav > .snowcap { left: 28px; right: 28px; }
}