/*
============================================================
FITRO — TRAINER OVER WAVE V9.1
============================================================

ANIMATION SEQUENCE

1. Wave video animates and settles on the right.
2. Completed Wave remains sticky and fully visible.
3. User continues scrolling.
4. Trainer moves UP over the stationary Wave.
5. Trainer completely covers the Wave.
6. Trainer continues normal scrolling.
7. Reverse scroll uncovers the Wave naturally.

IMPORTANT
- Compatible with fitroWaveTrainerReveal.js V9.1.
- Keep fitroWave.js progress integration.
- Load after fitroWave.css and fitroTrainer.css.
- Remove all older Wave/Trainer reveal stylesheets.
- No fixed Trainer, clipping, cloning or card transforms.
============================================================
*/


/* ==========================================================
   1. PARENT — PRESERVE STICKY SCROLL
========================================================== */

.fitro-scroll-story {
    position: relative;
    overflow: visible;
}


/* ==========================================================
   2. WAVE — EXTENDED STICKY STORY
========================================================== */

html body .fitro-wave-story.fitro-trainer-overlap-active {

    position: relative !important;

    z-index: 80 !important;

    width: 100%;

    /*
     * Original Wave height plus measured sticky tail.
     * Both values are supplied by V9.1 JavaScript.
     *
     * The original Wave progress calculation must exclude
     * this extra height to preserve video animation timing.
     */
    height: calc(
        var(--fitro-v9-base-height) +
        var(--fitro-v9-tail)
    ) !important;

    min-height: 0 !important;

    overflow: visible !important;

    /*
     * Do not add transform, filter or contain.
     * They may interfere with sticky behavior.
     */
}


/* ==========================================================
   3. WAVE — EXISTING STICKY PANEL
========================================================== */

html body
.fitro-wave-story.fitro-trainer-overlap-active
> .fitro-wave-sticky {

    position: sticky !important;

    z-index: 2;

    /*
     * The original fitroWave.css controls:
     *
     * top
     * width
     * height
     * min-height
     * border-radius
     * background
     * overflow
     *
     * Never transform the Wave panel.
     */
}


/* ==========================================================
   4. TRAINER — FOREGROUND SECTION
========================================================== */

html body
#trainerExperienceStory.trainer-experience-story.fitro-trainer-overlap-active {

    position: relative !important;

    inset: auto !important;

    /*
     * Higher layer than the Wave.
     * Trainer scrolls over the stationary Wave.
     */
    z-index: 100 !important;

    isolation: isolate;

    width: 100%;

    /*
     * Calculated negative overlap aligns the Trainer
     * with the end of the completed Wave animation.
     */
    margin-top: calc(
        -1 * var(--fitro-v9-overlap, 0px)
    ) !important;

    /*
     * Trainer must cover the entire viewport.
     * Content can grow beyond this height.
     */
    min-height: 100vh !important;
    min-height: 100svh !important;

    height: auto !important;

    max-height: none !important;

    /*
     * Opaque outer background completely covers
     * the Wave video and content below it.
     */
    background: #f0f5ff !important;

    opacity: 1 !important;

    visibility: visible !important;

    /*
     * Keep normal document scrolling.
     */
    transform: none !important;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    overflow: visible !important;

    pointer-events: auto !important;
}


/* ==========================================================
   5. TRAINER — FULL-SCREEN INNER SURFACE
========================================================== */

html body
#trainerExperienceStory.fitro-trainer-overlap-active
> .trainer-experience-section {

    position: relative;

    /*
     * Ensure the actual Trainer surface covers
     * at least the available viewport height.
     */
    min-height: 100vh;
    min-height: 100svh;

    width: 100%;

    box-sizing: border-box;

    /*
     * Keep the existing Trainer background gradient,
     * padding, columns and phone layout.
     *
     * Do not apply transforms or opacity animations.
     */
}


/* ==========================================================
   6. TRAINER — PRESERVE INTERACTIONS
========================================================== */

/*
 * Intentionally do not override:
 *
 * .trainer-phone-column
 * .trainer-phone-stage
 * #trainerPhoneCanvas
 * .trainer-orbit-cards
 * .trainer-orbit-card
 * .trainer-orbit-modal
 *
 * fitroTrainer.css and fitroTrainer.js remain
 * responsible for the phone and card animations.
 */


/* ==========================================================
   7. REMOVE LEGACY REVEAL SPACERS
========================================================== */

.fitro-trainer-reveal-spacer,
.fitro-trainer-v25-placeholder,
.fitro-trainer-v26-placeholder,
.fitro-trainer-flow-placeholder,
.fitro-trainer-v22-spacer {

    display: none !important;

    height: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* ==========================================================
   8. LARGE DESKTOP — 1440px AND ABOVE
========================================================== */

@media (min-width: 1440px) {

    /*
     * Existing Trainer styles determine the
     * column proportions and phone dimensions.
     *
     * JS measures the Wave hold automatically.
     */
}


/* ==========================================================
   9. TABLET — 721px TO 1024px
========================================================== */

@media (min-width: 721px) and (max-width: 1024px) {

    /*
     * Preserve the existing responsive layout.
     * Wave remains sticky if supported by
     * the original Wave stylesheet.
     */
}


/* ==========================================================
   10. MOBILE — 720px AND BELOW
========================================================== */

@media (max-width: 720px) {

    #trainerExperienceStory.trainer-experience-story {

        width: 100%;

        /*
         * Never fix or clip the Trainer.
         */
        position: relative !important;

        overflow: visible !important;

        pointer-events: auto !important;
    }

    /*
     * Mobile Trainer phone and all orbit cards
     * retain their original size and position.
     *
     * No CSS transforms are applied here.
     */
}


/* ==========================================================
   11. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    /*
     * Do not introduce extra smooth scrolling.
     * Native document scrolling remains available.
     */
    html {
        scroll-behavior: auto;
    }
}