/*
 * Public-site motion: homepage hero entrance, staggered scroll reveals, scroll
 * progress. Everything here is gated on html.mj-motion, which base.html only
 * sets when JavaScript runs and the visitor has not asked for reduced motion.
 * Without it every page renders fully visible and static.
 *
 * Reveal targets: [data-reveal] sections and [data-reveal-item] cards on the
 * homepage, and any .animate-on-scroll element on the other pages.
 *
 * Reveals use the individual `translate` / `scale` properties so they never
 * fight the existing `transform` hover effects on cards and images.
 */

:root {
    --mj-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --mj-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.mj-motion {
    scroll-behavior: smooth;
}

#cas-section {
    scroll-margin-top: 90px;
}

/* ---------- Hero entrance (plays once on load) ---------- */

@keyframes mjRiseIn {
    from {
        opacity: 0;
        translate: 0 22px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes mjPortraitIn {
    from {
        opacity: 0;
        clip-path: inset(10% 10% 10% 10% round 20px);
        scale: 0.97;
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 20px);
        scale: 1;
    }
}

.mj-motion [data-hero-item] {
    animation: mjRiseIn 0.9s var(--mj-ease-out) both;
}

.mj-motion .hero-chip-badge { animation-delay: 0.05s; }
.mj-motion .hero-main-title { animation-delay: 0.15s; }
.mj-motion .hero-description-text { animation-delay: 0.27s; }
.mj-motion .hero-trust-row { animation-delay: 0.37s; }
.mj-motion .hero-buttons-container { animation-delay: 0.47s; }

.mj-motion [data-hero-portrait] {
    animation: mjPortraitIn 1.1s var(--mj-ease-out) 0.2s both;
}

.mj-motion [data-hero-portrait] .doctor-overlay-card {
    animation: mjRiseIn 0.8s var(--mj-ease-out) 0.65s both;
}

/* The soft colour blob behind the hero drifts slower than the page. */
.mj-motion .hero-wrapper-c::before {
    translate: 0 calc(var(--mj-hero-shift, 0) * 1px);
}

/* ---------- Scroll reveals ---------- */

.mj-motion [data-reveal] {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 0.7s var(--mj-ease-out), translate 0.9s var(--mj-ease-out);
}

.mj-motion [data-reveal-item],
.mj-motion .animate-on-scroll {
    opacity: 0;
    translate: 0 28px;
    transition:
        opacity 0.7s var(--mj-ease-out),
        translate 0.9s var(--mj-ease-out),
        scale 0.9s var(--mj-ease-out);
    transition-delay: var(--mj-reveal-delay, 0ms);
}

.mj-motion [data-reveal-item="zoom"] {
    translate: none;
    scale: 0.9;
}

.mj-motion [data-reveal].is-revealed,
.mj-motion [data-reveal-item].is-revealed,
.mj-motion .animate-on-scroll.is-revealed {
    opacity: 1;
    translate: 0 0;
    scale: 1;
}

/* Page headers: badge, title and intro rise in one after another. */
.mj-motion .section-wrapper-c.animate-on-scroll > * {
    opacity: 0;
    translate: 0 16px;
    transition: opacity 0.6s var(--mj-ease-out), translate 0.8s var(--mj-ease-out);
    transition-delay: calc(var(--mj-reveal-delay, 0ms) + 120ms);
}

.mj-motion .section-wrapper-c.animate-on-scroll > :nth-child(2) { transition-delay: calc(var(--mj-reveal-delay, 0ms) + 200ms); }
.mj-motion .section-wrapper-c.animate-on-scroll > :nth-child(3) { transition-delay: calc(var(--mj-reveal-delay, 0ms) + 280ms); }
.mj-motion .section-wrapper-c.animate-on-scroll > :nth-child(n+4) { transition-delay: calc(var(--mj-reveal-delay, 0ms) + 360ms); }

.mj-motion .section-wrapper-c.animate-on-scroll.is-revealed > * {
    opacity: 1;
    translate: 0 0;
}

/* Small accents that land just after their card. */
.mj-motion [data-reveal-item] .specialty-icon-circle,
.mj-motion [data-reveal-item] .cas-step-num,
.mj-motion .animate-on-scroll .cas-step-num {
    opacity: 0;
    scale: 0.5;
    transition: opacity 0.4s ease-out, scale 0.7s var(--mj-ease-spring);
    transition-delay: calc(var(--mj-reveal-delay, 0ms) + 250ms);
}

.mj-motion [data-reveal-item].is-revealed .specialty-icon-circle,
.mj-motion [data-reveal-item].is-revealed .cas-step-num,
.mj-motion .animate-on-scroll.is-revealed .cas-step-num {
    opacity: 1;
    scale: 1;
}

/* ---------- Scroll progress bar ---------- */

.mj-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1031;
    background: linear-gradient(90deg, var(--color-primary, #008080), var(--color-secondary, #B8860B));
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

@media print {
    .mj-motion [data-reveal],
    .mj-motion [data-reveal-item],
    .mj-motion .animate-on-scroll,
    .mj-motion .section-wrapper-c.animate-on-scroll > *,
    .mj-motion [data-reveal-item] .specialty-icon-circle,
    .mj-motion [data-reveal-item] .cas-step-num,
    .mj-motion .animate-on-scroll .cas-step-num {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
    }

    .mj-scroll-progress {
        display: none;
    }
}