/* Motion polish — 2026-06-10
   CSS-driven micro-interactions + scroll-reveal classes that the
   IntersectionObserver helper in App.razor toggles.

   Respects prefers-reduced-motion: every motion is short-circuited
   so vestibular-disorder visitors don't get punished. */

/* ───── Scroll reveal ─────
   The data-reveal attribute starts opacity 0 + translateY; the JS
   helper adds .is-revealed when the element scrolls into view. */

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger children inside a [data-reveal-group] container by delay. */
[data-reveal-group] > [data-reveal]:nth-child(1) { transition-delay: 60ms; }
[data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 140ms; }
[data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 220ms; }
[data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 300ms; }
[data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: 380ms; }
[data-reveal-group] > [data-reveal]:nth-child(6) { transition-delay: 460ms; }

/* Slide-in variants */
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX( 24px); }
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed {
    transform: translateX(0);
}
[data-reveal="zoom"] { transform: scale(0.96); }
[data-reveal="zoom"].is-revealed { transform: scale(1); }

/* ───── Hero parallax ─────
   The radial gradient bg behind the hero gets a slow translate3d on
   scroll. Driven by --mediora-scroll CSS var the JS helper updates on
   requestAnimationFrame (so we never thrash layout). */

.v2-hero__bg {
    transform: translate3d(0, calc(var(--mediora-scroll, 0) * 0.18px), 0);
    transition: transform 50ms linear;
    will-change: transform;
}

/* ───── Hero title shimmer (subtle, one-shot on first paint) ───── */

@keyframes mediora-hero-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.v2-hero__title {
    background-image: linear-gradient(110deg,
        #fff 0%, #fff 35%,
        #00D4AA 50%,
        #fff 65%, #fff 100%) !important;
    background-size: 250% 100% !important;
    background-position: 100% 0 !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: mediora-hero-shimmer 4.5s cubic-bezier(0.4, 0, 0.2, 1) .4s 1 forwards;
}

/* ───── Button micro-interactions ───── */

.v2-btn,
.ds-btn,
.tile,
.hv2-card,
.alv2-card,
.report-card,
.dashv2__alert {
    will-change: transform;
}

.v2-btn:active,
.ds-btn:active { transform: translateY(1px) scale(0.99); }

.v2-btn__arrow,
.alv2-card__arrow,
.tile__cta i,
.v2-aud-card__link i,
.dashv2__cta-band-btn i,
.adv2__cross-btn i {
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.v2-btn:hover .v2-btn__arrow,
.alv2-card:hover .alv2-card__arrow,
.tile:hover .tile__cta i,
.v2-aud-card__link:hover i,
.dashv2__cta-band:hover i,
.adv2__cross-btn:hover i { transform: translateX(4px); }
[dir="rtl"] .v2-btn:hover .v2-btn__arrow,
[dir="rtl"] .alv2-card:hover .alv2-card__arrow,
[dir="rtl"] .tile:hover .tile__cta i,
[dir="rtl"] .v2-aud-card__link:hover i,
[dir="rtl"] .dashv2__cta-band:hover i,
[dir="rtl"] .adv2__cross-btn:hover i { transform: translateX(-4px); }

/* Tile hover lift */
.tile, .v2-aud-card, .v2-price-card, .v2-step,
.alv2-card, .hv2-card, .report-card,
.dashv2__cta-band, .adv2__cross-sell {
    transition:
        transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Audience cards extra lift on hover */
.v2-aud-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -20px rgba(0, 212, 170, 0.30);
}

/* Pricing featured card breath */
@keyframes mediora-breath {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,212,170,0.35), 0 8px 24px -10px rgba(0,212,170,0.25); }
    50%      { box-shadow: 0 0 0 1px rgba(0,212,170,0.55), 0 12px 32px -10px rgba(0,212,170,0.40); }
}
.v2-price-card--rec,
.pv2__card--featured {
    animation: mediora-breath 3.6s ease-in-out infinite;
}

/* ───── Reduced motion: short-circuit everything ───── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
    .v2-hero__bg { transform: none !important; }
    .v2-hero__title {
        animation: none !important;
        background: linear-gradient(180deg, #fff 0%, #cfd8dc 100%) !important;
        background-size: auto !important;
        background-position: 0 0 !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
    }
}