/* fall-2026.css -- 24K Labs fall decorations (falling leaves + a footer pumpkin patch +
   a quiet homepage night sky). 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: every rule below is position:absolute/fixed, pointer-events:none, or on an
   element the script itself made room for (the footer, which already had empty space below
   its text). */

.f26-host{position:relative}   /* the footer the patch 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)}}

/* small pumpkins resting at the foot of a leaf lane (front/inner pages only) -- same measured
   room as a leaf, so just as safe. A gentle idle bob, no fall: pumpkins don't drop from the sky. */
.f26-scatter-pk{position:absolute;bottom:6px;width:var(--z);height:calc(var(--z) * .9);
  opacity:.85;pointer-events:none;transform:rotate(var(--rot));
  animation:f26-bob 5s ease-in-out infinite alternate}
.f26-scatter-pk svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes f26-bob{from{transform:rotate(var(--rot)) translateY(0)}to{transform:rotate(var(--rot)) translateY(-3px)}}

/* the footer pumpkin patch -- several pumpkins, varied size, left-anchored in the corner that was
   always clear below the copyright line. Each has its own left offset + size (--z) + rotation set
   inline by the script; this file only says HOW a patch pumpkin looks and sits. */
.f26-patch{position:absolute;z-index:3;left:12px;bottom:1px;width:178px;height:44px;
  pointer-events:none}
.f26-pk{position:absolute;left:0;bottom:0;width:var(--z);height:calc(var(--z) * .906);
  transform:rotate(var(--rot));transform-origin:50% 100%}
.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}}
@media (max-width:480px){.f26-patch{width:130px;transform:scale(.86);transform-origin:0 100%}}

/* homepage-only night sky: a big, detailed, hazy moon + a scatter of stars, top-right, fixed, WAY
   behind everything (leaf lanes sit at -1). Sean's own reference photos: bigger, more detailed,
   a little hazy/atmospheric -- still low-opacity enough that real headline text stays crisp. */
/* absolute + pinned to the TOP OF THE DOCUMENT, not the viewport: a real backdrop behind the
   hero that scrolls away with it, not a watermark stuck to the screen at every scroll depth
   (position:fixed did exactly that on first render -- the moon sat over unrelated lower
   sections the whole way down the page, which read as broken, not atmospheric). */
body.f26-scene{position:relative}
.f26-scene-bg{position:absolute;top:0;left:0;right:0;height:min(100vh,900px);z-index:-3;
  pointer-events:none;
  background:radial-gradient(ellipse 52% 40% at 86% 5%,rgba(242,163,58,.2),transparent 74%),
    linear-gradient(180deg,rgba(27,16,38,.55) 0%,rgba(27,16,38,0) 40%)}
/* the moon + stars: a FIXED-SIZE picture pinned to the corner, not stretched to the viewport --
   an SVG scaled with preserveAspectRatio "slice" across a very wide/short box blows the moon up
   far past its intended size, which is what a full-bleed version of this did on first render.
   top:70px, not 0: the site's own fixed nav bar (opaque, z-index 1000, ~72px) sits above the
   scene's z-index -3, so pinning to the very top would hide most of a big moon behind it. */
.f26-scene-bg svg{position:absolute;top:70px;right:0;width:min(36vw,560px);height:min(25.2vw,392px);
  max-width:560px;max-height:392px}
@media (max-width:640px){.f26-scene-bg svg{width:78vw;height:54.6vw;top:60px}}

/* gnarled bare branches reaching in from the top corners -- a dark silhouette frame, like an old
   tree overhanging the scene. Sits with the moon/stars, same z-index, same fixed positioning. */
.f26-branch{position:absolute;top:70px;width:min(30vw,420px);height:min(21vw,294px);
  max-width:420px;max-height:294px;opacity:.6}
.f26-branch svg{display:block;width:100%;height:100%}
.f26-branch-l{left:0}
.f26-branch-r{right:0}
@media (max-width:640px){.f26-branch{width:52vw;height:36.4vw}}

/* reduced motion: no falling leaves or bobbing scatter pumpkins; a still patch */
@media (prefers-reduced-motion:reduce){.f26-leaves{display:none!important}
  .f26-scatter-pk{animation:none!important}
  .f26-hw .f26-face{animation:none!important}}
.f26-still .f26-face{animation:none!important}
.f26-patch.f26-still ~ .f26-leaves .f26-scatter-pk{animation:none!important}

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