/* ═══════════════════════════════════════════════════════════════
   M.U MEDIA · THE SEASONAL LAYER
   05_AGENCY\WEBSITE\dist\seasonal.css · v5.0 · 2026-09-22

   One layer. Four seasons. Nothing underneath it changes.

   The season is set by ONE line at the top of seasonal.js.
   Change that line, the whole site changes, and the brand
   underneath is untouched. Gold stays gold. The universe stays
   the universe. The grade on top of it moves with the year.

   off · fall · halloween · winter

   v2.0 added THE DESCENT: the deeper you go through the 108
   systems, the darker the room gets. Same brand, less light.
   And THE SWITCH: one button at the bottom that turns the
   whole season off and hands back the site as built.

   v3.0 is THE NIGHT. A moon that rises as you go down, fog
   across the floor, embers going up while the leaves come
   down, and a lamp that starts failing deep in the systems.
   All of it geometry and light. Not one sticker.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   THE GRADE
   One fixed sheet over everything, including the
   WebGL canvas, blended so it colors the light
   instead of covering the page.
   ─────────────────────────────────────────────── */

#season-grade,
#season-deep {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 1.2s ease;
  mix-blend-mode: soft-light;
}

/* ───────────────────────────────────────────────
   THE DESCENT
   The second sheet. It carries the darker end of
   the season and its opacity is driven entirely
   by --season-depth, which seasonal.js moves from
   0 to 1 as you travel down the page and through
   the 108 systems.

   0   = the top of the site. Clean season.
   1   = deep in the systems. The lights are down.

   No transition on this one on purpose: it is
   already smoothed in JS, frame by frame, and a
   CSS transition on top of that would lag behind
   your own hand on the constellation.
   ─────────────────────────────────────────────── */

#season-deep {
  z-index: 3;
  opacity: 0;
  transition: none;
  mix-blend-mode: normal;
}

#season-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 1.8s ease;
}

html[data-season="fall"] #season-grade,
html[data-season="halloween"] #season-grade,
html[data-season="winter"] #season-grade { opacity: 1; }

html[data-season="fall"] #season-canvas,
html[data-season="halloween"] #season-canvas,
html[data-season="winter"] #season-canvas { opacity: 1; }

/* ───────────────────────────────────────────────
   FALL
   Amber, rust, ember. The gold is already the
   brand, so fall is not a new color, it is the
   brand's own color spread across the whole sky.
   ─────────────────────────────────────────────── */

html[data-season="fall"] {
  --nebula-violet: #5a2d1c;
  --nebula-magenta: #a8502a;
  --nebula-blue: #6b3a18;
  --tier-given: #c47a3a;
  --tier-game: #b8603a;
  --gold-glow: rgba(224, 150, 58, 0.38);
  --gold-dim: rgba(224, 150, 58, 0.13);
  --border: rgba(224, 150, 58, 0.16);
  --season-leaf-a: #b4682f;
  --season-leaf-b: #8c3f22;
  --season-leaf-c: #d49a3a;
  --season-leaf-d: #6e4520;
  /* where the descent is taking it */
  --season-deep-a: #c2551f;
  --season-deep-b: #5d2a6e;
  --season-deep-c: #e08320;
  --season-deep-d: #2e1a2c;
  --season-ember-a: #ff8a2a;
  --season-ember-b: #ffc258;
  --season-ember-c: #ff5f1f;
}

html[data-season="fall"] #season-grade {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(214, 126, 48, 0.30) 0%, rgba(214, 126, 48, 0) 62%),
    radial-gradient(100% 90% at 12% 100%, rgba(138, 54, 30, 0.24) 0%, rgba(138, 54, 30, 0) 58%),
    linear-gradient(180deg, rgba(160, 92, 40, 0.14) 0%, rgba(60, 26, 14, 0.18) 100%);
}

