/* ═══════════════════════════════════════════════════════════════════════════
   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 hidden or
   opacity-faded; it paints in final position on the first frame.
   ═══════════════════════════════════════════════════════════════════════════ */

: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 rise choreography (eyebrow → promise → chips → CTAs). H1 excluded
   by design — LCP paints instantly. 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; }
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; }
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-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; }
}