/* fall-2026.css -- 24K Labs fall decorations (falling leaves + one footer pumpkin).
   Only .f26-* classes, which only fall-2026.js creates: without the script, or once it has
   expired, this file does nothing. Nothing here takes part in page layout. */

.f26-host{position:relative}   /* the footer the pumpkin sits in; moves nothing */

/* leaves. A lane = a MEASURED empty strip at a page edge (the script sets its width) and clips
   its leaves. Default: whole window height, BEHIND the page. .f26-front: in front (wide inner
   pages). .f26-band: one clear stretch of the page, placed by the script, scrolls with it. */
.f26-leaves{position:absolute;top:0;left:0;right:0;height:0;pointer-events:none}
.f26-lane{position:fixed;top:0;bottom:0;z-index:-1;overflow:hidden;pointer-events:none;--h:124vh}
.f26-L{left:0}
.f26-R{right:0}
.f26-front{z-index:2}
.f26-band{position:absolute;bottom:auto}
.f26-leaf{position:absolute;top:-12vh;width:var(--z);height:var(--z);color:var(--c);
  opacity:var(--o);pointer-events:none;will-change:transform;
  animation:f26-fall var(--d) linear var(--dl) infinite}
.f26-band .f26-leaf{top:0}
.f26-leaf svg{display:block;width:100%;height:100%;fill:currentColor;
  animation:f26-sway var(--s) ease-in-out var(--dl) infinite alternate}
.f26-leaf .f26-vein{fill:none;stroke:#000;stroke-opacity:.28;stroke-width:1;stroke-linecap:round}
.f26-gold{color:var(--gold,#D4AF37)}   /* the site's own gold */
/* fades at both ends of its drop: never pops up mid-page */
@keyframes f26-fall{0%{transform:translate3d(0,0,0);opacity:0}6%,94%{opacity:var(--o)}
  100%{transform:translate3d(0,calc(var(--h) - var(--z)),0);opacity:0}}
@keyframes f26-sway{from{transform:translateX(calc(var(--a)*-1)) rotate(-40deg)}
  to{transform:translateX(var(--a)) rotate(44deg)}}

/* pumpkin (z-index 3: in-front leaves pass behind it and the switch) */
.f26-pk{position:absolute;z-index:3;left:12px;bottom:1px;width:40px;height:36px;
  pointer-events:none}
.f26-pk svg{display:block;width:100%;height:100%;overflow:visible}
.f26-pk .f26-spark{fill:var(--gold,#D4AF37)}
.f26-hw svg{filter:drop-shadow(0 0 5px rgba(255,159,28,.38))}
.f26-hw .f26-face{animation:f26-flicker 3.4s ease-in-out infinite}
@keyframes f26-flicker{0%,100%{opacity:1}42%{opacity:.84}58%{opacity:.97}74%{opacity:.8}}

/* the visitor's off-switch: the only clickable thing here */
.f26-btn{position:absolute;z-index:3;right:12px;bottom:7px;display:inline-flex;align-items:center;
  gap:5px;margin:0;padding:5px 9px;border:1px solid transparent;border-radius:12px;
  background:none;-webkit-appearance:none;appearance:none;cursor:pointer;
  color:var(--text-muted,var(--dim,#9a9aa8));
  font:12px/1.2 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:.02em;text-transform:none;white-space:nowrap}
.f26-btn:hover,.f26-btn:focus-visible{color:var(--gold,#D4AF37);border-color:currentColor}
.f26-btn:focus-visible{outline:2px solid var(--gold,#D4AF37);outline-offset:2px}
.f26-btn svg{display:block;width:12px;height:12px;fill:currentColor;flex:none}
/* phones: "hide"/"show"; full words stay for screen readers */
@media (max-width:480px){.f26-btn .f26-m{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}

/* reduced motion: no leaves, a still pumpkin */
@media (prefers-reduced-motion:reduce){.f26-leaves{display:none!important}
  .f26-hw .f26-face{animation:none!important}}
.f26-still .f26-face{animation:none!important}

/* never on paper or in high-contrast mode */
@media print{.f26-leaves,.f26-pk,.f26-btn{display:none!important}}
@media (forced-colors:active){.f26-leaves,.f26-pk{display:none!important}}