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

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

html,
body{

    width:100%;
    height:100%;
    height:-webkit-fill-available;

    overflow:hidden;

    background:#000;

    font-family:'Cormorant Garamond', serif;

}


/* =====================================================
   LAYOUT
===================================================== */

#app{

    position:relative;

    width:100%;
    height:100%;

}


/* =====================================================
   PLAYER
===================================================== */

#player{

    position:relative;

    width:100vw;
    height:100%;
    height:100dvh;
    height:-webkit-fill-available;

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

    overflow:hidden;

    background:#000;

}

#video{

    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

}



/* =====================================================
   HOTSPOTS
===================================================== */

#hotspots,
#effects{

    position:absolute;

    left:0;
    top:0;

    right:auto;
    bottom:auto;

    width:100%;
    height:100%;

}

#hotspots{

    z-index:20;

    pointer-events:auto;

}

#effects{

    z-index:10;

    pointer-events:none;

}


.hotspot{

    position:absolute;

    width:70px;
    height:70px;

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

    border-radius:50%;

    background:transparent;

    border:none;

    cursor:pointer;

}


/* =====================================================
   POSIÇÃO DOS HOTSPOTS
===================================================== */

#btnWhatsapp{

    left:13.2%;
    top:85.5%;

}

#btnGrandeDia{

    left:32%;
    top:85.6%;

}

#btnLocalizacao{

    left:50%;
    top:85.6%;

}

#btnDressCode{

    left:68.5%;
    top:85.6%;

}

#btnPresentes{

    left:87%;
    top:85.6%;

}

/* =====================================================
   ANIMAÇÃO DO CLIQUE
===================================================== */

@keyframes magicClick{

    0%{

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

        box-shadow:none;

    }

    20%{

        transform:translate(-50%,-50%) scale(.88);

    }

    45%{

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

        box-shadow:
            0 0 20px rgba(255,255,255,.95),
            0 0 40px rgba(255,220,120,.95),
            0 0 70px rgba(120,190,255,.60);

    }

    100%{

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

        box-shadow:none;

    }

}

.magic-click{

    animation:magicClick .65s ease-out;

}


/* =====================================================
   OVERLAY
===================================================== */

#overlay{

    position:absolute;

    inset:0;

    z-index:30;

    opacity:0;

    visibility:hidden;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);

    transition:.35s;

}

#overlay.active{

    opacity:1;

    visibility:visible;

}


/* =====================================================
   MODAL
===================================================== */

#modal{

    position:absolute;

    inset:0;

    display:flex;

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

    z-index:40;

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

#modal.active{

    opacity:1;

    visibility:visible;

}

.modal-box{

    position:relative;

    width:420px;
    max-width:90%;

    max-height:85vh;

    padding:35px;

    border-radius:25px;

    text-align:center;

    color:#FFF;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,215,120,.50);

    transform:scale(.90);

    transition:.35s;

    display:flex;

    flex-direction:column;

}

#modal.active .modal-box{

    transform:scale(1);

}


/* =====================================================
   FECHAR
===================================================== */

#closeModal{

    position:absolute;

    top:15px;
    right:15px;

    width:38px;
    height:38px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:22px;

    color:white;

    background:rgba(255,255,255,.15);

}


/* =====================================================
   IMAGEM
===================================================== */

#modalImage{

    display:none;

    width:100%;

    max-height:220px;

    object-fit:cover;

    border-radius:18px;

    margin-bottom:20px;

}


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

#modalTitle{

    color:#FFE3A5;

    margin-bottom:20px;

}

#modalText{

    line-height:1.8;

    overflow-y:auto;

    max-height:38vh;

    padding-right:6px;

    margin-top:10px;

}

/* =====================================================
   BOTÃO
===================================================== */

#modalButton{

    display:flex;

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

    gap:12px;

    margin-top:35px;

    padding:16px 24px;

    border-radius:40px;

    text-decoration:none;

    font-weight:bold;

    color:rgb(216, 216, 211);

    background:#1cc5d4;

    transition:.3s;

}

#modalButton:hover{

    transform:scale(1.05);

}

#modalButtonIcon{

    width:24px;
    height:24px;

    object-fit:contain;

}
/* =====================================================
   PONTO DE ENTRADA — JOIA
===================================================== */

#startJewel{

    position:absolute;
    left:50%;
    top:52.7%;

    width:34px;
    height:34px;

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

    z-index:25;
    cursor:pointer;

    background:radial-gradient(circle,
        rgba(255,255,255,.55) 0%,
        rgba(255,231,158,.42) 18%,
        rgba(157,190,234,.14) 48%,
        rgba(157,190,234,0) 72%);

    box-shadow:
        0 0 8px rgba(255,255,255,.9),
        0 0 18px rgba(255,225,145,.65),
        0 0 28px rgba(120,190,255,.38);

    animation:jewelGlow 2.2s ease-in-out infinite;

    transition:.35s ease;
}

    #startJewel:not(.jewel-ready){
    opacity:0;
    visibility:hidden;
}

