/* =========================================================
   PROJECT SHADAI V2
   ANIMACIONES
   ========================================================= */


/* ---------------------------------------------------------
   Entrada general
--------------------------------------------------------- */

.hero {
    animation:
        sceneEntrance 1.8s ease both;
}

@keyframes sceneEntrance {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   Libro flotando
--------------------------------------------------------- */

.book-wrapper {

    animation:
        bookFloat 5s ease-in-out infinite;
}

@keyframes bookFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* ---------------------------------------------------------
   Luna
--------------------------------------------------------- */

.moon {

    animation:
        moonGlow 5s ease-in-out infinite;
}

@keyframes moonGlow {

    0%,
    100% {

        box-shadow:
            0 0 25px rgba(255,255,255,.7),
            0 0 70px rgba(220,240,255,.5);
    }

    50% {

        box-shadow:
            0 0 35px rgba(255,255,255,.9),
            0 0 100px rgba(220,240,255,.75);
    }
}


/* ---------------------------------------------------------
   Niebla
--------------------------------------------------------- */

.mist-one {

    animation:
        mistMoveOne 18s ease-in-out infinite alternate;
}

.mist-two {

    animation:
        mistMoveTwo 22s ease-in-out infinite alternate;
}

@keyframes mistMoveOne {

    from {
        transform: translateX(-4%);
    }

    to {
        transform: translateX(5%);
    }
}

@keyframes mistMoveTwo {

    from {
        transform: translateX(5%);
    }

    to {
        transform: translateX(-6%);
    }
}


/* ---------------------------------------------------------
   Luciérnagas
--------------------------------------------------------- */

.firefly {

    animation:
        fireflyGlow 3s ease-in-out infinite,
        fireflyMove 8s ease-in-out infinite alternate;
}

@keyframes fireflyGlow {

    0%,
    100% {
        opacity: .15;
    }

    50% {
        opacity: 1;
    }
}

@keyframes fireflyMove {

    from {
        transform:
            translate(0,0)
            scale(.8);
    }

    to {
        transform:
            translate(25px,-35px)
            scale(1.25);
    }
}


/* ---------------------------------------------------------
   Llave
--------------------------------------------------------- */

.key-icon {

    animation:
        keyGlow 2.6s ease-in-out infinite;
}

@keyframes keyGlow {

    0%,
    100% {

        transform:
            rotate(-25deg)
            scale(1);

        text-shadow:
            0 0 8px rgba(255,255,255,.5);
    }

    50% {

        transform:
            rotate(-18deg)
            scale(1.08);

        text-shadow:
            0 0 17px rgba(255,255,255,.95);
    }
}


/* ---------------------------------------------------------
   Al pulsar abrir
--------------------------------------------------------- */

.book.opening {

    animation:
        bookOpening .95s ease forwards;
}

@keyframes bookOpening {

    0% {

        transform:
            scale(1)
            rotateY(0deg);
    }

    40% {

        transform:
            scale(1.04)
            rotateY(-6deg);
    }

    100% {

        transform:
            scale(1.08)
            rotateY(-15deg);
    }
}


/* Luz de transición */

.transition-light.active {

    visibility: visible;

    animation:
        transitionFlash 1.4s ease forwards;
}

@keyframes transitionFlash {

    0% {
        opacity: 0;
    }

    55% {
        opacity: .80;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}


/* ---------------------------------------------------------
   Accesibilidad
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;
    }

}