/* ===================================================================
   Space Garden — the living layer. Owned by night-garden-life.
   Pairs with assets/life.js, sits on top of garden.css / garden-fx.css.

   Nature in the night sky: thorny vines grow around a few product
   frames, flowers open on them now and then, ladybugs crawl the stems,
   and a few butterflies cross the page, perch on the flowers and lift
   off when the pointer comes close.

   Rules this file keeps:
   - only transform / opacity / stroke-dashoffset ever animate
   - nothing animated sits under a mask-image, clip-path or blur()
   - no backdrop-filter; glows are gradients
   - every decoration is pointer-events:none; butterflies sit behind
     all page content (z-index 0, content lifted to 1), above the sky
   - decoration containers overflow:clip, so nothing widens the page
   - reduced motion: vines and flowers are drawn fully grown, nothing flies
   =================================================================== */

/* ---------- vines (one <svg class="pg-vine"> per framed photo) ---------- */
.pg-vine{position:absolute;pointer-events:none;overflow:visible;z-index:6;display:block}
.pg-showcase .pg-vine{z-index:4}
/* a card that carries a vine lets the outer leaves wrap past its edge (the photo frame
   inside keeps its own overflow:hidden; the card's rounded corners need no clipping).
   The section clips sideways so a leaf past the viewport edge never widens the page. */
.card.pg-has-vine{overflow:visible}
section:has(.pg-has-vine){overflow-x:clip}
.pg-vine-story{z-index:3}

/* stem: short tapered strokes drawn one after another (pathLength=1) */
.pg-vine .stem{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.05;stroke-dashoffset:1;
  transition:stroke-dashoffset .22s linear var(--d,0s)}
.pg-vine.grown .stem{stroke-dashoffset:0}
/* thorns, leaves, tendrils and buds scale out of the stem as it arrives */
.pg-vine .grow{transform:scale(0);transform-origin:0 0;transform-box:view-box;
  transition:transform .55s cubic-bezier(.3,1.35,.45,1) var(--d,0s)}
.pg-vine .grow.leaf{transition-duration:.8s}
.pg-vine.grown .grow{transform:scale(1)}
.pg-vine .tendril{fill:none;stroke-linecap:round;stroke-dasharray:1 1.05;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.6,.3,1) var(--d,0s)}
.pg-vine.grown .tendril{stroke-dashoffset:0}

/* flowers: petals unfold from the centre, the bud fades as they do */
.pg-flower .pg-petal{transform:scale(0);transform-origin:0 0;transform-box:view-box;
  transition:transform .9s cubic-bezier(.3,1.25,.45,1) var(--d,0s)}
.pg-flower .pg-core{transform:scale(0);transform-origin:0 0;transform-box:view-box;
  transition:transform .6s cubic-bezier(.3,1.2,.5,1) var(--d,0s)}
.pg-flower .bud{transition:opacity .5s ease .25s}
.pg-flower.open .pg-petal,.pg-flower.open .pg-core{transform:scale(1)}
.pg-flower.open .bud{opacity:0}
/* a closing flower folds its petals quickly, no stagger */
.pg-flower.closing .pg-petal,.pg-flower.closing .pg-core{transition-delay:0s;transition-duration:.6s}

