/* ================================================================
   MEDENTICA QUATTROCONE — SMART CLINIC
   Animations CSS — Phase 3: Motion Design
   Loaded AFTER landing.css — augments, never conflicts.
   ================================================================ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 1 · SCROLL PROGRESS BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--c-red) 0%, var(--c-cyan) 100%);
    z-index: 9999;
    pointer-events: none;
    transform-origin: left center;
    /* GPU composited — no layout triggers */
    will-change: width;
    transition: width 80ms linear;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 2 · HERO LOAD SEQUENCE
   Separate from [data-animate] — fires on page load, not scroll.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-hero] {
    opacity: 0;
    transform: translateY(36px);
    will-change: opacity, transform;
}

[data-hero="visual"] {
    transform: scale(0.94);
}

/* Each sequence step gets its own transition curve */
[data-hero="1"].hero-revealed {
    opacity: 1; transform: none; will-change: auto;
    transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
                transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
[data-hero="2"].hero-revealed {
    opacity: 1; transform: none; will-change: auto;
    transition: opacity 0.70s cubic-bezier(0.16,1,0.3,1),
                transform 0.70s cubic-bezier(0.16,1,0.3,1);
}
[data-hero="3"].hero-revealed {
    opacity: 1; transform: none; will-change: auto;
    transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
                transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
[data-hero="4"].hero-revealed {
    opacity: 1; transform: none; will-change: auto;
    transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
                transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
[data-hero="5"].hero-revealed {
    opacity: 1; transform: none; will-change: auto;
    transition: opacity 0.60s cubic-bezier(0.16,1,0.3,1),
                transform 0.60s cubic-bezier(0.16,1,0.3,1);
}
[data-hero="visual"].hero-revealed {
    opacity: 1; transform: none; will-change: auto;
    transition: opacity 0.90s cubic-bezier(0.16,1,0.3,1),
                transform 0.90s cubic-bezier(0.34,1.56,0.64,1);
}

/* Prevent FOUC — hide hero immediately on load */
.js-loading [data-hero] { opacity: 0; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 3 · SCROLL REVEAL SYSTEM (extends Phase 2 [data-animate])
   Phase 2 already defines opacity:0 / translateY initial state.
   We only extend transitions and will-change here.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-animate] {
    /* Override Phase 2's basic ease with a refined curve */
    transition:
        opacity   0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms);
}

[data-animate="fade-in"]    { transform: none; }
[data-animate="scale-in"]   { transform: scale(0.95); }
[data-animate="slide-right"] { transform: translateX(-32px); }

[data-animate].is-visible {
    opacity: 1;
    transform: none;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 4 · TREATMENT TRACK LINE DRAW
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-treatment-track .track-rail {
    /* Start collapsed — draw left-to-right on reveal */
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform;
}

.section-treatment-track.track-revealed .track-rail {
    transform: scaleX(1);
    will-change: auto;
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

/* Step nodes — scale in after rail draws */
.section-treatment-track.track-revealed .step-node {
    animation: node-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stagger node animations based on position */
.section-treatment-track.track-revealed .track-step:nth-child(2) .step-node { animation-delay: 200ms; }
.section-treatment-track.track-revealed .track-step:nth-child(3) .step-node { animation-delay: 400ms; }
.section-treatment-track.track-revealed .track-step:nth-child(4) .step-node { animation-delay: 600ms; }
.section-treatment-track.track-revealed .track-step:nth-child(5) .step-node { animation-delay: 800ms; }
.section-treatment-track.track-revealed .track-step:nth-child(6) .step-node { animation-delay: 1000ms; }

@keyframes node-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 5 · CARD HOVER — GLOW FOLLOW CURSOR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.glass-card {
    /* Override base transition to add box-shadow timing */
    transition:
        transform    0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.30s cubic-bezier(0.4,  0, 0.2, 1),
        box-shadow   0.30s cubic-bezier(0.4,  0, 0.2, 1);
}

/* Cursor-tracking glow spot (set via JS custom properties) */
.glass-card::after {
    content: '';
    position: absolute;
    left: var(--gx, 50%);
    top:  var(--gy, 50%);
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(225,6,0,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glass-card:hover::after { opacity: 1; }

/* Keep existing ::after selectors for section-specific overrides — they chain fine */
.system-card:not(.featured)::after,
.why-card::after,
.team-block::before {
    /* Re-declare to win over the glow ::after above using same specificity */
}

/* Simpler: scope glow to cards that don't have their own ::after content */
.system-card::after,
.why-card::after { content: none; } /* those cards use ::after for their own design */

.step-content.glass-card::after { content: none; }
.cta-inner.glass-card::after    { content: none; }
.team-block.glass-card::after   { content: none; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 6 · VIDEO PLAY BUTTON — PULSE RING
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.video-play-btn {
    position: relative;
}

/* Persistent slow pulse ring when idle */
.video-play-btn.pulse-idle::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid rgba(225, 6, 0, 0.35);
    animation: ring-expand 2.4s ease-out infinite;
}

/* Second, slower ring */
.video-play-btn.pulse-idle::before {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 1px solid rgba(225, 6, 0, 0.18);
    animation: ring-expand 2.4s ease-out 0.8s infinite;
}

@keyframes ring-expand {
    0%   { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0;   }
}

/* Hover: intensify and scale */
.video-wrapper:hover .video-play-btn {
    transform: scale(1.12);
    box-shadow: 0 0 0 0 rgba(225,6,0,0), 0 16px 48px rgba(225,6,0,0.45);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 7 · CTA SECTION — AMBIENT GLOW PULSE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-final-cta::before {
    animation: cta-glow-breathe 5s ease-in-out infinite;
}

@keyframes cta-glow-breathe {
    0%, 100% { opacity: 0.7; transform: scale(1);    }
    50%       { opacity: 1.0; transform: scale(1.06); }
}

/* Gradient border on CTA card brightens on hover */
.cta-inner:hover::before { opacity: 0.85; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 8 · MAGNETIC BUTTON
   JS sets --mx / --my custom properties for offset.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-magnetic {
    transform: translate(var(--mx, 0px), var(--my, 0px));
    transition:
        transform  0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-magnetic:hover {
    /* Magnetic state overrides translateY from base .btn */
    transform: translate(var(--mx, 0px), var(--my, 0px));
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 9 · STAT COUNTER — NUMERIC REVEAL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-count] {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 10 · HERO VISUAL FLOAT + PARALLAX
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Visual frame — slow perpetual float after reveal */
.hero-visual[data-hero="visual"].hero-revealed .visual-frame {
    animation: hero-float 7s ease-in-out 1s infinite;
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0px)   rotate(0deg); }
    33%       { transform: translateY(-8px)  rotate(0.4deg); }
    66%       { transform: translateY(-4px)  rotate(-0.3deg); }
}

/* Parallax glow responds to JS-set CSS vars */
.visual-glow {
    transform: translate(var(--glow-x, 0px), var(--glow-y, 0px));
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Second ambient glow — slow drift */
.visual-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle, var(--c-cyan-glow) 0%, transparent 70%);
    filter: blur(40px);
    transform: translate(-20px, 20px);
    animation: glow-drift 8s ease-in-out infinite alternate;
}

@keyframes glow-drift {
    from { transform: translate(-20px, 20px); opacity: 0.6; }
    to   { transform: translate(20px, -20px);  opacity: 1.0; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 11 · SECTION TITLE UNDERLINE REVEAL
   Adds a growing accent line below section titles on enter.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0%;
    height: 1.5px;
    background: linear-gradient(90deg, var(--c-red), var(--c-cyan));
    border-radius: 2px;
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.section-header.is-visible .section-title::after,
[data-animate].is-visible .section-title::after,
.section-header--center .section-title::after {
    /* Center-aligned titles: centered line */
    left: 50%;
    transform: translateX(-50%);
}

/* Trigger when the parent section-header is visible */
.section-header.is-visible .section-title::after { width: 56px; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 12 · NAV TOGGLE ANIMATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-toggle span {
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity   0.20s ease,
        width     0.20s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(4.5px, 5px);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    transform: scaleX(0);
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(4.5px, -5px);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 13 · HERO SCROLL HINT — LOOPING LINE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero-scroll-hint {
    animation: hint-fade-in 1s ease 2s both;
    opacity: 0.45;
}

@keyframes hint-fade-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 0.45; transform: translateX(-50%) translateY(0); }
}

.scroll-line {
    animation: scroll-pulse 2.2s ease-in-out infinite;
}

@keyframes scroll-pulse {
    0%       { transform: scaleY(0);   transform-origin: top;    opacity: 0; }
    25%, 50% { transform: scaleY(1);   transform-origin: top;    opacity: 1; }
    75%      { transform: scaleY(0.1); transform-origin: bottom; opacity: 0; }
    100%     { transform: scaleY(0);   transform-origin: bottom; opacity: 0; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 14 · LOGO MARK — SUBTLE HOVER ROTATE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.logo-mark {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
}
.header-logo:hover .logo-mark {
    transform: rotate(8deg) scale(1.06);
    box-shadow: 0 4px 16px var(--c-red-glow);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 15 · EDUCATIONAL SECTION — FACTOR HOVER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.edu-factor {
    transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.edu-factor:hover { padding-left: 0.25rem; }
.edu-factor:hover .factor-title { color: var(--c-white); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 16 · FOOTER NAV — SLIDE IN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer-nav a {
    transition: color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer-nav a:hover { transform: translateX(5px); color: var(--c-white); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 17 · PREFERS-REDUCED-MOTION
   All animations suppressed. Transitions remain instant.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
    /* Override all animation keyframes */
    *,
    *::before,
    *::after {
        animation-duration:   0.01ms !important;
        animation-delay:      0ms    !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
        transition-delay:     0ms    !important;
    }

    /* Immediately show all animated elements */
    [data-hero] {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
    }

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Show track rail immediately */
    .section-treatment-track .track-rail {
        transform: scaleX(1) !important;
    }

    /* Disable scroll progress bar motion */
    .scroll-progress-bar {
        transition: none !important;
    }

    /* Restore static hover styles */
    .glass-card:hover { transform: none; }
    .glass-card { transform: none !important; }
    .video-play-btn.pulse-idle::after,
    .video-play-btn.pulse-idle::before { display: none; }
}