/* =====================================================================
   MEGAGEN — Homepage motion & finish layer (rd-home-fx.css)
   Loads LAST (after rd-qa.css). Purely additive polish: slow ambient
   light on the dark pillars band, a completed hero entrance cascade,
   one shared "rule draws in" entrance gesture for kickers / section
   rules / stat underlines, and a single calm lift-and-press language
   for buttons. Medical-brand restraint: transform/opacity only.

   Discipline:
   - no layout-affecting animation (no width/height/inset motion, no CLS)
   - logical properties / direction-neutral transforms (RTL-first site)
   - never touches #site-header / .mg-pdp-headwrap / .mg-nav positioning,
     html/body overflow, or the [data-reveal] hidden state
   - hidden entrance states exist only behind runtime classes
     (.is-visible / .is-in / .animated) + `backwards` fill, so nothing
     can ever stay invisible without JS
   - every effect stands down under prefers-reduced-motion
   ===================================================================== */

/* =====================================================================
   1. BRAND PILLARS BAND — ambient light, layered entrance, hover glow
   ===================================================================== */

/* Keep the content plane above the new ambient ::after layer. */
.mg-pillars__wrap { z-index: 1; }

/* Existing top glow (rd-pillars ::before): a very slow, faint drift.
   The gradient fades out well inside the box, so the small translate /
   scale never exposes an edge; the band itself is overflow:hidden. */
.mg-pillars::before {
  animation: mg-fx-amb-a 22s ease-in-out infinite;
  will-change: transform, opacity;
}

/* New counter-light: a deep-blue floor glow drifting the opposite way,
   even slower. Sits under the content (z-index 0 vs. the wrap's 1). */
.mg-pillars::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 40% at 16% 110%, rgba(2, 78, 134, 0.4), transparent 70%),
    radial-gradient(34% 34% at 86% 102%, rgba(99, 183, 239, 0.12), transparent 72%);
  animation: mg-fx-amb-b 26s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes mg-fx-amb-a {
  0%, 100% { transform: translate3d(-2.5%, -1.5%, 0) scale(1); opacity: 0.75; }
  50%      { transform: translate3d(2.5%, 2%, 0) scale(1.07);  opacity: 1; }
}
@keyframes mg-fx-amb-b {
  0%, 100% { transform: translate3d(2%, 1.5%, 0) scale(1.05); opacity: 0.55; }
  50%      { transform: translate3d(-2%, -1%, 0) scale(1);    opacity: 0.85; }
}

/* Head choreography: the head reveals as one block (data-reveal); the
   eyebrow and title add a quiet secondary rise inside that fade. */
.mg-js .mg-pillars__head[data-reveal].is-visible .mg-pillars__eyebrow {
  animation: mg-fx-soft 0.65s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)) 0.1s backwards;
}
.mg-js .mg-pillars__head[data-reveal].is-visible .mg-pillars__title {
  animation: mg-fx-rise 0.8s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)) 0.22s backwards;
}

/* Each icon settles in a beat after its pillar starts fading up. The
   delay follows the same 90ms sibling stagger the reveal script uses
   (--i is set inline per pillar). `backwards` fill only — after the
   entrance ends, the icon's own hover transition must stay lag-free. */
.mg-js .mg-pillar[data-reveal].is-visible .mg-pillar__ico {
  animation: mg-fx-ico 0.75s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
@keyframes mg-fx-ico {
  from { opacity: 0; transform: translateY(10px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hover: a soft interior glow across the whole pillar card. Lives on a
   pseudo-element so it can never interfere with the reveal transition
   (or its inline stagger delay) on .mg-pillar itself. */
.mg-pillar::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(80% 70% at 50% 18%, rgba(99, 183, 239, 0.12), transparent 74%);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.45s ease, transform 0.55s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-pillar:hover::before,
.mg-pillar:focus-visible::before { opacity: 1; transform: scale(1); }

/* =====================================================================
   2. HERO — complete the entrance cascade, breathe life into the cues
   ===================================================================== */

/* The meta line (badge + rule + category) joins the existing
   .12/.22/.32s title/addr/CTA cascade as its first beat
   (mg-hero-in keyframe comes from enhance.css). */
.mg-hero__slide.is-active .mg-hero__meta {
  animation: mg-hero-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.04s;
}
/* …and the small rule inside it draws itself once the line has landed. */
.mg-hero__slide.is-active .mg-hero__rule {
  animation: mg-fx-rule 0.7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)) 0.5s both;
}

/* Scroll cue: the vertical hairline calmly draws down, then releases.
   (The parent link is rotated 180deg, so element-bottom = screen-top;
   scale is held at 1 while the origin swaps, so nothing jumps.) */
.mg-hero__scroll::after {
  animation: mg-fx-cue 2.8s cubic-bezier(0.65, 0, 0.35, 1) 1.2s infinite;
}
@keyframes mg-fx-cue {
  0%   { transform: scaleY(0); transform-origin: 50% 100%; }
  42%  { transform: scaleY(1); transform-origin: 50% 100%; }
  58%  { transform: scaleY(1); transform-origin: 50% 0%; }
  100% { transform: scaleY(0); transform-origin: 50% 0%; }
}

/* Explore pill: the arrow answers the hover (direction-neutral scale). */
.mg-hero__explore span svg {
  transition: transform 0.3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-hero__explore:hover span svg { transform: scale(1.15); }

/* =====================================================================
   3. ENTRANCE RHYTHM — one shared "rule draws in" gesture
   Kicker bars, section rules and stat underlines all draw from the
   center with the same easing, so every section opens with one voice.
   (Center origin is direction-neutral — correct in RTL and LTR.)
   ===================================================================== */

@keyframes mg-fx-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes mg-fx-soft {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mg-fx-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Homepage section kickers (the seeded h6 eyebrows): the 26px accent
   bar draws in while Elementor's own fadeInUp runs on the section. */
.home .animated h6.elementor-heading-title::before {
  animation: mg-fx-rule 0.8s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)) 0.25s both;
}

/* Articles band head: eyebrow bar first, heading rule as the echo. */
.mg-js .mg-home-articles__head[data-reveal].is-visible .mg-home-articles__eyebrow::before {
  animation: mg-fx-rule 0.7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)) 0.2s both;
}
.mg-js .mg-home-articles__head[data-reveal].is-visible h2::after {
  animation: mg-fx-rule 0.8s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)) 0.4s both;
}

