/* ===================================================================
   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}

/* ---------- Thanksgiving (html[data-pg-season=thanksgiving], set up in life.js) ----------
   Autumn leaves drift down in the flying layer, behind the page, in place of the butterflies. life.js
   moves each one with a single transform per frame (fall, pendulum swing, half turn-over); CSS only
   fades it in and out. No blur, no mask, no filter. */
.pg-leaf{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;will-change:transform}
.pg-leaf.on{opacity:var(--o,.9)}
.pg-leaf svg{display:block;width:100%;height:100%;overflow:visible}

/* every pivot group in the turkey and squirrel turns about its joint: life.js puts the joint at (0,0) */
.pg-tk .pv,.pg-sq .pv,.pg-goose .gw{transform-box:view-box;transform-origin:0 0}

/* turkeys: a zero-height track on a frame's top edge; the turkey stands on it, moved by one
   transform per frame (translate + facing). Not clickable, never over a photo. */
.pg-tk-track{position:absolute;height:0;pointer-events:none}
.pg-tk{position:absolute;pointer-events:none;will-change:transform}
.pg-tk svg{display:block;width:100%;height:100%;overflow:visible}
/* strutting: legs swing from the hip in turn, the body rises on each step, the head thrusts and
   draws back once a stride (as a walking turkey's does) */
.pg-tk.walk .tk-leg.l{animation:pg-tk-leg .55s ease-in-out infinite alternate}
.pg-tk.walk .tk-leg.r{animation:pg-tk-leg .55s ease-in-out infinite alternate-reverse}
@keyframes pg-tk-leg{from{transform:rotate(-17deg)}to{transform:rotate(17deg)}}
.pg-tk.walk .tk-up{animation:pg-tk-step .275s ease-in-out infinite alternate}
@keyframes pg-tk-step{from{transform:translateY(.6px)}to{transform:translateY(-.5px)}}
.pg-tk.walk .tk-neck{animation:pg-tk-head .55s cubic-bezier(.5,0,.3,1) infinite alternate}
@keyframes pg-tk-head{from{transform:translate(-1.4px,.3px)}to{transform:translate(1.8px,-.2px)}}
/* pecking: the body tips forward, the neck dips to the edge twice */
.pg-tk.peck .tk-up{animation:pg-tk-tip 1.3s ease-in-out}
@keyframes pg-tk-tip{0%,100%{transform:rotate(0)}22%,70%{transform:rotate(26deg)}}
.pg-tk.peck .tk-neck{animation:pg-tk-peck 1.3s ease-in-out}
@keyframes pg-tk-peck{0%,100%{transform:rotate(0)}24%{transform:translate(2px,4px) rotate(58deg)}36%{transform:translate(1px,2px) rotate(34deg)}48%{transform:translate(2px,4px) rotate(60deg)}72%{transform:rotate(8deg)}}
/* the tail: folded back over the rump; on display each feather swings out to its place in the fan,
   the centre ones first, the coverts rise at its base, the body puffs, the wings droop, the head
   draws back and the wattle and snood flush */
.pg-tk .tk-fe{transform:rotate(var(--r0)) scale(.84,.8);transition:transform .45s cubic-bezier(.4,0,.3,1)}
.pg-tk.display .tk-fe{transform:rotate(var(--r1)) scale(1);transition:transform .55s cubic-bezier(.3,1.35,.5,1) var(--fd)}
.pg-tk .tk-cov{transform:scale(.25);opacity:0;transition:transform .4s ease,opacity .3s ease}
.pg-tk.display .tk-cov{transform:scale(1);opacity:1;transition:transform .5s cubic-bezier(.3,1.3,.5,1) .12s,opacity .3s ease .1s}
.pg-tk .tk-up,.pg-tk .tk-wing,.pg-tk .tk-neck,.pg-tk .tk-snood{transition:transform .4s cubic-bezier(.3,1.2,.5,1)}
.pg-tk.display .tk-up{transform:scale(1.1)}
.pg-tk.display .tk-wing{transform:rotate(-13deg)}
.pg-tk.display .tk-neck{transform:translate(-2.4px,2px) rotate(-6deg)}
.pg-tk.display .tk-snood{transform:scale(1.1,1.4)}
.pg-tk .tk-flush{opacity:0;transition:opacity .5s ease}
.pg-tk.display .tk-flush{opacity:.9}

/* the squirrel (lives in a vine's svg, in the ladybug's slot): a bounding scamper, a tail that
   sways and flicks, sitting up with an acorn, a stretched leap */
