/* =============================================================================
   MEI motion · v1.0 (Fase 2, frozen). Load after base.css.
   Rules: only opacity and transform (incl. the individual `translate` property),
   300–700 ms, easing var(--mei-ease); prefers-reduced-motion shows everything, still;
   no pinning or parallax below 1024px. Hidden-until-revealed states exist only under
   html.mei-js (set by mei.js), so without JS every element is visible.
   Hover lifts use `translate`, reveals use `transform`: the two never fight.
   ========================================================================== */

/* ---------- 1. Interaction transitions ---------- */
.mei-btn { transition: translate var(--mei-dur-s) var(--mei-ease); }
.mei-btn::before { transition: opacity var(--mei-dur-s) var(--mei-ease); }
.mei-btn:hover { translate: 0 var(--mei-lift-s); }
.mei-btn:active { translate: 0 0; }
.mei-btn__ico, .mei-link__ico { transition: transform var(--mei-dur-s) var(--mei-ease); }
.mei-btn:hover .mei-btn__ico:not(.mei-btn__ico--l),
.mei-link:hover .mei-link__ico:not(.mei-link__ico--l) { transform: translateX(4px); }
.mei-link::after { transition: transform var(--mei-dur-m) var(--mei-ease); }
.mei-nav a::after { transition: transform var(--mei-dur-s) var(--mei-ease); }
.mei-burger__lines i { transition: transform var(--mei-dur-s) var(--mei-ease); }

.mei-hdr { transition: transform var(--mei-dur-m) var(--mei-ease); }
.mei-mnav { transition: opacity var(--mei-dur-s) var(--mei-ease), transform var(--mei-dur-s) var(--mei-ease), visibility 0s linear var(--mei-dur-s); }
.mei-mnav.mei-is-open { transition-delay: 0s; }

/* hover lift: cards, offers, badges */
.mei-offer, .mei-card--lift, .mei-badge { transition: translate var(--mei-dur-m) var(--mei-ease); }
.mei-offer::after, .mei-card--lift::after { transition: opacity var(--mei-dur-m) var(--mei-ease); }
.mei-offer:hover, .mei-card--lift:hover { translate: 0 var(--mei-lift-l); }
.mei-badge:hover { translate: 0 var(--mei-lift-m); }

.mei-faq__q::after { transition: transform var(--mei-dur-s) var(--mei-ease); }
.mei-faq__item[open] > .mei-faq__a { animation: mei-rise var(--mei-dur-m) var(--mei-ease) both; --mei-reveal-y: 8px; }
.mei-mk { transition: transform var(--mei-dur-s) var(--mei-ease); }

@keyframes mei-rise { from { opacity: 0; transform: translateY(var(--mei-reveal-y)); } to { opacity: 1; transform: none; } }
@keyframes mei-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mei-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 2. Reveal on scroll (IntersectionObserver in mei.js) ---------- */
.mei-js [data-mei-reveal] {
  opacity: 0; transform: translateY(var(--mei-reveal-y));
  transition: opacity var(--mei-dur-l) var(--mei-ease), transform var(--mei-dur-l) var(--mei-ease), translate var(--mei-dur-m) var(--mei-ease);
  transition-delay: calc(var(--mei-i, 0) * var(--mei-stagger)), calc(var(--mei-i, 0) * var(--mei-stagger)), 0s;
}
.mei-js [data-mei-reveal="fade"] { transform: none; }
.mei-js [data-mei-reveal="scale"] { transform: scale(.96); }
.mei-js [data-mei-reveal].mei-is-in { opacity: 1; transform: none; }
.mei-js [data-mei-reveal].mei-is-settled { transition-delay: 0s; }

/* headings split in .mei-line masks: each line slides up */
.mei-js [data-mei-lines] .mei-line > span { transform: translateY(108%); transition: transform var(--mei-dur-l) var(--mei-ease); }
.mei-js [data-mei-lines] .mei-line:nth-child(2) > span { transition-delay: 90ms; }
.mei-js [data-mei-lines] .mei-line:nth-child(3) > span { transition-delay: 180ms; }
.mei-js [data-mei-lines].mei-is-in .mei-line > span { transform: none; }

/* elements that animate their insides once in view: [data-mei-inview] */
.mei-meter > i, .mei-bars__track > i { transition: transform var(--mei-dur-l) var(--mei-ease) 300ms; }
.mei-bars__was { transition-delay: 150ms; }
.mei-bars__now { transition-delay: 450ms; }
.mei-js [data-mei-inview]:not(.mei-is-in) :is(.mei-meter > i, .mei-bars__track > i) { transform: scaleX(0); }
.mei-days__slot { transition: transform var(--mei-dur-l) var(--mei-ease) 200ms; }
.mei-js [data-mei-inview]:not(.mei-is-in) .mei-days__slot { transform: scale(.4); }

/* ---------- 3. Comparison table: columns one at a time (≥1024) ---------- */
@media (min-width: 1024px) {
  .mei-js [data-mei-cmp] [data-mei-col] { transition: opacity var(--mei-dur-l) var(--mei-ease), transform var(--mei-dur-l) var(--mei-ease); }
  .mei-js [data-mei-cmp]:not(.mei-c1) [data-mei-col="1"],
  .mei-js [data-mei-cmp]:not(.mei-c2) [data-mei-col="2"],
  .mei-js [data-mei-cmp]:not(.mei-c3) [data-mei-col="3"],
  .mei-js [data-mei-cmp]:not(.mei-c4) [data-mei-col="4"],
  .mei-js [data-mei-cmp]:not(.mei-c5) [data-mei-col="5"],
  .mei-js [data-mei-cmp]:not(.mei-c6) [data-mei-col="6"] { opacity: 0; transform: translateY(16px); }
  .mei-cmp__t .mei-is-hl-x .mei-mk { transform: scale(1.15); }
}

