/* ===================================================================
   Night Garden — motion layer. Owned by night-garden-motion.
   Pairs with assets/garden.js. Every rule here animates only
   transform / opacity / stroke-dashoffset; nothing moves under a
   mask-image or a blur filter, and nothing with backdrop-filter is
   translated continuously (the card tilt switches itself off when a
   card still carries one). Everything collapses under reduced motion.

   Hooks the visual layer can rely on:
     html.pg-boot   set by the inline head script before first paint
     html.pg-on     set by garden.js when the sky is live
     html.pg-quick  with pg-on: a return visit this session (short intro)
     html.pg-fine   mouse + hover available
     html.pg-tilt   cards may tilt (no backdrop-filter on them)
     --pg-t0        when the page content starts to appear (1.3s on the
                    first view, .1s after, 0s if garden.js never runs);
                    use it to delay hero entrances so they are not
                    hidden under main's own fade
     .pg-split      a headline whose words rise in one by one
     .sec-head.pg-vis  a section heading that has scrolled into view
   The sky canvas sits at z-index -1, so the page background must stay
   on <body> (propagated to the viewport) or be transparent; a solid
   background on <html> plus an opaque <body> hides it.
   =================================================================== */

/* ---------- fixed layers ---------- */
/* the sky canvas carries the gold dust band as its own background (painted once by garden.js) */
.pg-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;contain:strict;background:no-repeat center/cover}
.pg-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:200;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);will-change:transform;
  background:linear-gradient(90deg,#c0932e,#f0d488 55%,#d9b45e)}
.pg-fx{position:fixed;inset:0;z-index:96;pointer-events:none;contain:strict;overflow:hidden}
/* basket burst particles (colour set inline by garden.js, shape by class) */
.pg-p{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;will-change:transform,opacity;opacity:0}
.pg-p.leaf{width:11px;height:6px;border-radius:100% 0 100% 0}
.pg-p.drop{width:8px;height:8px;border-radius:50% 50% 50% 0}
.pg-p.ribbon{width:4px;height:15px;border-radius:2px;left:-2px;top:-7px}
.pg-p.spark{width:5px;height:5px;left:-2px;top:-2px}

/* ---------- back to top: the look is garden.css's (.pg-top, .pg-show, --p). This is only the fallback
   garden.js builds when the markup is missing; same class names, so garden.css styles it too. ---------- */
.pg-top-fallback{position:fixed;left:1.1rem;bottom:1.1rem;z-index:70;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(10,21,16,.92);opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.pg-top-fallback.pg-show{opacity:1;transform:none;pointer-events:auto}
.pg-top-fallback svg{width:48px;height:48px;display:block;fill:none;stroke:#d9b45e;stroke-linecap:round;stroke-width:1.5}
.pg-top-fallback .pg-top-track{stroke:rgba(217,180,94,.22)}
.pg-top-fallback .pg-top-ring{transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:131.95;stroke-dashoffset:calc(131.95 * (1 - var(--p,0)))}
@media (max-width:640px){body:has(.cart-fab.show) .pg-top-fallback{bottom:calc(.9rem + 58px)}}

/* ---------- start-up ----------
   Dark page, the sky breathes in (the canvas fades itself over 1.2s),
   the top bar settles at 1s, the page content rises from 1.25s.
   .pg-boot alone (garden.js never ran) times out after 2.6s and shows
   everything, so a script failure is a short delay, never a blank page. */
html{--pg-t0:0s}
html.pg-boot{--pg-t0:1.3s}
html.pg-boot.pg-quick{--pg-t0:.1s}
html.pg-boot header,html.pg-boot .ig-bar,html.pg-boot main{opacity:0}
html.pg-boot:not(.pg-on) header,html.pg-boot:not(.pg-on) .ig-bar,html.pg-boot:not(.pg-on) main{
  animation:pg-failsafe .8s ease 2.6s both}
@keyframes pg-failsafe{from{opacity:0}to{opacity:1}}

/* the header keeps its own backdrop-filter, so it only fades; the nav inside it does the settle */
html.pg-on header,html.pg-on .ig-bar{animation:pg-fade 1.1s cubic-bezier(.25,.6,.25,1) 1s both}
html.pg-on header nav{animation:pg-settle 1.1s cubic-bezier(.25,.6,.25,1) 1s both}
html.pg-on main{animation:pg-enter 1.6s cubic-bezier(.25,.6,.25,1) 1.25s both}
html.pg-on.pg-quick header,html.pg-on.pg-quick .ig-bar{animation:pg-fade .4s ease 0s both}
html.pg-on.pg-quick header nav{animation:pg-settle .4s ease 0s both}
html.pg-on.pg-quick main{animation:pg-enter .6s ease .1s both}
@keyframes pg-fade{from{opacity:0}to{opacity:1}}
@keyframes pg-settle{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes pg-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* the page's own hero stagger (pg-rise in index.html) is pushed back so it
   is not spent while main is still invisible */
html.pg-boot .hero-seal{animation-delay:var(--pg-t0)}
html.pg-boot .hero .fa-title{animation-delay:calc(var(--pg-t0) + .14s)}
html.pg-boot .hero p.tag{animation-delay:calc(var(--pg-t0) + .24s)}
html.pg-boot .hero .badges{animation-delay:calc(var(--pg-t0) + .34s)}
html.pg-boot .hero .hero-ctas{animation-delay:calc(var(--pg-t0) + .44s)}

/* ---------- the seal's double ring breathes outward from the medallion (injected by garden.js) ---------- */
.pg-pulse{position:absolute;inset:-18px;border-radius:50%;pointer-events:none}
.pg-pulse i{position:absolute;inset:0;border-radius:50%;border:1px solid #d9b45e;opacity:0;
  animation:pg-pulse 5.2s cubic-bezier(.2,.5,.4,1) infinite;will-change:transform,opacity}
.pg-pulse i+i{animation-delay:2.6s;border-width:.5px}
@keyframes pg-pulse{0%{transform:scale(1);opacity:0}12%{opacity:.3}100%{transform:scale(1.42);opacity:0}}

/* ---------- headline words rise one by one (.pg-split) ---------- */
.pg-split .pg-w{display:inline-block;white-space:pre-wrap}
html.pg-on .pg-split:not(.pg-in) .pg-w{opacity:0}
html.pg-on .pg-split.pg-in .pg-w{
  animation:pg-word 1s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--pg-d,0s) + .15s + var(--i,0) * .075s)}
@keyframes pg-word{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}

/* ---------- section headings: gold hairline + filigree draws itself ---------- */
.sec-head h2{position:relative}
.sec-head h2::after{content:"";position:absolute;left:50%;bottom:-.32rem;width:84px;height:1px;margin-left:-42px;
  background:linear-gradient(90deg,rgba(217,180,94,0),#d9b45e 30%,#f0d488 50%,#d9b45e 70%,rgba(217,180,94,0));
  transform:scaleX(0);transition:transform 1s cubic-bezier(.22,.61,.36,1) .1s;pointer-events:none}
.sec-head.pg-vis h2::after{transform:scaleX(1)}
/* the flourish strokes inherit the dash from the <svg>; the fills ride the opacity */
html.pg-on main .orn svg{stroke-dasharray:70;stroke-dashoffset:70;opacity:0;
  transition:stroke-dashoffset 1.5s cubic-bezier(.3,.5,.3,1) .2s,opacity .7s ease .1s}
html.pg-on main .pg-vis .orn svg,html.pg-on main .orn.pg-vis svg{stroke-dashoffset:0;opacity:1}

/* ---------- cards: a warm gold light that follows the pointer, a subtle tilt ---------- */
html.pg-fine .card::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(240,212,136,.15),rgba(192,147,46,.05) 42%,rgba(192,147,46,0) 72%)}
html.pg-fine .card:hover::before{opacity:1}
html.pg-tilt .card{transform-style:preserve-3d}
html.pg-tilt .card:hover{transform:translateY(-4px) perspective(900px) rotateX(var(--pg-rx,0deg)) rotateY(var(--pg-ry,0deg))}
/* a sheen sweeps across once each time the pointer enters (injected <i class="pg-shine">; transform only) */
.pg-shine{position:absolute;inset:0;z-index:5;border-radius:inherit;overflow:hidden;pointer-events:none}
.pg-shine::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(240,212,136,.1) 40%,rgba(255,250,235,.16) 50%,rgba(240,212,136,.1) 60%,rgba(255,255,255,0));
  transform:translateX(-160%) skewX(-18deg);opacity:0}
