/* ==================================================
   1. RESET
================================================== */

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

html,
body{
    width:100%;
    min-height:100%;
}

html{
    overflow:hidden;
}

body{
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    background:#f4e8dc;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overscroll-behavior:none;
}


/* ==================================================
   2. VARIABLES
================================================== */

:root{

    --color-crema:#f4e8dc;
    --color-azul:#0d5b96;
    --color-rosa:#e85b98;
    --color-petalo:#f76ba9;

    --z-fondo:0;
    --z-iluminacion:1;
    --z-paisaje:5;
    --z-escena:10;
    --z-interior:15;
    --z-puertas:20;
    --z-marco:30;
    --z-farol:42;
    --z-letrero:43;
    --z-floreros:45;
    --z-flores:50;
    --z-petalos:80;
    --z-boton:100;

    --duracion-puertas:2s;
    --duracion-paisaje:1s;
    --duracion-desvanecer:.85s;
    --duracion-zoom:1.8s;

    --curva-suave:
        cubic-bezier(.22,.61,.36,1);

    --curva-cinematica:
        cubic-bezier(.16,.84,.28,1);
}


/* ==================================================
   3. CONTENEDOR PRINCIPAL
================================================== */

.intro{
    position:relative;

    width:100vw;
    height:100vh;
    height:100dvh;

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

    overflow:hidden;

    background:var(--color-crema);

    isolation:isolate;
}


/* ==================================================
   CÁMARA DE LA PORTADA
================================================== */

.camara{
    position:absolute;
    inset:0;

    z-index:10;

    width:100%;
    height:100%;

    overflow:hidden;

    transform-origin:center center;

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

    will-change:
        transform,
        opacity;

    transition:
        transform 3.2s
        cubic-bezier(.18,.78,.22,1),

        opacity .8s ease;
}


/* ==================================================
   4. FONDO DE LA PORTADA
================================================== */

.fondo-pared{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    z-index:var(--z-fondo);

    pointer-events:none;
    user-select:none;
}


/* Iluminación */

.intro::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255,255,255,.10),
            transparent 52%
        );

    z-index:var(--z-iluminacion);

    pointer-events:none;
}


/* ==================================================
   5. PAISAJE DE SANTORINI
================================================== */

.vista-previa-invitacion{
    position:fixed;
    inset:0;

    width:100vw;
    height:100vh;
    height:100dvh;

    overflow:hidden;

    background:var(--color-crema);

    opacity:0;

    transform:
        scale(1.12);

    z-index:7;

    pointer-events:none;

    will-change:
        opacity,
        transform;

    transition:
        opacity 1s ease,
        transform 2.5s
        cubic-bezier(.16,.84,.28,1);
}


.vista-previa-invitacion img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center 65%;

    transform:scale(1);

    user-select:none;
    pointer-events:none;
}


/* ==================================================
   6. ESCENA PRINCIPAL
================================================== */

.escena{
    position:absolute;

    left:50%;
    top:50%;

    width:
        min(
            64dvh,
            620px,
            96vw
        );

    height:auto;

    aspect-ratio:2 / 3;

    perspective:2200px;

    transform-style:
        preserve-3d;

    transform:
        translate(-50%,-52%)
        scale(1.03);

    cursor:pointer;

    z-index:
        var(--z-escena);

    transition:
        opacity
        var(--duracion-desvanecer)
        ease,

        transform
        var(--duracion-desvanecer)
        ease;
}


/* ==================================================
   7. CAPAS COMPLETAS
================================================== */

.capa-completa{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;

    pointer-events:none;
    user-select:none;
}


/* ==================================================
   8. INTERIOR DETRÁS DE LAS PUERTAS
================================================== */

.interior{
    position:absolute;

    left:29.2%;
    top:17.8%;

    width:41.6%;
    height:53.6%;

    overflow:hidden;

    background:transparent;

    opacity:1;

    z-index:4;

    pointer-events:none;

    clip-path:
        inset(
            0
            round
            160px
            160px
            0
            0
        );
}


