/* splash-screen.css */

#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffa2d7;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: opacity 0.5s ease-out;
}

.splash-hidden #splash-screen {
    display: none !important;
}

.pattern-overlay {
    position: absolute;
    top: -150px; 
    left: 0;
    width: 300%; 
    height: 300%;

    background-image: 
        url('../img/huella-patern.svg'),
        url('../img/huella-patern.svg'),
        url('../img/huella-patern.svg');

    background-repeat: repeat;

    /* Tamaños pequeños para huellas */
    background-size: 
        60px 120px,
        80px 160px,
        50px 140px;

    /* OFFSET DIFERENTE EN CADA CAPA = distribución natural */
    background-position: 
        0 0,
        40px 80px,
        100px 40px;

    filter: brightness(0) invert(1);
    opacity: 0.12;

    animation: moveFootprintsDiagonal 25s linear infinite;
    pointer-events: none;
}

@keyframes moveFootprintsDiagonal {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-500px, 500px);
    }
}


.intro-circle {
    position: relative;
    width: 315px;
    height: 315px;
    border-radius: 50%;
    z-index: 2;
    overflow: hidden; /* Mantiene las capas dentro del círculo */
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
}

.circle-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Todas ocultas por defecto */
    /* 3.2s es el tiempo total (8 imágenes * 0.4s) */
    animation: fadeCycle 3.2s infinite; 
}

/* Cada imagen aparece 0.25s después de la anterior */
.layer-1 { animation-delay: 0s; }
.layer-2 { animation-delay: 0.25s; }
.layer-3 { animation-delay: 0.5s; }
.layer-4 { animation-delay: 0.75s; }
.layer-5 { animation-delay: 1.0s; }
.layer-6 { animation-delay: 1.25s; }
.layer-7 { animation-delay: 1.5s; }
.layer-8 { animation-delay: 1.75s; }

@keyframes fadeCycle {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    9.375% { opacity: 1; }  /* Visible ~0.25s */
    14.375% { opacity: 0; }
    100% { opacity: 0; }
}