/* About team slider state and generated slide layers. */
.team-slider-active-card {
    position: relative;
    width: 25vw;
    height: 75vh;
    flex-shrink: 0;
    perspective: 1200px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.team-slider-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1.5vw;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
}

.team-slider-active-card.is-flipped .team-slider-flip-inner {
    transform: rotateY(-180deg);
}

.team-slider-active-card.is-flipped .team-slider-card-front {
    pointer-events: none;
}

.team-slider-active-card.is-flipped .team-slider-card-back {
    pointer-events: auto;
}

.team-slider-card-front {
    background: #eef3fc;
    pointer-events: auto;
}

.team-slider-card-back {
    display: flex;
    flex-direction: column;
    padding: 3vw 3vw 2.6vw;
    background: #2f5fa0;
    color: #fff;
    pointer-events: none;
    transform: rotateY(-180deg);
}

.team-slider-card-back h3 {
    line-height: 1.05;
    text-transform: uppercase;
}

.team-slider-active-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    /* Isolates this layer into its own compositing context so the parent's
       preserve-3d/perspective (used for the card flip) can't break the
       overflow-hidden clipping and cause the slide to flash outside the
       card bounds mid-transition. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.team-slider-active-slide-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.team-slider-active-slide {
    position: absolute;
    inset: 0;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.team-slider-active-slide img,
.team-slider-active-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.team-slider-active-image-element {
    transition: transform 0.6s ease;
    transform: scale(1);
}

.team-slider-active-image:hover .team-slider-active-image-element {
    transform: scale(1.05);
}

.team-slider-rail-wrap {
    position: relative;
    flex: 1;
    overflow: hidden;
    padding-bottom: 0;
    min-width: 0;
}

/* Positioned out of flow (absolute) so it takes up no layout space and
   never affects the visible rail's spacing. Mirrors the visible rail's
   thumbnail sizing/alignment so its thumbnails have real, accurate
   geometry to fly from, but sits to the left of the stage and stays
   permanently invisible (visibility: hidden also makes it unfocusable
   and unclickable, so no extra work is needed for that) - it exists
   purely so "previous" has a real thumbnail to scale up from. */
.team-slider-rail-wrap-left {
    position: absolute;
    right: 100%;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 1.6vw;
    visibility: hidden;
    pointer-events: none;
}

.team-slider-rail {
    display: flex;
    align-items: flex-end;
    gap: 1.6vw;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.team-slider-thumb {
    position: relative;
    width: 10.4vw;
    height: 21.2vw;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #2f5fa0;
    border-radius: 1.2vw;
    background: #eef3fc;
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.team-slider-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.team-slider-nav {
    /* Size/shape now come from the shared .slider-nav-btn class so this
       matches every other slider's prev/next buttons. */
    background: transparent;
    line-height: 1;
    transition:
        opacity 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.team-slider-nav[disabled] {
    opacity: 1;
}

.team-slider-nav[disabled] .team-slider-nav-icon {
    opacity: 0.28;
}

.team-slider-layout {
    display: grid;
    grid-template-columns: 28% 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 3vw;
    grid-template-areas:
        'copy main'
        'nav main';
}

.team-slider-copy {
    grid-area: copy;
}

.team-slider-main {
    grid-area: main;
    min-width: 0;
}

.team-slider-card-navigation {
    grid-area: nav;
    align-self: end;
    justify-content: center;
}

.team-slider-stage {
    position: relative;
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
}

/* The flying clone that scales/moves a thumbnail up into the main card
   slot (or shrinks the outgoing main image back down). Positioned
   absolutely within `.team-slider-stage` rather than `fixed` against the
   viewport, since Lenis's transformed smooth-scroll wrapper would
   otherwise throw off viewport-relative positioning. */
.team-flyer {
    position: absolute;
    overflow: hidden;
    z-index: 40;
    pointer-events: none;
    will-change: left, top, width, height;
    /* Own compositor layer so the border/rounded corners stay crisp
       instead of re-aliasing every frame as the box resizes. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.team-flyer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.team-slider-rail-clone {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

@media (max-width: 1025px) {
    .team-slider-layout {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .team-slider-stage {
        min-height: auto;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .team-slider-active-card {
        width: 100%;
        max-width: 525px;
        height: 680px;
        border-radius: 20px;
    }

    .team-slider-flip-inner {
        border-radius: 20px;
    }

    .team-slider-card-back {
        padding: 44px 34px 34px;
    }

    .team-slider-rail-wrap {
        display: none;
    }

    .team-slider-card-navigation {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 541px) {
    .team-slider-active-card {
        height: 620px;
    }

    .team-slider-card-back {
        padding: 34px 26px 28px;
    }
}