html.pg-fine .card.pg-hover .pg-shine::before{animation:pg-sweep 1.1s cubic-bezier(.3,.5,.3,1) .05s forwards}
@keyframes pg-sweep{0%{transform:translateX(-160%) skewX(-18deg);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(420%) skewX(-18deg);opacity:0}}

/* ---------- section reveals: cards and steps rise, fade and settle from a touch smaller ---------- */
@keyframes pg-rise-card{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
html.pg-on .card.reveal.in,html.pg-on .step.reveal.in{animation:pg-rise-card .95s cubic-bezier(.22,.61,.36,1) calc(var(--i,0)*95ms) backwards}

/* ---------- magnetic buttons (offset written by garden.js via `translate`) ---------- */
html.pg-fine .cta,html.pg-fine .submit-btn{will-change:translate}

/* ---------- hero video (src is set by garden.js only when the file exists) ---------- */
.pg-hero-media video{opacity:0;transition:opacity 1.4s ease}
.pg-hero-media video.pg-ready{opacity:1}

/* ---------- reduced motion: static sky, no intro, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  html.pg-boot header,html.pg-boot .ig-bar,html.pg-boot main,html.pg-on header nav{opacity:1;animation:none!important;transform:none}
  html{--pg-t0:0s!important}
  .pg-progress,.pg-fx,.pg-pulse,.pg-shine{display:none}
  .pg-top-fallback{transition:none}
  html.pg-on .card.reveal.in,html.pg-on .step.reveal.in{animation:none!important}
  html.pg-on .pg-split .pg-w{opacity:1;animation:none!important;transform:none}
  .sec-head h2::after{transform:scaleX(1);transition:none}
  html.pg-on main .orn svg{stroke-dasharray:none;stroke-dashoffset:0;opacity:1;transition:none}
  html.pg-fine .card::before{display:none}
  html.pg-tilt .card:hover{transform:translateY(-4px)}
  .pg-hero-media video{display:none}
}