/**
 * Mirasat IPTV - Scroll Reveal Animations
 * Animações suaves ao rolar a página
 */

/* ========================================
   VARIÁVEIS DE ANIMAÇÃO
======================================== */
:root {
    --animation-duration: 0.8s;
    --animation-delay-step: 0.1s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   ESTADO INICIAL - ESCONDIDO
======================================== */

/* Fade Up - Aparece de baixo para cima */
.scroll-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--animation-duration) var(--animation-easing),
                transform var(--animation-duration) var(--animation-easing);
}

/* Fade Down - Aparece de cima para baixo */
.scroll-fade-down {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity var(--animation-duration) var(--animation-easing),
                transform var(--animation-duration) var(--animation-easing);
}

/* Fade Left - Aparece da esquerda */
.scroll-fade-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity var(--animation-duration) var(--animation-easing),
                transform var(--animation-duration) var(--animation-easing);
}

/* Fade Right - Aparece da direita */
.scroll-fade-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity var(--animation-duration) var(--animation-easing),
                transform var(--animation-duration) var(--animation-easing);
}

/* Fade In - Apenas aparece */
.scroll-fade-in {
    opacity: 0;
    transition: opacity var(--animation-duration) var(--animation-easing);
}

/* Scale Up - Aparece aumentando */
.scroll-scale-up {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--animation-duration) var(--animation-easing),
                transform var(--animation-duration) var(--animation-easing);
}

/* Scale Down - Aparece diminuindo */
.scroll-scale-down {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity var(--animation-duration) var(--animation-easing),
                transform var(--animation-duration) var(--animation-easing);
}

/* Rotate In - Aparece com rotação */
.scroll-rotate-in {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
    transition: opacity var(--animation-duration) var(--animation-easing),
                transform var(--animation-duration) var(--animation-easing);
}

/* Zoom In - Aparece com zoom */
.scroll-zoom-in {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.6s var(--animation-easing),
                transform 0.6s var(--animation-easing);
}

/* Blur In - Aparece com desfoque */
.scroll-blur-in {
    opacity: 0;
    filter: blur(10px);
    transition: opacity var(--animation-duration) var(--animation-easing),
                filter var(--animation-duration) var(--animation-easing);
}

/* ========================================
   ESTADO FINAL - VISÍVEL
======================================== */
.scroll-fade-up.is-visible,
.scroll-fade-down.is-visible,
.scroll-fade-left.is-visible,
.scroll-fade-right.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

.scroll-fade-in.is-visible {
    opacity: 1;
}

.scroll-scale-up.is-visible,
.scroll-scale-down.is-visible {
    opacity: 1;
    transform: scale(1);
}

.scroll-rotate-in.is-visible {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.scroll-zoom-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

.scroll-blur-in.is-visible {
    opacity: 1;
    filter: blur(0);
}

/* ========================================
   DELAYS DE ANIMAÇÃO - SEQUÊNCIA
======================================== */
.scroll-delay-1 { transition-delay: 0.1s; }
.scroll-delay-2 { transition-delay: 0.2s; }
.scroll-delay-3 { transition-delay: 0.3s; }
.scroll-delay-4 { transition-delay: 0.4s; }
.scroll-delay-5 { transition-delay: 0.5s; }
.scroll-delay-6 { transition-delay: 0.6s; }

/* ========================================
   ANIMAÇÕES AUTOMÁTICAS POR ELEMENTO
======================================== */

/* Seções */
.vc_section,
section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--animation-easing),
                transform 0.7s var(--animation-easing);
}

.vc_section.is-visible,
section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Headings e Títulos */
.heading,
.header-subheader,
.entry-title,
.section-title {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s var(--animation-easing),
                transform 0.6s var(--animation-easing);
}

.heading.is-visible,
.header-subheader.is-visible,
.entry-title.is-visible,
.section-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Boxes e Cards */
.advantage-box,
.device-box,
.app-box,
.service-box,
.tip-box,
.mobile-box,
.consideration-box,
.advantage-app-box,
.plan-card,
.feature-box,
.step-box {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s var(--animation-easing),
                transform 0.6s var(--animation-easing);
}

