/* motion.css — moved out of mn-motion.php (<style id="mn-motion-styles">) on 2026-10-26, UX audit Phase 1 slice A: cached by the browser instead of ~11 KB in every HTML response. Printed by mn_css_link() at the same hook and priority as before. Edit this file; the PHP only links it. */
/* [1] At rest: no Elementor scroll entrances (they read as template motion) */
.elementor-invisible{visibility:visible !important;}
.elementor-element.animated:not(.mn-hero-reveal){animation:none !important;opacity:1 !important;transform:none !important;filter:none !important;}
/* [2] Hero text, once, on load — eyebrow → headline → subhead → button */
/* 2026-10-25 UX batch B: movement only, never transparent: the headline is the page's main content (LCP) and must be readable
   at first paint, and a stalled animation must never hide it */
@keyframes mnRise{from{transform:translateY(12px)}to{transform:translateY(0)}}
.home .elementor-element-hero1 .elementor-widget{visibility:visible !important;}
.home .elementor-element-hero1 .elementor-element-heroeye{animation:mnRise .6s cubic-bezier(.16,1,.3,1) .05s both !important;}
.home .elementor-element-hero1 .elementor-element-heroh1{animation:mnRise .6s cubic-bezier(.16,1,.3,1) .16s both !important;}
/* [2a] Headline text effect (owner 2026-10-25: Motion-Primitives' TextEffect, per word, chosen as "blur-in, never hidden"):
   every word is there from the first frame, soft (8 px blur, 10 px low), and sharpens in turn, 70 ms apart (~1 s in all).
   Never transparent, so the headline stays readable and counts for LCP at first paint. The words replace the headline's rise. */
/* 2026-10-26 UX audit (UX-03): the 8 px blur made the headline unreadable for its first ~1.1 s on every load — the page's
   largest text, soft while LCP is measured. Now each word only rises 10 px, sharp from the first frame, within the 500 ms
   rule, and only on the first load of a visit (html.mn-hero-seen, set by the script above). */
@keyframes mnWordIn{from{transform:translateY(10px)}to{transform:none}}
.home .elementor-element-hero1 .elementor-element-heroh1.mn-tw-on{animation:none !important;}
.mn-tw{display:inline-block;animation:mnWordIn .5s cubic-bezier(.16,1,.3,1) calc(.16s + var(--i,0) * 60ms) both;}
.mn-hero-seen .mn-tw,.mn-hero-seen .home .elementor-element-hero1 .elementor-widget{animation:none !important;}
/* the word spans must keep the headline's own colour: mn-brand.php turns every span in a heading teal (UX-20 emphasis words) */
.elementor-heading-title .mn-tw{color:inherit;}
.home .elementor-element-hero1 .elementor-element-herosub{animation:mnRise .6s cubic-bezier(.16,1,.3,1) .28s both !important;}
.home .elementor-element-hero1 .elementor-element-herobtn{animation:mnRise .6s cubic-bezier(.16,1,.3,1) .4s both !important;}
/* [2b] Hero lotus: the bronze outline draws (1.4 s), then the coral fills breathe in (.6 s). Inline SVG added by script;
   without script the static ::before watermark stays. */
.home .elementor-element-hero1.mn-lotus-live::before{display:none;}
.mn-hero-lotus{position:absolute;left:50%;top:50%;width:min(56vw,560px);height:auto;transform:translate(-50%,-52%);z-index:1;pointer-events:none;opacity:.2;overflow:visible;}
.mn-hero-lotus path{fill:#C97A66;fill-opacity:0;stroke:var(--mn-bronze-light);stroke-width:.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1),fill-opacity .6s var(--mn-ease) 1.1s;}
.mn-lotus-in .mn-hero-lotus path{stroke-dashoffset:0;fill-opacity:.35;}
/* [3] Sticky header: blur-glass; once scrolled the wordmark settles (no height change → no layout jump) and a bronze hairline replaces the shadow */
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  #site-header.site-header{background:rgba(240,237,229,.82) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
}
#site-header .site-branding,#site-header .site-title{transition:transform .25s cubic-bezier(.16,1,.3,1);transform-origin:left center;}
#site-header.site-header.mn-scrolled{box-shadow:none !important;border-bottom-color:rgba(185,152,96,.45) !important;}
#site-header.mn-scrolled .site-branding{transform:scale(.92);}
/* [4] Footer lotus draws itself in when the footer band enters the viewport */
.mn-footer-lotus path{stroke-dasharray:140;stroke-dashoffset:140;fill-opacity:0;
  transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1),fill-opacity .6s var(--mn-ease) .45s;}
