/*==================================================
  XV REGINA ISABELLA
  INDEX.CSS
  Página del Sobre
==================================================*/

/*==========================================
RESET
==========================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    width:100%;
    height:100vh;
    overflow:hidden;

    font-family:'Montserrat',sans-serif;

    background:linear-gradient(
        180deg,
        #fdf8ff 0%,
        #f7eefb 40%,
        #efe0f7 100%
    );

    color:#4d4154;

    position:relative;

}

/*==========================================
VARIABLES LOCALES
==========================================*/

:root{

    --lavanda:#c8a2d6;
    --lavanda-claro:#eadcf4;
    --marfil:#fffdf8;
    --oro:#d4af37;
    --gris:#6b6270;
    --sombra:rgba(0,0,0,.18);

}

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

.background{

    position:fixed;

    inset:0;

    z-index:-20;

    overflow:hidden;

}

.background img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:

        brightness(.75)

        blur(1px)

        saturate(1.05);

    transform:scale(1.05);

}

.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(255,255,255,.40),

        rgba(255,255,255,.55)

    );

}

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

#loader{

    position:fixed;

    inset:0;

    background:

    linear-gradient(

        180deg,

        #fefbfd,

        #f5edf9

    );

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:.8s;

}

#loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-content{

    text-align:center;

}

.loader-content img{

    width:85px;

    margin-bottom:20px;

}

.loader-content h2{

    font-family:'Great Vibes',cursive;

    font-size:55px;

    color:var(--oro);

}

.loader-content p{

    margin-top:10px;

    color:#777;

    letter-spacing:2px;

}

.loader-bar{

    width:220px;

    height:8px;

    background:#ece5ef;

    border-radius:30px;

    overflow:hidden;

    margin:35px auto 0;

}

.loader-bar span{

    display:block;

    width:0%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        var(--oro),

        var(--lavanda)

    );

    animation:loading 2.2s linear forwards;

}

@keyframes loading{

    to{

        width:100%;

    }

}

/*==========================================
PARTÍCULAS
==========================================*/

#particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-10;

}

/*==========================================
PÉTALOS
==========================================*/

#petals{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:-5;

}

/*==========================================
BRILLOS
==========================================*/

#sparkles{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-4;

}

/*==========================================
FLORES
==========================================*/

.flower{

    position:fixed;

    width:280px;

    opacity:.95;

    z-index:3;

    animation:floatFlower 7s ease-in-out infinite;

}

.flower-left{

    top:0;

    left:0;

}

.flower-right{

    bottom:0;

    right:0;

    transform:scaleX(-1);

}

/*==========================================
GLICINAS
==========================================*/

.wisteria{

    position:fixed;

    top:0;

    width:240px;

    opacity:.85;

    z-index:2;

    animation:sway 6s ease-in-out infinite;

}

.wisteria-left{

    left:0;

}

.wisteria-right{

    right:0;

    transform:scaleX(-1);

}

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

#opening{

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.cover{

    width:100%;

    display:flex;

    justify-content:center;

}

.cover-content{

    width:min(92%,620px);

    background:

    rgba(255,255,255,.42);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.55);

    border-radius:28px;

    padding:45px;

    text-align:center;

    box-shadow:

    0 15px 50px rgba(0,0,0,.15);

}

/*==========================================
TEXTOS
==========================================*/

.subtitle{

    display:block;

    color:var(--oro);

    font-family:'Cinzel',serif;

    letter-spacing:4px;

    margin-bottom:15px;

}

.cover-content h1{

    font-family:'Great Vibes',cursive;

    font-size:78px;

    color:#8b5fa9;

    line-height:1;

}

.date{

    margin-top:15px;

    color:#666;

    letter-spacing:2px;

    font-size:18px;

}

/*==================================================
  INDEX.CSS - PARTE 2
  Sobre, carta, sello, botones y animaciones
==================================================*/

/*==========================================
SOBRE
==========================================*/

#envelope{

    position:relative;

    width:360px;

    height:240px;

    margin:40px auto 30px;

    perspective:1200px;

    cursor:pointer;

    filter:drop-shadow(0 18px 22px rgba(65,42,75,.25));

}

/* Parte posterior del sobre */

.envelope-bottom{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:190px;

    background:

        linear-gradient(
            145deg,
            #f3e8f8 0%,
            #d8bde8 55%,
            #caa8dc 100%
        );

    border-radius:8px 8px 18px 18px;

    overflow:hidden;

    z-index:4;

}

/* Solapa izquierda */

.envelope-bottom::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:0;

    border-top:95px solid transparent;

    border-bottom:95px solid #e6d4ef;

    border-right:180px solid transparent;

}

/* Solapa derecha */

.envelope-bottom::after{

    content:"";

    position:absolute;

    right:0;

    bottom:0;

    width:0;

    height:0;

    border-top:95px solid transparent;

    border-bottom:95px solid #d8bee6;

    border-left:180px solid transparent;

}

/* Tapa superior */

