/**
 * Destrave TV - Custom Styles
 * Organizado e sem duplicatas
 */

/* 1. Base & Reset */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0f172a;
    color: #ffffff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* 2. Animações Globais */
@keyframes hero-fade-1 { 0%, 100% { opacity: 1; } 33%, 66% { opacity: 0; } }
@keyframes hero-fade-2 { 0%, 100% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0; } }
@keyframes hero-fade-3 { 0%, 33% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 0; } }

@keyframes float-sync {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}

@keyframes float-sync-inverse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(18px); }
}

@keyframes mask-float {
    0%, 100% { -webkit-mask-position: 0 -200px; mask-position: 0 -200px; }
    50% { -webkit-mask-position: 0 -164px; mask-position: 0 -164px; }
}

@keyframes slideDownReveal {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpHide {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 3. Camadas do Hero */
.hero-layer-1 { background: radial-gradient(circle at 10% 20%, rgb(30, 58, 138), rgb(15, 23, 42) 90%); animation: hero-fade-1 40s ease-in-out infinite; }
.hero-layer-2 { background: radial-gradient(circle at 80% 90%, rgb(30, 58, 138), rgb(15, 23, 42) 90%); animation: hero-fade-2 40s ease-in-out infinite; }
.hero-layer-3 { background: radial-gradient(circle at 50% 50%, rgb(159, 18, 57), rgb(15, 23, 42) 90%); animation: hero-fade-3 40s ease-in-out infinite; }

/* 4. Classes de Animação */
.btn-float-sync { animation: mask-float 3s ease-in-out infinite; }
.floating-sync { animation: float-sync 3s ease-in-out infinite; }
.floating-sync-inverse { animation: float-sync-inverse 3s ease-in-out infinite; }
.slide-down-reveal { animation: slideDownReveal 0.6s ease-out forwards; }
.slide-up-hide { animation: slideUpHide 0.5s ease-in forwards; }
.animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }

.mask-floating {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% calc(100% + 18px);
    mask-size: 100% calc(100% + 18px);
    animation: mask-float 3s ease-in-out infinite;
}

/* 5. Sistema 'Ver Mais' Premium */
.mask-premium-container {
    position: relative;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.mask-apps-premium {
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 50px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 50px), transparent 100%);
    max-height: 90px;
}

.mask-depoimentos-premium {
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 180px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 180px), transparent 100%);
    max-height: 360px;
}

.mask-faq-premium {
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 160px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 160px), transparent 100%);
    max-height: 320px;
}

.mask-premium-container.is-expanded {
    -webkit-mask-image: none;
    mask-image: none;
}

.btn-wrapper-sync {
    position: relative;
    z-index: 30;
    display: flex;
    justify-content: center;
    transition: margin-top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 6. Efeito de Texto Platina (Aurora Shimmer) */
@property --grad-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.text-gradient {
    background-image: linear-gradient(var(--grad-angle, 105deg), #878f9c 0%, #b5bcc7 30%, #7a8493 50%, #a1abb8 75%, #878f9c 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: aurora-shimmer 36s linear infinite alternate;
}

@keyframes aurora-shimmer {
    0% { --grad-angle: 0deg; background-position: 0% 0%; }
    25% { --grad-angle: 120deg; background-position: 100% 50%; }
    50% { --grad-angle: 240deg; background-position: 50% 100%; }
    75% { --grad-angle: 300deg; background-position: 0% 50%; }
    100% { --grad-angle: 360deg; background-position: 100% 0%; }
}

.text-gradient-glow {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 20px rgba(181, 188, 199, 0.25));
}

/* 7. Utilidades Glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.premium-card {
    background: linear-gradient(to bottom right, rgba(30, 58, 138, 0.5), #0f172a, #0f172a);
    border: 2px solid #2563eb;
    box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.25);
}

.btn-gradient {
    background: linear-gradient(to bottom right, #2563eb, #0284c7);
}

.btn-gradient:hover {
    background: linear-gradient(to bottom right, #1d4ed8, #0369a1);
}