/* ---------- 4. How it works: steps (mobile = stacked; desktop = pinned, set by mei.js) ---------- */
/* inside a step, [data-mei-stagger] children appear when the step becomes active */
.mei-step [data-mei-stagger] > * { transition: opacity var(--mei-dur-m) var(--mei-ease), transform var(--mei-dur-m) var(--mei-ease); transition-delay: calc(var(--mei-i, 0) * 60ms); }
.mei-js .mei-step:not(.mei-is-active) [data-mei-stagger] > * { opacity: 0; transform: translateY(8px); }

@media (min-width: 1024px) {
  .mei-section:has(> .mei-hiw.mei-is-pinned) { padding-block: 0; }
  .mei-hiw.mei-is-pinned { height: calc(var(--mei-steps-n, 4) * 80vh); }
  .mei-is-pinned .mei-hiw__frame { position: sticky; z-index: var(--mei-z-base); top: 0; height: 100vh; padding-top: var(--mei-hdr-h); display: flex; align-items: center; }
  .mei-is-pinned .mei-hiw__grid { width: 100%; align-items: center; }
  .mei-is-pinned .mei-hiw__side { position: static; display: grid; align-content: center; }
  .mei-is-pinned .mei-hiw__prog { display: grid; gap: 4px; margin-top: 40px; }
  .mei-is-pinned .mei-hiw__prog li { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-weight: var(--mei-fw-semibold); color: var(--mei-navy-4); transition: transform var(--mei-dur-m) var(--mei-ease); }
  .mei-is-pinned .mei-hiw__prog li.mei-is-done .mei-hiw__n { background: var(--mei-navy); color: #fff; }
  .mei-is-pinned .mei-hiw__prog li.mei-is-on { color: var(--mei-navy); transform: translateX(6px); }
  .mei-is-pinned .mei-hiw__prog li.mei-is-on .mei-hiw__n { background: var(--mei-coral); color: #fff; }
  .mei-is-pinned .mei-steps { display: grid; }
  .mei-is-pinned .mei-step {
    grid-area: 1 / 1; min-height: 520px; align-content: center; padding: 48px;
    transition: opacity var(--mei-dur-l) var(--mei-ease), transform var(--mei-dur-l) var(--mei-ease), visibility 0s linear 0s;
  }
  .mei-is-pinned .mei-step:not(.mei-is-active) {
    visibility: hidden; opacity: 0; transform: translateY(28px);
    transition: opacity var(--mei-dur-s) var(--mei-ease), transform var(--mei-dur-s) var(--mei-ease), visibility 0s linear var(--mei-dur-s);
  }
  .mei-is-pinned .mei-step.mei-is-past { transform: translateY(-28px); }
}
/* big programmatic jumps (anchor links): no transitions for a frame */
.mei-jump .mei-hdr, .mei-jump .mei-step, .mei-jump .mei-step * { transition: none !important; animation: none !important; }

/* ---------- 5. Scroll-driven animations (native CSS where supported) ---------- */
/* mei.js sets html.mei-sda when `animation-timeline` is supported and motion is allowed. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* header progress bar follows the page scroll with no JS */
    .mei-hdr__progress-bar { animation: mei-grow-x linear both; animation-timeline: scroll(root block); }
    /* [data-mei-scroll]: element rises while it enters the viewport, tied to scroll position */
    [data-mei-scroll] { animation: mei-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    [data-mei-scroll="fade"] { animation-name: mei-fade; }
  }
}
/* fallback: without support, [data-mei-scroll] behaves like [data-mei-reveal] */
.mei-js:not(.mei-sda) [data-mei-scroll] { opacity: 0; transform: translateY(var(--mei-reveal-y)); transition: opacity var(--mei-dur-l) var(--mei-ease), transform var(--mei-dur-l) var(--mei-ease); }
.mei-js:not(.mei-sda) [data-mei-scroll="fade"] { transform: none; }
.mei-js:not(.mei-sda) [data-mei-scroll].mei-is-in { opacity: 1; transform: none; }

/* ---------- 6. Parallax (JS writes transform on [data-mei-px], desktop + fine pointer only) ---------- */
@media (max-width: 1023.98px), (pointer: coarse) {
  [data-mei-px] { transform: none !important; }
}

/* ---------- 7. Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mei-js [data-mei-reveal], .mei-js [data-mei-scroll], .mei-js [data-mei-lines] .mei-line > span,
  .mei-js .mei-step [data-mei-stagger] > *, .mei-js [data-mei-cmp] [data-mei-col],
  .mei-js [data-mei-inview] .mei-days__slot { opacity: 1 !important; transform: none !important; }
  .mei-js [data-mei-inview] :is(.mei-meter > i, .mei-bars__track > i) { transform: scaleX(var(--v, 0)) !important; }
  .mei-btn:hover, .mei-offer:hover, .mei-card--lift:hover, .mei-badge:hover { translate: none; }
  .mei-btn:hover .mei-btn__ico, .mei-link:hover .mei-link__ico, .mei-cmp__t .mei-is-hl-x .mei-mk { transform: none; }
  [data-mei-px] { transform: none !important; }
}