/* Fall's descent does not walk toward Halloween any more. It arrives.
   By the bottom of the page fall IS Halloween: the amber is gone, the
   violet has taken the room, and the vignette has closed to a keyhole.
   This is the whole point. You start in October and you end on the
   night itself. */
html[data-season="fall"] #season-deep {
  background:
    radial-gradient(110% 62% at 50% 0%, rgba(236, 104, 14, 0.26) 0%, rgba(236, 104, 14, 0) 48%),
    radial-gradient(82% 68% at 88% 94%, rgba(96, 28, 136, 0.44) 0%, rgba(96, 28, 136, 0) 52%),
    radial-gradient(82% 68% at 8% 100%, rgba(66, 16, 98, 0.38) 0%, rgba(66, 16, 98, 0) 50%),
    radial-gradient(106% 100% at 50% 46%, rgba(0, 0, 0, 0) 46%, rgba(2, 0, 5, 0.80) 100%),
    linear-gradient(180deg, rgba(16, 5, 24, 0.30) 0%, rgba(2, 0, 5, 0.66) 100%);
}

/* ───────────────────────────────────────────────
   HALLOWEEN  (armed · Oct 1 to Nov 2)
   Fall with the lights out. Ember and violet.
   Still premium. No cartoon anything, ever.
   ─────────────────────────────────────────────── */

html[data-season="halloween"] {
  --nebula-violet: #3d1a52;
  --nebula-magenta: #8e2f1a;
  --nebula-blue: #2a1340;
  --tier-given: #9a5ad0;
  --tier-game: #c2551f;
  --gold-glow: rgba(240, 132, 32, 0.42);
  --gold-dim: rgba(240, 132, 32, 0.13);
  --border: rgba(240, 132, 32, 0.17);
  --season-leaf-a: #c2551f;
  --season-leaf-b: #6d2a86;
  --season-leaf-c: #e08320;
  --season-leaf-d: #40203f;
  --season-deep-a: #e0721a;
  --season-deep-b: #4a1a66;
  --season-deep-c: #ff8c1a;
  --season-deep-d: #1a0d26;
  --season-ember-a: #ff7a10;
  --season-ember-b: #ffd07a;
  --season-ember-c: #ff4d0a;
}

html[data-season="halloween"] #season-grade {
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(230, 116, 28, 0.30) 0%, rgba(230, 116, 28, 0) 58%),
    radial-gradient(110% 95% at 85% 100%, rgba(96, 36, 124, 0.30) 0%, rgba(96, 36, 124, 0) 60%),
    linear-gradient(180deg, rgba(120, 52, 18, 0.14) 0%, rgba(30, 12, 38, 0.26) 100%);
}

/* Halloween's descent goes further than fall's. This is the deepest
   the site is ever allowed to get, and it is very deep: the room is
   almost gone and only the gold is still holding. Still no cartoon
   anything. The dark does the work, not a sticker. */
html[data-season="halloween"] #season-deep {
  background:
    radial-gradient(105% 55% at 50% 0%, rgba(255, 122, 8, 0.30) 0%, rgba(255, 122, 8, 0) 44%),
    radial-gradient(84% 70% at 90% 92%, rgba(112, 30, 162, 0.50) 0%, rgba(112, 30, 162, 0) 52%),
    radial-gradient(84% 70% at 6% 100%, rgba(76, 16, 114, 0.42) 0%, rgba(76, 16, 114, 0) 50%),
    /* The clear core is 30%, not 12%. The eye reads in the middle of
       the screen, and crushing that is a readability cost that buys no
       extra fear. The edges still go all the way to black. */
    radial-gradient(100% 96% at 50% 44%, rgba(0, 0, 0, 0) 42%, rgba(1, 0, 3, 0.82) 100%),
    linear-gradient(180deg, rgba(18, 4, 28, 0.36) 0%, rgba(1, 0, 3, 0.70) 100%);
}

/* ───────────────────────────────────────────────
   WINTER  (armed · Dec 6 to Feb 14)
   ─────────────────────────────────────────────── */