.paisaje-puerta{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center 65%;

    transform:
        scale(1.08);

    user-select:none;
    pointer-events:none;

    transition:
        transform 3.2s
        cubic-bezier(.18,.78,.22,1);
}


/* ==================================================
   9. PUERTAS
================================================== */

.puerta{
    z-index:
        var(--z-puertas);

    transform-style:
        preserve-3d;

    backface-visibility:
        visible;

    -webkit-backface-visibility:
        visible;

    will-change:
        transform;

    filter:
        drop-shadow(
            0 4px 8px
            rgba(0,0,0,.12)
        );

    transition:
        transform
        var(--duracion-puertas)
        var(--curva-suave),

        filter .6s ease,

        opacity
        var(--duracion-desvanecer)
        ease;
}


.puerta-izquierda{
    transform-origin:
        27.6% center;

    transform:
        rotateY(0deg);
}


.puerta-derecha{
    transform-origin:
        73.4% center;

    transform:
        rotateY(0deg);
}


.escena.abierta
.puerta-izquierda{
    transform:
        rotateY(-65deg);
}


.escena.abierta
.puerta-derecha{
    transform:
        rotateY(60deg);
}


.escena.abierta
.puerta{
    filter:
        drop-shadow(
            0 8px 14px
            rgba(0,0,0,.20)
        );
}


/* ==================================================
   10. MARCO
================================================== */

.marco-grada{
    z-index:
        var(--z-marco);

    filter:
        drop-shadow(
            0 7px 10px
            rgba(77,48,29,.13)
        );

    transition:
        opacity
        var(--duracion-desvanecer)
        ease;
}


/* ==================================================
   11. FLORES SUPERIORES
================================================== */

.flores-superiores{
    position:absolute;

    left:50%;
    top:3%;

    width:85%;
    height:auto;

    transform:
        translateX(-50%);

    object-fit:contain;

    pointer-events:none;
    user-select:none;

    z-index:
        var(--z-flores);

    filter:
        drop-shadow(
            0 6px 8px
            rgba(85,35,45,.16)
        );

    transition:
        opacity
        var(--duracion-desvanecer)
        ease;
}


/* ==================================================
   12. FLOREROS
================================================== */

.florero{
    position:absolute;

    width:26%;
    height:auto;

    bottom:18%;

    object-fit:contain;

    pointer-events:none;
    user-select:none;

    z-index:
        var(--z-floreros);

    filter:
        drop-shadow(
            0 7px 10px
            rgba(0,0,0,.16)
        );

    transition:
        opacity
        var(--duracion-desvanecer)
        ease;
}


.florero-izquierdo{
    left:3%;
}


.florero-derecho{
    right:3%;
}


/* ==================================================
   13. LETRERO XV
================================================== */

.letrero-xv{
    position:absolute;

    width:18%;
    height:auto;

    left:6%;
    top:36%;

    object-fit:contain;

    pointer-events:none;
    user-select:none;

    z-index:
        var(--z-letrero);

    filter:
        drop-shadow(
            0 5px 8px
            rgba(0,0,0,.13)
        );
}


/* ==================================================
   14. FAROL
================================================== */

.farol{
    position:absolute;

    width:28%;
    height:auto;

    right:-5% !important;
    top:25% !important;

    object-fit:contain;

    pointer-events:none;
    user-select:none;

    z-index:55 !important;

    filter:
        drop-shadow(
            0 7px 10px
            rgba(0,0,0,.18)
        );

    animation:
        brilloFarol
        3.2s
        ease-in-out
        infinite;
}


/* ==================================================
   15. BOTÓN DE ENTRADA
================================================== */

.boton-entrar{
    position:absolute;

    left:50%;
    bottom:28px;

    width:
        min(
            390px,
            80vw
        );

    transform:
        translateX(-50%);

    cursor:pointer;
    user-select:none;

    z-index:
        var(--z-boton);

    transition:
        transform .25s ease,
        opacity .6s ease;
}


.boton-entrar:hover{
    transform:
        translateX(-50%)
        scale(1.02);
}


.boton-entrar:active{
    transform:
        translateX(-50%)
        scale(.98);
}


/* Frame del botón */

