/* ============================================================
   MORINGATO · home.css — loaded ONLY where needed (see the
   conditional enqueue in functions.php).
   Front page — hero, marquee, benefits + popups + art, figures,
   story scene, services, vs-matcha, spotlight/bundles, sticky bag.
   Split from the monolithic style.css (v2.30.0 refactor) —
   same rules, same order, zero visual change intended.
   ============================================================ */

/* dark contexts: white label + white ring accents, same glass */
.mt-stickybag .mt-btn,
.mt-stickybag .mt-btn:hover { color: #fff; }

/* ============================================================
   HERO
   ============================================================ */
.mt-hero { padding: 56px 0 64px; }

.mt-hero__grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 48px; align-items: center;
}

.mt-hero__title {
  font-size: clamp(40px, 4.6vw, 60px);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 22px 0 30px;
}

.mt-hero__title em { font-style: normal; color: var(--green-bright); }

.mt-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.mt-hero__media { position: relative; }

/* Tight frame around the photo so the chips anchor to the photo's own
   corners (the media column is wider than the image). */
.mt-hero__frame { position: relative; width: fit-content; max-width: 100%; margin-left: auto; }

.mt-hero__frame img {
  border-radius: 17px;
  width: 100%; max-width: 438px;
  box-shadow: var(--shadow-card);
}

/* Frosted-glass chips over the hero photo (position + transparency
   replicated from poc-static/00-original.html). */
.mt-chip {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 18px;
  padding: 13px 16px;
  box-shadow: var(--shadow-chip);
}

.mt-chip--tl { top: 24px; left: -18px; }

.mt-chip--br { bottom: 26px; right: -16px; }

.mt-chip__check {
  width: 26px; height: 26px; flex: 0 0 auto;
  background: var(--green); color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
}

.mt-chip__check svg { display: block; }

/* leaf emoji flattened to a white silhouette — neat, no emoji colours.
   The filter must sit on the glyph only: on the dot it would blow the
   green circle to white as well. */
.mt-chip__leaf {
  font-style: normal; font-size: 14px; line-height: 1;
  filter: grayscale(1) brightness(10);
}

.mt-chip b { display: block; font: 600 14px/1.3 var(--font); color: var(--ink); }

.mt-chip div span { display: block; font: 400 12px/1.3 var(--font); color: var(--text-muted); }

/* Gentle float so the hero feels alive; phases offset per chip. */
.mt-chip { animation: mt-chip-float 6s ease-in-out infinite; }

.mt-chip--br { animation-delay: -3s; }

@keyframes mt-chip-float { 50% { translate: 0 -4px; } }

/* ============================================================
   MARQUEE BANNER
   ============================================================ */
.mt-marquee {
  background: var(--ink-deep); color: #fff;
  overflow: hidden; white-space: nowrap;
  padding: 16px 0;
}

.mt-marquee__track {
  display: inline-flex;
  animation: mt-scroll 108s linear infinite;  /* -50% of 6 copies = 3 copy-widths → same speed as 1-copy/36s */
}

/* Flex containers ignore whitespace-only text nodes → spacing comes only from the ✦ padding. */
.mt-marquee span {
  display: inline-flex; align-items: center;
  font: 500 clamp(12px, .95vw, 14px)/1.4 var(--font);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

.mt-marquee i { font-style: normal; color: var(--green-bright); padding: 0 56px; }

.mt-marquee:hover .mt-marquee__track { animation-play-state: paused; }

@keyframes mt-scroll { to { transform: translateX(-50%); } }

/* ============================================================
   FIGURES — stats band
   ============================================================ */
.mt-figures { padding: 64px 0; }

.mt-figures__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }

.mt-figures b {
  font-size: clamp(44px, 4.8vw, 64px); font-weight: 700; line-height: 1;
  color: var(--ink); display: block;
  font-variant-numeric: tabular-nums;  /* digits don't wiggle while counting up */
}

.mt-figures span { color: var(--text-muted); font-size: 14px; margin-top: 10px; display: block; }

/* ============================================================
   STORY — packaging + card + ritual steps
   ============================================================ */
.mt-story { padding: 72px 0 64px; position: relative; }

.mt-story__grid {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: 44px; align-items: center;
}

.mt-story__media { position: relative; min-height: 420px; }

.mt-story__media img { position: absolute; }

.mt-story__pack-back { left: 0; top: 0; width: 62%; z-index: 1; }

.mt-story__pack-front { left: 33%; top: 8%; width: 56%; z-index: 2; }

.mt-story__card {
  background: var(--green-card);
  border-radius: var(--r-story);
  padding: 44px 48px;
}

.mt-story__card h2 { font-size: clamp(28px, 3vw, 36px); margin: 16px 0 18px; }

.mt-story__card p { color: var(--text-muted); font-size: 15px; }

.mt-story__card .mt-btn { margin-top: 8px; }

.mt-story__founder {
  border-left: 3px solid var(--green);
  padding-left: 14px; margin: 18px 0 20px;
  color: var(--ink); font-size: 14px; line-height: 1.6;
}

