/* ═══════════════════════════════════════════════════
   CM MOTION — Utility Animation Styles
   
   Everything visible in editor.
   Animations only activate when body has .cm-motion-ready
   (added by JS on DOMContentLoaded).
═══════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   LENIS SMOOTH SCROLL
───────────────────────────────────────────── */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}


/* ─────────────────────────────────────────────
   LINE MASK — For cm-line-reveal
───────────────────────────────────────────── */
.line-mask {
    display: block;
    overflow: hidden;
    position: relative;
    padding-bottom: 0.1em;
}

.line-mask .line-inner {
    display: block;
    will-change: transform;
}

/* Hide text before split (only on frontend) */
body.cm-motion-ready .cm-line-reveal .elementor-heading-title {
    opacity: 0;
}


/* ─────────────────────────────────────────────
   SCROLL GALLERY (Hillbrook-style)
   
   cm-scroll-gallery  → parent row container
   cm-sticky-text     → left column (sticky)
   cm-text-item       → each text widget
   cm-images-column   → right column (scrolls)
   cm-image-trigger   → each image widget
───────────────────────────────────────────── */
.cm-scroll-gallery {
    align-items: flex-start !important;
}

.cm-sticky-text {
    position: sticky !important;
    top: 50vh;
    transform: translateY(-50%);
    align-self: flex-start;
}

/* Stack all text items in the same space */
.cm-sticky-text.e-con {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: start;
}

.cm-text-item {
    grid-row: 1;
    grid-column: 1;
    will-change: opacity;
}

/* Images column — no gaps */
.cm-images-column {
    gap: 0 !important;
    padding: 0 !important;
}

.cm-images-column > .elementor-element {
    margin: 0 !important;
    margin-block-end: 0 !important;
    padding: 0 !important;
    --kit-widget-spacing: 0px !important;
}

.cm-image-trigger {
    overflow: hidden;
    margin: 0 !important;
    margin-block-end: 0 !important;
    padding: 0 !important;
}

.cm-image-trigger .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
    font-size: 0;
}

.cm-image-trigger img {
    width: 100%;
    height: auto;
    display: block;
    will-change: transform;
}


/* ─────────────────────────────────────────────
   POPUP MENU
───────────────────────────────────────────── */
.dialog-lightbox-close-button {
    display: none !important;
}

.elementor-popup-modal .dialog-widget-content {
    animation: popupSlideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.elementor-popup-modal .dialog-lightbox-overlay {
    transition: opacity 0.4s ease !important;
}

.cm-active-symbol {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 24px;
    vertical-align: middle;
}

.dialog-widget-content .elementor-nav-menu a,
.dialog-widget-content .elementor-icon-list-item a {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
}

.dialog-widget-content .elementor-nav-menu a:hover,
.dialog-widget-content .elementor-icon-list-item a:hover {
    transform: translateX(6px);
    opacity: 0.7;
}


/* ─────────────────────────────────────────────
   PERFORMANCE
───────────────────────────────────────────── */
.cm-wipe-left,
.cm-wipe-right,
.cm-wipe-bottom {
    overflow: hidden;
}

.cm-parallax img,
.cm-zoom-settle img {
    will-change: transform;
}

.cm-bg-parallax,
.cm-bg-zoom {
    will-change: background-size, background-position;
    background-attachment: scroll;
}

.cm-video-zoom {
    overflow: hidden;
}

.cm-video-zoom video {
    will-change: transform;
}


/* ─────────────────────────────────────────────
   MOBILE
───────────────────────────────────────────── */
@media (max-width: 767px) {
    .cm-sticky-text {
        position: relative !important;
        top: auto;
        transform: none;
    }

    .cm-sticky-text.e-con {
        display: flex !important;
    }

    .cm-text-item {
        grid-row: auto;
        grid-column: auto;
        opacity: 1 !important;
    }

    .cm-images-column {
        gap: 2vh !important;
    }
}