.mn-footer-band.mn-in .mn-footer-lotus path{stroke-dashoffset:0;fill-opacity:1;}
/* [5] One scroll reveal: 12 px rise + fade, 500 ms, once. Added by script to below-the-fold blocks only, so nothing above the fold ever blinks */
/* 2026-10-25 UX batch B: the scroll reveal lifts but no longer fades from transparent; content is readable even before (or without) the trigger */
.mn-rv{transform:translateY(12px);}
.mn-rv.mn-in{transform:none;transition:transform .5s cubic-bezier(.16,1,.3,1) var(--mn-d,0ms);}
/* [6] Bag feedback: the header bag lifts 2 px and settles; the count bumps once */
@keyframes mnLift{0%{transform:translateY(0)}35%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes mnBump{0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
.mn-cart-icon.mn-bump svg{animation:mnLift .3s cubic-bezier(.16,1,.3,1);}
.mn-cart-icon.mn-bump .mn-cart-count{animation:mnBump .4s cubic-bezier(.16,1,.3,1);}
.single-product form.cart .mn-add-msg{display:block;clear:both;flex-basis:100%;width:100%;order:98;margin:0 0 12px;font-family:'Jost',sans-serif;font-size:13px;line-height:1.5;color:var(--mn-green,var(--mn-green));}
.single-product form.cart .mn-add-msg a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.single-product form.cart .mn-add-msg.mn-add-err{color:var(--mn-error);}
.mn-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* [7] Mobile menu: items rise 8 px with a 40 ms stagger as the panel opens; closing is instant */
@keyframes mnMenu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#site-header nav.site-navigation-dropdown[aria-hidden="false"] li{animation:mnMenu .32s cubic-bezier(.16,1,.3,1) both;}
#site-header nav.site-navigation-dropdown[aria-hidden="false"] li:nth-child(2){animation-delay:40ms;}
#site-header nav.site-navigation-dropdown[aria-hidden="false"] li:nth-child(3){animation-delay:80ms;}
#site-header nav.site-navigation-dropdown[aria-hidden="false"] li:nth-child(4){animation-delay:120ms;}
#site-header nav.site-navigation-dropdown[aria-hidden="false"] li:nth-child(5){animation-delay:160ms;}
html.mn-menu-open,html.mn-menu-open body{overflow:hidden;}
#site-header nav.site-navigation-dropdown > ul{max-height:calc(100svh - 112px);overflow-y:auto;} /* UX-08: short landscape screens can scroll to the last item */
/* [7b] Optional effect: journey hairline — light-bronze segments draw between the step numerals (home I–III, Story 01–04),
   left to right on desktop, top to bottom when the steps stack; 900 ms each, 120 ms apart, once */
.mn-jline{position:absolute;pointer-events:none;z-index:0;background:rgba(217,194,154,.7);transform-origin:left center;transform:scaleX(0);
  transition:transform .9s cubic-bezier(.16,1,.3,1) var(--mn-d,0ms);}
.mn-jline.mn-v{transform-origin:center top;transform:scaleY(0);}
.mn-jrow.mn-in .mn-jline{transform:none;}
/* [7c] Optional effect: the hero lotus drifts 18 px against the scroll — desktop pointers only, CSS scroll-driven, no script.
   Uses the individual `translate` property so the centring transform stays intact. Browsers without scroll timelines skip it. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) and (min-width:1025px){
    .mn-hero-lotus{animation:mnDrift linear both;animation-timeline:scroll(root block);animation-range:0 100vh;}
    @keyframes mnDrift{from{translate:0 0}to{translate:0 18px}}
  }
}
/* [7d] Optional effect: lab ledger reveal (Lab Reports only). The table is in the first screen, so rows are held back from
   first paint (html.mn-js, set by a non-deferred head script) and released when the ledger enters: the header rule draws
   left to right (700 ms), then each batch slides in 12 px from the left, 80 ms apart. A 3 s fallback shows everything if
   the motion script never runs. */
.mn-js .elementor-element-lrtbl .mn-batch-head{position:relative;border-bottom-color:transparent !important;}
.mn-js .elementor-element-lrtbl .mn-batch-head::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--mn-ink);transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.16,1,.3,1);}
.mn-js .elementor-element-lrtbl .mn-batch-head > *{opacity:0;transition:opacity .4s var(--mn-ease) .15s;}
.mn-js .elementor-element-lrtbl .mn-batch-row:not(.mn-batch-old){opacity:0;transform:translateX(-12px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1) calc(200ms + var(--mn-i,0) * 80ms),transform .5s cubic-bezier(.16,1,.3,1) calc(200ms + var(--mn-i,0) * 80ms);}
.mn-js .elementor-element-lrtbl.mn-ledger-in .mn-batch-head::after,.mn-ledger-safe .elementor-element-lrtbl .mn-batch-head::after{transform:none;}
.mn-js .elementor-element-lrtbl.mn-ledger-in .mn-batch-head > *,.mn-ledger-safe .elementor-element-lrtbl .mn-batch-head > *{opacity:1;} /* the head itself carries the .75 */
.mn-js .elementor-element-lrtbl.mn-ledger-in .mn-batch-row:not(.mn-batch-old),.mn-ledger-safe .elementor-element-lrtbl .mn-batch-row:not(.mn-batch-old){opacity:1;transform:none;}
@media print{.mn-js .elementor-element-lrtbl .mn-batch-row:not(.mn-batch-old),.mn-js .elementor-element-lrtbl .mn-batch-head > *{opacity:1 !important;transform:none !important;}}
/* [8] DORMANT: photo-day parallax utility (CSS scroll-driven, zero JS). Add class mn-plx to a photo wrapper. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:1025px){
    .mn-plx{animation:mnPlx linear both;animation-timeline:view();animation-range:entry 0% exit 100%;}
    @keyframes mnPlx{from{transform:translateY(18px)}to{transform:translateY(-18px)}}
  }
}
/* [9] prefers-reduced-motion: fully static site */
@media (prefers-reduced-motion:reduce){
  .home .elementor-element-hero1 .elementor-widget{animation:none !important;}
  .mn-tw{animation:none !important;filter:none !important;transform:none !important;}
  .mn-footer-lotus path,.mn-hero-lotus path{stroke-dashoffset:0 !important;transition:none !important;}
  .mn-footer-lotus path{fill-opacity:1 !important;}
  .mn-hero-lotus path{fill-opacity:.35 !important;}
  .mn-rv{opacity:1 !important;transform:none !important;}
  #site-header nav.site-navigation-dropdown li{animation:none !important;}
  .mn-jline{transform:none !important;transition:none !important;}
  .mn-js .elementor-element-lrtbl .mn-batch-row,.mn-js .elementor-element-lrtbl .mn-batch-head > *{opacity:1 !important;transform:none !important;}
  .mn-js .elementor-element-lrtbl .mn-batch-head::after{transform:none !important;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important;}
}