.mt-story__founder span { display: block; margin-top: 6px; color: var(--green); font: 600 12px/1 var(--font); }

.mt-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 56px;
  position: relative; z-index: 2;
}

.mt-step {
  background: #fff; border-radius: var(--r-card);
  padding: 26px 26px 24px;
  box-shadow: 0 8px 24px rgba(14,26,15,.06);
}

.mt-step__num {
  width: 32px; height: 32px;
  background: var(--green); color: #fff;
  border-radius: 8px;
  display: grid; place-items: center;
  font: 700 16px/1 var(--font);
  margin-bottom: 14px;
}

.mt-step h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }

.mt-step p { color: var(--text-muted); font-size: 13px; margin: 0; }

.mt-story__cup {
  position: absolute; right: 8px; bottom: -30px;
  width: 324px; z-index: 3; pointer-events: none;  /* above the step cards so the brewing scene reads */
  opacity: .8;  /* translucent: the card behind stays readable */
}

/* ------------------------------------------------------------
   BREWING SCENE — one 14s clock drives everything in #story.
   Leaves fly pack → over the top → into the cup; one lands every
   beat (14s / 3 leaves = 4.667s). On each landing a ripple fires
   and the cup's tint steps greener; after the third landing the
   steam fades in. Scroll only STARTS the scene: inline JS in
   functions.php adds .is-brewing when #story becomes visible —
   nothing is scrubbed by scrolling.
   ---------------------------------------------------------- */
.mt-story:not(.is-brewing) .mt-story__leaves { visibility: hidden; }

.mt-story:not(.is-brewing) :is(.mt-leaf, .mt-leaf-pulse, .mt-story__cup, .mt-story__steam) {
  animation-play-state: paused;
}

/* Leaves. Delays are exact thirds of the loop: the three share one flight
   path (they never meet on it) and land on the ripple's exact spot. */
.mt-story__leaves {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 4;
  container-type: size;   /* cqw/cqh below = % of the section's size */
}

.mt-leaf {
  position: absolute; top: 0; left: 0;
  width: 44px; height: auto;
  opacity: 0;
  scale: var(--s, 1);
  animation: mt-leaf-fly 14s ease-in-out var(--d, 0s) infinite;
}

.mt-leaf--2 { --s: .72; --d: -4.667s; }

.mt-leaf--3 { --s: .55; --d: -9.333s; }

@keyframes mt-leaf-fly {
  0%   { translate: 16cqw 24cqh; rotate: -20deg; opacity: 0; }
  8%   { opacity: .95; }
  22%  { translate: 34cqw -4cqh; rotate: 25deg; }
  45%  { translate: 62cqw -8cqh; rotate: -12deg; }
  64%  { translate: 84cqw 14cqh; rotate: 30deg; }
  82%  { translate: 91cqw 52cqh; rotate: -18deg; }
  90%  { translate: 88cqw 66cqh; rotate: -6deg; }
  99%  { opacity: .95; }
  100% { translate: 88cqw 74cqh; rotate: 8deg; opacity: 0; }
}

/* Ripple at the landing spot. Period = one beat, delay = the first landing,
   and it starts at full strength — it pops the instant a leaf vanishes. */
.mt-leaf-pulse {
  position: absolute; left: 88cqw; top: 74cqh;
  width: 96px; height: 42px; margin: -2px 0 0 -26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(93,139,49,.75), rgba(93,139,49,0));
  opacity: 0;
  animation: mt-cup-pulse 4.667s linear 4.667s infinite;
}

@keyframes mt-cup-pulse {
  0%   { opacity: .95; scale: .5; }
  16%  { opacity: 0; scale: 1.5; }
  100% { opacity: 0; scale: 1.5; }
}

/* The cup steps greener on each landing beat, then stays green. */
.mt-story__cup { animation: mt-cup-steep 15s linear forwards; }

@keyframes mt-cup-steep {
  0%, 31.1%    { filter: sepia(0)  hue-rotate(0deg)  saturate(1)   brightness(1); }
  37.1%, 62.2% { filter: sepia(.2) hue-rotate(17deg) saturate(1.2) brightness(.99); }
  68.2%, 93.3% { filter: sepia(.4) hue-rotate(35deg) saturate(1.4) brightness(.98); }
  99.3%, 100%  { filter: sepia(.6) hue-rotate(52deg) saturate(1.6) brightness(.96); }
}

/* Steam: the wisps rise forever; their container only fades in right after
   the third landing finishes the brew. */
.mt-story__steam {
  position: absolute; right: 128px; bottom: 240px;
  width: 84px; height: 110px;
  pointer-events: none; z-index: 4;
  opacity: 0;
  animation: mt-steam-in 1.6s ease 14.8s forwards;
}

@keyframes mt-steam-in { to { opacity: 1; } }

.mt-story__steam i {
  position: absolute; bottom: 0;
  width: 14px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(158,178,158,0) 0%, rgba(158,178,158,.6) 45%, rgba(158,178,158,0) 100%);
  filter: blur(4px);
  opacity: 0;
  animation: mt-steam-rise 3.4s ease-in-out infinite;
}

