/* ═══════════════════════════════════════════════════════════════════════════
   Loading Screen - Animação CSS pura
   Replica a animação Flutter do LoaderScreen
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --loader-primary: #0BA284;
    --loader-primary-light: rgba(11, 162, 132, 0.6);
    --loader-size: 140px;
    --loader-logo-size: 56px;
}

.loading {
    width: 100%;
    height: 100%;
    min-height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    transition: opacity 400ms ease-out;
    opacity: 1;
}

.loading.fade-out {
    opacity: 0;
}

@font-face {
    font-family: 'Roboto';
    src: url('../assets/roboto/static/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Container principal do loader */
.loader-container {
    position: relative;
    width: var(--loader-size);
    height: var(--loader-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Anéis giratórios */
.loader-ring {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    border-color: transparent;
}

/* Anel externo - rotação anti-horária */
.loader-ring-outer {
    width: var(--loader-size);
    height: var(--loader-size);
    border-width: 2px;
    border-top-color: rgba(11, 162, 132, 0.3);
    border-right-color: rgba(11, 162, 132, 0.2);
    animation: spin-reverse 4s linear infinite;
}

/* Anel interno - rotação horária */
.loader-ring-inner {
    width: 112px;
    height: 112px;
    border-width: 4px;
    border-top-color: var(--loader-primary);
    border-right-color: var(--loader-primary-light);
    animation: spin 3s linear infinite;
}

/* Container do logo */
.loader-logo-container {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: glow-pulse 2s ease-in-out infinite;
}

/* Fundo com glow */
.loader-logo-bg {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: rgba(11, 162, 132, 0.1);
}

/* Logo */
.loader-logo {
    width: var(--loader-logo-size);
    height: var(--loader-logo-size);
    object-fit: contain;
    animation: pulse 1.5s ease-in-out infinite;
    z-index: 1;
}

/* Texto de loading */
.loading-text {
    margin-top: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #374151;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    align-items: baseline;
}

/* Pontos animados */
.loading-dots {
    display: inline-flex;
    margin-left: 2px;
}

.loading-dots span {
    animation: bounce-dot 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }

/* Subtexto */
.loading-subtitle {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #9CA3AF;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Animações
   ═══════════════════════════════════════════════════════════════════════════ */

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

@keyframes spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(0.95); }
    50% { transform: scale(1.05); }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(11, 162, 132, 0.2),
            0 0 30px rgba(11, 162, 132, 0.1);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(11, 162, 132, 0.2),
            0 0 60px rgba(11, 162, 132, 0.1);
    }
}

@keyframes bounce-dot {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}