.marco-boton{
    display:block !important;

    width:105% !important;

    max-width:none !important;

    height:auto !important;

    position:relative !important;

    left:50% !important;

    transform:
        translateX(-50%)
        !important;

    margin:0 !important;

    pointer-events:none;
    user-select:none;
}


.contenido-boton{
    position:absolute;

    left:50%;
    top:39%;

    width:90%;

    display:flex;

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

    gap:10px;

    transform:
        translate(-50%,-50%);

    pointer-events:none;
}


.texto-boton{
    font-family:
        "Cinzel Decorative",
        serif;

    font-size:
        clamp(
            15px,
            1.35vw,
            20px
        );

    font-weight:700;

    color:
        var(--color-azul);

    letter-spacing:1px;

    line-height:1.2;

    text-align:center;

    white-space:nowrap;
}


.rombo{
    position:relative;

    display:inline-flex;

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

    width:12px;
    height:12px;

    flex:
        0 0 12px;

    color:
        var(--color-rosa);

    font-size:0;

    line-height:1;
}


.rombo::before{
    content:"❖";

    color:
        var(--color-rosa);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:20px;

    line-height:1;
}


/* ==================================================
   16. PÉTALOS
================================================== */

.petalos{
    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:
        var(--z-petalos);

    transition:
        opacity .7s ease;
}


.petalos span{
    position:absolute;

    top:-70px;

    width:18px;
    height:24px;

    background-image:
        url("../assets/img/petalo.webp");

    background-size:
        contain;

    background-repeat:
        no-repeat;

    background-position:
        center;

    opacity:.85;

    animation:
        caerPetalo
        linear
        infinite;

    will-change:
        transform;
}


.petalos span:nth-child(1){
    left:8%;
    animation-duration:11s;
    animation-delay:-2s;
}

.petalos span:nth-child(2){
    left:22%;
    animation-duration:13s;
    animation-delay:-6s;
}

.petalos span:nth-child(3){
    left:37%;
    animation-duration:12s;
    animation-delay:-9s;
}

.petalos span:nth-child(4){
    left:50%;
    animation-duration:11.5s;
    animation-delay:-7s;
}

.petalos span:nth-child(5){
    left:65%;
    animation-duration:11.5s;
    animation-delay:-7s;
}

.petalos span:nth-child(6){
    left:78%;
    animation-duration:13.5s;
    animation-delay:-3s;
}

.petalos span:nth-child(7){
    left:90%;
    animation-duration:12.5s;
    animation-delay:-8s;
}

.petalos span:nth-child(8){
    left:55%;
    animation-duration:15s;
    animation-delay:-5s;
}


/* ==================================================
   17. ANIMACIÓN FAROL
================================================== */

@keyframes brilloFarol{

    0%,
    100%{

        filter:
            drop-shadow(
                0 7px 10px
                rgba(0,0,0,.18)
            )

            drop-shadow(
                0 0 3px
                rgba(255,205,105,.22)
            );
    }


    50%{

        filter:
            drop-shadow(
                0 7px 10px
                rgba(0,0,0,.18)
            )

            drop-shadow(
                0 0 10px
                rgba(255,205,105,.50)
            );
    }
}


/* ==================================================
   18. ANIMACIÓN PÉTALOS
================================================== */

@keyframes caerPetalo{

    0%{
        transform:
            translate3d(
                0,
                -80px,
                0
            )
            rotate(0deg)
            scale(.75);

        opacity:0;
    }


    8%{
        opacity:.9;
    }


    25%{
        transform:
            translate3d(
                -28px,
                25vh,
                0
            )
            rotate(100deg)
            scale(.9);
    }


    50%{
        transform:
            translate3d(
                24px,
                52vh,
                0
            )
            rotate(210deg)
            scale(.8);
    }


    75%{
        transform:
            translate3d(
                -18px,
                80vh,
                0
            )
            rotate(310deg)
            scale(.95);
    }


    100%{
        transform:
            translate3d(
                20px,
                115vh,
                0
            )
            rotate(430deg)
            scale(.8);

        opacity:0;
    }
}


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

.intro.en-transicion{
    cursor:default;
}