.mt-story__steam i:nth-child(1) { left: 4px; }

.mt-story__steam i:nth-child(2) { left: 32px; height: 72px; animation-delay: -1.1s; }

.mt-story__steam i:nth-child(3) { left: 58px; height: 52px; animation-delay: -2.3s; }

/* Scroll-driven touches (progressive enhancement — static without support):
   the packs drift apart slightly and the ritual steps reveal in cascade. */
@supports (animation-timeline: view()) {
.mt-story__pack-back { animation: mt-pack-drift-back  linear both; animation-timeline: view(); }
.mt-story__pack-front { animation: mt-pack-drift-front linear both; animation-timeline: view(); }
.mt-step { animation: mt-step-in linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
.mt-step:nth-child(2) { animation-range: entry 20% entry 75%; }
.mt-step:nth-child(3) { animation-range: entry 35% entry 90%; }
}

@keyframes mt-pack-drift-back  { from { translate: 0 -12px; } to { translate: 0 16px; } }

@keyframes mt-pack-drift-front { from { translate: 0 14px; }  to { translate: 0 -20px; } }

@keyframes mt-step-in {
  from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; }
}

/* ============================================================
   SERVICES (Icones row)
   ============================================================ */
.mt-services { padding: 64px 0; }

.mt-services__note {
  text-align: center; color: var(--text-muted);
  font: 500 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  margin: 40px 0 0;
}

/* Moringa vs matcha — two cups, face to face, in glass cards */
.mt-vs { padding: 8px 0 60px; }

.mt-vs__duel {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 920px; margin: 0 auto;
}

.mt-vs__side {
  position: relative; text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-story);
  padding: 36px 28px 22px;
  box-shadow: var(--shadow-card);
}

.mt-vs__side--moringa { border-color: rgba(79, 122, 61, .4); background: var(--glass-bg-strong); }

.mt-vs__tag {
  position: absolute; top: -13px; left: 50%; translate: -50% 0;
  background: var(--green-bright); color: #fff;
  border-radius: var(--r-pill); padding: 7px 14px;
  font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 0 3px var(--cream), 0 6px 16px rgba(14, 26, 15, .12);
}

.mt-vs__cup { width: 116px; height: 112px; margin: 0 auto 6px; }

.mt-vs__cup svg { width: 100%; height: 100%; display: block; }

.mt-vs__side h3 { font-size: 20px; margin: 0 0 12px; }

.mt-vs__facts { list-style: none; margin: 0; padding: 0; text-align: left; }

.mt-vs__facts li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 0; font-size: 13.5px; color: var(--text-muted);
}

.mt-vs__facts li + li { border-top: 1px solid rgba(30, 54, 32, .08); }

.mt-vs__facts b { color: var(--ink); font-weight: 600; flex: none; }

.mt-vs__facts span { text-align: right; }

.mt-vs__badge {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-deep); color: #fff;
  font: 700 13px/1 var(--font); letter-spacing: .05em;
  border: 3px solid var(--cream);
  box-shadow: var(--shadow-chip);
}

/* cup art ambience — steam rises, leaf bobs, matcha surface sways */
.mt-cupart__steam { opacity: 0; animation: mt-cup-steam-rise 3.4s ease-in-out infinite; }

.mt-cupart__steam--2 { animation-delay: -1.7s; }

@keyframes mt-cup-steam-rise {
  0%   { opacity: 0; translate: 0 5px; }
  35%  { opacity: .85; }
  100% { opacity: 0; translate: 0 -7px; }
}

.mt-cupart__leaf { animation: mt-cup-leaf-bob 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes mt-cup-leaf-bob { 50% { translate: 0 -2.5px; rotate: 4deg; } }

.mt-cupart__surface { animation: mt-cup-surface-sway 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@keyframes mt-cup-surface-sway { 50% { scale: 1.05 1; } }

.mt-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }

.mt-service img { width: 44px; height: 44px; margin: 0 auto 14px; }

.mt-service h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }

.mt-service p { color: var(--text-muted); font-size: 13px; margin: 0; }

/* ============================================================
   BENEFITS
   ============================================================ */
.mt-benefits { padding: 76px 0; text-align: center; }

.mt-benefits h2 { font-size: clamp(32px, 3.4vw, 46px); margin: 16px auto 44px; max-width: 16ch; }

.mt-benefits__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 40px 26px; align-items: start;
  max-width: 1180px; margin: 0 auto;
}

/* Each benefit opens its detail popup on click — plain icon + label as
   before (no card box, user call), just a reset <button>. */
.mt-benefit {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: center;
  cursor: pointer;
}

.mt-benefit img { height: 72px; width: auto; transition: scale .25s ease; }

.mt-benefit:hover img { scale: 1.08; }

.mt-benefit span { font: 500 14px/1.35 var(--font); color: var(--ink); max-width: 16ch; }

.mt-benefits__more { display: none; }

/* desktop shows all 10 */
/* Tea spotlight — one product, one CTA */
.mt-spot {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: 48px; align-items: center;
  background: #fff; border-radius: var(--r-story);
  padding: 40px; box-shadow: var(--shadow-card);
}

