/* ==========================================================================
 * ÍNDICE DE SECCIONES (bienvenida.css)
 * ==========================================================================
 * 1. VARIABLES (Custom Properties)
 * 2. RESET & BASE
 * 3. IMAGE DOORS (Recorte perfecto con Clip-Path)
 * 4. LOGO & TEXT ANIMATION
 * ==========================================================================
 */

/* ========================================================================== */
/* 1. VARIABLES (Custom Properties) */
/* ========================================================================== */
:root {
    --bg-color-main: #000957; /* Fondo azul que se mostrará al abrir las puertas */
    --text-color-brand: #28CC43;
    --text-color-white: #ffffff;
    --font-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-title: 'DM Sans', sans-serif;

    /* Capas (z-index) */
    --z-logo: 5;
    --z-doors: 10;
}

/* ========================================================================== */
/* 2. RESET & BASE */
/* ========================================================================== */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--bg-color-main);
    font-family: var(--font-base);
}

/* ========================================================================== */
/* 3. IMAGE DOORS (RECORTES PERFECTOS DE LA IMAGEN DE FONDO) */
/* ========================================================================== */
.image-doors-container {
    position: fixed;
    top: 0; left: 0; width: 100vw;
    height: 100vh; height: 100dvh;
    z-index: var(--z-doors);
}

.image-door {
    position: absolute;
    top: 0; left: 0; width: 100vw;
    height: 100vh; height: 100dvh;
    /* MEJORA: Duración exacta de 0.5 segundos para la apertura */
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    will-change: transform;
}

/* Cortamos la imagen por la mitad exacta */
.door-left  { clip-path: inset(0 50% 0 0); }
.door-right { clip-path: inset(0 0 0 50%); }

.split-image img {
    width: 100vw;
    height: 100vh; height: 100dvh;
    object-fit: cover; /* Mantiene la proporción sin deformarse */
    user-select: none; /* Evita que el usuario arrastre la imagen */
    -webkit-user-drag: none;
}

/* Clases dinámicas añadidas por JS para abrir las puertas */
.image-doors-container.open .door-left  { transform: translateX(-55vw); }
.image-doors-container.open .door-right { transform: translateX(55vw); }

/* ========================================================================== */
/* 4. LOGO & TEXT ANIMATION */
/* ========================================================================== */
.logo-container {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0; z-index: var(--z-logo); pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}

.welcome-title {
    color: var(--text-color-brand); font-size: 5rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 8px; margin: 0;
    font-family: var(--font-title); white-space: nowrap;
    text-shadow: 0 0 20px rgba(40, 204, 67, 0.6), 0 0 40px rgba(40, 204, 67, 0.3);
}

.logo-container img { width: 450px; max-width: 80vw; }

/* MEJORA: Animación rápida de aparición (0.4s) para que pueda verse el segundo completo que pides */
.logo-container.animating {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease-out;
    transform: translate(-50%, -50%) scale(1); opacity: 1;
    will-change: transform, opacity;
}

/* MEJORA: Desvanecimiento rápido (0.4s) para ir rápido al home */
.logo-container.fading {
    transition: opacity 0.4s ease-in, filter 0.4s ease-in;
    opacity: 0; filter: blur(10px);
}

@media (max-width: 768px) {
    .welcome-title { font-size: 2.5rem; letter-spacing: 4px; }
    .logo-container img { width: 280px; }
}