/* ==========================================================================
   Legkopay Target Audience "Care" Section Stylesheet
   ========================================================================== */

.care-section {
    width: 100%;
    position: relative;
    z-index: 2; /* Fix overlap with parallax footer */
    background-color: var(--color-dark);
    /* Large scrolling depth track for comfortable slide pinning */
    min-height: 450vh;
}

/* ==========================================================================
   Desktop Pinning & Hardware-Accelerated Animation Engine (>= 992px)
   ========================================================================== */
@media (min-width: 992px) {
    .care-sticky-wrapper {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        background-color: var(--color-dark);
        z-index: 5;
    }

    /* Absolute layers sitting on top of each other */
    .care-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        background-color: var(--color-dark);
        transition: opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1),
                    transform 0.85s cubic-bezier(0.25, 1, 0.5, 1),
                    filter 0.85s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: opacity, transform, filter;
        z-index: 10;
    }

    /* Fullscreen ambient backdrop images */
    .slide-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* Clean dark overlays to guarantee contrast */
        filter: brightness(0.28) contrast(1.05) saturate(0.9);
        transform: scale(1.06);
        transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1;
        will-change: transform;
    }

    /* Sub-gradient overlay for rich visual depth */
    .slide-backdrop::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
        z-index: 2;
    }

    /* Typography container wrappers */
    .slide-text-wrap {
        position: relative;
        z-index: 10;
        max-width: 850px;
        transform: translateY(35px);
        opacity: 0;
        transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1),
                    opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: transform, opacity;
    }

    /* Elegant Brand Watermark (Bottom Right) */
    .slide-watermark {
        position: absolute;
        bottom: 3.5rem;
        right: 4.5rem;
        z-index: 10;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        pointer-events: none;
    }

    .watermark-img {
        height: 48px;
        width: auto;
        opacity: 0.16;
        filter: brightness(10) contrast(1);
    }

    /* --------------------------------------------------------------------------
       Interactive States driven by Scroll JS
       -------------------------------------------------------------------------- */

    /* Active State: fully centered and sharp */
    .care-slide.active {
        opacity: 1;
        pointer-events: all;
        transform: scale(1);
        filter: blur(0);
        z-index: 20;
    }

    .care-slide.active .slide-backdrop {
        transform: scale(1.0);
    }

    .care-slide.active .slide-text-wrap {
        transform: translateY(0);
        opacity: 1;
    }

    .care-slide.active .slide-watermark {
        opacity: 1;
        transform: translateY(0);
    }

    /* Enter State: scaled-up and blurred slightly */
    .care-slide.enter {
        opacity: 0;
        pointer-events: none;
        transform: scale(1.05);
        filter: blur(5px);
        z-index: 15;
    }

    .care-slide.enter .slide-text-wrap {
        transform: translateY(35px);
        opacity: 0;
    }

    /* Exit State: scaled-down and blurred slightly */
    .care-slide.exit {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.95);
        filter: blur(5px);
        z-index: 15;
    }

    .care-slide.exit .slide-text-wrap {
        transform: translateY(-35px);
        opacity: 0;
    }

    /* Hidden State */
    .care-slide.hidden {
        opacity: 0;
        pointer-events: none;
        z-index: 5;
    }

    /* --------------------------------------------------------------------------
       Typography Styling (Desktop)
       -------------------------------------------------------------------------- */
    
    .slide-heading {
        font-family: var(--font-heading);
        font-size: clamp(3rem, 6vw, 4.8rem);
        font-weight: 700;
        color: var(--color-white);
        letter-spacing: -0.03em;
        line-height: 1.15;
    }

    .slide-paragraph {
        font-family: var(--font-body);
        font-size: clamp(1.2rem, 2.2vw, 1.7rem);
        font-weight: 300;
        color: rgba(var(--color-white-rgb), 0.85);
        line-height: 1.5;
        margin-top: 1.8rem;
        letter-spacing: -0.01em;
    }

    /* --------------------------------------------------------------------------
       Slide 0: INTRO SCREEN (Desktop Details)
       -------------------------------------------------------------------------- */
    
    .intro-content-wrap {
        position: relative;
        z-index: 10;
    }

    .intro-logo {
        font-family: var(--font-heading);
        font-size: clamp(3.8rem, 8.5vw, 6.8rem);
        font-weight: 800;
        color: var(--color-white);
        letter-spacing: -0.03em;
        line-height: 1;
        opacity: 0;
        transition: opacity 0.6s ease-out;
    }

    .intro-title {
        font-family: var(--font-heading);
        font-size: clamp(2.2rem, 5vw, 3.8rem);
        font-weight: 300;
        color: rgba(var(--color-white-rgb), 0.95);
        letter-spacing: -0.02em;
        margin-top: 1.5rem;
        opacity: 0;
        transition: opacity 0.6s ease-out;
    }

    .intro-desc {
        font-family: var(--font-body);
        font-size: clamp(1.1rem, 2vw, 1.35rem);
        font-weight: 400;
        color: rgba(var(--color-white-rgb), 0.6);
        max-width: 680px;
        line-height: 1.6;
        margin-top: 2rem;
        opacity: 0;
        transition: opacity 0.6s ease-out;
    }

    /* Chevron Scroll Down Indicator */
    .scroll-indicator {
        position: absolute;
        bottom: 3.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }

    .chevron-icon {
        width: 32px;
        height: 32px;
        animation: pulseChevron 2.2s infinite ease-in-out;
    }
}