.mt-spot__img { width: 100%; border-radius: var(--r-card); }

.mt-spot__body h2 { font-size: clamp(28px, 3vw, 40px); margin: 16px 0 14px; }

.mt-spot__body > p { color: var(--text-muted); font-size: 15px; max-width: 46ch; }

.mt-spot__price { font: 700 20px/1.3 var(--font); color: var(--ink); margin: 0 0 18px; }

.mt-spot__price span { font: 400 13px/1.3 var(--font); color: var(--text-muted); }

.mt-spot__teaser { font-size: 13px; margin: 24px 0 0; }

.mt-spot__teaser a { text-decoration: underline; text-underline-offset: 3px; }

/* Bundle tiers — 1 / 3 / 5 pouches */
.mt-bundles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }

.mt-bundle {
  position: relative; text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-card);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-card);
}

.mt-bundle--hot { border: 2px solid var(--green); background: var(--glass-bg-strong); }

.mt-bundle__badge {
  position: absolute; top: -14px; left: 50%; translate: -50% 0;
  background: var(--green-badge); color: var(--green);
  border-radius: var(--r-pill); padding: 8px 14px;
  font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(14, 26, 15, .12);
}

.mt-bundle h3 { font-size: 18px; margin: 0 0 2px; }

.mt-bundle > span { color: var(--text-muted); font-size: 13px; }

.mt-bundle__price { display: block; font: 700 22px/1.2 var(--font); color: var(--ink); margin: 12px 0 16px; }

.mt-bundle__price del { color: var(--text-muted); font-weight: 400; font-size: 14px; margin-right: 6px; }

.mt-bundle__price ins { text-decoration: none; }

.mt-bundle .mt-btn { width: 100%; justify-content: center; padding: 13px 18px; }

/* ============================================================
   BENEFIT POPUPS — native <dialog>, frosted glass over a dimmed
   blurred backdrop. Opened by the .mt-benefit tiles (tiny JS in
   functions.php); Esc + backdrop click + the × all close.
   ============================================================ */
.mt-pop {
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 30px 80px rgba(14, 26, 15, .28);
  padding: 0;  /* padding lives on __inner: a click on the dialog itself = backdrop-area click → close */
  width: min(520px, calc(100vw - 32px));
  max-height: min(86vh, 660px);
  color: var(--ink);
  text-align: center;
}

.mt-pop::backdrop {
  background: rgba(14, 26, 15, .45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.mt-pop[open] { animation: mt-pop-in .32s cubic-bezier(.2, .9, .3, 1.15) both; }

@keyframes mt-pop-in { from { opacity: 0; translate: 0 16px; scale: .95; } }

.mt-pop__inner { padding: 36px 32px 30px; overflow: auto; max-height: inherit; }

.mt-pop__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(30, 54, 32, .14);
  background: rgba(255, 255, 255, .6);
  color: var(--ink); font: 400 18px/1 var(--font); cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s ease, rotate .3s ease;
}

.mt-pop__close:hover { background: #fff; rotate: 90deg; }

.mt-pop__art { width: 116px; height: 116px; margin: 0 auto 12px; }

.mt-pop__art svg { width: 100%; height: 100%; display: block; }

.mt-pop h3 { font-size: 24px; margin: 0 0 4px; }

.mt-pop__tagline {
  color: var(--green); font: 600 12.5px/1.4 var(--font);
  letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 14px;
}

.mt-pop__body { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin: 0 auto 20px; max-width: 42ch; }

.mt-pop__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 16px; }

.mt-pop__facts div {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 13px 8px 11px;
}

.mt-pop__facts b { display: block; font: 700 20px/1.1 var(--font); color: var(--green); margin-bottom: 3px; }

.mt-pop__facts span { font: 500 11px/1.35 var(--font); color: var(--ink); display: block; }

.mt-pop__science { font-size: 11.5px; color: var(--text-muted); font-style: italic; margin: 0 0 20px; }

.mt-pop .mt-btn { justify-content: center; }

/* ============================================================
   POPUP ART — animations for the 10 benefit dialogs (one block
   per assets/art/<slug>.svg; generated + reviewed 2026-10).
   begin-popup-art
   ============================================================ */
/* Antioxidants popup — leaf pulses calm over incoming free radicals */
.mt-pop[open] .mtb-antioxidants .mtb-draw {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: mtb-antioxidants-draw 1.1s ease-out both;
}

.mt-pop[open] .mtb-antioxidants .mtb-draw:nth-of-type(2) { animation-delay: .15s; }

.mt-pop[open] .mtb-antioxidants .mtb-draw:nth-of-type(3) { animation-delay: .3s; }

.mt-pop[open] .mtb-antioxidants-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: mtb-antioxidants-pulse 5s ease-in-out infinite;
}

.mt-pop[open] .mtb-antioxidants-ring:nth-of-type(2) { animation-delay: -2.5s; }

.mt-pop[open] .mtb-antioxidants-radical { animation: mtb-antioxidants-drift 5s ease-in-out var(--mtb-ao-d, 0s) infinite; }

