/**
 * Componente: Animações de Modal - Efeito "Genie" Autêntico do macOS
 * @version 9.0.0 - MÁXIMA FIDELIDADE AO EFEITO ORIGINAL
 *
 * MELHORIAS IMPLEMENTADAS:
 * - Animação com múltiplos keyframes para simular a deformação elástica
 * - Curvas de timing mais precisas baseadas no macOS original
 * - Efeito de "ondulação" durante a transição
 * - Melhor sincronização entre escala, posição e deformação
 */

/* ========================================================================
   1. ANIMAÇÃO DO OVERLAY - Sincronizada com o efeito Genie
   ======================================================================== */
.locamais-modal-overlay {
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(0px);
    transition: 
        opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        backdrop-filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        visibility 0s linear 0.6s;
}

.locamais-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(8px);
    transition-delay: 0s;
}

/* ========================================================================
   2. EFEITO GENIE - KEYFRAMES PARA DEFORMAÇÃO REALÍSTICA
   ======================================================================== */

/* Keyframes para abertura - Efeito FUNIL mais fluido */
@keyframes genie-open {
    0% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.015) 
            scaleY(0.0008)
            skewY(var(--stretch-skew-y, 0deg))
            rotateZ(var(--stretch-rotation, 0deg));
        transform-origin: center bottom;
        clip-path: polygon(45% 0%, 55% 0%, 100% 100%, 0% 100%);
        opacity: 0.08;
    }
    
    8% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.08) 
            scaleY(0.015)
            skewY(calc(var(--stretch-skew-y, 0deg) * 0.95))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 0.95));
        transform-origin: center bottom;
        clip-path: polygon(42% 0%, 58% 0%, 98% 100%, 2% 100%);
        opacity: 0.2;
    }
    
    18% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.25) 
            scaleY(0.06)
            skewY(calc(var(--stretch-skew-y, 0deg) * 0.8))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 0.8));
        transform-origin: center bottom;
        clip-path: polygon(38% 0%, 62% 0%, 95% 100%, 5% 100%);
        opacity: 0.4;
    }
    
    30% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.5) 
            scaleY(0.2)
            skewY(calc(var(--stretch-skew-y, 0deg) * 0.6))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 0.6));
        transform-origin: center bottom;
        clip-path: polygon(28% 0%, 72% 0%, 88% 100%, 12% 100%);
        opacity: 0.6;
    }
    
    45% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.8) 
            scaleY(0.5)
            skewY(calc(var(--stretch-skew-y, 0deg) * 0.35))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 0.35));
        transform-origin: center bottom;
        clip-path: polygon(15% 0%, 85% 0%, 82% 100%, 18% 100%);
        opacity: 0.8;
    }
    
    62% {
        transform: 
            translate(-50%, -50%)
            scaleX(1.05) 
            scaleY(0.85)
            skewY(calc(var(--stretch-skew-y, 0deg) * 0.12))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 0.12));
        transform-origin: center center;
        clip-path: polygon(5% 0%, 95% 0%, 96% 100%, 4% 100%);
        opacity: 0.95;
    }
    
    75% {
        transform: 
            translate(-50%, -50%)
            scaleX(1.08) 
            scaleY(1.02)
            skewY(calc(var(--stretch-skew-y, 0deg) * -0.02))
            rotateZ(calc(var(--stretch-rotation, 0deg) * -0.02));
        transform-origin: center center;
        clip-path: polygon(1% 0%, 99% 0%, 99% 100%, 1% 100%);
        opacity: 1;
    }
    
    85% {
        transform: 
            translate(-50%, -50%)
            scaleX(1.03) 
            scaleY(1.06)
            skewY(calc(var(--stretch-skew-y, 0deg) * -0.05))
            rotateZ(calc(var(--stretch-rotation, 0deg) * -0.05));
        transform-origin: center center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
    
    95% {
        transform: 
            translate(-50%, -50%)
            scaleX(1.008) 
            scaleY(1.015)
            skewY(0deg)
            rotateZ(0deg);
        transform-origin: center center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
    
    100% {
        transform: 
            translate(-50%, -50%)
            scale(1) 
            skewY(0deg)
            rotateZ(0deg);
        transform-origin: center center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
}

/* Keyframes para fechamento - Efeito de SUCÇÃO MAGNÉTICA */
@keyframes genie-close {
    0% {
        transform: 
            translate(-50%, -50%)
            scale(1) 
            skewY(0deg)
            rotateZ(0deg);
        transform-origin: center center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
    
    8% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.98) 
            scaleY(1.02) 
            skewY(calc(var(--stretch-skew-y, 0deg) * 0.1))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 0.1));
        transform-origin: center center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
    
    20% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.9) 
            scaleY(0.95) 
            skewY(calc(var(--stretch-skew-y, 0deg) * 0.3))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 0.3));
        transform-origin: center bottom;
        clip-path: polygon(2% 0%, 98% 0%, 96% 100%, 4% 100%);
        opacity: 0.95;
    }
    
    35% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.7) 
            scaleY(0.8) 
            skewY(calc(var(--stretch-skew-y, 0deg) * 0.6))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 0.6));
        transform-origin: center bottom;
        clip-path: polygon(8% 0%, 92% 0%, 88% 100%, 12% 100%);
        opacity: 0.85;
    }
    
    50% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.45) 
            scaleY(0.6) 
            skewY(calc(var(--stretch-skew-y, 0deg) * 1.0))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 1.0));
        transform-origin: center bottom;
        clip-path: polygon(18% 0%, 82% 0%, 75% 100%, 25% 100%);
        opacity: 0.7;
    }
    
    65% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.25) 
            scaleY(0.35) 
            skewY(calc(var(--stretch-skew-y, 0deg) * 1.4))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 1.4));
        transform-origin: center bottom;
        clip-path: polygon(32% 0%, 68% 0%, 62% 100%, 38% 100%);
        opacity: 0.5;
    }
    
    78% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.12) 
            scaleY(0.18) 
            skewY(calc(var(--stretch-skew-y, 0deg) * 1.8))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 1.8));
        transform-origin: center bottom;
        clip-path: polygon(42% 0%, 58% 0%, 54% 100%, 46% 100%);
        opacity: 0.3;
    }
    
    88% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.05) 
            scaleY(0.08) 
            skewY(calc(var(--stretch-skew-y, 0deg) * 2.2))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 2.2));
        transform-origin: center bottom;
        clip-path: polygon(47% 0%, 53% 0%, 51% 100%, 49% 100%);
        opacity: 0.15;
    }
    
    95% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.02) 
            scaleY(0.03) 
            skewY(calc(var(--stretch-skew-y, 0deg) * 2.8))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 2.8));
        transform-origin: center bottom;
        clip-path: polygon(49% 0%, 51% 0%, 50.5% 100%, 49.5% 100%);
        opacity: 0.05;
    }
    
    100% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.005) 
            scaleY(0.008) 
            skewY(calc(var(--stretch-skew-y, 0deg) * 3.5))
            rotateZ(calc(var(--stretch-rotation, 0deg) * 3.5));
        transform-origin: center bottom;
        clip-path: polygon(49.8% 0%, 50.2% 0%, 50.1% 100%, 49.9% 100%);
        opacity: 0;
    }
}

