/*
  Character-slide.css — FLUID SCOPED VERSION
  ══════════════════════════════════════════════════════════════════
  All selectors namespaced under .cs-root.
  Rigid pixel math has been replaced with CSS Variables and clamp()
  to ensure the 3D thumbnails and text scale infinitely.
  ══════════════════════════════════════════════════════════════════
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ── RESET (scoped) ───────────────────────────────────────────── */
.cs-root *, .cs-root *::before, .cs-root *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* ── ROOT WRAPPER ─────────────────────────────────────────────── */
.cs-root {
    position: sticky;
    top: 0;
    width: 100%;
    
    /* FLUID: dvh prevents mobile browser bars from clipping the bottom */
    height: 100dvh; 
    
    background-color: #0f0f0f;
    display: flex;
    justify-content: center;
    align-items: center;

    --cs-green: #14ff72cb;
    --cs-dark:  #2c2c2ccb;

    /* FLUID VARIABLES: Math that automatically adjusts to screen width! */
    --cs-thumb-width: clamp(120px, 12vw, 180px);
    --cs-thumb-gap: clamp(140px, 14vw, 200px); /* Thumbnail width + 20px gap */
    --cs-thumb-start: clamp(55%, 60vw, 67%); /* Starting left position */

    --cs-list-fade-duration: 0.6s;
    --cs-list-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
    .cs-root {
        --cs-list-fade-duration: 0.14s;
        --cs-list-fade-ease: ease-out;
    }
}

/* ── CAROUSEL ─────────────────────────────────────────────────── */
.cs-root .carousel {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.cs-root .carousel .list {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 1;
    transition: opacity var(--cs-list-fade-duration) var(--cs-list-fade-ease);
}

.cs-root .carousel.cs-is-fading .list {
    opacity: 0;
    pointer-events: none;
}

/* FLUID: Thumbnail sizing */
.cs-root .carousel .list .item {
    width: var(--cs-thumb-width);
    height: clamp(180px, 18vw, 250px);
    position: absolute;
    top: clamp(70%, 80vh, 80%);
    transform: translateY(-70%);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    background-position: 50% 50%;
    background-size: cover;
    z-index: 100;
}

.cs-root .carousel .list .item:nth-child(n+3) {
    transition: left var(--cs-list-fade-duration) var(--cs-list-fade-ease);
}

/* Active Main Background Slide */
.cs-root .carousel .list .item:nth-child(1),
.cs-root .carousel .list .item:nth-child(2) {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
}

/* FLUID MATH: Replaced rigid +200px gaps with dynamic multiplier math! */
.cs-root .carousel .list .item:nth-child(3) { left: var(--cs-thumb-start); }
.cs-root .carousel .list .item:nth-child(4) { left: calc(var(--cs-thumb-start) + var(--cs-thumb-gap)); }
.cs-root .carousel .list .item:nth-child(5) { left: calc(var(--cs-thumb-start) + var(--cs-thumb-gap) * 2); }
.cs-root .carousel .list .item:nth-child(6) { left: calc(var(--cs-thumb-start) + var(--cs-thumb-gap) * 3); }
.cs-root .carousel .list .item:nth-child(n+7) { 
    left: calc(var(--cs-thumb-start) + var(--cs-thumb-gap) * 4); 
    opacity: 0; 
}

/* ── SLIDE CONTENT ────────────────────────────────────────────── */
.cs-root .list .item .content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* FLUID: Text box scales with screen */
    width: clamp(300px, 35vw, 500px);
    left: clamp(30px, 6vw, 100px);
    text-align: left;
    color: #fff;
    display: none;
}

.cs-root .list .item:nth-child(2) .content {
    display: block;
}

.cs-root .content .title {
    position: relative;
    color: #ffffff;
    text-shadow: 0 0 20px #000000;
    top: clamp(-30px, -5vh, -50px);
    /* FLUID FONTS */
    font-size: clamp(35px, 6vw, 80px);
    font-weight: 900;
    letter-spacing: 2px;
    margin: 0;
    z-index: 3;
    opacity: 0;
    animation: cs-animate 1s ease-in-out 0.3s 1 forwards;
}

.cs-root .content .name {
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.67);
    /* FLUID FONTS */
    font-size: clamp(60px, 10vw, 150px);
    font-weight: 900;
    letter-spacing: 4px;
    margin: 0;
    z-index: 2;
    white-space: nowrap;
    opacity: 0;
    animation: cs-animate 1s ease-in-out 0.6s 1 forwards;
}

.cs-root .content .des {
    margin-top: clamp(20px, 5vh, 50px);
    margin-bottom: clamp(10px, 2vh, 20px);
    /* FLUID FONTS */
    font-size: clamp(14px, 1.2vw, 18px);
    margin-left: 5px;
    text-shadow: 0 0 10px #000000;
    line-height: 1.6;
    opacity: 0;
    animation: cs-animate 1s ease-in-out 0.9s 1 forwards;
}

.cs-root .content .btn {
    margin-left: 5px;
    opacity: 0;
    animation: cs-animate 1s ease-in-out 1.2s 1 forwards;
}

@keyframes cs-animate {
    from { opacity: 0; transform: translate(0, 100px); filter: blur(33px); }
    to   { opacity: 1; transform: translate(0); filter: blur(0); }
}