#startJewel::after{

    content:"";

    position:absolute;
    inset:-12px;

    border-radius:50%;

    border:1px solid rgba(255,225,145,.42);

    box-shadow:0 0 14px rgba(255,225,145,.32);

    opacity:.8;
}

#startJewel.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%,-50%) scale(.55);
}

@keyframes jewelGlow{

    0%,100%{
        transform:translate(-50%,-50%) scale(.88);
        box-shadow:
            0 0 7px rgba(255,255,255,.75),
            0 0 15px rgba(255,225,145,.48),
            0 0 24px rgba(120,190,255,.25);
    }

    50%{
        transform:translate(-50%,-50%) scale(1.08);
        box-shadow:
            0 0 10px rgba(255,255,255,1),
            0 0 22px rgba(255,225,145,.78),
            0 0 34px rgba(120,190,255,.45);
    }
}

/* =====================================================
   TIPOGRAFIA PADRONIZADA
===================================================== */

body,
button,
a,
input,
textarea,
select{
    font-family:'Cormorant Garamond', serif;
}

#modalTitle{
    font-family:'Cormorant Garamond', serif;
    font-size:26px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
}

#modalText{
    font-family:'Cormorant Garamond', serif;
    font-size:16px;
    font-weight:500;
    text-align:center;
}

.modal-card{
    text-align:center;
}

.modal-card h3{
    font-family:'Cormorant Garamond', serif;
    font-size:19px;
    font-weight:700;
    text-align:center;
}

.modal-card p{
    font-family:'Cormorant Garamond', serif;
    font-size:16px;
    font-weight:500;
    text-align:center;
}

#modalButton{
    font-family:'Cormorant Garamond', serif;
    font-size:17px;
    font-weight:700;
}

.contador-titulo,
.countdown-item small{
    font-family:'Cormorant Garamond', serif;
}

#modalText{
    scrollbar-width:none;
    -ms-overflow-style:none;
}

#modalText::-webkit-scrollbar{
    display:none;
}
/* =====================================================
   O GRANDE DIA — CONTAGEM REGRESSIVA
===================================================== */

.grande-dia{
    width:100%;
    text-align:center;
}

.evento-data{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin:4px 0 12px;
    line-height:1;
}

.evento-dia{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(46px, 11vw, 68px);
    font-weight:600;
    color:#FFFFFF;
    text-shadow:
        0 0 6px rgba(255,255,255,.9),
        0 0 18px rgba(92,190,255,.7);
}

.evento-mes{
    margin-top:-4px;
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(18px, 4vw, 24px);
    font-weight:700;
    letter-spacing:.18em;
    color:#FFE3A5;
}

.evento-ano{
    margin-top:4px;
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(22px, 5vw, 30px);
    letter-spacing:.12em;
    color:#FFFFFF;
}

.evento-hora{
    position:relative;
    left:-16px;

    margin:10px 0 20px;
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(24px, 6vw, 32px);
    font-weight:600;
    color:#FFFFFF;
    text-shadow:0 0 12px rgba(92,190,255,.75);
}

.contador-titulo{
    margin-bottom:12px;
    font-size:14px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.82);
}

.countdown{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    width:100%;
    margin:0 auto;
}

.countdown-item{
    min-width:0;
    padding:12px 6px;
    border-radius:14px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,215,120,.28);
    box-shadow:0 0 18px rgba(73,160,255,.14);
}

.countdown-item strong{
    display:block;
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(25px, 6vw, 34px);
    line-height:1;
    color:#FFFFFF;
    text-shadow:0 0 10px rgba(92,190,255,.75);
}

.countdown-item small{
    display:block;
    margin-top:6px;
    font-size:9px;
    letter-spacing:.08em;
    color:#FFE3A5;
}

.evento-chegou{
    padding:20px 10px;
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(30px, 8vw, 42px);
    color:#FFFFFF;
    text-shadow:
        0 0 8px rgba(92,190,255,.95),
        0 0 22px rgba(48,151,255,.75);
}

/* =====================================================
   CARDS DO MODAL
===================================================== */


.modal-card{

    margin:18px 0;

    padding:18px;

    border-radius:18px;

    background:rgba(255,255,255,.08);

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

    text-align:left;

}

.modal-card h3{

    margin-bottom:12px;

    color:#FFE3A5;

    font-size:19px;

    font-weight:600;

}

.modal-card p{

    line-height:1.8;

    color:#F5F5F5;

    font-size:15px;

}
/* =====================================================
INTRODUÇÃO DA LISTA DE PRESENTES
===================================================== */

.presentes-intro{

    text-align:center;

    line-height:1.8;

    margin-bottom:30px;

    color:#F5F5F5;

}

.presentes-intro strong{

    color:#FFE3A5;

    font-size:20px;

}
.dress-code-title {
    display: inline-block !important;
    position: relative;
    left: -16px;
}
.grande-dia-title{
    position:relative;
    left:-16px;
}