html[data-season="winter"] {
  --nebula-violet: #1e2c5c;
  --nebula-magenta: #3a5a8c;
  --nebula-blue: #16305e;
  --tier-given: #7fa8e0;
  --tier-game: #9fb6d8;
  --season-leaf-a: #ffffff;
  --season-leaf-b: #dce8f5;
  --season-leaf-c: #b9cfe8;
  --season-leaf-d: #ffffff;
  --season-deep-a: #ffffff;
  --season-deep-b: #c3d8ef;
  --season-deep-c: #ffffff;
  --season-deep-d: #8fb0d4;
  --season-ember-a: #dceaff;
  --season-ember-b: #ffffff;
  --season-ember-c: #b9d4f0;
}

html[data-season="winter"] #season-grade {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(120, 170, 230, 0.22) 0%, rgba(120, 170, 230, 0) 62%),
    linear-gradient(180deg, rgba(90, 130, 190, 0.10) 0%, rgba(14, 22, 44, 0.20) 100%);
}

/* Winter does not get spooky. It gets deep and cold and still. */
html[data-season="winter"] #season-deep {
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(140, 190, 245, 0.14) 0%, rgba(140, 190, 245, 0) 55%),
    radial-gradient(130% 112% at 50% 48%, rgba(0, 0, 0, 0) 32%, rgba(2, 6, 16, 0.76) 100%),
    linear-gradient(180deg, rgba(10, 20, 42, 0.18) 0%, rgba(3, 8, 20, 0.58) 100%);
}

/* ───────────────────────────────────────────────
   THE SEASONAL LINE
   A quiet strip, not a banner. It is allowed to
   say one sentence and then get out of the way.
   ─────────────────────────────────────────────── */

#season-note {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%) translateY(140%);
  z-index: 40;
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font, system-ui, sans-serif);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-dim, rgba(240, 240, 236, 0.55));
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
  opacity: 0;
}

html[data-season="fall"] #season-note,
html[data-season="halloween"] #season-note,
html[data-season="winter"] #season-note { display: flex; }

#season-note.is-in { transform: translateX(-50%) translateY(0); opacity: 1; }

#season-note .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold, #D4A843);
  box-shadow: 0 0 10px var(--gold-glow, rgba(212, 168, 67, 0.35));
  flex: 0 0 auto;
}

#season-note .close {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  padding: 0 0 0 0.2rem;
}
#season-note .close:hover { opacity: 1; }

@media (max-width: 520px) {
  #season-note { font-size: 0.6rem; padding: 0.38rem 0.8rem; bottom: 0.8rem; }
}

/* ───────────────────────────────────────────────
   THE SWITCH
   One button at the bottom of the page. It turns
   the season off and hands back the site exactly
   as it was built, and it turns it back on.

   It sits in the flow at the foot of the page,
   not floating over the content, because a person
   looking for a way to turn something off looks
   at the bottom. It remembers the choice.
   ─────────────────────────────────────────────── */

#season-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 2.6rem auto 2.2rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--border, rgba(212, 168, 67, 0.16));
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font, system-ui, sans-serif);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-dim, rgba(240, 240, 236, 0.5));
  cursor: pointer;
  position: relative;
  z-index: 12;
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

/* When the switch is the last thing on the page it has to clear
   the fixed seasonal pill, or the pill sits on top of it. */
#season-switch.is-tail { margin-bottom: 5.5rem; }

#season-switch:hover {
  color: var(--gold, #D4A843);
  border-color: var(--gold-dim, rgba(212, 168, 67, 0.3));
  background: rgba(14, 12, 10, 0.72);
}

#season-switch:focus-visible {
  outline: 2px solid var(--gold, #D4A843);
  outline-offset: 3px;
}

/* the lamp. lit when the season is on, dark when it is off. */
#season-switch .lamp {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--gold, #D4A843);
  box-shadow: 0 0 10px var(--gold-glow, rgba(212, 168, 67, 0.4));
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

