/* ═══════════════════════════════════════════════════════════════════════════
   brand-uk-motion.css — /best-retatrutide-brand-uk motion layer.
   Same contract as home-motion.css: everything gated under html.enhance
   (pre-paint inline snippet), transform+opacity ONLY (compositor-safe, zero
   CLS), from-only keyframes (no fill lock), full prefers-reduced-motion
   bypass. Without JS the page renders complete and static.
   LCP guardrail: the hero H1 is this page's LCP — it is NEVER opacity-faded.
   It rises via a transform-only overflow-mask reveal (no opacity, zero CLS)
   that begins on the first frame under html.enhance, and with no JS renders in
   its final inline position exactly like the original single-flow H1.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --muk-ease-out: cubic-bezier(.22, 1, .36, 1);
  --muk-ease-io: cubic-bezier(.65, 0, .35, 1);
  --muk-d3: 420ms;
  --muk-d4: 640ms;
}

/* ── Hero H1 masked line-reveal (mirrors home-motion.css hl/hl-i contract) ────
   Markup: h1 > span.hl > span.hl-i, text nodes byte-identical to the old H1.
   Default (no .enhance / no JS): inline spans — renders exactly like the
   original H1, so the LCP text is never opacity-hidden. With .enhance each
   line rises out of an overflow-clip mask (transform only). */
