/* =========================================================
   XV AÑOS DE EBOLETH
   02 — MENSAJE DE INVITACIÓN
========================================================= */


/* =========================================================
   SECCIÓN
========================================================= */

.mensaje {

    position: relative;

    min-height: 100svh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding:
        100px 20px;

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(22, 138, 138, .18),
            transparent 40%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(85, 64, 107, .20),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #102c35 0%,
            #173f3b 55%,
            #233f45 100%
        );

}


/* =========================================================
   DECORACIÓN DE FONDO
========================================================= */

.mensaje::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    top: -220px;

    right: -180px;

    border-radius: 50%;

    background:
        rgba(216, 135, 164, .08);

    filter:
        blur(80px);

    pointer-events: none;

}


.mensaje::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    bottom: -200px;

    left: -180px;

    border-radius: 50%;

    background:
        rgba(22, 138, 138, .10);

    filter:
        blur(80px);

    pointer-events: none;

}


/* =========================================================
   CONTENEDOR
========================================================= */

.mensaje-contenido {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 760px;

    text-align: center;

}


/* =========================================================
   ORNAMENTO SUPERIOR
========================================================= */

.mensaje-ornamento {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-bottom: 18px;

    opacity: 0;

}


.mensaje-ornamento::before,
.mensaje-ornamento::after {

    content: "";

    width:
        clamp(45px, 10vw, 100px);

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--dorado),
            transparent
        );

}


.mensaje-ornamento-icono {

    color:
        var(--dorado-claro);

    font-size:
        1.5rem;

    text-shadow:
        0 0 15px
        rgba(213, 180, 92, .5);

}


/* =========================================================
   PEQUEÑO TÍTULO
========================================================= */

.mensaje-overline {

    margin-bottom: 8px;

    color:
        var(--dorado-claro);

    font-size:
        clamp(
            .8rem,
            2vw,
            1rem
        );

    font-weight:
        600;

    letter-spacing:
        .25em;

    text-transform:
        uppercase;

    opacity: 0;

}


/* =========================================================
   TÍTULO
========================================================= */

.mensaje-titulo {

    margin: 0;

    color:
        var(--crema);

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        clamp(
            3.5rem,
            10vw,
            6rem
        );

    font-weight:
        400;

    line-height:
        1;

    text-shadow:

        0 4px 15px
        rgba(0, 0, 0, .35);

    opacity: 0;

}


/* =========================================================
   LÍNEA DECORATIVA
========================================================= */

.mensaje-linea {

    width:
        min(180px, 50vw);

    height: 1px;

    margin:
        22px auto;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--dorado),
            transparent
        );

    opacity: 0;

}


/* =========================================================
   TEXTO PRINCIPAL
========================================================= */

.mensaje-texto {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        rgba(248, 244, 232, .88);

    font-size:
        clamp(
            1.05rem,
            2.5vw,
            1.35rem
        );

    line-height:
        1.7;

    letter-spacing:
        .015em;

    text-shadow:
        0 2px 8px
        rgba(0, 0, 0, .3);

    opacity: 0;

}


/* =========================================================
   FRASE DESTACADA
========================================================= */

.mensaje-frase {

    display:
        block;

    margin:
        25px 0;

    color:
        var(--rosa);

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        clamp(
            2.5rem,
            7vw,
            4rem
        );

    line-height:
        1;

    text-shadow:
        0 3px 15px
        rgba(0, 0, 0, .35);

    opacity: 0;

}


/* =========================================================
   FIRMA
========================================================= */

.mensaje-firma {

    margin-top:
        20px;

    color:
        var(--dorado-claro);

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        clamp(
            2.3rem,
            6vw,
            3.5rem
        );

    opacity: 0;

}


/* =========================================================
   DECORACIÓN INFERIOR
========================================================= */

.mensaje-decoracion {

    margin-top:
        30px;

    color:
        var(--dorado);

    font-size:
        1.3rem;

    letter-spacing:
        .5em;

    opacity: 0;

}


/* =========================================================
   ESTADO VISIBLE
========================================================= */

.mensaje.visible .mensaje-ornamento {

    animation:
        aparecer
        1s
        .1s
        forwards;

}


.mensaje.visible .mensaje-overline {

    animation:
        aparecerArriba
        1s
        .3s
        forwards;

}


.mensaje.visible .mensaje-titulo {

    animation:
        aparecerArriba
        1.2s
        .5s
        forwards;

}


.mensaje.visible .mensaje-linea {

    animation:
        expandirLinea
        1s
        .9s
        forwards;

}


.mensaje.visible .mensaje-texto {

    animation:
        aparecerArriba
        1.2s
        1.1s
        forwards;

}


.mensaje.visible .mensaje-frase {

    animation:
        aparecerArriba
        1.2s
        1.5s
        forwards;

}


.mensaje.visible .mensaje-firma {

    animation:
        aparecerArriba
        1.2s
        1.9s
        forwards;

}


.mensaje.visible .mensaje-decoracion {

    animation:
        aparecer
        1s
        2.2s
        forwards;

}


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

@keyframes expandirLinea {

    from {

        opacity: 0;

        transform:
            scaleX(0);

    }

    to {

        opacity: 1;

        transform:
            scaleX(1);

    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 576px) {

    .mensaje {

        min-height:
            100svh;

        padding:
            90px 20px;

    }


    .mensaje-texto {

        line-height:
            1.6;

    }


    .mensaje-ornamento {

        gap:
            8px;

    }


    .mensaje-ornamento::before,
    .mensaje-ornamento::after {

        width:
            45px;

    }

}


/* =========================================================
   REDUCIR MOVIMIENTO
========================================================= */

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

    .mensaje-ornamento,
    .mensaje-overline,
    .mensaje-titulo,
    .mensaje-linea,
    .mensaje-texto,
    .mensaje-frase,
    .mensaje-firma,
    .mensaje-decoracion {

        opacity:
            1;

        animation:
            none;

    }

}