/* ==========================================================
   carousel1.css  –  Carrossel 3D da Seção 1 (antes/depois)
   Depende de: common.css
   ========================================================== */

/* ----- Wrapper do carrossel ----- */

.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    /* impede vazamento horizontal em mobile */
    overflow: hidden;
    width: 100%;
}

/* ----- Track (palco 3D) ----- */

.carousel-track {
    position: relative;
    width: min(900px, 100%);
    height: 539px;

    display: flex;
    align-items: center;
    justify-content: center;

    -webkit-perspective: 1200px;
    perspective: 1200px;
}

/* ----- Slides individuais ----- */

.carousel-slide {
    position: absolute;

    opacity: 0.35;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    will-change: transform, opacity;
    touch-action: pan-y;

    /* Transição definida via JS — aqui só o fallback */
    -webkit-transition:
        -webkit-transform var(--transicao-padrao),
        opacity           var(--transicao-padrao);
    transition:
        transform var(--transicao-padrao),
        opacity   var(--transicao-padrao);
}

.carousel-slide img {
    width: 360px;
    border-radius: var(--raio);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);

    /* suaviza o carregamento */
    -webkit-transition: filter .4s ease;
    transition: filter .4s ease;
}

/* placeholder enquanto o src não carregou */
.carousel-slide img[src=""],
.carousel-slide img:not([src]) {
    filter: blur(4px);
    background: rgba(255, 255, 255, .15);
    min-height: 200px;
}

/* Slide central em destaque */
.carousel-slide[data-pos="center"] {
    cursor: default;
}

/* Slides laterais clicáveis */
.carousel-slide[data-pos="left"],
.carousel-slide[data-pos="right"] {
    cursor: pointer;
}

/* ----- Responsivo ----- */

@media (max-width: 768px) {
    .carousel-track {
        height: 390px;
    }

    .carousel-slide img {
        width: 260px;
    }
}

@media (max-width: 480px) {
    .carousel-track {
        height: 300px;
    }

    .carousel-slide img {
        width: 200px;
    }
}