/* ========================================================================
   3. ESTADOS DO MODAL COM ANIMAÇÕES APRIMORADAS
   ======================================================================== */
.locamais-modal {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.9);
    transform-origin: center center;
    
    /* ✅ Otimização de performance */
    will-change: transform, opacity, top, left, width, height;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    
    /* ✅ Suavização de pixels para evitar "aliasing" */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ESTADO INICIAL - Preparação para animação em FUNIL */
.locamais-modal.is-opening {
    top: var(--start-top, 50%);
    left: var(--start-left, 50%);
    width: var(--start-width, 40px);
    height: var(--start-height, 32px);
    margin: 0;
    opacity: 0.1;
    visibility: visible;
    
    transform: 
        translate(-50%, -50%)
        scaleX(0.02) 
        scaleY(0.001) 
        skewY(var(--stretch-skew-y, 0deg))
        rotateZ(var(--stretch-rotation, 0deg));
    
    transform-origin: center bottom;
    /* ✅ Clip-path inicial para formar o funil */
    clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
}

/* ESTADO ATIVO - Animação de abertura mais suave */
.locamais-modal.is-active {
    opacity: 1;
    visibility: visible;
    
    /* ✅ ANIMAÇÃO MAIS LENTA E FLUIDA PARA DESKTOP */
    animation: genie-open 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    
    /* ✅ Transições complementares mais suaves */
    transition:
        top 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
        left 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
        width 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
        height 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ESTADO DE FECHAMENTO - Sucção mais lenta e dramática */
.locamais-modal.is-closing {
    /* ✅ ANIMAÇÃO DE SUCÇÃO MAIS LENTA E FLUIDA */
    animation: genie-close 0.8s cubic-bezier(0.6, 0.04, 0.98, 0.335) forwards;
    
    /* ✅ Transições mais suaves para desktop */
    transition:
        top 0.8s cubic-bezier(0.6, 0.04, 0.98, 0.335),
        left 0.8s cubic-bezier(0.6, 0.04, 0.98, 0.335),
        width 0.8s cubic-bezier(0.6, 0.04, 0.98, 0.335),
        height 0.8s cubic-bezier(0.6, 0.04, 0.98, 0.335);

    top: var(--start-top, 50%);
    left: var(--start-left, 50%);
    width: var(--start-width, 40px);
    height: var(--start-height, 32px);
    margin: 0;
}

/* ========================================================================
   4. ANIMAÇÃO ESCALONADA DO CONTEÚDO INTERNO - Sincronizada com timing mais longo
   ======================================================================== */
.locamais-modal .locamais-modal__content {
    transition: 
        opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, 
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    transform-origin: center top;
}

.locamais-modal.is-opening .locamais-modal__content,
.locamais-modal:not(.is-active) .locamais-modal__content {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    transition: none;
}

.locamais-modal.is-closing .locamais-modal__content {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    transition: 
        opacity 0.25s ease-in, 
        transform 0.25s ease-in;
}

/* ========================================================================
   5. EFEITOS VISUAIS ADICIONAIS PARA MÁXIMA FIDELIDADE
   ======================================================================== */

/* Sombra dinâmica que acompanha a animação */
.locamais-modal {
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: box-shadow 0.3s ease-out;
}

.locamais-modal.is-opening {
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.locamais-modal.is-active {
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ========================================================================
   6. OTIMIZAÇÕES E ACESSIBILIDADE
   ======================================================================== */

/* Performance melhorada especialmente para desktop - SEM CONFLITOS */
.locamais-modal,
.locamais-modal * {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* ✅ OTIMIZAÇÕES LEVES PARA DESKTOP (sem sobrescrever transforms) */
@media (min-width: 769px) {
    .locamais-modal {
        /* Apenas otimizações de performance, sem alterar layout */
        will-change: transform, opacity, top, left, width, height, clip-path;
    }
    
    .locamais-modal-overlay {
        /* Melhora performance do blur no desktop */
        will-change: backdrop-filter, opacity;
    }
}

/* Suporte a movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .locamais-modal, 
    .locamais-modal-overlay {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    .locamais-modal.is-active {
        animation: none !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }
    
    .locamais-modal.is-closing {
        animation: none !important;
    }
}

/* ✅ Media queries para otimizar por dispositivo - SEM SOBRESCREVER ANIMAÇÕES */
@media (max-width: 768px) {
    /* Mobile: apenas ajusta duração, mantém as animações originais */
    .locamais-modal.is-active {
        animation-duration: 0.7s !important;
    }
    
    .locamais-modal.is-closing {
        animation-duration: 0.6s !important;
    }
    
    .locamais-modal .locamais-modal__content {
        transition-duration: 0.4s, 0.5s !important;
        transition-delay: 0.3s, 0.25s !important;
    }
}

/* ✅ DESKTOP: Mantém animações originais, só ajusta timing */
@media (min-width: 769px) {
    .locamais-modal.is-active {
        /* Apenas muda duração, não a animação */
        animation-duration: 0.75s !important;
    }
    
    .locamais-modal.is-closing {
        animation-duration: 0.65s !important;
    }
    
    .locamais-modal .locamais-modal__content {
        transition-duration: 0.35s, 0.45s !important;
        transition-delay: 0.3s, 0.25s !important;
    }
}

/* ✅ TELAS GRANDES: Timing ainda mais refinado */
@media (min-width: 1440px) {
    .locamais-modal.is-active {
        animation-duration: 0.7s !important;
    }
    
    .locamais-modal.is-closing {
        animation-duration: 0.6s !important;
    }
}

/* ========================================================================
   7. CLASSES UTILITÁRIAS PARA CONFIGURAÇÃO DO EFEITO
   ======================================================================== */

/* Variações do efeito para diferentes origens - FUNIL */
.locamais-modal--genie-bottom {
    --stretch-skew-y: -5deg;
    --stretch-rotation: 2deg;
}

.locamais-modal--genie-top {
    --stretch-skew-y: 5deg;
    --stretch-rotation: -2deg;
}

/* ✅ Variação para funil invertido (abertura do topo) */
.locamais-modal--genie-top.is-opening,
.locamais-modal--genie-top .genie-open {
    transform-origin: center top !important;
}

.locamais-modal--genie-top.is-opening {
    clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 40% 100%) !important;
}

.locamais-modal--genie-left {
    --stretch-skew-y: 0deg;
    --stretch-rotation: -3deg;
}

.locamais-modal--genie-right {
    --stretch-skew-y: 0deg;
    --stretch-rotation: 3deg;
}

/* ✅ Keyframes específicos para abertura do topo - mais fluido */
@keyframes genie-open-top {
    0% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.015) 
            scaleY(0.0008)
            skewY(calc(var(--stretch-skew-y, 0deg) * -1))
            rotateZ(calc(var(--stretch-rotation, 0deg) * -1));
        transform-origin: center top;
        clip-path: polygon(0% 0%, 100% 0%, 55% 100%, 45% 100%);
        opacity: 0.08;
    }
    30% {
        transform: 
            translate(-50%, -50%)
            scaleX(0.5) 
            scaleY(0.2)
            skewY(calc(var(--stretch-skew-y, 0deg) * -0.6))
            rotateZ(calc(var(--stretch-rotation, 0deg) * -0.6));
        transform-origin: center top;
        clip-path: polygon(12% 0%, 88% 0%, 72% 100%, 28% 100%);
        opacity: 0.6;
    }
    62% {
        transform: 
            translate(-50%, -50%)
            scaleX(1.05) 
            scaleY(0.85)
            skewY(calc(var(--stretch-skew-y, 0deg) * -0.12))
            rotateZ(calc(var(--stretch-rotation, 0deg) * -0.12));
        transform-origin: center center;
        clip-path: polygon(4% 0%, 96% 0%, 95% 100%, 5% 100%);
        opacity: 0.95;
    }
    100% {
        transform: 
            translate(-50%, -50%)
            scale(1) 
            skewY(0deg)
            rotateZ(0deg);
        transform-origin: center center;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
}

.locamais-modal--genie-top.is-active {
    animation: genie-open-top 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards !important;
}