html[data-season="off"] #season-switch .lamp {
  background: rgba(240, 240, 236, 0.22);
  box-shadow: none;
}

@media (max-width: 520px) {
  #season-switch { font-size: 0.58rem; padding: 0.46rem 0.9rem; margin: 2rem auto 1.8rem; }
}

/* ═══════════════════════════════════════════════
   THE NIGHT · v3.0
   Everything below is the spooky, and every piece
   of it is geometry and light. No illustration, no
   sticker, no clip art. A moon is a circle. Fog is
   a soft gradient. A failing lamp is an opacity.

   All three read --season-depth straight out of
   CSS, so the deeper you go the more night there
   is, and none of it costs a single line of JS.

   🔒 THEY LIVE AT z-index 1: in front of the
   cosmos, BEHIND every word on the page. The night
   never makes the site harder to read.
   ═══════════════════════════════════════════════ */

/* ── THE MOON ──────────────────────────────────
   One pale disc that rises as you descend. It is
   the single most Halloween object there is and it
   is still just a circle with a glow.
   ────────────────────────────────────────────── */

#season-moon {
  position: fixed;
  /* 22vh clears the nav AND the chat widget in the corner.
     Caught in the browser: at 9vh the moon was behind the bubble. */
  top: 22vh;
  right: 13vw;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 38% 34%, #f4efdd 0%, #ddd4b8 42%, #b9ac8c 72%, #8e8168 100%);
  /* The grade sits ON TOP of the moon at z-index 3, which flattens
     it into a brown ball. Caught in the browser. The glow has to be
     strong enough to survive being graded over. */
  box-shadow:
    0 0 34px 10px rgba(246, 238, 214, 0.40),
    0 0 120px 34px rgba(240, 226, 190, 0.26),
    0 0 300px 96px rgba(226, 202, 150, 0.17);
}

/* the seas, so it is a moon and not a lightbulb.
   three soft blots, nothing anybody has to notice. */
#season-moon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(120, 110, 88, 0.30) 0%, rgba(120, 110, 88, 0) 22%),
    radial-gradient(circle at 36% 62%, rgba(120, 110, 88, 0.26) 0%, rgba(120, 110, 88, 0) 26%),
    radial-gradient(circle at 70% 68%, rgba(120, 110, 88, 0.20) 0%, rgba(120, 110, 88, 0) 18%);
}

html[data-season="fall"] #season-moon,
html[data-season="halloween"] #season-moon,
html[data-season="winter"] #season-moon {
  opacity: clamp(0, calc((var(--season-depth, 0) - 0.30) * 1.55), 0.95);
  transform: translateY(calc((1 - var(--season-depth, 0)) * 46px));
}

/* Halloween's moon is not white. It is the color of
   a streetlight through smoke. */
html[data-season="halloween"] #season-moon {
  background:
    radial-gradient(circle at 38% 34%, #fff3d6 0%, #ffd79a 40%, #e0a962 72%, #a87a3e 100%);
  box-shadow:
    0 0 38px 12px rgba(255, 202, 122, 0.52),
    0 0 130px 38px rgba(255, 168, 66, 0.34),
    0 0 320px 104px rgba(226, 124, 32, 0.22);
}

/* Winter keeps a cold moon and no smoke. */
html[data-season="winter"] #season-moon {
  background:
    radial-gradient(circle at 38% 34%, #f2f7ff 0%, #d6e2f2 44%, #aab9cd 74%, #7d8a9c 100%);
  box-shadow:
    0 0 26px 7px rgba(214, 232, 255, 0.22),
    0 0 100px 30px rgba(180, 206, 240, 0.15),
    0 0 220px 70px rgba(150, 180, 220, 0.10);
}

@media (max-width: 720px) {
  #season-moon { width: 92px; height: 92px; top: 19vh; right: 9vw; }
}