.pg-sq{opacity:0;transition:opacity .4s ease}
.pg-sq.on{opacity:1}
.pg-sq .sq-tail{animation:pg-sq-sway 1.9s ease-in-out infinite alternate}
@keyframes pg-sq-sway{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
.pg-sq.flick .sq-tail{animation:pg-sq-flick .32s ease-in-out 3}
@keyframes pg-sq-flick{0%,100%{transform:rotate(0)}40%{transform:rotate(-22deg)}70%{transform:rotate(9deg)}}
.pg-sq.run .sq-up{animation:pg-sq-bound .2s ease-in-out infinite alternate}
@keyframes pg-sq-bound{from{transform:rotate(-7deg) translateY(.4px)}to{transform:rotate(5deg) translateY(-1.4px)}}
.pg-sq.run .sq-fl{animation:pg-sq-leg .2s ease-in-out infinite alternate}
.pg-sq.run .sq-hl{animation:pg-sq-leg .2s ease-in-out infinite alternate-reverse}
@keyframes pg-sq-leg{from{transform:rotate(-26deg)}to{transform:rotate(24deg)}}
.pg-sq .sq-up{transition:transform .25s cubic-bezier(.3,1.2,.5,1)}
.pg-sq.sit .sq-up{transform:rotate(-34deg)}
.pg-sq.sit .sq-head{animation:pg-sq-nib .26s ease-in-out infinite alternate}
@keyframes pg-sq-nib{from{transform:rotate(-2deg)}to{transform:rotate(9deg)}}
.pg-sq .sq-acorn{opacity:0;transition:opacity .2s ease}
.pg-sq.sit .sq-acorn{opacity:1}
.pg-sq.noacorn .sq-acorn{opacity:0}
.pg-sq.leap .sq-up{transform:rotate(-12deg)}
.pg-sq.leap .sq-fl{transform:rotate(-40deg)}
.pg-sq.leap .sq-hl{transform:rotate(40deg)}

/* geese: the whole V is one element in the flying layer, behind the page; each goose's wings are
   one group that beats about the shoulder line */
.pg-geese{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transition:opacity 1.6s ease;will-change:transform}
.pg-geese.on{opacity:.9}
.pg-goose{position:absolute;width:38px;height:30px;margin:-18px 0 0 -18px}
.pg-goose svg{display:block;width:100%;height:100%;overflow:visible}
.pg-geese.fly .gw{animation:pg-goose-flap .45s ease-in-out infinite alternate}
@keyframes pg-goose-flap{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}

/* the page ground warms to a harvest night: deep burgundy-brown, an amber glow from above
   (the header, cards and panels keep their own colours) */
html[data-pg-season="thanksgiving"]{
  background:
    radial-gradient(60rem 36rem at 50% -8rem, rgba(226,150,70,.16), transparent 62%),
    radial-gradient(44rem 30rem at 85% 40%, rgba(84,20,28,.5), transparent 65%),
    radial-gradient(40rem 32rem at 12% 80%, rgba(70,30,16,.5), transparent 65%),
    #120907;
}

/* a quiet greeting under the hero's Farsi line: text only, between two gold hairlines.
   Hidden in every other season. */
.pg-season-line{display:none}
html[data-pg-season="thanksgiving"] .pg-season-line{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  margin:.1rem auto .55rem;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.02rem;letter-spacing:.04em;color:#e9c77a;
  animation:pg-rise .75s var(--ease,ease) backwards;animation-delay:.19s}
html.pg-boot[data-pg-season="thanksgiving"] .pg-season-line{animation-delay:calc(var(--pg-t0) + .19s)}
.pg-season-line::before,.pg-season-line::after{content:"";width:2.4rem;height:1px;flex:none;
  background:linear-gradient(90deg,rgba(217,180,94,0),rgba(217,180,94,.75))}
.pg-season-line::after{background:linear-gradient(90deg,rgba(217,180,94,.75),rgba(217,180,94,0))}
@media(min-width:900px){
  html[data-pg-season="thanksgiving"] .pg-season-line{justify-content:flex-start}
  .pg-season-line::before{display:none}
}

/* ---------- 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-season-line{animation:none!important}
  .pg-lb,.pg-sq,.pg-life,.pg-life-page{display:none}
  /* the turkeys stay, standing still in full display */
  .pg-tk *{animation:none!important;transition:none!important}
}