.uk-hero h1 .hl,
.uk-hero h1 .hl-i { display: inline; }
html.enhance .uk-hero h1 .hl {
  display: block;
  overflow: hidden;
  /* descender allowance — Cormorant g/y tails clip at less */
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
html.enhance .uk-hero h1 .hl-i {
  display: block;
  transform: translateY(112%);
  animation: muk-line-up .74s var(--muk-ease-out) forwards;
}
html.enhance .uk-hero h1 .hl:nth-child(1) .hl-i { animation-delay: 0ms; }
html.enhance .uk-hero h1 .hl:nth-child(2) .hl-i { animation-delay: 90ms; }
@keyframes muk-line-up { to { transform: translateY(0); } }

/* ── Hero rise choreography (eyebrow → promise → chips → CTAs). H1 handled by
   the masked line-reveal above. from-only keyframes end at natural state. */
html.enhance .uk-hero-eyebrow,
html.enhance .uk-hero-promise,
html.enhance .uk-chip-row,
html.enhance .uk-hero-actions {
  animation: muk-rise var(--muk-d4) var(--muk-ease-out) backwards;
}
html.enhance .uk-hero-eyebrow  { animation-delay: 60ms; }
html.enhance .uk-hero-promise  { animation-delay: 220ms; }
html.enhance .uk-chip-row      { animation-delay: 340ms; }
html.enhance .uk-hero-actions  { animation-delay: 440ms; }
@keyframes muk-rise { from { opacity: 0; transform: translateY(14px); } }

/* ── Hero aurora drift (decorative pseudo-layers; transform+opacity only) ── */
html.enhance .uk-hero::before {
  animation: muk-aurora-a 16s var(--muk-ease-io) infinite alternate;
}
html.enhance .uk-hero::after {
  animation: muk-aurora-b 19s var(--muk-ease-io) 2s infinite alternate;
}
@keyframes muk-aurora-a {
  from { opacity: .8;  transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 1;   transform: translate3d(-46px, 34px, 0) scale(1.14); }
}
@keyframes muk-aurora-b {
  from { opacity: .65; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: .95; transform: translate3d(40px, -28px, 0) scale(1.1); }
}

/* ── Section reveal engine — classes added at runtime by brand-uk.js, ONLY to
   elements below the first viewport (no hide-then-show flash above the fold) */
html.enhance .m-reveal:not(.is-in) {
  opacity: 0;
  /* ~4s safety net for SCRIPT FAILURE: .m-reveal is hidden by this sheet the
     moment the pre-paint enhance bootstrap runs — before brand-uk.js executes.
     If that file never fetches/executes, no JS un-hide path exists, so this
     delayed animation force-shows every block. When the JS engine IS alive its
     own 4s timeout lands .is-in first (selector stops matching → this never
     plays). Reduced-motion block below overrides with animation:none. */
  animation: muk-net-in var(--muk-d4) var(--muk-ease-out) 4.6s forwards;
}
@keyframes muk-net-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
html.enhance .m-reveal.is-in {
  animation: muk-rev-up var(--muk-d4) var(--muk-ease-out) backwards;
}
html.enhance .m-stagger:not(.is-in) > * {
  opacity: 0;
  animation: muk-net-in var(--muk-d4) var(--muk-ease-out) 4.6s forwards; /* same script-failure net */
}
html.enhance .m-stagger.is-in > * {
  animation: muk-rev-up var(--muk-d4) var(--muk-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes muk-rev-up { from { opacity: 0; transform: translateY(20px); } }

/* ── Comparison table: purity bars draw on first reveal ──────────────────── */
html.enhance .uk-compare-wrap:not(.is-in) .uk-bar-fill,
html.enhance .uk-brand-card:not(.is-in) .uk-bar-fill,
html.enhance .uk-verdict-list:not(.is-in) .uk-score-fill { transform: scaleX(0); }
html.enhance .uk-compare-wrap.is-in .uk-bar-fill,
html.enhance .uk-brand-card.is-in .uk-bar-fill,
html.enhance .uk-verdict-list.is-in .uk-score-fill {
  animation: muk-draw .9s var(--muk-ease-out) .15s backwards;
}
/* from-only: each bar must land on its own inline scaleX ranking value —
   a to{scaleX(1)} frame (or any fill lock) would flatten every bar to 100% */
@keyframes muk-draw { from { transform: scaleX(0); } }

/* COA-verdict cells: one soft glow pulse when the table lands */
html.enhance .uk-compare-wrap.is-in .uk-yes {
  animation: muk-glow 1.1s var(--muk-ease-io) .35s 1;
}
@keyframes muk-glow {
  0%, 100% { opacity: 1; }
  45% { opacity: .55; }
}

/* ── Tier badges: one-time shimmer sweep on reveal (masked gradient) ─────── */
html.enhance .uk-brand-card .uk-tier::after {
  content: '';
  position: absolute;
  inset: -1px auto -1px -46%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg) translateX(0);
}
html.enhance .uk-brand-card.is-in .uk-tier::after {
  animation: muk-shimmer 1s var(--muk-ease-out) .5s 1 both;
}
@keyframes muk-shimmer { to { transform: skewX(-18deg) translateX(440%); } }

/* ── Counters: no width jitter while brand-uk.js counts ──────────────────── */
.uk-num { font-variant-numeric: tabular-nums; }

/* ── FAQ chevron + panel (native <details>; chevron rotate only) ─────────── */
html.enhance .home-faq-item summary .chevron { transition: transform .3s var(--muk-ease-out); }

/* ── Mobile: halved travel — big movement reads as lag on small screens ──── */
@media (max-width: 900px) {
  @keyframes muk-rise   { from { opacity: 0; transform: translateY(8px); } }
  @keyframes muk-rev-up { from { opacity: 0; transform: translateY(12px); } }
}

/* ── Reduced motion: everything lands instantly, ambient loops off ───────── */
@media (prefers-reduced-motion: reduce) {
  html.enhance .uk-hero h1 .hl-i,
  html.enhance .uk-hero-eyebrow,
  html.enhance .uk-hero-promise,
  html.enhance .uk-chip-row,
  html.enhance .uk-hero-actions,
  html.enhance .uk-hero::before,
  html.enhance .uk-hero::after,
  html.enhance .m-reveal,
  html.enhance .m-stagger > *,
  html.enhance .uk-compare-wrap .uk-yes,
  html.enhance .uk-brand-card .uk-tier::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Bar fills carry their ranking as an inline scaleX — kill the draw
     animation only; transform:none here would flatten every bar to 100% */
  html.enhance .uk-compare-wrap .uk-bar-fill,
  html.enhance .uk-brand-card .uk-bar-fill,
  html.enhance .uk-verdict-list .uk-score-fill {
    animation: none !important;
    opacity: 1 !important;
  }
  .uk-sticky-cta { transition: none; }
}