.envelope-top{

    position:absolute;

    top:50px;

    left:0;

    width:0;

    height:0;

    border-left:180px solid transparent;

    border-right:180px solid transparent;

    border-top:125px solid #eadcf2;

    transform-origin:top center;

    transform:rotateX(0deg);

    transition:

        transform 1s cubic-bezier(.65,.05,.36,1),

        z-index .1s linear .45s;

    z-index:8;

    filter:drop-shadow(0 4px 3px rgba(90,55,105,.12));

}

/*==========================================
CARTA
==========================================*/

.letter{

    position:absolute;

    left:50%;

    bottom:22px;

    width:88%;

    min-height:190px;

    padding:24px 25px;

    background:

        linear-gradient(
            180deg,
            #fffefb 0%,
            #fdf7ff 100%
        );

    border:1px solid rgba(212,175,55,.45);

    border-radius:10px;

    transform:translateX(-50%) translateY(10px);

    transition:

        transform 1.2s cubic-bezier(.22,.61,.36,1) .45s,

        box-shadow .6s ease;

    z-index:3;

    overflow:hidden;

}

.letter::before{

    content:"";

    position:absolute;

    inset:9px;

    border:1px solid rgba(212,175,55,.35);

    border-radius:7px;

    pointer-events:none;

}

.letter::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top left,
            rgba(207,172,226,.18),
            transparent 38%
        );

    pointer-events:none;

}

.letter img{

    width:48px;

    margin:0 auto 8px;

    position:relative;

    z-index:2;

}

.letter h2{

    position:relative;

    z-index:2;

    font-family:'Cinzel',serif;

    color:#8b5fa9;

    font-size:17px;

    line-height:1.35;

    letter-spacing:.5px;

}

.letter p{

    position:relative;

    z-index:2;

    margin-top:9px;

    font-family:'Montserrat',sans-serif;

    font-size:11px;

    line-height:1.55;

    color:#6c6170;

}

.letter small{

    position:relative;

    z-index:2;

    display:block;

    margin-top:10px;

    color:#b08a32;

    font-family:'Montserrat',sans-serif;

    font-size:9px;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*==========================================
SELLO
==========================================*/

#seal{

    position:absolute;

    left:50%;

    top:125px;

    width:66px;

    height:66px;

    transform:translateX(-50%);

    border:none;

    border-radius:50%;

    background:

        radial-gradient(
            circle at 35% 30%,
            #f2d77e 0%,
            #d5ab39 38%,
            #ad7e19 100%
        );

    color:#fff7d2;

    font-size:23px;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:12;

    cursor:pointer;

    box-shadow:

        0 6px 15px rgba(75,48,25,.30),

        inset 0 2px 4px rgba(255,255,255,.45),

        inset 0 -3px 5px rgba(105,69,7,.28);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        opacity .45s ease;

}

#seal::before{

    content:"";

    position:absolute;

    inset:5px;

    border:1px solid rgba(255,249,210,.75);

    border-radius:50%;

}

#seal:hover{

    transform:translateX(-50%) scale(1.08);

    box-shadow:

        0 0 28px rgba(212,175,55,.70),

        inset 0 2px 4px rgba(255,255,255,.45);

}

#seal:focus-visible{

    outline:3px solid rgba(139,95,169,.35);

    outline-offset:5px;

}

/*==========================================
SOBRE ABIERTO
==========================================*/

#envelope.open{

    cursor:default;

}

#envelope.open .envelope-top{

    transform:rotateX(180deg);

    z-index:1;

}

#envelope.open .letter{

    transform:translateX(-50%) translateY(-135px);

    z-index:7;

    box-shadow:0 18px 35px rgba(78,48,88,.22);

}

#envelope.open #seal{

    transform:translateX(-50%) scale(.25) rotate(25deg);

    opacity:0;

    pointer-events:none;

}

/*==========================================
BOTÓN ABRIR
==========================================*/

.btn-open{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:215px;

    padding:15px 28px;

    border:1px solid rgba(255,255,255,.7);

    border-radius:50px;

    background:

        linear-gradient(
            135deg,
            #9f72bb 0%,
            #7d5099 100%
        );

    color:#fff;

    font-family:'Montserrat',sans-serif;

    font-size:13px;

    font-weight:500;

    letter-spacing:1px;

    cursor:pointer;

    box-shadow:

        0 10px 24px rgba(91,53,111,.25),

        inset 0 1px 0 rgba(255,255,255,.25);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.btn-open:hover{

    transform:translateY(-4px);

    background:

        linear-gradient(
            135deg,
            #ad82c4 0%,
            #80509f 100%
        );

    box-shadow:

        0 14px 30px rgba(91,53,111,.35),

        0 0 20px rgba(211,177,228,.35);

}

.btn-open:active{

    transform:translateY(-1px);

}

.instruction{

    margin-top:15px;

    font-family:'Montserrat',sans-serif;

    font-size:10px;

    letter-spacing:1.3px;

    color:#786c7d;

    text-transform:uppercase;

}

/*==========================================
BOTÓN DE MÚSICA
==========================================*/

.music-button{

    position:fixed;

    right:22px;

    bottom:22px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(236,219,245,.92)
        );

    color:#8b5fa9;

    font-size:18px;

    cursor:pointer;

    z-index:50;

    box-shadow:

        0 8px 22px rgba(71,44,81,.22),

        inset 0 1px 0 rgba(255,255,255,.85);

    backdrop-filter:blur(10px);

    transition:

        transform .35s ease,

        color .35s ease,

        box-shadow .35s ease;

}