.mt-pop[open] .mtb-antioxidants-spike { animation: mtb-antioxidants-smooth 5s ease-in-out var(--mtb-ao-d, 0s) infinite; }

.mt-pop[open] .mtb-antioxidants-calm { animation: mtb-antioxidants-calmed 5s ease-in-out var(--mtb-ao-d, 0s) infinite; }

.mt-pop[open] .mtb-antioxidants-r1 { --mtb-ao-x: 16px; --mtb-ao-y: 14px; }

.mt-pop[open] .mtb-antioxidants-r2 { --mtb-ao-d: -1.7s; --mtb-ao-x: -17px; --mtb-ao-y: 7px; }

.mt-pop[open] .mtb-antioxidants-r3 { --mtb-ao-d: -3.4s; --mtb-ao-x: 8px; --mtb-ao-y: -16px; }

/* blood-sugar popup art: glucose spike settles into a calm wave as a moringa sprig glides along it */
.mt-pop[open] .mtb-blood-sugar .mtb-draw {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: mtb-blood-sugar-draw 1.1s ease-out both;
}

.mt-pop[open] .mtb-blood-sugar .mtb-blood-sugar-d2 { animation-delay: .15s; }

.mt-pop[open] .mtb-blood-sugar .mtb-blood-sugar-d3 { animation-delay: .3s; }

.mt-pop[open] .mtb-blood-sugar-sprig {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mtb-blood-sugar-glide 5.2s ease-in-out 1.2s infinite;
}

.mt-pop[open] .mtb-blood-sugar-spike {
  animation: mtb-blood-sugar-settle 5.2s ease-in-out 1.2s infinite both;
}

.mt-pop[open] .mtb-blood-sugar-wave {
  animation: mtb-blood-sugar-calm 5.2s ease-in-out 1.2s infinite both;
}

/* bones-joints popup art — draw-in + ambient loop */
.mt-pop[open] .mtb-bones-joints .mtb-draw { animation: mtb-bones-joints-draw 1.1s ease-out both; }

.mt-pop[open] .mtb-bones-joints .mtb-bones-joints-d2 { animation-delay: .15s; }

.mt-pop[open] .mtb-bones-joints .mtb-bones-joints-d3 { animation-delay: .3s; }

.mt-pop[open] .mtb-bones-joints .mtb-bones-joints-d4 { animation-delay: .45s; }

/* bone gently thickens and brightens */
.mt-pop[open] .mtb-bones-joints-bonewrap { animation: mtb-bones-joints-glow 5s ease-in-out 1.2s infinite; }

/* knee bends and straightens around its hinge */
.mt-pop[open] .mtb-bones-joints-shin {
  transform-box: view-box;
  transform-origin: 97px 89px;
  animation: mtb-bones-joints-bend 5s ease-in-out 1.2s infinite;
}

/* mineral dots glide leaf -> bone on a curved path */
.mt-pop[open] .mtb-bones-joints-dot { animation: mtb-bones-joints-flow 5s ease-in-out 1.2s infinite backwards; }

.mt-pop[open] .mtb-bones-joints-dot2 { animation-delay: 2.1s; }

.mt-pop[open] .mtb-bones-joints-dot3 { animation-delay: 3s; }

/* focus-memory — draw-in (head, coil, stem) */
.mt-pop[open] .mtb-focus-memory .mtb-draw {
  stroke-dasharray: 340;
  animation: mtb-focus-memory-draw 1.1s ease-out both;
}

.mt-pop[open] .mtb-focus-memory .mtb-draw:nth-of-type(2) { animation-delay: .15s; }

.mt-pop[open] .mtb-focus-memory .mtb-draw:nth-of-type(3) { animation-delay: .3s; }

/* dots glide one by one, leaf -> brain coil */
.mt-pop[open] .mtb-focus-memory-dot { animation: mtb-focus-memory-glide 5s linear infinite 1.2s; }

.mt-pop[open] .mtb-focus-memory-dot:nth-of-type(2) { animation-delay: 2.87s; }

.mt-pop[open] .mtb-focus-memory-dot:nth-of-type(3) { animation-delay: 4.53s; }

/* synapse arcs pulse outward on each arrival */
.mt-pop[open] .mtb-focus-memory-spark {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: mtb-focus-memory-spark 1.6667s linear infinite 2.75s;
}

.mt-pop[open] .mtb-focus-memory-spark-b { animation-delay: 2.83s; }

/* ambient: leaf sway */
.mt-pop[open] .mtb-focus-memory-leaf { transform-box: fill-box; transform-origin: 50% 0%; animation: mtb-focus-memory-sway 5s ease-in-out infinite; }

/* gut-health — winding gut tube draws in, leaflets drift through, dots bloom */
.mt-pop[open] .mtb-gut-health .mtb-draw {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: mtb-gut-health-draw 1.1s ease-out both;
}

.mt-pop[open] .mtb-gut-health .mtb-gut-health-w2 { animation-delay: .15s; }

.mt-pop[open] .mtb-gut-health .mtb-gut-health-fill {
  animation: mtb-gut-health-fade .9s ease-out .8s both;
}

