/* The Halloween night: the launch collections' seasonal theme (markup: includes/night.php).
   A .night-scope section (and the collection page's header and main, under .theme-halloween) switches
   to night tokens, so shared components follow; lime buttons keep their dark text. Inside it: the sky
   (stars, a moon, bats) behind the content, fog along the bottom, and lime slime dripping from chosen
   letters. Pages place the moon with --moon-top / --moon-right / --moon-size and the stars with
   --stars-inset. Every animation stops under reduced motion. */

/* ---------- night tokens ---------- */
.night-scope,
.theme-halloween .site-header,
.theme-halloween main {
  --night-0: #07080C; --night-1: #0C0E13; --night-2: #12151C; --night-3: #191D27; --candle: #F2741E;
  --ink: #F3F2ED; --ink-2: #BFC3CB; --ink-3: #959BA6;
  --bone: #0C0E13; --bone-2: #191D27; --paper: #12151C;
  --line: rgba(243, 242, 237, .12); --line-2: rgba(243, 242, 237, .08);
  --lime-deep: var(--lime);
  --focus: 0 0 0 2px #0C0E13, 0 0 0 4px var(--lime);
  color: var(--ink);
}
.night-scope .btn-lime, .theme-halloween .btn-lime { color: #141519; }
.night-scope .btn-ghost:hover, .theme-halloween .btn-ghost:hover { border-color: rgba(243, 242, 237, .28); }
.night-scope .textlink:hover, .theme-halloween .textlink:hover { color: #141519; }
.night-scope .eyebrow::before, .theme-halloween .eyebrow::before { box-shadow: 0 0 12px var(--lime-glow); }
/* on the night the lime highlight is the words themselves, glowing */
.night-scope .hl, .theme-halloween main .hl { background: none; padding: 0; color: var(--lime); text-shadow: 0 0 30px rgba(200, 240, 60, .22); }

/* ---------- the sky: a haze of moonlight, a grape dusk low on the horizon ---------- */
.night { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent);
  background:
    radial-gradient(42% 52% at 80% 20%, rgba(239, 230, 203, .11), transparent 70%),
    radial-gradient(70% 45% at 12% 88%, rgba(123, 85, 217, .14), transparent 70%),
    radial-gradient(55% 40% at 90% 92%, rgba(242, 116, 30, .08), transparent 70%);
}

/* stars, kept around the moon and away from the words (a star beside a letter reads as punctuation) */
.night-stars { position: absolute; inset: var(--stars-inset, 0 0 30% 48%); }
.night-stars::after { position: absolute; inset: 0; }
.night-stars {
  background-image:
    radial-gradient(1.4px 1.4px at 6% 14%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 14% 38%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 23% 8%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 31% 27%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 41% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 48% 44%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 57% 6%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 63% 31%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 71% 52%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 93% 9%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 97% 46%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 3% 58%, #fff 50%, transparent 52%);
  opacity: .55; animation: twinkle 6s ease-in-out infinite alternate;
}
.night-stars::after {
  content: "";
  background-image:
    radial-gradient(1px 1px at 10% 24%, #fff 50%, transparent 52%), radial-gradient(1.3px 1.3px at 19% 52%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 36% 4%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 45% 33%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 53% 22%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 67% 14%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 77% 38%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 88% 26%, #fff 50%, transparent 52%);
  animation: twinkle 4.4s ease-in-out -2s infinite alternate-reverse;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }

/* the moon */
.night-moon {
  position: absolute; top: var(--moon-top, 40px); right: var(--moon-right, 4vw);
  width: var(--moon-size, 280px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 36%, rgba(150, 136, 104, .30) 0 6%, transparent 9%),
    radial-gradient(circle at 63% 60%, rgba(150, 136, 104, .24) 0 9%, transparent 12.5%),
    radial-gradient(circle at 44% 74%, rgba(150, 136, 104, .20) 0 4.5%, transparent 7%),
    radial-gradient(circle at 72% 30%, rgba(150, 136, 104, .18) 0 3.5%, transparent 5.5%),
    radial-gradient(circle at 22% 62%, rgba(150, 136, 104, .14) 0 5%, transparent 8%),
    radial-gradient(circle at 36% 32%, #FFFBF0 0%, #F2E9D0 40%, #DFD3B4 74%, #CDBF9E 100%);
  box-shadow: 0 0 50px 8px rgba(239, 230, 203, .20), 0 0 160px 50px rgba(239, 230, 203, .09);
  animation: moonrise 1.8s var(--ease) both;
}
@keyframes moonrise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }

/* bats cross the sky behind everything; they show best against the moon */
.bat { position: absolute; left: 0; top: var(--y); width: var(--w); color: #040508; animation: bat-fly var(--t) linear var(--d) infinite; will-change: transform; }
.bat svg { display: block; width: 100%; height: auto; fill: currentColor; animation: bat-bob calc(var(--t) / 7) ease-in-out infinite alternate; }
.bat-wl, .bat-wr { animation: wing-l .3s ease-in-out infinite alternate; transform-origin: 29px 15px; }
.bat-wr { animation-name: wing-r; transform-origin: 35px 15px; }
.bat-1 { --y: 21%; --w: 46px; --t: 24s; --d: -16s; }
.bat-2 { --y: 33%; --w: 30px; --t: 33s; --d: -26s; opacity: .85; }
.bat-3 { --y: 13%; --w: 21px; --t: 41s; --d: -30s; opacity: .7; }
@keyframes bat-fly { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
@keyframes bat-bob { from { transform: translateY(-12px) rotate(-5deg); } to { transform: translateY(12px) rotate(5deg); } }
@keyframes wing-l { from { transform: rotate(24deg); } to { transform: rotate(-16deg); } }
@keyframes wing-r { from { transform: rotate(-24deg); } to { transform: rotate(16deg); } }

/* fog drifting along the bottom; every patch stays inside its tile, so the tiles never show a seam */
.fog { position: absolute; inset: auto 0 0; z-index: 2; height: 260px; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 55%, transparent); mask-image: linear-gradient(transparent, #000 35%, #000 55%, transparent); }
.fog span { position: absolute; inset: 0 auto 0 0; width: 200%; background-repeat: repeat-x; background-size: 50% 100%; animation: fog-drift 90s linear infinite; }
.fog-1 { background-image: radial-gradient(26% 46% at 28% 60%, rgba(196, 202, 216, .14), transparent 72%), radial-gradient(22% 38% at 74% 66%, rgba(196, 202, 216, .11), transparent 72%); }
.fog-2 { background-image: radial-gradient(24% 40% at 46% 70%, rgba(196, 202, 216, .10), transparent 72%), radial-gradient(20% 44% at 78% 54%, rgba(196, 202, 216, .09), transparent 72%); animation-duration: 130s; animation-direction: reverse; }
@keyframes fog-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* slime: wide where it leaves the letter, a thin neck, a round drop. The SVG mask stretches with the
   drip, so as it oozes the neck and drop stretch too. Leave about .36em under the line for it. */
.drip { position: relative; }
.drip::after {
  content: ""; position: absolute; left: 50%; top: var(--top, 76%); width: .2em; height: var(--len, .5em); margin-left: -.1em;
  transform-origin: 50% 0; background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H20C14.5 2 13 6.5 13 13V43.5C16.8 45.6 17.6 51.4 14.6 55.2 12.2 58.4 7.8 58.4 5.4 55.2 2.4 51.4 3.2 45.6 7 43.5V13C7 6.5 5.5 2 0 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H20C14.5 2 13 6.5 13 13V43.5C16.8 45.6 17.6 51.4 14.6 55.2 12.2 58.4 7.8 58.4 5.4 55.2 2.4 51.4 3.2 45.6 7 43.5V13C7 6.5 5.5 2 0 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  animation: ooze var(--dur, 4s) ease-in-out var(--delay, 0s) infinite alternate;
}
.drip-1 { --len: .4em; --dur: 4.2s; --delay: -1.2s; }
.drip-2 { --len: .62em; --dur: 5.2s; }
.drip-3 { --len: .32em; --dur: 3.6s; --delay: -2.4s; --top: 72%; }
/* now and then a drop falls from the longest drip */
.drip-2::before {
  content: ""; position: absolute; left: 50%; top: calc(76% + .58em); width: .1em; height: .13em; margin-left: -.05em;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--lime); opacity: 0;
  animation: drop 5.2s ease-in 2.6s infinite;
}
@keyframes ooze { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes drop { 0%, 64% { opacity: 0; transform: translateY(0); } 67% { opacity: 1; } 100% { opacity: 0; transform: translateY(.36em); } }

/* candlelight, for glows behind lit things */
@keyframes flicker { 0%, 100% { opacity: .5; } 9% { opacity: .38; } 14% { opacity: .58; } 27% { opacity: .46; } 45% { opacity: .6; } 53% { opacity: .42; } 71% { opacity: .56; } 86% { opacity: .47; } }

@media (max-width: 600px) { .bat-3 { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .night-moon, .night-stars, .night-stars::after, .drip::after { animation: none; }
  .bat, .drip-2::before, .fog { display: none; }
}