/* ================================= */
/* LOADER CINEMATICO */
/* ================================= */

#cinematic-loader{

    position:fixed;
    inset:0;

    background:#000;

    overflow:hidden;

    z-index:999999;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:
    opacity 1s ease,
    visibility 1s ease;
}

/* ================================= */
/* FONDO */
/* ================================= */

.bg{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(255,0,200,.12),
    rgba(0,200,255,.08),
    #000 70%);

    opacity:0;

    animation:bgAppear 2s forwards;
}

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

.logo-wrapper{

    position:relative;
    z-index:10;
}

.cinema-logo{

    width:min(75vw,700px);

    opacity:0;

    transform:
    scale(.5);

    filter:
    drop-shadow(0 0 15px #00ffff)
    drop-shadow(0 0 35px #ff00ff);

    animation:
    logoIntro 2s 2s forwards,
    logoGlitch 2s infinite 4s,
    logoPulse 3s infinite 4s;
}

/* ================================= */
/* HUMO */
/* ================================= */

.smoke{

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    filter:blur(120px);

    opacity:0;
}

.smoke-left{

    left:-250px;
    bottom:-200px;

    background:#00aaff;

    animation:
    smokeAppear 2s 1s forwards,
    smokeMove1 8s infinite alternate;
}

.smoke-right{

    right:-250px;
    top:-200px;

    background:#ff00aa;

    animation:
    smokeAppear 2s 1s forwards,
    smokeMove2 10s infinite alternate;
}

/* ================================= */
/* SCANLINES */
/* ================================= */

.scanlines{

    position:absolute;
    inset:0;

    opacity:0;

    background:
    repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.03),
        rgba(255,255,255,.03) 1px,
        transparent 2px,
        transparent 4px
    );

    animation:
    scanAppear 1s 4s forwards,
    scanMove .3s linear infinite;
}

/* ================================= */
/* FLASH */
/* ================================= */

.flash{

    position:absolute;
    inset:0;

    background:white;

    opacity:0;

    z-index:20;
}

/* ================================= */
/* PORCENTAJE */
/* ================================= */

.loader-percent{

    position:absolute;

    bottom:60px;

    color:white;

    letter-spacing:5px;

    font-size:20px;

    z-index:30;
}

/* ================================= */
/* PARTICULAS */
/* ================================= */

#particles{

    position:absolute;
    inset:0;
}

.particle{

    position:absolute;

    border-radius:50%;

    opacity:0;

    animation:
    particleMove linear infinite;
}

/* ================================= */
/* ANIMACIONES */
/* ================================= */

@keyframes bgAppear{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

@keyframes smokeAppear{

    from{
        opacity:0;
    }

    to{
        opacity:.2;
    }
}

@keyframes logoIntro{

    0%{

        opacity:0;

        transform:
        scale(.3)
        rotateX(90deg);

        filter:blur(30px);
    }

    100%{

        opacity:1;

        transform:
        scale(1)
        rotateX(0);

        filter:blur(0);
    }
}

@keyframes logoGlitch{

    0%{
        transform:translate(0);
    }

    20%{
        transform:translate(-2px,2px);
    }

    40%{
        transform:translate(2px,-2px);
    }

    60%{
        transform:translate(-1px,1px);
    }

    80%{
        transform:translate(1px,-1px);
    }

    100%{
        transform:translate(0);
    }
}

@keyframes logoPulse{

    0%{
        filter:
        drop-shadow(0 0 15px #00ffff)
        drop-shadow(0 0 35px #ff00ff);
    }

    50%{
        filter:
        drop-shadow(0 0 30px #00ffff)
        drop-shadow(0 0 70px #ff00ff);
    }

    100%{
        filter:
        drop-shadow(0 0 15px #00ffff)
        drop-shadow(0 0 35px #ff00ff);
    }
}

@keyframes scanAppear{

    to{
        opacity:1;
    }
}

@keyframes scanMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(6px);
    }
}

@keyframes smokeMove1{

    to{
        transform:
        scale(1.3)
        translateY(-50px);
    }
}

@keyframes smokeMove2{

    to{
        transform:
        scale(1.2)
        translateY(50px);
    }
}

@keyframes particleMove{

    from{

        transform:
        translateY(100vh)
        scale(0);

        opacity:0;
    }

    20%{
        opacity:1;
    }

    to{

        transform:
        translateY(-120vh)
        scale(1.5);

        opacity:0;
    }
}

/* ================================= */
/* TRANSICION FINAL */
/* ================================= */

.loader-end{

    animation:
    cinematicExit 1s forwards;
}

@keyframes cinematicExit{

    0%{

        opacity:1;
        transform:scale(1);
    }

    100%{

        opacity:0;

        transform:
        scale(1.5);

        filter:blur(20px);
    }
}