/* ===================================
   CARROSSEL DE IPHONES V2 - SOLUÇÃO DEFINITIVA
   =================================== */

/* Grupo de iPhones */
.iphone-group {
    position: relative;
    width: 280px;
    height: 590px;
    flex-shrink: 0;
    margin: 0 2rem;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

/* iPhone individual - SEM transform-style preserve-3d */
.iphone {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 590px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

/* ORDEM NO HTML: iPhones de trás (8,7,6...2) depois iPhone 1 por último */
/* Z-INDEX: iPhone que vem DEPOIS no HTML fica em cima automaticamente */

/* iPhone 1 - último no HTML = sempre em cima */
.iphone[data-num="1"] {
    pointer-events: auto;
    /* SEM z-index - deixa ordem natural do HTML */
}

/* iPhones de trás - escondidos */
.iphone[data-num="2"],
.iphone[data-num="3"],
.iphone[data-num="4"],
.iphone[data-num="5"],
.iphone[data-num="6"],
.iphone[data-num="7"],
.iphone[data-num="8"] {
    opacity: 0;
    transform: translateX(0) scale(0.9);
}

/* HOVER - Expande iPhones em leque */
.iphone-group.active .iphone {
    pointer-events: auto;
}

/* iPhone 1 fica no lugar */
.iphone-group.active .iphone[data-num="1"] {
    transform: translateX(0) rotateY(0deg) scale(1);
}

/* Expandir para direita */
.iphone-group.active .iphone[data-num="2"] {
    opacity: 1;
    transform: translateX(100px) rotateY(-12deg) scale(1);
}

.iphone-group.active .iphone[data-num="4"] {
    opacity: 1;
    transform: translateX(200px) rotateY(-18deg) scale(1);
}

.iphone-group.active .iphone[data-num="6"] {
    opacity: 1;
    transform: translateX(300px) rotateY(-24deg) scale(1);
}

.iphone-group.active .iphone[data-num="8"] {
    opacity: 1;
    transform: translateX(400px) rotateY(-30deg) scale(1);
}

/* Expandir para esquerda */
.iphone-group.active .iphone[data-num="3"] {
    opacity: 1;
    transform: translateX(-100px) rotateY(12deg) scale(1);
}

.iphone-group.active .iphone[data-num="5"] {
    opacity: 1;
    transform: translateX(-200px) rotateY(18deg) scale(1);
}

.iphone-group.active .iphone[data-num="7"] {
    opacity: 1;
    transform: translateX(-300px) rotateY(24deg) scale(1);
}

/* EMPURRA grupos vizinhos */
.iphone-group.push-left {
    transform: translateX(-150px);
}

.iphone-group.push-right {
    transform: translateX(150px);
}

/* Frame do iPhone */
.iphone-frame {
    width: 280px;
    height: 590px;
    background: linear-gradient(145deg, rgba(42, 42, 52, 0.95), rgba(26, 26, 36, 0.95));
    border-radius: 48px;
    padding: 10px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.iphone-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 38px;
    overflow: hidden;
}

.iphone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}