.mt-pop[open] .mtb-gut-health .mtb-gut-health-leaf {
  transform-box: fill-box; transform-origin: center;
  animation: mtb-gut-health-drift 5s ease-in-out 1.1s infinite both;
}

.mt-pop[open] .mtb-gut-health .mtb-gut-health-leaf2 { animation-delay: 2.7s; }

.mt-pop[open] .mtb-gut-health .mtb-gut-health-leaf3 { animation-delay: 4.3s; }

.mt-pop[open] .mtb-gut-health .mtb-gut-health-dots circle {
  transform-box: fill-box; transform-origin: center;
  animation: mtb-gut-health-bloom 5s ease-in-out infinite both;
}

.mt-pop[open] .mtb-gut-health .mtb-gut-health-dots circle:nth-of-type(1) { animation-delay: 1.4s; }

.mt-pop[open] .mtb-gut-health .mtb-gut-health-dots circle:nth-of-type(2) { animation-delay: 2s; }

.mt-pop[open] .mtb-gut-health .mtb-gut-health-dots circle:nth-of-type(3) { animation-delay: 3s; }

.mt-pop[open] .mtb-gut-health .mtb-gut-health-dots circle:nth-of-type(4) { animation-delay: 3.6s; }

.mt-pop[open] .mtb-gut-health .mtb-gut-health-dots circle:nth-of-type(5) { animation-delay: 4.6s; }

.mt-pop[open] .mtb-gut-health .mtb-gut-health-dots circle:nth-of-type(6) { animation-delay: 5.2s; }

/* hair-skin: strand + leaf + skin arc draw in; dots rise, shine sweeps, skin smooths */
.mt-pop[open] .mtb-hair-skin .mtb-draw {
  stroke-dasharray: 160; stroke-dashoffset: 160;
  animation: mtb-hair-skin-draw 1.1s ease-out both;
}

.mt-pop[open] .mtb-hair-skin .mtb-hair-skin-d2 { animation-delay: .15s; }

.mt-pop[open] .mtb-hair-skin .mtb-hair-skin-strand {
  animation: mtb-hair-skin-draw 1.1s ease-out both,
    mtb-hair-skin-thicken 5s ease-in-out 1.4s infinite;
}

.mt-pop[open] .mtb-hair-skin .mtb-hair-skin-skin {
  transform-box: fill-box; transform-origin: center;
  animation: mtb-hair-skin-draw 1.1s ease-out .3s both,
    mtb-hair-skin-smooth 5s ease-in-out 1.4s infinite;
}

.mt-pop[open] .mtb-hair-skin-shine {
  stroke-dasharray: 16 144; opacity: .85;
  animation: mtb-hair-skin-sweep 5s ease-in-out 1.4s infinite;
}

.mt-pop[open] .mtb-hair-skin-dot {
  opacity: 0;
  animation: mtb-hair-skin-rise 5s ease-in-out 1.4s infinite;
}

.mt-pop[open] .mtb-hair-skin-dot:nth-of-type(2) { animation-delay: 2.2s; }

.mt-pop[open] .mtb-hair-skin-dot:nth-of-type(3) { animation-delay: 3s; }

.mt-pop[open] .mtb-hair-skin-spark {
  transform-box: fill-box; transform-origin: center;
  animation: mtb-hair-skin-pulse 5s ease-in-out 1.4s infinite;
}

/* Kind to your heart — heart draws, ECG blips twice, moringa sprig unfurls */
.mt-pop[open] .mtb-heart .mtb-draw {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: mtb-heart-draw 1.1s ease-out both;
}

.mt-pop[open] .mtb-heart .mtb-heart-ecg { stroke-dasharray: 140; stroke-dashoffset: 140; animation-delay: .15s; }

.mt-pop[open] .mtb-heart .mtb-heart-stem { stroke-dasharray: 34; stroke-dashoffset: 34; animation-delay: .3s; }

.mt-pop[open] .mtb-heart .mtb-heart-leaf {
  transform-box: fill-box;
  transform-origin: center;
  animation: mtb-heart-unfurl .4s ease-out both;
}

.mt-pop[open] .mtb-heart .mtb-heart-leaf:nth-of-type(1) { animation-delay: .85s; }

.mt-pop[open] .mtb-heart .mtb-heart-leaf:nth-of-type(2) { animation-delay: .97s; }

.mt-pop[open] .mtb-heart .mtb-heart-leaf:nth-of-type(3) { animation-delay: 1.09s; }

.mt-pop[open] .mtb-heart .mtb-heart-leaf:nth-of-type(4) { animation-delay: 1.21s; }

.mt-pop[open] .mtb-heart .mtb-heart-leaf:nth-of-type(5) { animation-delay: 1.33s; }

.mt-pop[open] .mtb-heart .mtb-heart-leaf:nth-of-type(6) { animation-delay: 1.45s; }

.mt-pop[open] .mtb-heart .mtb-heart-leaf:nth-of-type(7) { animation-delay: 1.57s; }