.advantage-box.is-visible,
.device-box.is-visible,
.app-box.is-visible,
.service-box.is-visible,
.tip-box.is-visible,
.mobile-box.is-visible,
.consideration-box.is-visible,
.advantage-app-box.is-visible,
.plan-card.is-visible,
.feature-box.is-visible,
.step-box.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Colunas em Grid - Sequência */
.row > [class*="col-"]:nth-child(1) .advantage-box,
.row > [class*="col-"]:nth-child(1) .device-box,
.row > [class*="col-"]:nth-child(1) .app-box,
.row > [class*="col-"]:nth-child(1) .service-box,
.row > [class*="col-"]:nth-child(1) .tip-box,
.row > [class*="col-"]:nth-child(1) .plan-card {
    transition-delay: 0s;
}

.row > [class*="col-"]:nth-child(2) .advantage-box,
.row > [class*="col-"]:nth-child(2) .device-box,
.row > [class*="col-"]:nth-child(2) .app-box,
.row > [class*="col-"]:nth-child(2) .service-box,
.row > [class*="col-"]:nth-child(2) .tip-box,
.row > [class*="col-"]:nth-child(2) .plan-card {
    transition-delay: 0.15s;
}

.row > [class*="col-"]:nth-child(3) .advantage-box,
.row > [class*="col-"]:nth-child(3) .device-box,
.row > [class*="col-"]:nth-child(3) .app-box,
.row > [class*="col-"]:nth-child(3) .service-box,
.row > [class*="col-"]:nth-child(3) .tip-box,
.row > [class*="col-"]:nth-child(3) .plan-card {
    transition-delay: 0.3s;
}

.row > [class*="col-"]:nth-child(4) .advantage-box,
.row > [class*="col-"]:nth-child(4) .device-box,
.row > [class*="col-"]:nth-child(4) .app-box,
.row > [class*="col-"]:nth-child(4) .service-box,
.row > [class*="col-"]:nth-child(4) .tip-box,
.row > [class*="col-"]:nth-child(4) .plan-card {
    transition-delay: 0.45s;
}

/* Parágrafos de texto */
.wpb_text_column,
.wpb_content_element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--animation-easing),
                transform 0.5s var(--animation-easing);
}

.wpb_text_column.is-visible,
.wpb_content_element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Botões */
.btn-wrap,
.plan-button-wrap {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.5s var(--animation-easing),
                transform 0.5s var(--animation-easing);
}

.btn-wrap.is-visible,
.plan-button-wrap.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Imagens */
.post-thumbnail,
.ltx-content-width img,
.device-icon,
.app-icon,
.tip-icon,
.consideration-icon,
.service-icon,
.mobile-icon {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s var(--animation-easing),
                transform 0.6s var(--animation-easing);
}

.post-thumbnail.is-visible,
.ltx-content-width img.is-visible,
.device-icon.is-visible,
.app-icon.is-visible,
.tip-icon.is-visible,
.consideration-icon.is-visible,
.service-icon.is-visible,
.mobile-icon.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Listas */
.plan-features li,
ul li,
ol li {
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.4s var(--animation-easing),
                transform 0.4s var(--animation-easing);
}

.plan-features.is-visible li,
ul.is-visible li,
ol.is-visible li {
    opacity: 1;
    transform: translateX(0);
}

/* Sequência para itens de lista */
.plan-features.is-visible li:nth-child(1),
ul.is-visible li:nth-child(1) { transition-delay: 0s; }
.plan-features.is-visible li:nth-child(2),
ul.is-visible li:nth-child(2) { transition-delay: 0.05s; }
.plan-features.is-visible li:nth-child(3),
ul.is-visible li:nth-child(3) { transition-delay: 0.1s; }
.plan-features.is-visible li:nth-child(4),
ul.is-visible li:nth-child(4) { transition-delay: 0.15s; }
.plan-features.is-visible li:nth-child(5),
ul.is-visible li:nth-child(5) { transition-delay: 0.2s; }
.plan-features.is-visible li:nth-child(6),
ul.is-visible li:nth-child(6) { transition-delay: 0.25s; }
.plan-features.is-visible li:nth-child(7),
ul.is-visible li:nth-child(7) { transition-delay: 0.3s; }
.plan-features.is-visible li:nth-child(8),
ul.is-visible li:nth-child(8) { transition-delay: 0.35s; }
.plan-features.is-visible li:nth-child(9),
ul.is-visible li:nth-child(9) { transition-delay: 0.4s; }
.plan-features.is-visible li:nth-child(10),
ul.is-visible li:nth-child(10) { transition-delay: 0.45s; }

