/**
 * Mirasat IPTV - Animations CSS
 * Scroll Reveal and Glitch Effects
 */

/* Scroll Reveal Base - Textos SEMPRE visíveis */
.ltx-sr {
    visibility: visible;
    opacity: 1;
}

.ltx-sr.ltx-sr-inited {
    visibility: visible;
    opacity: 1;
}

/* Fade In Effect - Rápido */
.ltx-sr-effect-fade_in {
    opacity: 1;
    transition: opacity 0.4s ease;
}

.ltx-sr-effect-fade_in.ltx-sr-inited {
    opacity: 1;
}

/* Slide from Bottom - Rápido */
.ltx-sr-effect-slide_from_bottom {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ltx-sr-effect-slide_from_bottom.ltx-sr-inited {
    opacity: 1;
    transform: translateY(0);
}

/* Slide from Left - Rápido */
.ltx-sr-effect-slide_from_left {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ltx-sr-effect-slide_from_left.ltx-sr-inited {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from Right - Rápido */
.ltx-sr-effect-slide_from_right {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ltx-sr-effect-slide_from_right.ltx-sr-inited {
    opacity: 1;
    transform: translateX(0);
}

/* Scale Up - Rápido */
.ltx-sr-effect-scale_up {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ltx-sr-effect-scale_up.ltx-sr-inited {
    opacity: 1;
    transform: scale(1);
}

/* Delays */
.ltx-sr-delay-0 {
    transition-delay: 0s !important;
}

.ltx-sr-delay-100 {
    transition-delay: 0.1s !important;
}

.ltx-sr-delay-200 {
    transition-delay: 0.2s !important;
}

.ltx-sr-delay-300 {
    transition-delay: 0.3s !important;
}

.ltx-sr-delay-400 {
    transition-delay: 0.4s !important;
}

.ltx-sr-delay-500 {
    transition-delay: 0.5s !important;
}

/* Durations */
.ltx-sr-duration-300 {
    transition-duration: 0.3s !important;
}

.ltx-sr-duration-500 {
    transition-duration: 0.5s !important;
}

.ltx-sr-duration-800 {
    transition-duration: 0.8s !important;
}

.ltx-sr-duration-1000 {
    transition-duration: 1s !important;
}

/* Glitch Effect - Sutil e Adaptável */
.ltx-glitch {
    position: relative;
    /* Cor se adapta ao contexto */
}

/* Títulos em fundos escuros = branco */
.vc_section-has-fill .ltx-glitch,
.vc_section-has-fill .header,
.vc_section-has-fill h1,
.vc_section-has-fill h2,
.bg-color-black .ltx-glitch,
.bg-color-black .header,
.bg-color-black h1,
.bg-color-black h2,
.bg-color-main .ltx-glitch,
.bg-color-main .header,
.bg-color-main h1,
.bg-color-main h2,
.hero-section .ltx-glitch,
.hero-section .header,
.hero-section h1,
.hero-section h2,
.carousel-slide-title {
    color: #fff !important;
}

/* Títulos em fundos claros = escuro */
.bg-color-white .ltx-glitch,
.bg-color-white .header,
.bg-color-white h1,
.bg-color-white h2,
.bg-color-gray .ltx-glitch,
.bg-color-gray .header,
.bg-color-gray h1,
.bg-color-gray h2 {
    color: var(--black, #171422) !important;
}

/* Cor padrão dos títulos (escuro para boa leitura) */
.header,
h1.header,
h2.header {
    color: var(--black, #171422);
}

/* Subtítulos mantêm cor temática */
.subheader {
    color: var(--main, #fd5800);
}

.subcolor-main .subheader {
    color: var(--main, #fd5800);
}

.subcolor-second .subheader {
    color: var(--second, #fd5800);
}

/* Efeito glitch sutil (apenas no hover ou inicial) */
.ltx-glitch.done::before,
.ltx-glitch.done::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ltx-glitch.done::before {
    left: 2px;
    text-shadow: -2px 0 var(--main);
    clip: rect(24px, 550px, 90px, 0);
}

.ltx-glitch.done::after {
    left: -2px;
    text-shadow: -2px 0 var(--second);
    clip: rect(85px, 550px, 140px, 0);
}

/* Glitch aparece brevemente no início */
.ltx-glitch.done.ltx-sr-inited::before {
    animation: glitch-flash 0.5s ease-out 0.2s;
}

.ltx-glitch.done.ltx-sr-inited::after {
    animation: glitch-flash 0.5s ease-out 0.3s;
}

/* Glitch no hover (opcional) */
.ltx-glitch.done:hover::before,
.ltx-glitch.done:hover::after {
    opacity: 0.8;
    animation: glitch-anim-subtle 0.3s linear;
}

@keyframes glitch-anim {
    0% {
        clip: rect(6px, 9999px, 59px, 0);
    }
    5% {
        clip: rect(67px, 9999px, 98px, 0);
    }
    10% {
        clip: rect(47px, 9999px, 27px, 0);
    }
    15% {
        clip: rect(70px, 9999px, 52px, 0);
    }
    20% {
        clip: rect(86px, 9999px, 9px, 0);
    }
    25% {
        clip: rect(30px, 9999px, 110px, 0);
    }
    30% {
        clip: rect(95px, 9999px, 72px, 0);
    }
    35% {
        clip: rect(16px, 9999px, 119px, 0);
    }
    40% {
        clip: rect(92px, 9999px, 64px, 0);
    }
    45% {
        clip: rect(22px, 9999px, 84px, 0);
    }
    50% {
        clip: rect(51px, 9999px, 107px, 0);
    }
    55% {
        clip: rect(72px, 9999px, 31px, 0);
    }
    60% {
        clip: rect(2px, 9999px, 93px, 0);
    }
    65% {
        clip: rect(48px, 9999px, 17px, 0);
    }
    70% {
        clip: rect(99px, 9999px, 41px, 0);
    }
    75% {
        clip: rect(10px, 9999px, 75px, 0);
    }
    80% {
        clip: rect(63px, 9999px, 88px, 0);
    }
    85% {
        clip: rect(34px, 9999px, 104px, 0);
    }
    90% {
        clip: rect(78px, 9999px, 56px, 0);
    }
    95% {
        clip: rect(14px, 9999px, 100px, 0);
    }
    100% {
        clip: rect(57px, 9999px, 23px, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip: rect(61px, 9999px, 105px, 0);
    }
    5% {
        clip: rect(27px, 9999px, 81px, 0);
    }
    10% {
        clip: rect(43px, 9999px, 18px, 0);
    }
    15% {
        clip: rect(89px, 9999px, 66px, 0);
    }
    20% {
        clip: rect(4px, 9999px, 96px, 0);
    }
    25% {
        clip: rect(74px, 9999px, 36px, 0);
    }
    30% {
        clip: rect(19px, 9999px, 111px, 0);
    }
    35% {
        clip: rect(98px, 9999px, 53px, 0);
    }
    40% {
        clip: rect(32px, 9999px, 79px, 0);
    }
    45% {
        clip: rect(68px, 9999px, 42px, 0);
    }
    50% {
        clip: rect(7px, 9999px, 118px, 0);
    }
    55% {
        clip: rect(85px, 9999px, 24px, 0);
    }
    60% {
        clip: rect(49px, 9999px, 91px, 0);
    }
    65% {
        clip: rect(11px, 9999px, 60px, 0);
    }
    70% {
        clip: rect(76px, 9999px, 45px, 0);
    }
    75% {
        clip: rect(38px, 9999px, 102px, 0);
    }
    80% {
        clip: rect(94px, 9999px, 20px, 0);
    }
    85% {
        clip: rect(55px, 9999px, 83px, 0);
    }
    90% {
        clip: rect(29px, 9999px, 109px, 0);
    }
    95% {
        clip: rect(71px, 9999px, 39px, 0);
    }
    100% {
        clip: rect(16px, 9999px, 95px, 0);
    }
}

/* Responsive Spacing */
.es-resp .visible-xl,
.es-resp .visible-md,
.es-resp .visible-sm,
.es-resp .visible-ms,
.es-resp .visible-xs {
    display: block !important;
}

.es-resp .hidden-xl,
.es-resp .hidden-md,
.es-resp .hidden-sm,
.es-resp .hidden-ms,
.es-resp .hidden-xs {
    display: none !important;
}

@media (min-width: 1200px) {
    .es-resp .visible-xl {
        display: block !important;
    }
    .es-resp .hidden-xl {
        display: none !important;
    }
    .es-resp .visible-md,
    .es-resp .visible-sm,
    .es-resp .visible-ms,
    .es-resp .visible-xs {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .es-resp .visible-md {
        display: block !important;
    }
    .es-resp .hidden-md {
        display: none !important;
    }
    .es-resp .visible-xl,
    .es-resp .visible-sm,
    .es-resp .visible-ms,
    .es-resp .visible-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .es-resp .visible-sm {
        display: block !important;
    }
    .es-resp .hidden-sm {
        display: none !important;
    }
    .es-resp .visible-xl,
    .es-resp .visible-md,
    .es-resp .visible-ms,
    .es-resp .visible-xs {
        display: none !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .es-resp .visible-ms {
        display: block !important;
    }
    .es-resp .hidden-ms {
        display: none !important;
    }
    .es-resp .visible-xl,
    .es-resp .visible-md,
    .es-resp .visible-sm,
    .es-resp .visible-xs {
        display: none !important;
    }
}

@media (max-width: 479px) {
    .es-resp .visible-xs {
        display: block !important;
    }
    .es-resp .hidden-xs {
        display: none !important;
    }
    .es-resp .visible-xl,
    .es-resp .visible-md,
    .es-resp .visible-sm,
    .es-resp .visible-ms {
        display: none !important;
    }
}

/* Animação Glitch Flash (aparece brevemente uma vez) */
@keyframes glitch-flash {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    20% {
        opacity: 0;
    }
    30% {
        opacity: 0.8;
    }
    40%, 100% {
        opacity: 0;
    }
}

/* Animação Glitch Sutil (para hover) */
@keyframes glitch-anim-subtle {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
}

/* Transição suave para títulos (cubic-bezier) */
.header,
.ltx-glitch {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Effects */
.btn:hover,
a:hover {
    transition: all 0.3s ease;
}

.color-hover-main:hover {
    color: var(--main) !important;
}

.color-hover-white:hover {
    color: #fff !important;
}

.color-hover-second:hover {
    color: var(--second) !important;
}

.color-hover-default:hover {
    color: var(--black-text) !important;
}

/* ============================================
   EFEITO TV PERDENDO SINAL - Para Todos Títulos
   ============================================ */

/* Classe tv-glitch pode ser aplicada em qualquer título */
.tv-glitch,
h1.tv-glitch,
h2.tv-glitch,
.header.tv-glitch {
    position: relative;
    animation: tv-glitch-skew 1s infinite linear alternate-reverse;
}

.tv-glitch::before,
.tv-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Camada vermelha */
.tv-glitch::before {
    color: #ff0000;
    animation: tv-glitch-red 0.3s infinite linear alternate-reverse;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    text-shadow: -3px 0 #ff0000;
    z-index: -1;
}

/* Camada ciano */
.tv-glitch::after {
    color: #00ffff;
    animation: tv-glitch-cyan 0.3s infinite linear alternate-reverse;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    text-shadow: 3px 0 #00ffff;
    z-index: -2;
}

/* Animações do efeito TV */
@keyframes tv-glitch-skew {
    0% { transform: skew(0deg); }
    10% { transform: skew(-2deg); }
    20% { transform: skew(0deg); opacity: 1; }
    30% { transform: skew(1deg); }
    40% { transform: skew(-1deg); opacity: 0.9; }
    50% { transform: skew(0.5deg); }
    60% { transform: skew(0deg); opacity: 1; }
    70% { transform: skew(-0.5deg); }
    80% { transform: skew(0deg); }
    85% { opacity: 0.85; transform: skew(2deg); }
    90% { transform: skew(-1deg); opacity: 1; }
    100% { transform: skew(0deg); }
}

@keyframes tv-glitch-red {
    0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); transform: translate(-5px, 0); }
    10% { clip-path: polygon(0 15%, 100% 15%, 100% 18%, 0 18%); transform: translate(5px, 0); }
    20% { clip-path: polygon(0 10%, 100% 10%, 100% 12%, 0 12%); transform: translate(-3px, 0); }
    30% { clip-path: polygon(0 35%, 100% 35%, 100% 40%, 0 40%); transform: translate(3px, 0); }
    40% { clip-path: polygon(0 45%, 100% 45%, 100% 48%, 0 48%); transform: translate(-5px, 0); }
    50% { clip-path: polygon(0 60%, 100% 60%, 100% 63%, 0 63%); transform: translate(5px, 0); }
    60% { clip-path: polygon(0 70%, 100% 70%, 100% 72%, 0 72%); transform: translate(-2px, 0); }
    70% { clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%); transform: translate(4px, 0); }
    80% { clip-path: polygon(0 88%, 100% 88%, 100% 92%, 0 92%); transform: translate(-4px, 0); }
    90% { clip-path: polygon(0 95%, 100% 95%, 100% 100%, 0 100%); transform: translate(2px, 0); }
    100% { clip-path: polygon(0 0%, 100% 0%, 100% 3%, 0 3%); transform: translate(-5px, 0); }
}

@keyframes tv-glitch-cyan {
    0% { clip-path: polygon(0 95%, 100% 95%, 100% 100%, 0 100%); transform: translate(5px, 0); }
    10% { clip-path: polygon(0 85%, 100% 85%, 100% 90%, 0 90%); transform: translate(-5px, 0); }
    20% { clip-path: polygon(0 75%, 100% 75%, 100% 78%, 0 78%); transform: translate(3px, 0); }
    30% { clip-path: polygon(0 65%, 100% 65%, 100% 70%, 0 70%); transform: translate(-3px, 0); }
    40% { clip-path: polygon(0 55%, 100% 55%, 100% 58%, 0 58%); transform: translate(5px, 0); }
    50% { clip-path: polygon(0 40%, 100% 40%, 100% 45%, 0 45%); transform: translate(-5px, 0); }
    60% { clip-path: polygon(0 30%, 100% 30%, 100% 33%, 0 33%); transform: translate(2px, 0); }
    70% { clip-path: polygon(0 20%, 100% 20%, 100% 25%, 0 25%); transform: translate(-4px, 0); }
    80% { clip-path: polygon(0 10%, 100% 10%, 100% 15%, 0 15%); transform: translate(4px, 0); }
    90% { clip-path: polygon(0 5%, 100% 5%, 100% 8%, 0 8%); transform: translate(-2px, 0); }
    100% { clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%); transform: translate(5px, 0); }
}

/* Efeito TV em fundos escuros - cores ajustadas */
.bg-color-black .tv-glitch::before,
.vc_section-has-fill .tv-glitch::before {
    color: #ff3333;
}

.bg-color-black .tv-glitch::after,
.vc_section-has-fill .tv-glitch::after {
    color: #33ffff;
}

/* Desabilitar animação para pessoas com motion preference */
@media (prefers-reduced-motion: reduce) {
    .tv-glitch,
    .tv-glitch::before,
    .tv-glitch::after {
        animation: none;
    }
}