/* =====================================================================
   PinBoostr — leaf art shared by /deal/ and /roadmap/ (inc/leaves.php).
   Flat leaves only: no gradients, glow or blur; depth comes from the
   layered colours. A page sets the colours on a wrapper:
   --lf-1 … --lf-5 (darkest → lightest green), --lf-r1 … --lf-r3 (roses).
   Growth effects run only once a script has marked a block [data-anim]
   (without JS everything is simply there) and start on .is-in.
   ===================================================================== */

/* Leaves scattered around a section, swaying on their stems. Sizes scale down on phones (--k). */
.pbl-canopy { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pbl-l { --k: 1; position: absolute; width: calc(var(--s) * var(--k)); height: auto; overflow: visible; rotate: var(--r, 0deg); animation: pbl-sway var(--d, 7s) ease-in-out infinite alternate; }
.pbl-l.is-monstera, .pbl-l.is-caladium { aspect-ratio: 1; transform-origin: 50% 100%; }
.pbl-l.is-leaf { aspect-ratio: 200 / 80; transform-origin: 0 50%; }
.pbl-l.is-frond { aspect-ratio: 240 / 140; transform-origin: 2% 93%; }
.pbl-l.is-vine { aspect-ratio: 80 / 420; transform-origin: 50% 0; animation-name: pbl-hang; }
.pbl-l.is-r { scale: -1 1; }
.pbl-l.c1, .pbl-fringe .c1 { color: var(--lf-1, #0a2f21); fill: var(--lf-1, #0a2f21); }
.pbl-l.c2, .pbl-fringe .c2 { color: var(--lf-2, #135a3d); fill: var(--lf-2, #135a3d); }
.pbl-l.c3, .pbl-fringe .c3 { color: var(--lf-3, #1d7a4c); fill: var(--lf-3, #1d7a4c); }
.pbl-l.c4 { color: var(--lf-4, #379a5b); }
.pbl-l.c5 { color: var(--lf-5, #79c46a); }
.pbl-l.r1 { color: var(--lf-r1, #e11d48); }
.pbl-l.r2 { color: var(--lf-r2, #fb7185); }
.pbl-l.r3 { color: var(--lf-r3, #ffc9d6); }
/* Caladium tones: green edge with a rose heart, or the other way round (is-rose). */
.pbl-l.is-caladium { --leaf-a: var(--lf-3, #1d7a4c); --leaf-b: var(--lf-r1, #e11d48); --leaf-v: var(--lf-r3, #ffc9d6); }
.pbl-l.is-caladium.is-rose { --leaf-a: var(--lf-r2, #fb7185); --leaf-b: var(--lf-4, #379a5b); --leaf-v: #fff; }
@keyframes pbl-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes pbl-hang { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@media (max-width: 899px) { .pbl-l { --k: .55; } .pbl-l.is-wide { display: none; } }

/* Grass blades along a section's bottom edge. */
.pbl-fringe { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 1; width: 100%; height: 72px; pointer-events: none; }
.pbl-fringe path { fill: currentColor; }

/* Fireflies (dark sections) and petals (light sections). */
.pbl-flies, .pbl-petals { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.pbl-fly { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: #fff3a8; opacity: 0; animation: pbl-fly var(--d) ease-in-out var(--w) infinite; }
@keyframes pbl-fly { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .95; } 50% { opacity: .35; transform: translate(18px, -26px); } 75% { opacity: .9; } 100% { opacity: 0; transform: translate(-10px, -48px); } }
.pbl-petal { position: absolute; top: -24px; left: var(--x); width: 13px; height: 9px; border-radius: 80% 0 80% 0; background: var(--lf-r2, #fb7185); opacity: 0; animation: pbl-fall var(--d) linear var(--w) infinite; }
.pbl-petal.is-1 { background: var(--lf-r1, #e11d48); width: 10px; height: 7px; }
.pbl-petal.is-2 { background: var(--lf-5, #79c46a); }
@keyframes pbl-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10% { opacity: .9; }
  50% { transform: translate(var(--sw), 50vh) rotate(200deg); }
  90% { opacity: .8; }
  100% { opacity: 0; transform: translate(calc(var(--sw) * -0.5), 100vh) rotate(420deg); }
}

/* Two vines that grow up the sides of a block: stem draws in, leaves unfurl in order, tendrils curl, a flower opens. */
.pbl-stem { fill: none; stroke: var(--lf-4, #379a5b); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pbl-stem.is-curl { stroke: var(--lf-5, #79c46a); stroke-width: 3.5; }
.pbl-sprout { fill: var(--lf-5, #79c46a); transform-box: view-box; transform-origin: 0 0; }
.pbl-vines g:nth-child(even) > .pbl-sprout { fill: var(--lf-4, #379a5b); }
.pbl-bloom { transform-box: view-box; transform-origin: 0 0; }
.pbl-bloom circle { fill: #ffe06a; }
.pbl-bloom .is-heart { fill: var(--lf-r1, #e11d48); }
[data-anim] .pbl-stem { stroke-dashoffset: 1; }
[data-anim].is-in .pbl-stem { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.45, 0, .2, 1); }
[data-anim].is-in .pbl-stem.is-curl { transition-duration: 1s; transition-delay: 1.5s; }
[data-anim] .pbl-sprout { transform: scale(0); }
[data-anim].is-in .pbl-sprout { transform: none; transition: transform .55s cubic-bezier(.2, .9, .3, 1.5) calc(.25s + var(--i) * .2s); }
[data-anim] .pbl-bloom { transform: scale(0) rotate(-90deg); }
[data-anim].is-in .pbl-bloom { transform: none; transition: transform .7s cubic-bezier(.2, .9, .3, 1.5) 2.3s; }
.is-in .pbl-bloom { animation: pbl-bloom 6s 3.2s ease-in-out infinite; }
@keyframes pbl-bloom { 50% { transform: rotate(36deg) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .pbl-l, .pbl-fly, .pbl-petal, .pbl-bloom { animation: none !important; }
  .pbl-fly, .pbl-petal { display: none; }
  [data-anim] .pbl-stem, [data-anim] .pbl-sprout, [data-anim] .pbl-bloom { stroke-dashoffset: 0; transform: none; transition: none !important; }
}