/* Widget Sidebar */
.widget {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s var(--animation-easing),
                transform 0.6s var(--animation-easing);
}

.widget.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Navegação de Posts */
.post-navigation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--animation-easing),
                transform 0.6s var(--animation-easing);
}

.post-navigation.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Comentários */
.comments-area {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s var(--animation-easing),
                transform 0.7s var(--animation-easing);
}

.comments-area.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.comment {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--animation-easing),
                transform 0.5s var(--animation-easing);
}

.comment.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Blog Posts */
.blog-posts article,
.hentry {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--animation-easing),
                transform 0.6s var(--animation-easing);
}

.blog-posts article.is-visible,
.hentry.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Advantage Number / Icons */
.advantage-number {
    opacity: 0;
    transform: scale(0.5) rotate(-15deg);
    transition: opacity 0.5s var(--animation-easing),
                transform 0.5s var(--animation-easing);
}

.advantage-number.is-visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Hero Section - Sempre visível imediatamente */
.hero-section,
.hero-section .heading,
.hero-section .wpb_text_column,
.hero-section .btn-wrap {
    opacity: 1 !important;
    transform: none !important;
}

/* ========================================
   EFEITO PARALLAX SUAVE
======================================== */
.parallax-bg {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ========================================
   ANIMAÇÕES DE HOVER ADICIONAIS
======================================== */

/* Hover lift em cards */
.advantage-box,
.device-box,
.app-box,
.service-box,
.tip-box,
.mobile-box,
.plan-card {
    transition: opacity 0.6s var(--animation-easing),
                transform 0.6s var(--animation-easing),
                box-shadow 0.3s ease;
}

.advantage-box.is-visible:hover,
.device-box.is-visible:hover,
.app-box.is-visible:hover,
.service-box.is-visible:hover,
.tip-box.is-visible:hover,
.mobile-box.is-visible:hover,
.plan-card.is-visible:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* ========================================
   RESPONSIVIDADE
======================================== */
@media (max-width: 767px) {
    /* Reduz distância de animação em mobile */
    .scroll-fade-up,
    .scroll-fade-down {
        transform: translateY(25px);
    }
    
    .scroll-fade-left,
    .scroll-fade-right {
        transform: translateX(25px);
    }
    
    .advantage-box,
    .device-box,
    .app-box,
    .service-box,
    .tip-box,
    .mobile-box,
    .plan-card {
        transform: translateY(25px);
    }
    
    /* Remove delays em mobile para UX mais rápida */
    .row > [class*="col-"]:nth-child(n) .advantage-box,
    .row > [class*="col-"]:nth-child(n) .device-box,
    .row > [class*="col-"]:nth-child(n) .app-box,
    .row > [class*="col-"]:nth-child(n) .service-box,
    .row > [class*="col-"]:nth-child(n) .tip-box,
    .row > [class*="col-"]:nth-child(n) .plan-card {
        transition-delay: 0s;
    }
}

/* ========================================
   PREFERS-REDUCED-MOTION
   Para usuários que preferem menos animações
======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .scroll-fade-up,
    .scroll-fade-down,
    .scroll-fade-left,
    .scroll-fade-right,
    .scroll-fade-in,
    .scroll-scale-up,
    .scroll-scale-down,
    .scroll-rotate-in,
    .scroll-zoom-in,
    .scroll-blur-in,
    .vc_section,
    section,
    .heading,
    .advantage-box,
    .device-box,
    .app-box,
    .service-box,
    .tip-box,
    .wpb_text_column,
    .btn-wrap,
    .plan-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}