/**
 * YouClip - High Performance Material 3
 */

@import url('components/tiktok.css');
@import url('components/gallery.css');
@import url('components/overlay.css');

:root {
    --f7-font-family: 'Inter', 'Roboto', system-ui, sans-serif;
}

/* Reset Global e Otimização de Scroll */
body {
    background-color: var(--f7-page-bg-color);
    color: var(--f7-text-color);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none; /* Previne bounce indesejado no mobile */
}

/* Sólidos MD3 */
.navbar, .toolbar {
    --f7-navbar-shadow-image: none;
    --f7-toolbar-shadow-image: none;
    background-color: var(--f7-bars-bg-color) !important;
}

/* Ajustes de Elevação e Contraste Sólido */
.block-strong.inset, .list.inset {
    margin-left: 16px !important;
    margin-right: 16px !important;
    border: none !important;
    background-color: var(--f7-surface-variant, rgba(255,255,255,0.05)) !important;
}

/* --- OTIMIZAÇÃO DE PERFORMANCE (GPU) --- */

.tiktok-video-card {
    /* Força GPU e otimiza pintura */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    contain: layout style; /* Isolamento de layout para o browser */
}

video {
    /* Evita jitter durante o redimensionamento/carregamento */
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
}

.tiktok-swiper { 
    width: 100%; 
    height: 100%;
    /* Previne flicker durante a transição */
    -webkit-perspective: 1200;
    perspective: 1200;
}

/* Animações Otimizadas */
.animate-pop-up {
    animation: popUpFade 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    will-change: transform, opacity;
}

@keyframes popUpFade {
    0% { transform: scale(0.3) translateY(0); opacity: 1; }
    40% { transform: scale(1.4) translateY(-40px); opacity: 1; }
    100% { transform: scale(1) translateY(-120px); opacity: 0; }
}

.animate-pop {
    animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    will-change: transform, opacity;
}

@keyframes pop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Tabbar Labels */
.tabbar-label { 
    font-weight: 800 !important; 
    font-size: 10px !important; 
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Skeleton Loading */
.tiktok-video-card.is-loaded::before { display: none !important; }

/* --- CORREÇÃO DE SAFE-AREAS (WEBVIEW/CORDOVA) --- */
/* Zera as safe areas para evitar espaçamentos anormais entre header/navbar e bordas */
:root {
  --f7-safe-area-top: 0px !important;
  --f7-safe-area-bottom: 0px !important;
}

.md {
  --f7-safe-area-top: 0px !important;
}

.ios {
  --f7-safe-area-top: 0px !important;
}