/* ── THE FOG ───────────────────────────────────
   Two bands of mist across the floor of the page,
   drifting at different speeds so they never
   repeat visibly. Soft gradients, so there is no
   blur filter and no cost.
   ────────────────────────────────────────────── */

#season-fog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62vh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

html[data-season="fall"] #season-fog,
html[data-season="halloween"] #season-fog,
html[data-season="winter"] #season-fog {
  /* Capped below 1 on purpose. Past about here the fog starts
     eating the headlines at the foot of the page, which is a real
     cost for no extra fear. Caught in the browser. */
  opacity: clamp(0, calc((var(--season-depth, 0) - 0.16) * 1.15), 0.72);
}

#season-fog .band {
  position: absolute;
  bottom: -8%;
  left: -55%;
  width: 210%;
  height: 100%;
  mix-blend-mode: screen;
  will-change: transform;
}

#season-fog .band.a {
  background:
    radial-gradient(52% 34% at 12% 88%, rgba(150, 142, 164, 0.22) 0%, rgba(150, 142, 164, 0) 100%),
    radial-gradient(44% 30% at 38% 96%, rgba(164, 152, 172, 0.19) 0%, rgba(164, 152, 172, 0) 100%),
    radial-gradient(60% 34% at 66% 90%, rgba(138, 130, 156, 0.20) 0%, rgba(138, 130, 156, 0) 100%),
    radial-gradient(40% 26% at 90% 97%, rgba(156, 146, 168, 0.16) 0%, rgba(156, 146, 168, 0) 100%);
  animation: season-fog-a 96s linear infinite;
}

#season-fog .band.b {
  bottom: -18%;
  height: 84%;
  background:
    radial-gradient(56% 34% at 22% 92%, rgba(108, 100, 122, 0.20) 0%, rgba(108, 100, 122, 0) 100%),
    radial-gradient(48% 30% at 54% 98%, rgba(124, 112, 136, 0.17) 0%, rgba(124, 112, 136, 0) 100%),
    radial-gradient(52% 32% at 82% 94%, rgba(100, 92, 116, 0.18) 0%, rgba(100, 92, 116, 0) 100%);
  animation: season-fog-b 148s linear infinite reverse;
}

@keyframes season-fog-a {
  from { transform: translateX(0); }
  to   { transform: translateX(26%); }
}
@keyframes season-fog-b {
  from { transform: translateX(0); }
  to   { transform: translateX(22%); }
}

/* Halloween's fog is lit from underneath by the same
   ember the grade is using. Winter's is clean and cold. */
html[data-season="halloween"] #season-fog .band.a {
  background:
    radial-gradient(52% 34% at 12% 88%, rgba(158, 124, 168, 0.24) 0%, rgba(158, 124, 168, 0) 100%),
    radial-gradient(44% 28% at 38% 96%, rgba(186, 126, 82, 0.17) 0%, rgba(186, 126, 82, 0) 100%),
    radial-gradient(60% 34% at 66% 90%, rgba(140, 108, 172, 0.22) 0%, rgba(140, 108, 172, 0) 100%),
    radial-gradient(40% 26% at 90% 97%, rgba(172, 120, 156, 0.18) 0%, rgba(172, 120, 156, 0) 100%);
}

html[data-season="winter"] #season-fog .band.a {
  background:
    radial-gradient(52% 38% at 14% 84%, rgba(186, 208, 236, 0.26) 0%, rgba(186, 208, 236, 0) 100%),
    radial-gradient(56% 40% at 64% 88%, rgba(164, 190, 224, 0.24) 0%, rgba(164, 190, 224, 0) 100%);
}


/* ── THE EYES ──────────────────────────────────
   Their own canvas, at z-index 1, behind every
   word on the page. That placement is the whole
   effect: something in the room, not a sticker
   on the glass.
   ────────────────────────────────────────────── */

