/*
 * ══════════════════════════════════════════════
 *  MOBILE.CSS — Estilos do Painel Mobile
 * ══════════════════════════════════════════════
 *
 *  Propósito : Estilos específicos do dispositivo celular mockup.
 */

/* Estilos específicos da imagem do mockup para evitar borrões de renderização e adicionar profundidade */
.services-panel img {
    image-rendering: -webkit-optimize-contrast; /* Safari/Chrome crisp rendering */
    image-rendering: crisp-edges;               /* Firefox crisp rendering */
    backface-visibility: hidden;                /* Previne borrões/flickering de GPU */
    transform: translateZ(0);                   /* Força renderização de alta fidelidade */
    
    /* Filtro de sombra de silhueta (drop-shadow) para sensação realista de profundidade */
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.75)) 
            drop-shadow(0 5px 15px rgba(0, 0, 0, 0.35));
}

/* Transição personalizada deslizante da direita para a esquerda exclusiva para o mockup mobile */
#panel-mobile-placeholder {
    transform: translateZ(-120px) rotateY(8deg) scale(0.92) translateX(100px) !important;
    transition: all 0.9s var(--ease-smooth) !important;
}

/* Estado ativo: zera o deslocamento horizontal e entra no centro */
#panel-mobile-placeholder.active {
    transform: none !important;
    opacity: 1 !important;
}

/* Estado anterior (behind): desliza para a esquerda ao sair */
#panel-mobile-placeholder.behind {
    transform: translateZ(-200px) rotateY(-4deg) scale(0.85) translateX(-100px) !important;
    opacity: 0 !important;
}