/* Show Cards Slider — ARN-style isometric tile animation */

.scs-wrapper{
    width:100%;
    font-family:'Segoe UI',system-ui,sans-serif;
    position:relative;
    overflow:hidden;
}

.scs-hero{
    position:relative;
    min-height:800px;
    padding:100px 5% 100px 7%;
    background:linear-gradient(135deg,var(--scs-gs,#2d0066) 0%,var(--scs-ge,#7b00ff) 100%);
    overflow:hidden;
}
.scs-hero::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 80% 50%,rgba(180,0,255,.25) 0%,transparent 65%);
    pointer-events:none;
}

.scs-hero-text{
    position:relative;z-index:3;
    max-width:420px;
}
.scs-heading{
    font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;
    color:#fff;line-height:1.15;margin:0 0 16px;
    letter-spacing:-0.5px;
}
.scs-heading em{color:#c084fc;font-style:normal}
.scs-subheading{
    color:rgba(255,255,255,.75);
    font-size:clamp(.9rem,1.4vw,1.05rem);
    line-height:1.6;margin:0;
}

/* === Stage container === */
.scs-stage{
    position:absolute !important;
    top:0;bottom:0;right:0;
    left:15%;
    pointer-events:none;
    z-index:2;
    overflow:visible !important;
}

/* === Isometric plane — replicates ARN exactly ===
   ARN's CSS (verbatim):
     transform: rotateX(54deg) rotateZ(-45deg);
     transform-origin: right top;
   With no perspective ancestor, these 3D transforms flatten into
   a 2D isometric projection — that's how the cascade works. */
.scs-track-wrap{
    position:absolute !important;
    left:0;
    top:1.6vw;
    width:85vw;
    display:flex;
    align-items:flex-start;
    -webkit-transform:rotateX(54deg) rotateZ(-45deg) !important;
    transform:rotateX(54deg) rotateZ(-45deg) !important;
    -webkit-transform-origin:right top !important;
    transform-origin:right top !important;
    transition:all 600ms ease;
    pointer-events:auto;
}
.scs-track{
    position:relative;
    width:100%;
}

/* Individual card items */
.scs-card{
    padding:0.66%;
    margin:0;
    box-sizing:border-box;
    transition:transform 600ms ease, opacity 600ms ease, left 600ms ease;
    transition-property:transform, opacity, left;
    width:25%;
    transform:translateX(0%);
    position:absolute;
    left:0;
    top:0;
    text-decoration:none;
    display:block;
    cursor:pointer;
}

.scs-card figure{
    position:relative;
    margin:0;
}
.scs-card figure img{
    display:block;
    width:100%;
    height:auto;
    border-radius:10px;
}
/* Purple glow behind each card */
.scs-card figure::after{
    content:'';
    display:block;
    position:absolute;
    width:calc(100% - 10px);
    height:calc(100% - 10px);
    box-shadow:-1px 7px 10px 7px #712ade;
    left:0;top:0;
    border-radius:10px;
    transform:translateY(10px);
    z-index:-1;
    transition:all 300ms ease;
}

/* Per-card hover — brighten the pink glow when visitor hovers a specific card */
.scs-card:hover{z-index:20;}
.scs-card:hover figure::after{
    box-shadow:-2px 5px 15px 14px #ca2c7d;
}

/* Position 5 visible cards across the row — matches ARN's :nth-child rules */
.scs-card[data-pos="0"]{left:0%;   z-index:5;}
.scs-card[data-pos="1"]{left:25%;  z-index:4;}
.scs-card[data-pos="2"]{left:50%;  z-index:3;}
.scs-card[data-pos="3"]{left:75%;  z-index:2;}
.scs-card[data-pos="4"]{left:100%; z-index:1;}

/* Off-screen to the left (outgoing) */
.scs-card.scs-before{
    position:absolute;
    width:25%;
    left:-25%;
    top:0;
    opacity:0;
}
/* Off-screen to the right (queued) */
.scs-card.scs-after{
    position:absolute;
    width:25%;
    left:100%;
    top:0;
    opacity:0;
}
.scs-card.scs-after.scs-after-2{
    left:125%;
}

/* Active (middle) card — pops forward with brighter pink glow */
.scs-card.scs-active{
    transform:translateY(-13%) translateX(19%) scale(1.14);
    z-index:10;
}
.scs-card.scs-active figure::after{
    box-shadow:-2px 5px 10px 11px #ca2c7d;
}

@media (max-width: 1100px){
    .scs-track-wrap{top:16vw}
}
@media (max-width: 992px){
    .scs-hero{
        min-height:auto;
        padding:40px 5% 40px;
        display:flex;
        flex-direction:column;
    }
    .scs-hero-text{
        max-width:100%;
        text-align:center;
        margin-bottom:30px;
    }
    .scs-stage{
        position:relative !important;
        top:auto;bottom:auto;left:auto;right:auto;
        width:100vw;
        margin:0 -5%;
        height:420px;
        overflow:hidden !important;
        pointer-events:auto !important;
    }
    /* On mobile, drop the isometric rotation — it doesn't fit.
       Show cards as a simple horizontal slideshow centred on the active one. */
    .scs-track-wrap{
        -webkit-transform:none !important;
        transform:none !important;
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        width:auto !important;
        height:auto !important;
        margin-left:-100px; /* centre the active card */
        margin-top:-180px;
        transform-origin:center center !important;
    }
    .scs-track{width:auto;height:auto}
    .scs-card{
        position:absolute;
        width:200px;
        padding:0;
        top:0;
        transition:transform 500ms ease, opacity 500ms ease, left 500ms ease;
    }
    .scs-card figure img{border-radius:10px}
    /* Stack mobile positions horizontally from the centre */
    .scs-card[data-pos="0"]{left:-440px;opacity:.4}
    .scs-card[data-pos="1"]{left:-220px;opacity:.7}
    .scs-card[data-pos="2"]{left:0;     opacity:1;z-index:5}
    .scs-card[data-pos="3"]{left:220px; opacity:.7}
    .scs-card[data-pos="4"]{left:440px; opacity:.4}
    .scs-card.scs-before{left:-660px;opacity:0}
    .scs-card.scs-after{left:660px;opacity:0}
    .scs-card.scs-after.scs-after-2{left:880px;opacity:0}
    .scs-card.scs-active{transform:scale(1.1);z-index:10}
    .scs-card.scs-active figure::after{box-shadow:-2px 5px 10px 11px #ca2c7d}
    .scs-card figure::after{box-shadow:-1px 7px 10px 7px #712ade}
}
@media (max-width: 600px){
    .scs-stage{height:380px}
    .scs-card{width:160px}
    .scs-track-wrap{
        margin-left:-80px;
        margin-top:-140px;
    }
    .scs-card[data-pos="0"]{left:-360px}
    .scs-card[data-pos="1"]{left:-180px}
    .scs-card[data-pos="2"]{left:0}
    .scs-card[data-pos="3"]{left:180px}
    .scs-card[data-pos="4"]{left:360px}
    .scs-card.scs-before{left:-540px}
    .scs-card.scs-after{left:540px}
    .scs-card.scs-after.scs-after-2{left:720px}
}