.mt-pop[open] .mtb-heart-fill {
  transform-box: fill-box;
  transform-origin: center;
  animation: mtb-heart-fade .9s ease-out both, mtb-heart-beat 5s ease-in-out 2s infinite;
}

/* Immunity popup art: shield draw-in, nutrient stream, pathogen bounce */
.mt-pop[open] .mtb-immunity .mtb-draw {
  animation: mtb-immunity-draw 1.1s ease-out both;
}

.mt-pop[open] .mtb-immunity-shield.mtb-draw { stroke-dasharray: 260; stroke-dashoffset: 260; }

.mt-pop[open] .mtb-immunity-stem.mtb-draw { stroke-dasharray: 60; stroke-dashoffset: 60; animation-delay: .15s; }

.mt-pop[open] .mtb-immunity-glow,
.mt-pop[open] .mtb-immunity-rim {
  animation: mtb-immunity-pulse 5s ease-in-out infinite;
}

.mt-pop[open] .mtb-immunity-dot { animation: mtb-immunity-stream 5s ease-in-out infinite both; }

.mt-pop[open] .mtb-immunity-dot1 { --mtb-immunity-dx: -24px; --mtb-immunity-dy: 2px; }

.mt-pop[open] .mtb-immunity-dot2 { --mtb-immunity-dx: 18px; --mtb-immunity-dy: -14px; animation-delay: 1.6s; }

.mt-pop[open] .mtb-immunity-dot3 { --mtb-immunity-dx: 0px; --mtb-immunity-dy: 22px; animation-delay: 3.3s; }

.mt-pop[open] .mtb-immunity-virus { animation: mtb-immunity-tap 5s ease-in-out infinite both; }

/* Inflammation popup — "Cool the flame": flicker, leaf lands, flame settles into a calm wave */
.mt-pop[open] .mtb-inflammation .mtb-draw {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: mtb-inflammation-draw 1.1s ease-out both;
}

.mt-pop[open] .mtb-inflammation .mtb-inflammation-d2 { animation-delay: .15s; }

.mt-pop[open] .mtb-inflammation .mtb-inflammation-d3 { animation-delay: .3s; }

.mt-pop[open] .mtb-inflammation-flame {
  transform-origin: 60px 95px;
  animation: mtb-inflammation-flicker 5s ease-in-out infinite;
}

.mt-pop[open] .mtb-inflammation-leaf {
  transform-origin: 87px 22px;
  animation: mtb-inflammation-drift 5s ease-in-out infinite;
}

.mt-pop[open] .mtb-inflammation-wave {
  animation: mtb-inflammation-ripple 5s ease-in-out infinite;
}

/* prostate popup art — draw-in + 6s calm-down loop */
.mt-pop[open] .mtb-prostate .mtb-draw {stroke-dasharray:300;stroke-dashoffset:300;animation:mtb-prostate-draw 1.1s ease-out both}

.mt-pop[open] .mtb-prostate .mtb-prostate-d2 {animation-delay:.15s}

.mt-pop[open] .mtb-prostate .mtb-prostate-d3 {animation-delay:.3s}

/* enlarged wobble eases down to a smaller steady contour */
.mt-pop[open] .mtb-prostate-gland {transform-origin:60px 74px;animation:mtb-prostate-settle 6s ease-in-out infinite}

/* sparks drift toward the gland, then reset while hidden */
.mt-pop[open] .mtb-prostate-sparks {transform-origin:60px 74px;animation:mtb-prostate-drift 6s ease-in-out infinite}

.mt-pop[open] .mtb-prostate-zap {animation:mtb-prostate-zap 6s ease-in-out infinite}

/* sparks soften into round dots that fade out */
.mt-pop[open] .mtb-prostate-dot {animation:mtb-prostate-dot 6s ease-in-out infinite}

/* moringa leaf sweeps across on a curved path */
.mt-pop[open] .mtb-prostate-leaf {animation:mtb-prostate-leaf 6s ease-in-out infinite}

/* end-popup-art */
/* ============================================================
   STICKY BAG BAR — mobile only: dark glass bar with the tea +
   price + solid CTA, slides in once the hero is scrolled past
   (.is-visible via IntersectionObserver in functions.php).
   ============================================================ */
.mt-stickybag { display: none; }

/* ============================================================
   SCROLL REVEALS — progressive enhancement, same pattern as the
   ritual steps: static layout wherever view() is unsupported.
   ============================================================ */
