/**
 * Splash Page Styles
 * Animated colored stripes - matches Flutter splash.dart animation
 */

#splash-page {
    position: absolute; top: 0; left: 0;
    width: 1920px; height: 1080px;
    overflow: hidden;
    background: var(--brand-gradient);
}

/* Color stripes that slide in from left */
.splash-stripe {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    right: 100%; /* starts off-screen right */
    transition: right 0.2s ease;
}

.splash-stripe-0 { z-index: 1; }
.splash-stripe-1 { z-index: 2; }
.splash-stripe-2 { z-index: 3; }
.splash-stripe-3 { z-index: 4; }
.splash-stripe-4 { z-index: 5; }
.splash-stripe-5 { z-index: 6; }
.splash-stripe-6 { z-index: 7; }

/* Center brand panel — fills the entire screen in brand color once the
 * stripe animation completes (matches Flutter _p_9 expanding to left:0,
 * right:0). The logo + divider + boot text are centered inside it. */
#splash-center {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 20;
    opacity: 0;
    background: var(--brand-gradient);
    transition: opacity 0.3s ease;
    pointer-events: none;
}
#splash-center.visible { opacity: 1; }

.splash-center-content {
    display: flex; align-items: center; gap: 40px;
    padding: 60px 80px;
}

#splash-logo {
    max-width: 450px; max-height: 150px;   /* ~1.5x for the 1080 canvas */
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease;
}
#splash-logo.visible { opacity: 1; }

#splash-divider {
    width: 1px; height: 150px;
    background: rgba(255,255,255,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}
#splash-divider.visible { opacity: 1; }

#splash-boot-text {
    font-family: var(--font-brand);
    font-size: 32px; font-weight: 900;
    color: var(--text-primary);
    white-space: pre-line;
    max-width: 400px;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
#splash-boot-text.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Telco/Redmi composition. Kept behind the flavor attribute so the existing
   Nexora animation remains byte-for-byte in behavior and appearance. */
.splash-telco-ambient,
#splash-wordmark,
#splash-subtitle,
.splash-progress { display: none; }

html[data-brand="telco"] #splash-page {
    background:
        radial-gradient(circle at 50% 42%, rgba(122,63,242,.16) 0, transparent 34%),
        radial-gradient(circle at 50% 50%, var(--brand-navy) 0, var(--brand-navy2) 100%);
}
html[data-brand="telco"] .splash-stripe { display: none; }
html[data-brand="telco"] .splash-telco-ambient {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    width: 720px; height: 720px;
    border: 2px solid rgba(247,147,30,.18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 90px rgba(122,63,242,.18), inset 0 0 90px rgba(247,147,30,.08);
}
html[data-brand="telco"] #splash-center {
    background: transparent;
}
/* Centrado a prueba del Chromium viejo de webOS: NO usar inset:0 (no soportado,
   deja #splash-center en 0x0). Posición explícita 960/540 + translate -50%. */
html[data-brand="telco"] .splash-center-content {
    position: absolute;
    left: 960px; top: 540px;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: auto;
    padding: 0;
}
/* El logo (lockup Zorro + "telco") ya trae el wordmark, así que se muestra
   centrado y el #splash-wordmark de texto se oculta para no duplicar "telco". */
html[data-brand="telco"] #splash-logo {
    width: auto;
    height: 420px;
    max-width: 1280px;
    max-height: 48vh;
    filter: drop-shadow(0 22px 54px rgba(0,0,0,.42));
}
html[data-brand="telco"] #splash-divider,
html[data-brand="telco"] #splash-boot-text,
html[data-brand="telco"] #splash-wordmark { display: none; }
html[data-brand="telco"] #splash-subtitle,
html[data-brand="telco"] .splash-progress { display: block; }
html[data-brand="telco"] #splash-wordmark {
    font-family: var(--font-brand);
    font-size: 72px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 12px;
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}
html[data-brand="telco"] #splash-subtitle {
    margin-top: 12px;
    font-family: var(--font);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 1.1px;
    color: var(--brand-muted);
    opacity: 0;
    transition: opacity .5s ease .08s;
}
html[data-brand="telco"] #splash-wordmark.visible,
html[data-brand="telco"] #splash-subtitle.visible { opacity: 1; transform: translateY(0); }
html[data-brand="telco"] .splash-progress {
    width: 520px;
    height: 8px;
    margin-top: 28px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}
html[data-brand="telco"] .splash-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-amber), var(--brand-accent), var(--brand-magenta));
}
html[data-brand="telco"] #splash-center.visible .splash-progress-bar {
    animation: telco-splash-progress 4.55s linear forwards;
}
@keyframes telco-splash-progress { to { width: 100%; } }

/* Chrome 79 flex-gap fallback. */
html.no-flex-gap .splash-center-content > * + * { margin-left: 40px; }