#season-eyes {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── THE WEBS ──────────────────────────────────
   Real geometry: threads out of the corner and
   rings that sag between them, which is what a
   web actually does. Two corners only. A web in
   every corner is a decoration, not a room.
   ────────────────────────────────────────────── */

#season-webs {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

html[data-season="fall"] #season-webs {
  opacity: clamp(0, calc((var(--season-depth, 0) - 0.20) * 1.1), 0.50);
}
html[data-season="halloween"] #season-webs {
  opacity: clamp(0.30, calc(0.30 + var(--season-depth, 0) * 0.62), 0.92);
}

#season-webs .web {
  position: absolute;
  top: 58px;                 /* clears the fixed nav */
  width: 216px;
  height: 216px;
  overflow: visible;
}
#season-webs .web.l { left: 0; }
#season-webs .web.r { right: 0; transform: scaleX(-1); }

#season-webs .web path {
  fill: none;
  stroke: rgba(226, 220, 236, 0.46);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

html[data-season="halloween"] #season-webs .web path {
  stroke: rgba(238, 228, 248, 0.58);
}

@media (max-width: 720px) {
  #season-webs .web { width: 132px; height: 132px; top: 50px; }
}

/* ── THE FAILING LAMP ──────────────────────────
   Deep in the systems the light is not steady any
   more. Irregular, slow, and shallow on purpose:
   this has to read as a room, never as a strobe.
   It is off entirely above the halfway mark and it
   is the first thing reduced motion kills.
   ────────────────────────────────────────────── */

#season-flicker {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #000;
  opacity: 0;
}

html.season-is-deep #season-flicker {
  animation: season-flicker 7.3s steps(1, end) infinite;
}

@keyframes season-flicker {
  0%,   100% { opacity: 0; }
  41%        { opacity: 0; }
  42%        { opacity: 0.11; }
  43%        { opacity: 0; }
  44%        { opacity: 0.07; }
  45%        { opacity: 0; }
  73%        { opacity: 0; }
  74%        { opacity: 0.09; }
  75%        { opacity: 0; }
}

/* ───────────────────────────────────────────────
   RESPECT THE READER
   Motion off means the grade stays and the drift
   stops. The season should never make anybody sick.
   ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #season-canvas { display: none; }
  #season-note { transition: none; }
  #season-switch { transition: none; }
  /* The moon and the fog stay, because they are a picture, not a
     motion. The drifting stops and the failing lamp never runs. */
  #season-fog .band { animation: none; }
  html.season-is-deep #season-flicker { animation: none; opacity: 0; }
  /* The webs stay, they are a picture. The eyes, the bats and the
     spider are never built at all under reduced motion. */
  #season-eyes { display: none; }
}

/* Print: no season. Ink is expensive. */
@media print {
  #season-grade, #season-deep, #season-canvas, #season-note, #season-switch,
  #season-moon, #season-fog, #season-flicker, #season-eyes, #season-webs { display: none !important; }
}

/* ════════════════════════════════════════════════
   v5.0 · THE CANDLES AND THE STORM
   The two additions that give light back instead of taking it.
   ════════════════════════════════════════════════ */

#season-pumpkins {
  position: fixed;
  inset: 0;
  /* CAUGHT IN THE BROWSER 2026-09-22: at z-index 1, with the moon and
     the fog, the footer's own opaque background painted straight over
     both pumpkins and they vanished on the one screen they were built
     for. The moon survives at z-index 1 because it sits high on the
     page against transparent sections; the footer is not transparent.
     So these live at 4, above the black sheet, and they are kept hard
     into the corners where no word ever goes. */
  z-index: 4;
  pointer-events: none;
  opacity: 0;
}

html[data-season="fall"] #season-pumpkins,
html[data-season="halloween"] #season-pumpkins {
  opacity: clamp(0, calc((var(--season-depth, 0) - 0.18) * 1.90), 1);
}

