/**
 * CGN Advanced Smooth Scroll Layout & Premium Toggle UI Adjustments
 * Scaled down to match reference: Screenshot 2026-06-29 at 2.32.35 PM.png
 */

html.lenis, html.lenis body {
    height: auto;
}

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

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

.lenis-stopped {
    overflow: hidden;
}

.lenis-scrolling iframe {
    pointer-events: none;
}

/* Luxury Motion Switch Component Container */
.cgn-motion-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 10px;
    background-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    user-select: none;
}

/* Base Label Styling */
.cgn-motion-toggle-label {
    font-size: 16px;
    color: #8c7b6c;
    font-weight: 300;
    letter-spacing: 0.3px;
    transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Dynamic Text Color Shift when Switch is Active */
.cgn-motion-toggle-container:has(#cgn-motion-switch.is-active) .cgn-motion-toggle-label {
    color: #C42D38;
}

#cgn-motion-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #e2deda;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

/* Active State Background */
#cgn-motion-switch.is-active {
    background-color: #C42D38; 
}

.cgn-motion-switch-handle {
    position: absolute;
    left: 3px;
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Smooth toggle slider translation shift */
#cgn-motion-switch.is-active .cgn-motion-switch-handle {
    transform: translateX(20px);
}

#cgn-motion-switch:focus-visible {
    box-shadow: 0 0 0 2px rgba(196, 45, 56, 0.3);
}