/* Stat underline: draws in after the card lands, while the number is
   still counting. `backwards` (not both) so the hover stretch below
   stays free of the animation's fill. */
.mg-anim .mg-stat.mg-reveal-item.is-in .mg-stat__num::after {
  animation: mg-fx-rule 0.7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)) 0.45s backwards;
}
/* …and answers hover with a quiet stretch (pseudo only: no clash with
   the reveal transition managed on .mg-stat itself). */
.mg-stat__num::after {
  transition: transform 0.45s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-stat:hover .mg-stat__num::after { transform: scaleX(1.35); }

/* =====================================================================
   4. MICRO-INTERACTIONS — one calm lift-and-press language
   ===================================================================== */

/* Nav CTA + menu button: gentle lift, immediate press. (Visual motion
   on the buttons only — nav positioning/z-index untouched.) */
.mg-nav__cta,
.mg-menu-btn {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-nav__cta:hover,
.mg-menu-btn:hover { transform: translateY(-1px); }
.mg-nav__cta:active,
.mg-menu-btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.12s; }

/* Newsletter submit + articles "view all": the same voice. */
.mg-news__form button,
.mg-home-articles__all {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-news__form button:hover,
.mg-home-articles__all:hover { transform: translateY(-2px); }
.mg-news__form button:active,
.mg-home-articles__all:active { transform: translateY(0) scale(0.98); transition-duration: 0.12s; }

/* Press state for the pills that already lift on hover (rd-home). */
.mg-hero__explore:active,
.mg-stack__cta:active,
.mg-hx__link:active { transform: translateY(0) scale(0.985); transition-duration: 0.12s; }

/* Footer social icons: a small lift to match the rest of the system. */
.mg-footer .mg-bento__social a {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-footer .mg-bento__social a:hover { transform: translateY(-2px); }

/* Article cards: the title answers the card hover (inner element only —
   the card itself is reveal-managed and stays untouched). */
.mg-hart__title { transition: color 0.3s ease; }
.mg-hart:hover .mg-hart__title { color: var(--mg-accent, #0067b1); }
[data-theme="dark"] .mg-hart:hover .mg-hart__title { color: #63b7ef; }

/* =====================================================================
   5. REDUCED MOTION — everything above stands down
   (No infinite ambient loops, no entrance choreography, no lifts.)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mg-pillars::before,
  .mg-pillars::after {
    animation: none;
    will-change: auto;
  }

  .mg-js .mg-pillars__head[data-reveal].is-visible .mg-pillars__eyebrow,
  .mg-js .mg-pillars__head[data-reveal].is-visible .mg-pillars__title,
  .mg-js .mg-pillar[data-reveal].is-visible .mg-pillar__ico,
  .mg-hero__slide.is-active .mg-hero__meta,
  .mg-hero__slide.is-active .mg-hero__rule,
  .mg-hero__scroll::after,
  .home .animated h6.elementor-heading-title::before,
  .mg-js .mg-home-articles__head[data-reveal].is-visible .mg-home-articles__eyebrow::before,
  .mg-js .mg-home-articles__head[data-reveal].is-visible h2::after,
  .mg-anim .mg-stat.mg-reveal-item.is-in .mg-stat__num::after { animation: none; }

  .mg-pillar::before,
  .mg-hero__explore span svg,
  .mg-stat__num::after,
  .mg-nav__cta,
  .mg-menu-btn,
  .mg-news__form button,
  .mg-home-articles__all,
  .mg-footer .mg-bento__social a,
  .mg-hart__title { transition: none; }

  .mg-pillar:hover::before,
  .mg-pillar:focus-visible::before { transform: none; }
  .mg-hero__explore:hover span svg { transform: none; }
  .mg-stat:hover .mg-stat__num::after { transform: none; }
  .mg-nav__cta:hover, .mg-nav__cta:active,
  .mg-menu-btn:hover, .mg-menu-btn:active,
  .mg-news__form button:hover, .mg-news__form button:active,
  .mg-home-articles__all:hover, .mg-home-articles__all:active,
  .mg-hero__explore:active, .mg-stack__cta:active, .mg-hx__link:active,
  .mg-footer .mg-bento__social a:hover { transform: none; }
}