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

/* Entrada de la introducción */

.intro{
    animation:introFadeIn .8s ease both;
}

.envelope-scene{
    animation:sceneEntrance 1s cubic-bezier(.22,.8,.22,1) both;
}

.envelope:not(.is-open){
    animation:envelopeFloat 4.8s ease-in-out 1s infinite;
}

.intro-message{
    animation:messagePulse 2.4s ease-in-out 1.2s infinite;
}

/* Brillo sutil del sello */

.seal::after{
    content:"";

    position:absolute;
    inset:9px;

    border-radius:50%;

    background:
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255,255,255,.22) 45%,
            transparent 65%
        );

    transform:translateX(-140%) rotate(8deg);

    pointer-events:none;

    animation:sealShine 3.8s ease-in-out 1.8s infinite;
}

/* Estado de ruptura */

.seal.is-breaking{
    animation:sealBreak .48s ease forwards;
}

/* Animaciones principales */

@keyframes introFadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes sceneEntrance{

    from{
        opacity:0;
        transform:translateY(26px) scale(.97);
    }

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

}

@keyframes envelopeFloat{

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

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

}

@keyframes messagePulse{

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

    50%{
        opacity:1;
        transform:translateY(-2px);
    }

}

@keyframes sealShine{

    0%,
    64%{
        transform:translateX(-140%) rotate(8deg);
        opacity:0;
    }

    72%{
        opacity:1;
    }

    88%{
        transform:translateX(140%) rotate(8deg);
        opacity:0;
    }

    100%{
        transform:translateX(140%) rotate(8deg);
        opacity:0;
    }

}

@keyframes sealBreak{

    0%{
        opacity:1;
        transform:translate(-50%,-50%) scale(1);
    }

    38%{
        transform:translate(-50%,-50%) scale(1.1) rotate(-2deg);
    }

    68%{
        transform:translate(-50%,-50%) scale(.92) rotate(2deg);
    }

    100%{
        opacity:0;
        transform:translate(-50%,-35%) scale(.72);
    }

}

/* Indicador de desplazamiento */

@keyframes scrollBounce{

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

    50%{
        transform:translateY(7px);
        opacity:1;
    }

}

/* Aparición del Hero tras cerrar la introducción */

.hero{
    transition:
        filter 1s ease,
        opacity 1s ease,
        transform 1.2s cubic-bezier(.22,.8,.22,1);
}

body.intro-active .hero{
    filter:blur(10px);
    opacity:.45;
    transform:scale(1.025);
}

body.intro-complete .hero{
    filter:none;
    opacity:1;
    transform:scale(1);
}

/* Accesibilidad */

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

    .intro,
    .envelope-scene,
    .envelope,
    .intro-message,
    .seal::after,
    .seal.is-breaking,
    .scroll-indicator svg{
        animation:none !important;
    }

}

@keyframes sealFallLeft{
    0%{
        transform:translate(0,0) rotate(0);
        opacity:1;
    }

    35%{
        transform:translate(-12px,8px) rotate(-15deg);
        opacity:1;
    }

    100%{
        transform:translate(-48px,125px) rotate(-78deg);
        opacity:0;
    }
}

@keyframes sealFallRight{
    0%{
        transform:translate(0,0) rotate(0);
        opacity:1;
    }

    35%{
        transform:translate(12px,8px) rotate(15deg);
        opacity:1;
    }

    100%{
        transform:translate(48px,125px) rotate(78deg);
        opacity:0;
    }
}

@keyframes sealEmblemFade{
    to{
        opacity:0;
        transform:scale(.92);
    }
}

/*=========================================================
    HERO
=========================================================*/

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
    HERO EDITORIAL
=========================================================*/

@keyframes heroBackgroundMove{
    0%{
        transform:scale(1.08) translate3d(-.7%, -.4%, 0);
    }

    100%{
        transform:scale(1.13) translate3d(.7%, .5%, 0);
    }
}

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

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

/*=========================================================
    HERO LIGHT
=========================================================*/

@keyframes heroLight{

    0%{

        transform:
            translate(0,0)
            scale(1);

        opacity:.9;

    }

    100%{

        transform:
            translate(-60px,40px)
            scale(1.18);

        opacity:.65;

    }

}