/**
 * RotaTruck - Splash Screen CSS
 * 
 * @version 1.0.0
 * @since Fase 7 - Mobile UX Base
 * @description Tela de abertura animada com logo e loading
 * 
 * Elementos:
 * - Logo animado (caminhão)
 * - Título com fade-in
 * - Tagline
 * - Barra de progresso
 * - Versão no rodapé
 */

/* ==================== SPLASH SCREEN CONTAINER ==================== */

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg, #004E89 0%, #1A6DAA 50%, #0066AA 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--z-sistema) + 1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.splash-screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Overlay de textura sutil */
.splash-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

/* ==================== CONTEÚDO PRINCIPAL ==================== */

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: calc(var(--z-mapa) + 1);
}

/* ==================== LOGO ANIMADO ==================== */

.splash-logo {
    width: 140px;
    height: 140px;
    animation: logoFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
}

@keyframes logoFloat {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-12px); 
    }
}

.logo-svg {
    width: 100%;
    height: 100%;
}

/* ==================== ANIMAÇÕES DO CAMINHÃO ==================== */

/* Grupo do caminhão - vibração sutil */
.truck-group {
    animation: truckShake 0.4s ease-in-out infinite;
}

@keyframes truckShake {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-0.5px); }
    75% { transform: translateY(0.5px); }
}

/* Cabine */
.truck-cabin {
    animation: cabinGlow 2s ease-in-out infinite;
}

@keyframes cabinGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

/* Rodas - girando */
.wheel {
    animation: wheelRotate 0.8s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.wheel-1 { animation-delay: 0s; }
.wheel-2 { animation-delay: 0.1s; }
.wheel-3 { animation-delay: 0.2s; }

@keyframes wheelRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Estrada - linhas tracejadas em movimento */
.road-line {
    animation: roadMove 0.6s linear infinite;
}

@keyframes roadMove {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 10; }
}

/* Farol piscando */
.truck-headlight {
    animation: headlightBlink 1.5s ease-in-out infinite;
}

@keyframes headlightBlink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ==================== TÍTULO ==================== */

.splash-title {
    font-family: 'Segoe UI', 'Roboto', 'Montserrat', sans-serif;
    font-size: 52px;
    font-weight: 800;
    color: white;
    margin: 0;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    letter-spacing: -1px;
    animation: titleFadeIn 1s ease-out 0.3s both;
}

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

.splash-title-rota {
    color: #FFFFFF;
}

.splash-title-truck {
    color: #FF6B35;
    text-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
}

/* ==================== TAGLINE ==================== */

.splash-tagline {
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    text-align: center;
    max-width: 280px;
    line-height: 1.5;
    animation: titleFadeIn 1s ease-out 0.5s both;
}

/* ==================== LOADING ==================== */

.splash-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    animation: titleFadeIn 1s ease-out 0.7s both;
}

.loading-bar {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #FF6B35, #FFC107, #FF6B35);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: loadingProgress 1.5s ease-in-out infinite,
               loadingGradient 1s linear infinite;
}

@keyframes loadingProgress {
    0% {
        left: -30%;
        width: 30%;
    }
    50% {
        width: 50%;
    }
    100% {
        left: 100%;
        width: 30%;
    }
}

@keyframes loadingGradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.loading-text {
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    letter-spacing: 0.5px;
}

/* Loading dots animation */
.loading-text::after {
    content: '';
    animation: loadingDots 1.5s steps(4, end) infinite;
}

@keyframes loadingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* ==================== FOOTER ==================== */

.splash-footer {
    position: absolute;
    bottom: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: titleFadeIn 1s ease-out 0.9s both;
}

.splash-version {
    font-family: 'Segoe UI', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    letter-spacing: 1px;
}

.splash-copyright {
    font-family: 'Segoe UI', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    margin: 0;
}

/* ==================== ANIMAÇÃO DE SAÍDA ==================== */

.splash-screen.fade-out {
    animation: splashFadeOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes splashFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.05);
        visibility: hidden;
    }
}

/* Saída alternativa - slide up */
.splash-screen.slide-out {
    animation: splashSlideOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes splashSlideOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-100%);
        visibility: hidden;
    }
}

/* ==================== TEMA ESCURO ==================== */

[data-theme="dark"] .splash-screen,
.dark-theme .splash-screen {
    background: linear-gradient(145deg, #0a1929 0%, #1a3a5c 50%, #0d2137 100%);
}

/* ==================== RESPONSIVO ==================== */

/* Tablets */
@media (min-width: 768px) {
    .splash-logo {
        width: 160px;
        height: 160px;
    }
    
    .splash-title {
        font-size: 64px;
    }
    
    .splash-tagline {
        font-size: 18px;
        max-width: 360px;
    }
    
    .loading-bar {
        width: 280px;
    }
}

/* Mobile pequeno */
@media (max-width: 360px) {
    .splash-logo {
        width: 100px;
        height: 100px;
    }
    
    .splash-title {
        font-size: 40px;
    }
    
    .splash-tagline {
        font-size: 14px;
        max-width: 240px;
    }
    
    .loading-bar {
        width: 160px;
    }
}

/* Modo paisagem em mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .splash-content {
        flex-direction: row;
        gap: 40px;
    }
    
    .splash-logo {
        width: 80px;
        height: 80px;
    }
    
    .splash-title {
        font-size: 36px;
    }
    
    .splash-loading {
        margin-top: 20px;
    }
    
    .splash-footer {
        bottom: 16px;
    }
}

/* ==================== ACESSIBILIDADE ==================== */

/* Reduzir movimento se preferido */
@media (prefers-reduced-motion: reduce) {
    .splash-logo,
    .truck-group,
    .truck-cabin,
    .wheel,
    .road-line,
    .truck-headlight,
    .splash-title,
    .splash-tagline,
    .splash-loading,
    .loading-progress,
    .splash-footer,
    .nav-badge {
        animation: none !important;
    }
    
    .loading-progress {
        width: 50%;
        left: 25%;
    }
    
    .splash-screen.fade-out,
    .splash-screen.slide-out {
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
        animation: none !important;
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    .splash-screen {
        background: #000080;
    }
    
    .splash-title {
        text-shadow: none;
    }
    
    .loading-bar {
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid white;
    }
}