.intro.en-transicion
.escena,

.intro.en-transicion
.boton-entrar{
    pointer-events:none;
}


/* Transición elementos decorativos */

.puerta,
.marco-grada,
.flores-superiores,
.florero,
.farol,
.letrero-xv{

    transition:
        opacity
        var(--duracion-desvanecer)
        ease,

        transform
        var(--duracion-puertas)
        var(--curva-suave),

        filter .6s ease;
}


/* ==================================================
   20. ENTRAR POR LA PUERTA
================================================== */

body.transicion-activa
.petalos{
    opacity:0;
}


.intro.abriendo
.boton-entrar{

    opacity:0;

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

    pointer-events:none;
}


.intro.abriendo
.interior{
    opacity:1;
}


.intro.abriendo
.paisaje-puerta{
    transform:
        scale(1.04);
}


/* ==================================================
   21. MOVIMIENTO DE CÁMARA
================================================== */

.intro.avanzando
.camara{

    transform:
        translate3d(
            0,
            5vh,
            0
        )
        scale(2.65);
}


/* Fondo desaparece */

.intro.avanzando
.fondo-pared{

    opacity:0;

    transition:
        opacity
        .7s
        ease
        2.1s;
}


/* Elementos decorativos desaparecen */

.intro.avanzando .puerta,
.intro.avanzando .marco-grada,
.intro.avanzando .flores-superiores,
.intro.avanzando .florero,
.intro.avanzando .farol,
.intro.avanzando .letrero-xv{

    opacity:0;

    transition:
        opacity
        .65s
        ease
        2.15s,

        transform
        2s
        ease,

        filter
        .6s
        ease;
}


/* Paisaje dentro de puerta */

.intro.avanzando
.interior{
    opacity:1;
}


.intro.avanzando
.paisaje-puerta{
    transform:
        scale(.92);
}


/* ==================================================
   22. PAISAJE FINAL
================================================== */

.intro.paisaje-final
.vista-previa-invitacion{

    opacity:1;

    transform:
        scale(1);
}


.intro.paisaje-final
.boton-entrar{

    opacity:0;

    pointer-events:none;
}


.intro.paisaje-final
.camara{

    opacity:0;

    pointer-events:none;
}


/* ==================================================
   23. INVITACIÓN PRECARGADA
   ==================================================
   El iframe existe desde que carga index.html,
   pero permanece completamente oculto.
================================================== */

.contenedor-invitacion-final{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;
    height:100dvh;

    background:
        var(--color-crema);

    /*
       Precargada pero invisible.
    */

    opacity:0;

    visibility:hidden;

    /*
       Muy importante:
       mientras está oculta no bloquea
       la puerta ni el botón.
    */

    pointer-events:none;

    z-index:10000;

    transition:
        opacity .9s ease,
        visibility 0s linear .9s;
}


/* ==================================================
   24. MOSTRAR INVITACIÓN
================================================== */

.contenedor-invitacion-final.visible{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transition:
        opacity .9s ease;
}


/* ==================================================
   25. IFRAME
================================================== */

.iframe-invitacion{

    display:block;

    width:100%;

    height:100%;

    border:0;

    background:
        var(--color-crema);
}


/* Bloquear scroll del index */

body.invitacion-abierta{

    overflow:hidden;
}


/* ==================================================
   26. AJUSTES TELÉFONO
================================================== */

@media screen and (max-width:768px){

    .flores-superiores{

        width:86% !important;

        top:3% !important;
    }

}


/* ==================================================
   27. iPHONE 14
================================================== */

@media screen
and (min-width:389px)
and (max-width:391px){

    .frase-invitacion{

        width:82% !important;

        max-width:82% !important;

        margin-left:auto !important;

        margin-right:auto !important;

        font-size:20px !important;

        line-height:1.45 !important;

        text-align:center !important;

        left:auto !important;

        right:auto !important;
    }


    .boton-entrar
    .marco-boton{

        width:112% !important;

        max-width:none !important;

        position:relative !important;

        left:50% !important;

        transform:
            translateX(-50%)
            !important;

        height:auto !important;
    }

}