#season-pumpkins .pk {
  position: absolute;
  /* CAUGHT AGAIN: at the floor they sat on the copyright line and
     behind the accessibility buttons. Lifted to sit ON the top edge
     of the footer band instead, which is empty on both sides, and
     which reads as two lanterns hung either side of the page. */
  bottom: 25vh;
  width: 104px;
  height: 98px;
  transform-origin: 50% 100%;
}

/* Hard into the corners. The footer's logo starts around 50px in and
   its right-hand buttons end around 60px from the edge, so the
   lanterns sit outside both and only their candlelight reaches in. */
#season-pumpkins .pk.l { left: 0.4vw; transform: rotate(-5deg); }
#season-pumpkins .pk.r { right: 0.4vw; width: 84px; height: 79px; transform: rotate(6deg); }

/* the candle. this is the part that actually matters, because it is
   the only light source at the bottom of the page. */
#season-pumpkins .glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 168, 44, 0.30) 0%,
    rgba(255, 132, 20, 0.15) 30%,
    rgba(255, 120, 16, 0.05) 52%,
    rgba(255, 120, 16, 0) 70%);
  animation: season-candle 3.7s ease-in-out infinite;
}

#season-pumpkins .pk.r .glow { animation-duration: 4.6s; animation-delay: -1.4s; }

#season-pumpkins svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

#season-pumpkins .rib  { fill: #b4500c; }
#season-pumpkins .body { filter: drop-shadow(0 0 14px rgba(255, 128, 20, 0.34)); }
#season-pumpkins .stem { fill: #3f5120; }

/* the cut-out face, lit from inside by the candle */
#season-pumpkins .cut {
  fill: #ffd25e;
  filter: drop-shadow(0 0 9px rgba(255, 186, 56, 0.95))
          drop-shadow(0 0 22px rgba(255, 146, 24, 0.65));
  animation: season-candle 2.9s ease-in-out infinite;
}

#season-pumpkins .pk.r .cut { animation-duration: 3.4s; animation-delay: -0.9s; }

@keyframes season-candle {
  0%, 100% { opacity: 1;    }
  17%      { opacity: 0.86; }
  31%      { opacity: 1;    }
  48%      { opacity: 0.78; }
  62%      { opacity: 0.97; }
  79%      { opacity: 0.88; }
}

/* ── the lightning ──
   Over everything at z-index 6, because a flash that happens behind
   the text is not a flash. It is 160ms total and it never sits at
   full strength, so it reads as a storm outside the window rather
   than a camera going off in your face. */

#season-bolt {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 60% at 72% 0%, rgba(214, 226, 255, 0.85) 0%, rgba(214, 226, 255, 0) 60%),
    linear-gradient(180deg, rgba(198, 214, 255, 0.40) 0%, rgba(198, 214, 255, 0) 70%);
}

#season-bolt.is-on { animation: season-bolt 1.05s ease-out 1; }

/* two strikes, because real lightning almost never fires once */
@keyframes season-bolt {
  0%   { opacity: 0;    }
  3%   { opacity: 0.90; }
  8%   { opacity: 0.10; }
  12%  { opacity: 0.72; }
  20%  { opacity: 0;    }
  46%  { opacity: 0;    }
  50%  { opacity: 0.46; }
  60%  { opacity: 0;    }
  100% { opacity: 0;    }
}

@media (max-width: 720px) {
  #season-pumpkins .pk   { width: 74px;  height: 70px; bottom: 20vh; }
  #season-pumpkins .pk.r { width: 62px;  height: 58px; }
  #season-pumpkins .glow { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
}

/* Somebody who asked for less movement gets the pumpkins standing
   still and no storm at all. The JS never builds the bolt under
   reduced motion; this is the belt to that suspenders. */
@media (prefers-reduced-motion: reduce) {
  #season-pumpkins .glow,
  #season-pumpkins .cut { animation: none; }
  #season-bolt { display: none; }
}