/* ==========================================================================
   2K & 4K Ultra Widescreen Typography Tuning
   ========================================================================== */
@media (min-width: 1920px) {
    .watermark-img {
        height: 56px;
    }
}

/* Keyframes for soft pulsing action chevron */
@keyframes pulseChevron {
    0% {
        transform: translateY(0);
        opacity: 0.4;
    }
    50% {
        transform: translateY(12px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
}

/* ==========================================================================
   Mobile & Tablet Adaptive Layout (Viewport < 992px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .care-section {
        min-height: auto !important;
        background-color: #050814 !important; /* Unified deep dark space background */
        padding: 4.5rem 0 3.5rem;
    }

    .care-sticky-wrapper {
        position: relative !important;
        top: auto !important;
        height: 520px !important;
        overflow: hidden !important;
        display: block !important;
        background-color: #050814 !important; /* Unified deep dark space background */
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 28px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        width: calc(100% - 24px);
        margin: 0 auto;
    }

    /* Absolute sliding layers */
    .care-slide {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #050814 !important; /* Unified deep dark space background */
        border: none !important;
        padding: 3.5rem 1.5rem !important;
        margin-bottom: 0 !important;
        border-radius: 28px;
        overflow: hidden;
        
        /* Hardware accelerated transitions */
        transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
                    opacity 0.65s ease, 
                    filter 0.65s ease !important;
        will-change: transform, opacity, filter;
    }

    /* Sliding animation states */
    .care-slide.active {
        opacity: 1 !important;
        pointer-events: all !important;
        transform: translateX(0) scale(1) !important;
        filter: blur(0) !important;
        z-index: 20 !important;
    }

    .care-slide.enter {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(100%) scale(0.96) !important;
        filter: blur(5px) !important;
        z-index: 15 !important;
    }

    .care-slide.exit {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(-100%) scale(0.96) !important;
        filter: blur(5px) !important;
        z-index: 15 !important;
    }

    .care-slide.hidden {
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: 5 !important;
    }

    /* Responsive static backdrop */
    .slide-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: brightness(0.22) contrast(1.05);
        z-index: 1;
    }

    /* Dark gradient layer for excellent legibility on small screens */
    .slide-backdrop::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.85) 100%);
        z-index: 2;
    }

    /* Slide Content Wrap */
    .slide-text-wrap {
        position: relative;
        z-index: 10;
        width: 100%;
        max-width: 100%;
        text-align: center !important;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        transform: none !important;
        opacity: 1 !important;
    }

    .slide-heading {
        font-family: var(--font-heading);
        font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
        font-weight: 700;
        color: var(--color-white);
        letter-spacing: -0.02em;
        line-height: 1.2;
        text-align: center;
    }

    .slide-paragraph {
        font-family: var(--font-body);
        font-size: 0.98rem !important;
        font-weight: 400;
        color: rgba(var(--color-white-rgb), 0.75);
        line-height: 1.6;
        margin-top: 1rem;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* Brand Watermark (Bottom Right) */
    .slide-watermark {
        position: absolute;
        bottom: 3.5rem;
        right: 1.5rem;
        z-index: 10;
        opacity: 0.16 !important;
        transform: none !important;
        pointer-events: none;
    }

    .watermark-img {
        height: 28px;
        width: auto;
        filter: brightness(10) contrast(1);
    }

    /* Capsule Mobile Nav Tabs */
    .care-mobile-nav {
        position: absolute;
        top: 1.25rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        display: flex;
        gap: 4px;
        padding: 4px;
        background: rgba(15, 15, 15, 0.75);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        width: calc(100% - 28px);
        max-width: 360px;
        justify-content: space-between;
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    }

    .care-mobile-nav.nav-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -15px);
    }

    .mobile-nav-btn {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.65);
        padding: 0.45rem 0.6rem;
        border-radius: 20px;
        font-size: 0.78rem;
        font-family: var(--font-body);
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        flex-grow: 1;
        text-align: center;
        white-space: nowrap;
        outline: none !important;
    }

    .mobile-nav-btn.active {
        background: var(--color-white);
        color: var(--color-dark);
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* Mobile Pagination Indicators */
    .care-mobile-pagination {
        position: absolute;
        bottom: 1.25rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .mobile-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }

    .mobile-dot.active {
        width: 20px;
        border-radius: 10px;
        background: var(--color-white);
    }

    /* Start Tour Button */
    .btn-start-tour {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
        color: var(--color-white);
        border: none;
        padding: 0.65rem 1.6rem;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.9rem;
        font-family: var(--font-body);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(22, 125, 240, 0.25);
        animation: pulseStartTour 2s infinite ease-in-out;
        margin-top: 1.25rem;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .btn-start-tour:active {
        transform: scale(0.97);
    }

    @keyframes pulseStartTour {
        0% { box-shadow: 0 8px 20px rgba(22, 125, 240, 0.25); transform: scale(1); }
        50% { box-shadow: 0 8px 30px rgba(22, 125, 240, 0.45); transform: scale(1.03); }
        100% { box-shadow: 0 8px 20px rgba(22, 125, 240, 0.25); transform: scale(1); }
    }

    /* Disable Chevron & Intro parts on mobile */
    .scroll-indicator {
        display: none !important;
    }

    /* Slide 0 Intro Sizing */
    .slide-intro {
        background-color: #080808 !important;
    }

    .intro-content-wrap {
        position: relative;
        z-index: 10;
        width: 100%;
        padding: 0 10px;
    }

    .intro-logo {
        font-family: var(--font-heading);
        font-size: clamp(2.4rem, 8vw, 3.8rem) !important;
        font-weight: 800;
        color: var(--color-white);
        letter-spacing: -0.02em;
        line-height: 1;
        opacity: 1 !important;
        text-align: center;
    }

    .intro-title {
        font-family: var(--font-heading);
        font-size: clamp(1.4rem, 5vw, 2.0rem) !important;
        font-weight: 300;
        color: rgba(var(--color-white-rgb), 0.9);
        letter-spacing: -0.02em;
        margin-top: 0.75rem;
        opacity: 1 !important;
        text-align: center;
    }

    .intro-desc {
        font-family: var(--font-body);
        font-size: 0.95rem !important;
        font-weight: 400;
        color: rgba(var(--color-white-rgb), 0.6);
        max-width: 320px;
        line-height: 1.55;
        margin-top: 1.25rem;
        opacity: 1 !important;
        text-align: center;
    }
}

/* ==========================================================================
   Premium Glowing White Icon (Bottom Right of Slide 3)
   ========================================================================== */
@media (min-width: 992px) {
    .slide-watermark-glow {
        position: absolute;
        bottom: 3.5rem;
        right: 4.5rem;
        z-index: 10;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .care-slide.active .slide-watermark-glow {
        opacity: 1;
        transform: translateY(0);
    }

    .glowing-image-white {
        height: 48px;
        width: auto;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.55));
        position: relative;
        z-index: 5;
    }

    .glow-backdrop-white {
        position: absolute;
        width: 70px;
        height: 70px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 70%);
        filter: blur(8px);
        z-index: 1;
    }
}

@media (max-width: 991.98px) {
    .slide-watermark-glow {
        position: absolute;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 10;
        opacity: 1 !important;
        transform: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .glowing-image-white {
        height: 38px;
        width: auto;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
        position: relative;
        z-index: 5;
    }

    .glow-backdrop-white {
        position: absolute;
        width: 50px;
        height: 50px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        filter: blur(6px);
        z-index: 1;
    }
}