/* ==========================================================================
   THE LFFO TREE — the association's mark at the height of a room
   --------------------------------------------------------------------------
   One inline SVG and a stylesheet. No canvas, no library, no per-frame
   JavaScript: every leaf is a path that the compositor moves on its own
   thread, so the whole canopy costs the browser two properties -- transform
   and opacity -- and nothing else. That is the difference between an
   animation a laptop fan notices and one it does not.

   Three motions, deliberately separated:

   BLOOM. The tree arrives rather than appearing. Boughs draw themselves out
   from the trunk, then each leaf opens from nothing on its own delay, so the
   canopy fills the way a canopy fills -- from the inside out, unevenly.
   It happens once, when the section is first scrolled to.

   BREATH. Every leaf then turns a couple of degrees back and forth on its own
   period, between six and seventeen seconds, no two the same. Periods that
   share no common multiple never come back into step, so the canopy keeps
   moving without ever pulsing in unison, which is what makes a generic leaf
   animation read as a loop.

   FALL. Seven leaves let go on long cycles, drift, spin slowly and fade
   before the ground. Seven is enough that one is nearly always in the air and
   few enough that it is never a shower.

   Reduced motion switches all three off and leaves the tree standing, which is
   the correct still image of it rather than a blank space.
   ========================================================================== */

.lffo-tree {
  position: relative;
  display: block;
  width: 100%;
  margin-inline: auto;
  max-width: 920px;
  padding: 0 16px;
  contain: layout paint;
}

.lffo-tree-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---- the drawing ------------------------------------------------------- */
.lffo-tree-svg .t-trunk,
.lffo-tree-svg .t-limb,
.lffo-tree-svg .t-twig,
.lffo-tree-svg .t-root,
.lffo-tree-svg .t-bark,
.lffo-tree-svg .t-ground {
  fill: none;
  stroke: var(--brown, #7a5238);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.lffo-tree-svg .t-body {
  fill: var(--tree-wood, #f3ece2);
  stroke: none;
}
.lffo-tree-svg .t-trunk  { stroke-width: 2.1; opacity: .95; }
.lffo-tree-svg .t-bark   { stroke-width: .7;  opacity: .26; }
.lffo-tree-svg .t-root   { stroke-width: 1.5; opacity: .60; }
.lffo-tree-svg .t-limb   { opacity: .94; }
.lffo-tree-svg .t-limb-b { stroke-width: .8;  opacity: .34; }
.lffo-tree-svg .t-twig   { stroke-width: 1.1; opacity: .72; }
.lffo-tree-svg .t-ground { stroke-width: 1;   opacity: .22; stroke: var(--gold, #c9a34e); }

.lffo-tree-svg .t-leaf path,
.lffo-tree-svg .t-fall path { stroke: none; }

/* ---- resting state: the tree stands, nothing moves --------------------- */
.lffo-tree-svg .t-leaf  { transform-box: fill-box; transform-origin: 50% 92%; }
.lffo-tree-svg .t-fall  { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.lffo-tree-svg .t-bough { transform-box: fill-box; transform-origin: 50% 100%; }

/* Before the bloom runs, the canopy is closed. Only applied while the section
   has not been reached, so a reader who lands mid-page never sees a bare tree. */
.lffo-tree:not(.is-open):not(.is-static) .t-leaf { opacity: 0; transform: scale(.2) rotate(-14deg); }
.lffo-tree:not(.is-open):not(.is-static) .t-bough { opacity: 0; }

/* ---- bloom ------------------------------------------------------------- */
.lffo-tree.is-open .t-bough {
  animation: lffoBoughIn .9s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * .085s);
}
@keyframes lffoBoughIn {
  0%   { opacity: 0; transform: scaleY(.72) rotate(1.4deg); }
  100% { opacity: 1; transform: scaleY(1) rotate(0deg); }
}

.lffo-tree.is-open .t-leaf {
  animation:
    lffoLeafIn .82s cubic-bezier(.2,1.15,.32,1) both,
    lffoLeafBreath var(--p, 9s) ease-in-out infinite;
  animation-delay: calc(.35s + var(--d, 0s)), calc(1.1s + var(--d, 0s));
}
@keyframes lffoLeafIn {
  0%   { opacity: 0; transform: scale(.2) rotate(-14deg); }
  62%  { opacity: 1; transform: scale(1.06) rotate(3deg); }
  100% { opacity: var(--o, .96); transform: scale(1) rotate(0deg); }
}
/* The breath returns to its own 0% value, so it can loop forever without the
   canopy creeping away from where the bloom left it. */
@keyframes lffoLeafBreath {
  0%   { transform: rotate(0deg)   translateY(0); }
  25%  { transform: rotate(var(--sw, 3deg)) translateY(-1.5px); }
  50%  { transform: rotate(0deg)   translateY(0); }
  75%  { transform: rotate(calc(var(--sw, 3deg) * -.7)) translateY(1.2px); }
  100% { transform: rotate(0deg)   translateY(0); }
}

/* ---- fall -------------------------------------------------------------- */
.lffo-tree.is-open .t-fall {
  animation: lffoFall var(--p, 18s) cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes lffoFall {
  0%      { opacity: 0;   transform: translate(0, 0) rotate(0deg) scale(1); }
  4%      { opacity: .95; transform: translate(0, 6px) rotate(12deg) scale(1); }
  38%     { opacity: .95; transform: translate(calc(var(--dx, 60px) * .42), 150px) rotate(calc(var(--sp, 320deg) * .38)) scale(.98); }
  70%     { opacity: .75; transform: translate(calc(var(--dx, 60px) * .78), 268px) rotate(calc(var(--sp, 320deg) * .72)) scale(.94); }
  92%     { opacity: 0;   transform: translate(var(--dx, 60px), 356px) rotate(var(--sp, 320deg)) scale(.9); }
  100%    { opacity: 0;   transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* ---- off-screen: stop paying for it ------------------------------------ */
.lffo-tree.is-idle .t-leaf,
.lffo-tree.is-idle .t-fall,
.lffo-tree.is-idle .t-bough { animation-play-state: paused; }

/* ---- reduced motion: the tree, standing --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lffo-tree .t-leaf,
  .lffo-tree .t-fall,
  .lffo-tree .t-bough { animation: none !important; }
  .lffo-tree .t-leaf  { opacity: var(--o, .96); transform: none; }
  .lffo-tree .t-bough { opacity: 1; }
  .lffo-tree .t-fall  { opacity: 0; }
}

/* ---- the band it sits in ----------------------------------------------- */
.tree-band {
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0 clamp(8px, 2vw, 24px);
  overflow: hidden;
}
.tree-band .tree-band-in {
  max-width: 1180px; margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
  text-align: center;
}
.tree-band .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: .70rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold-deep, #a07c33); margin: 0 0 16px;
}
.tree-band .eyebrow::before,
.tree-band .eyebrow::after {
  content: ""; width: 30px; height: 1px; background: var(--gold, #c9a34e); opacity: .75;
}
.tree-band h2 {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08;
  color: var(--navy, #0f2038); margin: 0 0 14px; letter-spacing: -.015em;
}
.tree-band p.tree-lede {
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: clamp(.95rem, 1.4vw, 1.06rem); line-height: 1.66;
  color: var(--ink-soft, #5b6b82);
  max-width: 56ch; margin: 0 auto clamp(18px, 3vw, 34px);
}