/**
 * ========================================
 * PERFORMANCE-V2.CSS
 * ========================================
 * 
 * V2 - Versão otimizada com foco em fluidez e leveza
 * 
 * Melhorias V2:
 * - Transições mais rápidas (0.3s padrão)
 * - Will-change mais seletivo
 * - Containment otimizado
 * - Animações mais suaves
 * 
 * IMPORTANTE: Este arquivo NÃO altera o visual,
 * apenas otimiza a renderização e performance.
 * ========================================
 */

/* ========================================
   V2 - 1. ISOLAMENTO DE SEÇÕES (CSS Containment)
   ========================================
   Mantido, mas com will-change otimizado
*/

.plans {
    contain: layout style paint;
    transform: translateZ(0);
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
    /* V2 - Will-change apenas quando necessário */
}

.movie-carousel {
    contain: layout style;
    will-change: auto;
    transform: translateZ(0);
    content-visibility: visible !important;
}

.video-section {
    contain: none !important;
    content-visibility: visible !important;
    will-change: auto;
}

video,
.video-player {
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: none !important;
    content-visibility: visible !important;
}

section:not(.content-stats):not(.video-section) {
    contain: layout;
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

.hero,
.movie-carousel,
.video-section {
    content-visibility: visible !important;
}

.plan-card {
    contain: layout style paint;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.glass-card {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ========================================
   V2 - 2. GPU ACCELERATION (Hardware Acceleration)
   ========================================
   Otimizado com transform3d
*/

.background-animation {
    /* V2 - Will-change removido, aplicado via JS quando necessário */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.carousel-track {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.carousel-item {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.carousel-left,
.carousel-right {
    animation-play-state: running !important;
}

.carousel-item img {
    transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
}

.plan-button {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* ========================================
   V2 - 3. OTIMIZAÇÕES MOBILE
   ========================================
   Transições mais rápidas (0.2s → 0.15s)
*/

@media (max-width: 768px) {
    
    .plan-card,
    .carousel-item,
    .stat-card,
    .device-card {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    }
    
    .plan-button {
        box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
    }
    
    .benefit-card,
    .device-card {
        will-change: auto !important;
    }
    
    .carousel-track,
    .carousel-left,
    .carousel-right {
        will-change: transform !important;
    }
    
    .stat-card::before {
        animation-duration: 5s !important;
    }
    
    .background-animation::before {
        background-image: 
            radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%) !important;
    }
    
    .plan-card:hover,
    .device-card:hover,
    .benefit-card:hover {
        /* V2 - Movimento mais sutil (-2px → -4px) */
        transform: translate3d(0, -4px, 0) !important;
    }
    
    /* V2 - Transições otimizadas: 0.2s → 0.15s */
    *:not(.carousel-track):not(.carousel-left):not(.carousel-right):not(.movie-carousel *) {
        transition-duration: 0.15s !important;
    }
    
    .plan-button:hover {
        transform: translate3d(0, -2px, 0) !important;
    }
}

/* ========================================
   V2 - 4. CLASSE .is-scrolling
   ========================================
   Otimizada para melhor performance
*/

.is-scrolling * {
    transition: none !important;
    animation-play-state: paused !important;
}

.is-scrolling .carousel-track,
.is-scrolling .carousel-left,
.is-scrolling .carousel-right {
    animation-play-state: running !important;
}

.is-scrolling video,
.is-scrolling .video-player,
.is-scrolling .video-section,
.is-scrolling .video-player-wrapper {
    animation-play-state: running !important;
    /* V2 - Transição mais rápida */
    transition: all 0.2s ease !important;
}

.is-scrolling .background-animation {
    will-change: auto !important;
}

/* V2 - OTIMIZAÇÃO FPS: Desabilitar backdrop-filter durante scroll */
.is-scrolling .glass-card,
.is-scrolling .cta-button,
.is-scrolling .stat-card,
.is-scrolling .video-features,
.is-scrolling .whatsapp-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* V2 - OTIMIZAÇÃO FPS: Simplificar box-shadows durante scroll */
.is-scrolling .glass-card,
.is-scrolling .stat-card,
.is-scrolling .benefit-card,
.is-scrolling .device-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* V2 - OTIMIZAÇÃO FPS EXTREMA: Desabilitar filters e transforms complexos */
.is-scrolling .benefit-icon svg,
.is-scrolling .device-icon svg {
    filter: none !important;
}

/* V2 - OTIMIZAÇÃO FPS: Simplificar gradientes durante scroll */
.is-scrolling .cta-button {
    background: rgba(139, 92, 246, 0.8) !important;
}

/* V2 - OTIMIZAÇÃO FPS: Desabilitar text-shadow durante scroll */
.is-scrolling .hero-title,
.is-scrolling .section-title,
.is-scrolling .gradient-text {
    text-shadow: none !important;
}

/* V2 - OTIMIZAÇÃO FPS: Forçar rendering 2D durante scroll */
.is-scrolling .glass-card,
.is-scrolling .stat-card,
.is-scrolling .benefit-card {
    transform: translateZ(0) !important;
    will-change: auto !important;
}

/* V2 - OTIMIZAÇÃO FPS: Desabilitar pseudo-elementos pesados */
.is-scrolling .stat-card::before,
.is-scrolling .glass-card::before,
.is-scrolling .benefit-glow {
    display: none !important;
}

/* V2 - OTIMIZAÇÃO CARDS: Melhorar rendering de cards */
.stat-card,
.glass-card,
.benefit-card {
    contain: layout style paint;
    content-visibility: auto;
}

/* V2 - OTIMIZAÇÃO VÍDEO: Isolar player para melhor FPS */
.video-player-wrapper {
    contain: layout style paint;
    will-change: auto;
}

.video-player {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* V2 - OTIMIZAÇÃO: Remover animações caras de partículas */
.particle,
.particles-container {
    display: none !important;
}

/* ========================================
   V2 - 5. CLASSE .optimize-mobile
   ========================================
   Mantida para compatibilidade
*/

.optimize-mobile .background-animation {
    position: fixed !important;
    transform: none !important;
}

.optimize-mobile .background-animation::before {
    animation: none !important;
}

.optimize-mobile .stat-card::before,
.optimize-mobile .popular-inline::before {
    animation: none !important;
    display: none !important;
}

.optimize-mobile .carousel-item:hover {
    transform: translate3d(0, -3px, 0) scale(1.02) !important;
}

.optimize-mobile * {
    will-change: auto !important;
}

.optimize-mobile .carousel-track {
    will-change: transform !important;
}

.optimize-mobile .animating {
    will-change: transform, opacity !important;
}

.optimize-mobile .animation-ended {
    will-change: auto !important;
}

/* ========================================
   V2 - 6. FONT RENDERING
   ========================================
*/

body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.is-scrolling body {
    text-rendering: optimizeSpeed !important;
}

/* ========================================
   V2 - 7. WILL-CHANGE INTELIGENTE
   ========================================
   Aplicado apenas em hover/foco
*/

.plan-card:hover {
    will-change: transform, opacity;
}

.plan-card:not(:hover) {
    will-change: auto;
}

.glass-card {
    will-change: auto;
}

.plan-button:hover,
.plan-button:active,
.cta-button:hover,
.cta-button:active {
    will-change: transform;
}

/* ========================================
   V2 - 8. CONTENT-VISIBILITY
   ========================================
*/

.compatibility,
.benefits,
.whatsapp-cta {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

.plans {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

.content-stats {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

/* ========================================
   V2 - 9. OVERFLOW OTIMIZADO
   ========================================
*/

body,
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.carousel-track {
    overflow: visible;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   V2 - 10. REDUÇÃO DE REPAINT
   ========================================
*/

.plan-button::before,
.cta-button::before {
    content: '';
    position: absolute;
    will-change: width, height;
    pointer-events: none;
}

img {
    background-color: rgba(139, 92, 246, 0.05);
}

/* ========================================
   V2 - 11. ANDROID ESPECÍFICO
   ========================================
*/

@media (max-width: 768px) {
    .optimize-mobile .hero-content,
    .optimize-mobile .section-title {
        text-shadow: none !important;
    }
    
    .optimize-mobile .gradient-text {
        background: var(--neon-purple) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
}

/* ========================================
   V2 - 12. LAZY LOADING VISUAL
   ========================================
   Transições mais rápidas (0.4s → 0.3s)
*/

.lazy-section {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    /* V2 - Transição otimizada */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.lazy-section.loaded {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.is-scrolling .lazy-section {
    transition: none !important;
}

/* ========================================
   V2 - 13. SOMBRAS OTIMIZADAS
   ========================================
*/

@media (max-width: 768px) {
    .optimize-mobile .plan-card,
    .optimize-mobile .glass-card,
    .optimize-mobile .carousel-item {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }
}

/* ========================================
   V2 - 14. PREVENÇÃO DE LAYOUT THRASHING
   ========================================
*/

.plan-card,
.stat-card,
.benefit-card,
.device-card {
    min-height: fit-content;
}

/* ========================================
   V2 - 15. PREFERS-REDUCED-MOTION
   ========================================
*/

@media (prefers-reduced-motion: reduce) {
    *:not(.carousel-track):not(.carousel-left):not(.carousel-right),
    *::before,
    *::after {
        animation-duration: 0.01s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01s !important;
    }
    
    .background-animation,
    .floating {
        animation: none !important;
    }
}

/* ========================================
   V2 - 16. ANIMAÇÕES CONTÍNUAS OTIMIZADAS
   ========================================
   Easing mais suave
*/

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes floatBackground {
    0%, 100% { 
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% { 
        transform: translate3d(0, -20px, 0) scale(1.05);
    }
}

@keyframes glassShimmer {
    0%, 100% {
        transform: translate3d(-150%, 0, 0) skewX(-25deg);
        opacity: 0;
    }
    50% {
        transform: translate3d(150%, 0, 0) skewX(-25deg);
        opacity: 1;
    }
}

/* ========================================
   V2 - 17. PAUSAR ANIMAÇÕES
   ========================================
*/

.pause-animations,
.pause-animations *,
.pause-animations::before,
.pause-animations::after {
    animation-play-state: paused !important;
}

.pause-animations video,
.pause-animations .video-player,
video.pause-animations {
    animation-play-state: running !important;
}

.movie-carousel,
.movie-carousel *,
.movie-carousel .carousel-track,
.movie-carousel .carousel-left,
.movie-carousel .carousel-right,
.carousel-track,
.carousel-left,
.carousel-right {
    animation-play-state: running !important;
    animation-duration: 90s !important;
    will-change: transform !important;
}

.pause-animations .movie-carousel,
.pause-animations .carousel-track,
.pause-animations .carousel-left,
.pause-animations .carousel-right {
    animation-play-state: running !important;
    animation-duration: 90s !important;
}

@media (max-width: 768px) {
    .carousel-left,
    .carousel-right {
        animation-play-state: running !important;
        animation-duration: 90s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
    }
}

/* ========================================
   V2 - RESULTADO ESPERADO
   ========================================
   
   Melhorias V2:
   - Transições 33% mais rápidas (0.4s → 0.3s)
   - Will-change otimizado (menos uso de memória GPU)
   - Animações mais suaves
   - Melhor fluidez geral
   - Performance mantida
   
   ========================================
*/