/* ---------- ladybug (lives inside a vine's svg) ---------- */
.pg-lb{opacity:0;transition:opacity .4s ease}
.pg-lb.on{opacity:1}
.pg-lb .legs-l,.pg-lb .legs-r{transform-origin:0 0;transform-box:view-box}
.pg-lb.crawl .legs-l{animation:pg-legs .22s ease-in-out infinite alternate}
.pg-lb.crawl .legs-r{animation:pg-legs .22s ease-in-out infinite alternate-reverse}
@keyframes pg-legs{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.pg-lb .ant{transform-origin:0 0;transform-box:view-box;animation:pg-ant 1.6s ease-in-out infinite alternate}
@keyframes pg-ant{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
/* elytra swing open on the hinge, the flight wings unfold and blur with speed */
.pg-lb .ely{transform-origin:0 0;transform-box:view-box;transition:transform .35s cubic-bezier(.3,.8,.4,1)}
.pg-lb.fly .ely.u{transform:rotate(-58deg) scale(.9,1)}
.pg-lb.fly .ely.d{transform:rotate(58deg) scale(.9,1)}
.pg-lb .hw{transform-origin:0 0;transform-box:view-box;transform:scale(0);opacity:0;transition:transform .3s ease .15s,opacity .3s ease .15s}
.pg-lb.fly .hw{transform:scale(1);opacity:.75}
.pg-lb.fly .hw.u{animation:pg-hw .09s linear .3s infinite alternate}
.pg-lb.fly .hw.d{animation:pg-hw .09s linear .3s infinite alternate-reverse}
@keyframes pg-hw{from{transform:scale(1,.7)}to{transform:scale(1,1.1)}}

/* ---------- butterflies: BEHIND all page content, above the star sky only ----------
   .pg-life (fixed, flying) and .pg-life-page (page-anchored, perched) are the first children of
   <body> at z-index:0; life.js lifts every other body child to z-index:1, so cards, photos, text,
   header and basket all paint over them. The sky canvas stays at -1. No pointer events at all:
   they are startled by the pointer coming near (document pointermove), never clicked. */
.pg-life{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:clip;contain:layout style}
.pg-bf{position:absolute;left:0;top:0;width:64px;height:72px;margin:-33px 0 0 -32px;pointer-events:none;
  opacity:0;transition:opacity .6s ease}
.pg-bf.on{opacity:1}
.pg-bf-ins{position:absolute;inset:0;perspective:170px;transform-style:preserve-3d}
.pg-wing{position:absolute;top:0;width:32px;height:72px;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
.pg-wing svg{display:block;width:100%;height:100%;overflow:visible}
.pg-wing.r{left:50%;transform-origin:0 46%}
.pg-wing.l{right:50%;transform-origin:100% 46%}
.pg-bf-body{position:absolute;left:50%;top:0;width:14px;height:72px;margin-left:-7px;pointer-events:none}
.pg-bf-body svg{display:block;width:100%;height:100%;overflow:visible}
/* flight: one beat per --flap (1/6..1/10 s). Asymmetric: the cycle starts at the glide angle,
   rises slowly to the top (30%), snaps down in a quarter of the cycle (55%), then rises again.
   Range 15-68deg: never flat, never closed, never 90. JS adds .glide to hold a shallow V. */
.pg-bf.flying .pg-wing.r{animation:pg-flap-r var(--flap,.12s) linear infinite}
.pg-bf.flying .pg-wing.l{animation:pg-flap-l var(--flap,.12s) linear infinite}
@keyframes pg-flap-r{
  0%{transform:rotateY(-28deg);animation-timing-function:cubic-bezier(.35,.1,.6,1)}
  30%{transform:rotateY(-68deg);animation-timing-function:cubic-bezier(.55,0,.75,.6)}
  55%{transform:rotateY(-15deg);animation-timing-function:cubic-bezier(.3,0,.6,1)}
  100%{transform:rotateY(-28deg)}}
@keyframes pg-flap-l{
  0%{transform:rotateY(28deg);animation-timing-function:cubic-bezier(.35,.1,.6,1)}
  30%{transform:rotateY(68deg);animation-timing-function:cubic-bezier(.55,0,.75,.6)}
  55%{transform:rotateY(15deg);animation-timing-function:cubic-bezier(.3,0,.6,1)}
  100%{transform:rotateY(28deg)}}
.pg-bf .pg-wing{transition:transform .22s cubic-bezier(.3,.6,.4,1)}
.pg-bf.flying.glide .pg-wing.r{animation:none;transform:rotateY(-28deg)}
.pg-bf.flying.glide .pg-wing.l{animation:none;transform:rotateY(28deg)}
/* startled: the same stroke, faster */
.pg-bf.flying.dash .pg-wing.r{animation-duration:calc(var(--flap,.12s) * .62)}
.pg-bf.flying.dash .pg-wing.l{animation-duration:calc(var(--flap,.12s) * .62)}
/* perched: wings held up together, open slowly, hold, close again every few seconds */
.pg-bf.perched .pg-wing.r{animation:pg-rest-r var(--rest,4.6s) ease-in-out infinite}
.pg-bf.perched .pg-wing.l{animation:pg-rest-l var(--rest,4.6s) ease-in-out infinite}
@keyframes pg-rest-r{0%,18%{transform:rotateY(-72deg)}42%,62%{transform:rotateY(-12deg)}86%,100%{transform:rotateY(-72deg)}}
@keyframes pg-rest-l{0%,18%{transform:rotateY(72deg)}42%,62%{transform:rotateY(12deg)}86%,100%{transform:rotateY(72deg)}}

/* perched butterflies live in this page-anchored layer so they scroll with their flower */
.pg-life-page{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;z-index:0;pointer-events:none}

/* gold dust shed on take-off (pooled <i>s, moved by the Web Animations API) */
.pg-dust{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff8e0 0%,#f0d488 45%,rgba(217,180,94,0) 72%);will-change:transform,opacity}

/* ---------- reduced motion: a still garden ---------- */
@media (prefers-reduced-motion:reduce){
  .pg-vine .stem,.pg-vine .tendril{stroke-dashoffset:0;transition:none}
  .pg-vine .grow,.pg-flower .pg-petal,.pg-flower .pg-core{transform:scale(1);transition:none}
  .pg-flower .bud{opacity:0;transition:none}
  .pg-lb,.pg-life,.pg-life-page{display:none}
}