@supports (animation-timeline: view()) {
.mt-bundle,
.mt-service,
.mt-vs__card,
.mt-spot {
    animation: mt-step-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
.mt-bundle:nth-child(2),
.mt-service:nth-child(2) { animation-range: entry 10% entry 60%; }
.mt-bundle:nth-child(3),
.mt-service:nth-child(3) { animation-range: entry 20% entry 70%; }
.mt-service:nth-child(4) { animation-range: entry 30% entry 80%; }
}

/* ============================================================
   GLASS 2.0 — AURORA (reflect.app-inspired, Moringato palette).
   Glassmorphism only reads when something colourful sits BEHIND
   the pane: vivid soft "aurora" orbs are painted behind every
   glass module, and the shared glass recipe gains a gradient
   sheen + specular top edge + saturated blur. The page background
   itself NEVER changes (site invariant).
   ============================================================ */
/* --- the shared pane: one grouped override keeps every module in sync -- */
.mt-bundle,
.mt-vs__side,
.mt-pop {
  background: var(--pane-bg);
  backdrop-filter: var(--pane-filter);
  -webkit-backdrop-filter: var(--pane-filter);
  border: var(--pane-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),   /* specular top edge */
    inset 0 -1px 0 rgba(255, 255, 255, .25),
    0 14px 34px rgba(14, 26, 15, .10);
}

/* variants re-asserted after the grouped pane */
.mt-bundle--hot { border: 2px solid var(--green); }

.mt-pop {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, .66) 100%),
    radial-gradient(300px 220px at 85% -8%, rgba(93, 139, 49, .3), transparent 70%),
    radial-gradient(260px 220px at 0% 110%, rgba(155, 225, 93, .22), transparent 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 0 60px rgba(93, 139, 49, .22),
    0 30px 80px rgba(14, 26, 15, .28);
}

@media (max-width: 1080px) {
.mt-benefits__grid { grid-template-columns: repeat(3, 1fr); }
.mt-story__cup { width: 220px; right: -20px; }
}

@media (max-width: 860px) {
.mt-hero__grid,
.mt-story__grid { grid-template-columns: 1fr; }
.mt-hero__frame { margin: 0 auto; }
.mt-services__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
/* Figures pop as a 2×2 proof block on phones */
.mt-figures__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mt-figures__grid > div {
    background: #fff; border: 1px solid rgba(30, 54, 32, .08);
    border-radius: var(--r-card); padding: 24px 14px;
  }
.mt-figures__grid > div:nth-child(2n) { background: var(--green-pale); }
.mt-figures b { font-size: clamp(36px, 10vw, 48px); }
.mt-figures span { font-size: 12px; margin-top: 8px; }
.mt-spot { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
.mt-bundles { grid-template-columns: 1fr; gap: 24px; }
.mt-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
.mt-benefit img { height: 56px; }
.mt-benefit span { font-size: 13px; }
/* Phones: 6 benefits + a "see all" reveal keep the section short. */
.mt-benefit--extra { display: none; }
.mt-benefits__more { display: inline-flex; margin-top: 26px; }
.mt-benefits__toggle:checked ~ .mt-benefits__grid .mt-benefit--extra { display: flex; }
.mt-benefits__toggle:checked ~ .mt-benefits__more { display: none; }
.mt-stickybag {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60;
    display: flex; align-items: center; gap: 12px;
    background: var(--glass-dark-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-dark-border);
    border-radius: 22px;
    padding: 10px 10px 10px 18px;
    box-shadow: 0 14px 40px rgba(14, 26, 15, .35);
    translate: 0 calc(100% + 14px);
    transition: translate .35s cubic-bezier(.2, .8, .3, 1);
  }
.mt-stickybag.is-visible { translate: 0 0; }
.mt-stickybag__info { flex: 1; min-width: 0; color: #fff; }
.mt-stickybag__info b { display: block; font: 600 13.5px/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-stickybag__info span { font: 500 12px/1.3 var(--font); color: rgba(255, 255, 255, .78); }
.mt-stickybag__info span del { color: rgba(255, 255, 255, .5); }
.mt-stickybag__info span ins { text-decoration: none; }
.mt-stickybag .mt-btn { flex: none; padding: 12px 20px; }
.mt-steps { grid-template-columns: 1fr; }
.mt-story__media { min-height: 0; height: 74vw; max-height: 480px; }
.mt-story__cup { display: none; }
.mt-story__leaves,
.mt-story__steam { display: none; }
/* no cup on mobile */
.mt-vs__duel { grid-template-columns: 1fr; gap: 48px; max-width: 480px; }
}

@media (max-width: 560px) {
.mt-benefits__grid { grid-template-columns: repeat(2, 1fr); }
.mt-hero { padding: 36px 0 48px; }
.mt-chip--tl { left: 8px; }
.mt-chip--br { right: 8px; }
}

/* ============================================================
   REDUCED MOTION — must stay LAST: media queries add no
   specificity, so these only win by source order.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
.mt-marquee__track { animation: none; }
.mt-leaf,
.mt-leaf-pulse { animation: none; }
/* stay at opacity 0 — no brewing scene */
.mt-story__cup { animation: none; }
/* cup stays clear */
.mt-story__steam { display: none; }
.mt-story__pack-back,
.mt-story__pack-front { animation: none; }
.mt-step { animation: none; }
/* steps just show, no reveal */
.mt-chip { animation: none; }
/* hero chips stop floating */
.mt-bundle,
.mt-service,
.mt-vs__card,
.mt-spot { animation: none; }
.mt-pop[open] { animation: none; }
.mt-pop__art :is(path, g, circle, ellipse, line, polyline, rect) { animation: none !important; }
.mt-cupart :is(path, g, circle, ellipse) { animation: none; }
.mt-stickybag { transition: none; }
}