/* ==========================================================================
   Autumn leaves — decorative falling-leaf overlay.
   Only transform and opacity animate, so every leaf stays on the compositor
   and the page underneath never relayouts. Each leaf's position, size, speed,
   sway and colour arrive as inline custom properties from autumn-leaves.js.
   ========================================================================== */

.jl-leaves {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 50; /* above page content, below the mobile drawer (999) */

  /* Autumn tones, each nudged from a core colour so the drift still reads as
     the brand: reds pulled from bordeaux, oranges warmed from rust, yellows
     lifted from brass. */
  --jl-leaf-wine:    #7E2233; /* bordeaux, a touch warmer */
  --jl-leaf-crimson: #A3313A; /* bordeaux lightened towards red */
  --jl-leaf-rust:    #B24A22;
  --jl-leaf-orange:  #D6712F;
  --jl-leaf-apricot: #E39A55;
  --jl-leaf-amber:   #D5952E;
  --jl-leaf-gold:    #C9A24E; /* between brass and brass-light */
  --jl-leaf-straw:   #DDBE6E; /* brass-light, sun-faded */
}

/* The ribbon and masthead sit just above the overlay, so the leaves fall
   behind the header rather than across the wordmark and nav. Lives here, not in
   header.css, because the layering only exists for the leaves. */
.jl-announce,
.site-header {
  position: relative;
  z-index: 51;
}

.jl-leaves__leaf {
  position: absolute;
  top: -10vh;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  color: var(--color);
  opacity: 0;
  animation: jl-leaf-fall var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}

/* The flutter lives on the inner element so its sway/tumble composes with the
   outer fall instead of fighting it in one transform. */
.jl-leaves__leaf svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: jl-leaf-flutter var(--sway) ease-in-out var(--delay) infinite alternate;
}

@keyframes jl-leaf-fall {
  0%   { transform: translate3d(0, 0, 0);                 opacity: 0; }
  6%   { opacity: var(--alpha); }
  90%  { opacity: var(--alpha); }
  100% { transform: translate3d(var(--drift), 112vh, 0);  opacity: 0; }
}

@keyframes jl-leaf-flutter {
  from { transform: translateX(calc(var(--size) * -.9)) rotateZ(-35deg) rotateX(0deg); }
  to   { transform: translateX(calc(var(--size) *  .9)) rotateZ(40deg)  rotateX(150deg); }
}

@media (prefers-reduced-motion: reduce) {
  .jl-leaves { display: none; }
}