/* ============================================================
   CVentriX Reference Scroll Experience
   Inspired by the supplied smooth-scroll reference video.
   Motion-only layer: preserves existing layout/theme/application logic.
   ============================================================ */

:root {
    --cvx-ref-accent: #ff6a00;
    --cvx-ref-progress: 0;
    --cvx-ref-ease: cubic-bezier(.16, 1, .3, 1);
}

html.cvx-ref-scroll-ready {
    scroll-behavior: auto;
    scrollbar-gutter: stable;
}

/* Re-use the Home page's existing progress rail when it exists. */
.cvx-scroll-progress.cvx-reference-progress,
.cvx-reference-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 10000;
    pointer-events: none;
    background: rgba(255, 106, 0, .07);
}

.cvx-scroll-progress.cvx-reference-progress > span,
.cvx-reference-progress > span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(var(--cvx-ref-progress));
    transform-origin: left center;
    background: linear-gradient(90deg, #ff4d00 0%, #ff6a00 52%, #ff9b45 100%);
    box-shadow: 0 0 16px rgba(255, 106, 0, .36);
    will-change: transform;
}

/*
   Individual translate/scale properties deliberately compose with the
   site's existing transform-based hover/3D effects instead of replacing them.
*/
.cvx-reference-scene {
    --cvx-ref-scene-y: 0px;
    --cvx-ref-scene-scale: 1;
    translate: 0 var(--cvx-ref-scene-y);
    scale: var(--cvx-ref-scene-scale);
    transform-origin: 50% 50%;
    will-change: translate, scale;
    backface-visibility: hidden;
}

/* A gentle first-entry reveal like the reference page, without hiding content. */
.cvx-reference-scene.cvx-ref-entering {
    animation: cvxReferenceSceneEnter .9s var(--cvx-ref-ease) both;
}

@keyframes cvxReferenceSceneEnter {
    from {
        opacity: .72;
        translate: 0 26px;
    }
    to {
        opacity: 1;
        translate: 0 var(--cvx-ref-scene-y);
    }
}

/* Hero/background layers receive a smaller independent parallax movement. */
.cvx-ref-parallax-layer {
    --cvx-ref-parallax-y: 0px;
    translate: 0 var(--cvx-ref-parallax-y);
    will-change: translate;
}

/* Prevent fixed controls from being accidentally affected by scene motion. */
.navbar,
.floating-controls,
.back-to-left,
.chat-sidebar,
.mobile-sidebar,
.overlay {
    scale: 1;
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
    html.cvx-ref-scroll-ready {
        scroll-behavior: smooth;
    }

    .cvx-reference-scene {
        --cvx-ref-scene-y: 0px !important;
        --cvx-ref-scene-scale: 1 !important;
        translate: 0 0 !important;
        scale: 1 !important;
        will-change: auto;
    }

    .cvx-ref-parallax-layer {
        --cvx-ref-parallax-y: 0px !important;
        translate: 0 0 !important;
        will-change: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.cvx-ref-scroll-ready {
        scroll-behavior: auto;
    }

    .cvx-reference-scene,
    .cvx-ref-parallax-layer {
        animation: none !important;
        transition: none !important;
        translate: 0 0 !important;
        scale: 1 !important;
        opacity: 1 !important;
        will-change: auto !important;
    }

    .cvx-scroll-progress.cvx-reference-progress > span,
    .cvx-reference-progress > span {
        transition: none !important;
    }
}