.music-button:hover{

    transform:scale(1.08);

    color:#c19535;

    box-shadow:0 0 24px rgba(212,175,55,.40);

}

.music-button.playing{

    animation:musicPulse 1.8s ease-in-out infinite;

}

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

@keyframes floatFlower{

    0%,
    100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-10px) rotate(1.5deg);

    }

}

@keyframes sway{

    0%,
    100%{

        transform:rotate(-1.5deg);

    }

    50%{

        transform:rotate(1.5deg);

    }

}

@keyframes musicPulse{

    0%,
    100%{

        box-shadow:

            0 8px 22px rgba(71,44,81,.22),

            0 0 0 0 rgba(139,95,169,.25);

    }

    50%{

        box-shadow:

            0 8px 22px rgba(71,44,81,.22),

            0 0 0 10px rgba(139,95,169,0);

    }

}

.cover-content{

    animation:coverEntrance 1.2s ease both;

}

@keyframes coverEntrance{

    from{

        opacity:0;

        transform:translateY(25px) scale(.97);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*==========================================
TRANSICIÓN HACIA LA INVITACIÓN
==========================================*/

body.fade-out{

    pointer-events:none;

}

body.fade-out .cover-content{

    animation:coverExit 1.8s ease forwards;

}

body.fade-out .background{

    animation:backgroundExit 2s ease forwards;

}

body.fade-out .flower,
body.fade-out .wisteria{

    animation:decorExit 1.8s ease forwards;

}

@keyframes coverExit{

    0%{

        opacity:1;

        transform:scale(1);

    }

    100%{

        opacity:0;

        transform:scale(1.12);

        filter:blur(8px);

    }

}

@keyframes backgroundExit{

    to{

        transform:scale(1.08);

        opacity:0;

    }

}

@keyframes decorExit{

    to{

        opacity:0;

        transform:scale(1.15);

    }

}

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

@media (max-width:768px){

    .cover-content{

        width:min(94%,520px);

        padding:34px 20px;

        border-radius:24px;

    }

    .cover-content h1{

        font-size:60px;

    }

    .subtitle{

        font-size:12px;

        letter-spacing:3px;

    }

    .date{

        font-size:15px;

    }

    #envelope{

        width:310px;

        height:220px;

        margin-top:32px;

    }

    .envelope-bottom{

        height:165px;

    }

    .envelope-bottom::before{

        border-top-width:82px;

        border-bottom-width:83px;

        border-right-width:155px;

    }

    .envelope-bottom::after{

        border-top-width:82px;

        border-bottom-width:83px;

        border-left-width:155px;

    }

    .envelope-top{

        top:54px;

        border-left-width:155px;

        border-right-width:155px;

        border-top-width:108px;

    }

    #seal{

        top:120px;

        width:58px;

        height:58px;

    }

    .letter{

        min-height:170px;

        padding:20px;

    }

    #envelope.open .letter{

        transform:translateX(-50%) translateY(-115px);

    }

    .flower{

        width:190px;

    }

    .wisteria{

        width:145px;

        opacity:.6;

    }

}

@media (max-width:480px){

    .cover-content{

        padding:28px 15px;

    }

    .cover-content h1{

        font-size:47px;

    }

    .date{

        font-size:13px;

    }

    #envelope{

        width:270px;

        height:205px;

        margin-bottom:20px;

    }

    .envelope-bottom{

        height:145px;

    }

    .envelope-bottom::before{

        border-top-width:72px;

        border-bottom-width:73px;

        border-right-width:135px;

    }

    .envelope-bottom::after{

        border-top-width:72px;

        border-bottom-width:73px;

        border-left-width:135px;

    }

    .envelope-top{

        top:59px;

        border-left-width:135px;

        border-right-width:135px;

        border-top-width:94px;

    }

    #seal{

        top:116px;

        width:52px;

        height:52px;

        font-size:19px;

    }

    .letter{

        width:90%;

        min-height:150px;

        padding:16px;

    }

    .letter img{

        width:38px;

    }

    .letter h2{

        font-size:14px;

    }

    .letter p{

        font-size:9px;

    }

    #envelope.open .letter{

        transform:translateX(-50%) translateY(-95px);

    }

    .btn-open{

        min-width:195px;

        padding:13px 22px;

        font-size:11px;

    }

    .instruction{

        font-size:8px;

    }

    .music-button{

        right:15px;

        bottom:15px;

        width:46px;

        height:46px;

    }

}