/* ── ARROWS ───────────────────────────────────────────────────── */
.cs-root .arrows {
    position: absolute;
    /* FLUID: Arrows placed cleanly relative to the text content */
    top: clamp(70%, 80vh, 80%);
    left: clamp(30px, 6vw, 100px);
    z-index: 100;
    display: flex;
    gap: 10px;
    align-items: center;
}

.cs-root .arrows button {
    width: clamp(40px, 4vw, 50px);
    height: clamp(40px, 4vw, 50px);
    border-radius: 50%;
    background-color: var(--cs-dark);
    color: #fff;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: monospace;
    font-weight: bold;
    transition: .5s;
    cursor: pointer;
}

.cs-root .arrows button:hover {
    background: #fff;
    color: #000;
}

/* ── TIME RUNNING ─────────────────────────────────────────────── */
.cs-root .carousel .timeRunning {
    position: absolute;
    z-index: 1000;
    width: 0%;
    height: 4px;
    background-color: var(--cs-green);
    left: 0;
    top: 0;
    animation: cs-runningTime 7s linear 1 forwards;
}

@keyframes cs-runningTime {
    from { width: 0%; }
    to   { width: 100%; }
}

/* ═══════════════════════════════════════════════
   THEMATIC TECH BUTTONS
═══════════════════════════════════════════════ */
#character-slide .btn button {
    background: rgba(10, 12, 18, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: clamp(8px, 1vw, 10px) clamp(16px, 2vw, 28px) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: clamp(11px, 1vw, 13px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(4px) !important;
}

#character-slide .btn button:nth-child(1) {
    border-color: #00e5c0 !important;
    color: #00e5c0 !important;
    background: rgba(0, 229, 192, 0.08) !important;
    margin-right: 15px !important;
}

#character-slide .btn button:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: #ffffff !important; color: #ffffff !important; }
#character-slide .btn button:nth-child(1):hover { background: rgba(0, 229, 192, 0.2) !important; box-shadow: 0 0 12px rgba(0, 229, 192, 0.4) !important; color: #ffffff !important; }

/* ═══════════════════════════════════════════════
   MOBILE OPTIMIZATION — THE ULTIMATE STACK
═══════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
    #character-slide { height: 100dvh !important; }

    #character-slide .item:nth-child(1) {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100dvh !important; 
        border-radius: 0 !important; z-index: 1 !important;
        background-size: cover !important; background-color: #06080d !important;
        background-position: 35% 25% !important;
    }

    #character-slide .item:nth-child(1)::after {
        content: '' !important; position: absolute !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        height: 60% !important; 
        background: linear-gradient(to bottom, rgba(6,8,13,0) 0%, rgba(6,8,13,0.85) 60%, #06080d 100%) !important;
        pointer-events: none !important; z-index: 2 !important;
    }

    #character-slide .item:nth-child(1) .content {
        position: absolute !important;
        top: auto !important;
        /* FLUID: Safely floats above mobile thumbnails */
        bottom: clamp(150px, 22dvh, 180px) !important; 
        left: 50% !important; width: 90% !important;
        transform: translateX(-50%) !important; 
        padding: 0 !important; text-align: center !important;
        z-index: 100 !important; display: block !important;
    }

    #character-slide .title { display: none !important; }

    #character-slide .name {
        font-size: clamp(32px, 10vw, 46px) !important; 
        white-space: normal !important; word-wrap: break-word !important;
        text-shadow: 0 4px 15px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.6) !important;
        margin-bottom: 12px !important; line-height: 1.1 !important; color: #ffffff !important;
    }

    #character-slide .des {
        font-size: 14px !important; line-height: 1.5 !important;
        text-shadow: 0 2px 10px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,0.8) !important;
        color: #f0f0f0 !important; display: -webkit-box !important;
        -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important;
        overflow: hidden !important; margin: 0 auto 16px !important;
    }

    #character-slide .btn { display: flex !important; justify-content: center !important; gap: 12px !important; }

    /* Thumbnails perfectly sized and spaced for phones */
    #character-slide .item:nth-child(2),
    #character-slide .item:nth-child(3) {
        position: absolute !important;
        width: clamp(75px, 20vw, 95px) !important;
        height: clamp(100px, 28vw, 130px) !important;
        top: auto !important; 
        bottom: clamp(20px, 4dvh, 30px) !important;
        transform: none !important; margin: 0 !important;
        border-radius: 8px !important; z-index: 10 !important;
    }
    
    #character-slide .item:nth-child(2) { left: 5% !important; }
    /* Uses exact percentage calc to sit right next to the first thumb */
    #character-slide .item:nth-child(3) { left: calc(5% + clamp(75px, 20vw, 95px) + 10px) !important; }
    
    #character-slide .item:nth-child(n+2) .content { display: none !important; }
    #character-slide .item:nth-child(n+4) { display: none !important; }

    #character-slide .arrows {
        position: absolute !important; top: auto !important;
        bottom: clamp(20px, 4dvh, 30px) !important;
        left: auto !important; right: 5% !important;
        width: auto !important; gap: 10px !important;
        transform: none !important; z-index: 100 !important;
    }
}

/* ═══════════════════════════════════════════════
   MOBILE TEXT SEPARATION OVERRIDE
═══════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
    /* Force the name and description to naturally stack instead of colliding */
    #character-slide .name,
    #character-slide .des,
    #character-slide .description {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin: 12px auto !important; /* Creates a clean, automatic buffer space */
    }
}