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

:root{

    --navy:#071A2F;
    --navy-light:#163b69;
    --gold:#D4AF37;
    --white:#ffffff;

}

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

html{
    scroll-behavior:smooth;

    background:#051321;
}

body{

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

    background:
        radial-gradient(circle at top,#163b69 0%,#071A2F 40%,#051321 100%);

    color:white;

    overflow-x:hidden;
    overflow-y:hidden;

}

/* ===========================
   FLOATING GOLD PARTICLES
=========================== */

.sparkles span{

    position:absolute;

    width:4px;
    height:4px;

    background:var(--gold);

    border-radius:50%;

    opacity:.35;

    filter:blur(.5px);

    animation:floatDown linear infinite;

}

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

.hero{

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:100px 8%;
}

.hero-content{

    max-width:900px;

    margin:auto;

}

.hero-logo{

    width:170px;

    margin-bottom:35px;

}

.invite-line{

    color:#D4AF37;

    text-transform:uppercase;

    letter-spacing:4px;

    line-height:1.8;

    margin-bottom:30px;

    font-size:.9rem;

}

.hero-divider{

    display:flex;
    align-items:center;
    gap:18px;

    margin:28px 0;

    color:#D4AF37;

    font-size:1rem;

}

.hero-divider span{

    width:90px;
    height:1px;

    background:#D4AF37;

    opacity:.7;

}

.hero h2{

    color:#D4AF37;

    letter-spacing:8px;

    font-size:2rem;

    font-weight:500;

    margin:20px 0;

}

.subtitle{

    font-family:"Cormorant Garamond",serif;

    font-style:italic;

    font-size:1.6rem;

    margin-bottom:25px;

}

.event-date{

    font-size:1.2rem;

    margin-bottom:40px;

}

button{

    background:linear-gradient(
        180deg,
        #E6C45A,
        #C99A1C
    );

    color:#071A2F;

    border:none;

    border-radius:999px;

    padding:18px 44px;

    font-weight:700;

    letter-spacing:1px;

    cursor:pointer;

    transition:.35s ease;

    box-shadow:0 12px 35px rgba(212,175,55,.30);

}

button:hover{

    transform:translateY(-4px);

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

}

.hero-image{

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:100%;

    max-width:600px;

    border-radius:20px;

    box-shadow:0 30px 60px rgba(0,0,0,.45);

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:900px){

.hero{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-content{

    max-width:100%;

}

.hero-logo{

    margin:auto auto 35px;

}

.hero h1{

    font-size:4rem;

}

.hero h2{

    font-size:1.5rem;

    letter-spacing:5px;

}

.hero-image{

    margin-top:40px;

}

}

/* ===========================
   COUNTDOWN
=========================== */

.countdown{

    padding:120px 8%;
    text-align:center;
    background:transparent;

}

.countdown h2{

    font-family:"Cinzel", serif;
    font-size:2.6rem;
    font-weight:600;
    letter-spacing:5px;
    text-transform:uppercase;
    color:#D4AF37;
    margin-bottom:60px;
    text-shadow:0 0 10px rgba(212,175,55,.18);

}

.countdown-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    max-width:900px;
    margin:auto;

}

.count-card{

    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,175,55,.25);
    border-radius:20px;
    padding:35px;

    backdrop-filter:blur(10px);

}

.count-card span{

    display:block;
    font-size:3rem;
    color:#D4AF37;
    font-weight:bold;

}

.count-card p{

    margin-top:15px;
    letter-spacing:3px;
    text-transform:uppercase;

}

@media(max-width:900px){

.countdown-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.countdown-grid{

grid-template-columns:1fr;

}

}

/* ==================================
   EVENT DETAILS
================================== */

.details{

    padding:140px 8%;

    background:transparent;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:#D4AF37;

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:.85rem;

}

.section-title h2{

    font-family:"Cinzel", serif;
    font-size:2.5rem;
    font-weight:600;
    letter-spacing:5px;
    text-transform:uppercase;
    color:#D4AF37;

    margin-top:15px;
    margin-bottom:0;

    text-shadow:0 0 10px rgba(212,175,55,.18);

}

.details-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.detail-card{

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

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

    border-radius:24px;

    padding:50px 35px;

    text-align:center;

    backdrop-filter:blur(15px);

    transition:.35s ease;

}

.detail-card:hover{

    transform:translateY(-10px);

    border-color:#D4AF37;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.icon{

    font-size:2.4rem;

    color:var(--gold);

    margin-bottom:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-shadow:
        0 0 8px rgba(255,220,120,.45),
        0 0 16px rgba(212,175,55,.25);

    transition:.35s ease;

}

.detail-card:hover .icon{

    transform:scale(1.08);

    text-shadow:
        0 0 10px rgba(255,240,180,.9),
        0 0 24px rgba(255,215,0,.55),
        0 0 40px rgba(212,175,55,.35);

}

.detail-card h3{

    color:#D4AF37;

    margin-bottom:18px;

    font-size:1.4rem;

}

.detail-card p{

    margin:8px 0;

    line-height:1.7;

}

.gold-button{

    display:inline-block;

    margin-top:28px;

    padding:15px 34px;

    border-radius:50px;

    background:#D4AF37;

    color:#071A2F;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.gold-button:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(212,175,55,.35);

}

@media(max-width:900px){

.details-grid{

grid-template-columns:1fr;

}

}

/* ==========================================
   TIMELINE
========================================== */

.timeline{

    padding:140px 8%;

}

.timeline-container{

    position:relative;

    max-width:650px;

    margin:70px auto 0;

    overflow:hidden;

}

.timeline-container::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:2px;

    background:linear-gradient(
        to bottom,
        transparent,
        var(--gold),
        transparent
    );

    transform:translateX(-50%);

}

.timeline-container::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:18px;

    height:140px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,235,140,.95),
        rgba(255,255,255,0)
    );

    filter:blur(10px);

    z-index:1;

    animation:timelineShimmer 3.5s linear infinite;

    pointer-events:none;

}

.timeline-item{

    position:relative;

    display:flex;

    justify-content:center;

    margin-bottom:60px;

}

.timeline-dot{

    position:absolute;

    top:-35px;

    left:50%;

    width:18px;
    height:18px;

    transform:translateX(-50%);

    border-radius:50%;

    background:var(--gold);

    z-index:2;

    box-shadow:
        0 0 8px rgba(255,220,120,.8),
        0 0 18px rgba(255,215,0,.55),
        0 0 35px rgba(212,175,55,.4);

    animation:timelineDotGlow 2.5s ease-in-out infinite;

}

.timeline-card{

    width:320px;

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

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

    border-radius:20px;

    padding:25px;

    text-align:center;

    backdrop-filter:blur(15px);

    transition:.35s;

}

.timeline-card:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}

/* Time */
.timeline-card h3:first-child{

    color:var(--gold);

    font-family:"Cormorant Garamond", serif;

    font-size:1.8rem;

    margin-bottom:12px;

}

/* Event */
.timeline-card h3:nth-child(2){

    color:#ffffff;

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

    font-size:1.15rem;

    font-weight:600;

    letter-spacing:.5px;

    line-height:1.4;

}

.timeline-card p{

    margin:0;

}

@media (max-width:768px){

    .timeline{

        padding:80px 20px;

    }

    .timeline-container{

        max-width:100%;
        margin:0 auto;

    }

    .timeline-container::before{

        left:50%;
        transform:translateX(-50%);

    }

    .timeline-container::after{

        left:50%;
        transform:translateX(-50%);

    }

    .timeline-item{

        display:flex;
        justify-content:center;
        padding:0;
        margin-bottom:60px;

    }

    .timeline-dot{

        left:50%;
        transform:translateX(-50%);

    }

    .timeline-card{

        width:100%;
        max-width:320px;
        margin:0 auto;

    }

}

/* ==========================================
   LAYERING
========================================== */

.hero,
.countdown,
.details,
.timeline{

    position:relative;
    z-index:2;

}

/* ===========================
   RSVP
=========================== */

.rsvp{

    padding:120px 8%;
    text-align:center;

}

.rsvp-card{

    max-width:700px;
    margin:0 auto;

    padding:60px 40px;

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

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

    border-radius:24px;

    backdrop-filter:blur(15px);

}

.rsvp-text{

    font-size:1.2rem;
    line-height:1.8;
    margin-bottom:25px;

}

.rsvp-date{

    color:var(--gold);
    margin-bottom:35px;
    font-size:1.1rem;

}

@media(max-width:768px){

    .rsvp{

        padding:80px 24px;

    }

    .rsvp-card{

        padding:40px 25px;

    }

}

/* ===========================
   LUXURY GOLD DUST
=========================== */

.sparkles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:9998;

}
.sparkle{

    position:absolute;

    top:-120px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(255,245,180,.95),
        rgba(212,175,55,.8) 55%,
        transparent 75%);

    filter:blur(.3px);

    animation:sparkleFall linear infinite;

}

@keyframes sparkleFall{

    0%{

        transform:
            translate3d(0,-120px,0)
            rotate(0deg);

        opacity:0;

    }

    10%{

        opacity:.9;

    }

    100%{

    transform:
        translate3d(70px,140vh,0)
        rotate(360deg);

}

}

@keyframes timelineShimmer{

    0%{

        top:-160px;
        opacity:0;

    }

    8%{

        opacity:1;

    }

    92%{

        opacity:1;

    }

    100%{

        top:calc(100% + 160px);
        opacity:0;

    }

}

@media (max-width:768px){

    .hero{

        grid-template-columns:1fr;
        justify-items:center;
        align-items:center;
        text-align:center;

        gap:45px;

        padding:70px 24px;

    }

    .hero-content{

        width:100%;
        max-width:500px;

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

        margin:0 auto;

    }

   .hero-content h1{

    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-weight:700;

    font-size:clamp(5.5rem,9vw,7rem);

    line-height:.95;

    letter-spacing:-2px;

    margin:20px 0 30px;

    color:#D4AF37;

    text-shadow:
        0 1px 0 #fff6cf,
        0 2px 4px rgba(0,0,0,.35),
        0 0 12px rgba(212,175,55,.25);

}

    .hero-logo{

        margin:0 auto 30px;

    }

    .hero-divider{

        justify-content:center;

    }

    .hero-image{

        width:100%;
        display:flex;
        justify-content:center;

    }

    .hero-image img{

        width:100%;
        max-width:340px;
        margin:0 auto;

    }

}

    /* TIMELINE */

    .timeline{

        padding:80px 25px;

    }

    .timeline-line{

        left:50%;
        transform:translateX(-50%);

    }

    .timeline-item{

        width:100%;
        justify-content:center;

    }

    .timeline-card{

        width:90%;
        max-width:340px;
        margin:0 auto;

    }

    .timeline-dot{

        left:50%;
        transform:translateX(-50%);

    }

}

@keyframes goldShine{

    0%{

        background-position:-300px;

    }

    100%{

        background-position:300px;

    }

}

.mariah-logo{

    width:100%;
    max-width:520px;

    display:block;

    margin:-5px auto 20px;

    transform:translateX(10px);

    filter:
        drop-shadow(0 8px 20px rgba(212,175,55,.25));

    animation:logoGlow 3.5s ease-in-out infinite;

}

/* =========================
   WELCOME SCREEN
========================= */

#welcomeScreen{
    position:fixed;
    inset:0;
    background:
radial-gradient(
    circle at 50% 12%,
    #1A4578 0%,
    #0F2E56 28%,
    #071A2F 62%,
    #051321 100%
);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    transition:opacity .8s ease, visibility .8s ease;
}

#welcomeScreen.fade{
    opacity:0;
}

.welcome-content{

    position:relative;

    z-index:10000;

}

#welcomeScreen.hide{

    opacity:0;
    visibility:hidden;
    pointer-events:none;

}

#mainContent{

    opacity:0;
    transform:scale(.985);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}

#mainContent.show{

    opacity:1;
    transform:scale(1);

}

.welcome-content{
    width:min(90%,500px);
    text-align:center;
}

.welcome-monogram{
    width:clamp(300px, 18vw, 180px);
    margin-bottom:20px;
}

.welcome-small{
    color:#D4AF37;
    font-size:.85rem;
    letter-spacing:5px;
    line-height:1.8;
    margin-bottom:25px;
}

.welcome-logo{

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

    display:block;

    margin:0 auto 20px;

    animation:logoGlow 3.5s ease-in-out infinite;

}

.welcome-date{
    color:#fff;
    font-size:1.15rem;
    margin-bottom:35px;
}

#enterButton{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #E8C85A 0%,
        #D4AF37 55%,
        #C99A1C 100%
    );

    color:#081d3d;

    border:none;

    border-radius:60px;

    padding:18px 60px;

    cursor:pointer;

    font-family:"Luxurious Script", cursive;

    font-size:2.2rem;

    font-weight:400;

    letter-spacing:0;

    text-transform:none;

    transition:all .35s ease;

    box-shadow:
        0 12px 30px rgba(212,175,55,.35);

    animation:textGlow 3s ease-in-out infinite;

}

#enterButton:hover{

    transform:translateY(-4px) scale(1.03);

    background:linear-gradient(
        180deg,
        #F8DD7A,
        #E1BE4B,
        #D4AF37
    );

    box-shadow:
        0 0 18px rgba(255,220,120,.45),
        0 15px 40px rgba(0,0,0,.30);

    color:#04172D;

}

#enterButton:active{

    transform:scale(.97);

}

.welcome-title{

    color:#D4AF37;

    font-family:"Cinzel", serif;

    font-size:2rem;

    font-weight:600;

    letter-spacing:8px;

    margin:-10px 0 25px;

    animation:goldGlow 3.5s ease-in-out infinite;

}

/* ===========================
   LUXURY GOLD GLOW
=========================== */

@keyframes timelineDotGlow{

    0%,100%{

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

        box-shadow:
            0 0 8px rgba(255,220,120,.7),
            0 0 18px rgba(255,215,0,.45),
            0 0 35px rgba(212,175,55,.30);

    }

    50%{

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

        box-shadow:
            0 0 14px rgba(255,245,180,1),
            0 0 28px rgba(255,220,120,.9),
            0 0 55px rgba(212,175,55,.65);

    }

}

@keyframes logoGlow{

    0%,100%{

        filter:
            drop-shadow(0 0 8px rgba(212,175,55,.20));

    }

    50%{

        filter:
            drop-shadow(0 0 12px rgba(255,240,180,.35))
            drop-shadow(0 0 24px rgba(212,175,55,.30))
            drop-shadow(0 0 40px rgba(212,175,55,.18));

    }

}

@keyframes logoBurst{

    0%{

        transform:scale(1);

        filter:
            drop-shadow(0 0 8px rgba(212,175,55,.25));

    }

    50%{

        transform:scale(1.05);

        filter:
            drop-shadow(0 0 15px rgba(255,240,180,.8))
            drop-shadow(0 0 35px rgba(212,175,55,.6))
            drop-shadow(0 0 60px rgba(212,175,55,.35));

    }

    100%{

        transform:scale(1);

    }

}

.welcome-content{

    position:relative;

    z-index:2;

  }



.sparkle-star{

    width:4px !important;
    height:4px !important;

    background:#FFF8D0;

    border-radius:50%;

    box-shadow:
        0 0 6px #FFF4B5,
        0 0 14px #FFE37A,
        0 0 28px rgba(255,215,0,.75);

    animation:
        sparkleFall linear infinite,
        twinkleStar 2.5s ease-in-out infinite;

}        

@keyframes twinkleStar{

    0%,100%{

        opacity:.35;
        transform:scale(.8);

    }

    50%{

        opacity:1;
        transform:scale(1.8);

    }

}   

#enterButton::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    animation:buttonShine 5s infinite;

}

@keyframes buttonShine{

    0%{

        left:-150%;

    }

    30%{

        left:160%;

    }

    100%{

        left:160%;

    }

}

#enterButton::after{

    content:"";

    position:absolute;

    top:0;
    left:-150%;

    width:40%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );

    transform:skewX(-25deg);

    animation:luxuryShine 6s infinite;

}

@keyframes luxuryShine{

    0%{
        left:-150%;
    }

    15%{
        left:160%;
    }

    100%{
        left:160%;
    }

}

@keyframes buttonGlow{

    0%,100%{

        box-shadow:
            0 0 10px rgba(212,175,55,.20),
            0 0 25px rgba(212,175,55,.12);

        border-color:#D4AF37;

        text-shadow:
            0 0 4px rgba(255,220,120,.15);

    }

    50%{

        box-shadow:
            0 0 18px rgba(255,220,120,.55),
            0 0 35px rgba(255,215,0,.35),
            0 0 60px rgba(212,175,55,.18);

        border-color:#FFE89A;

        text-shadow:
            0 0 8px rgba(255,245,180,.6),
            0 0 18px rgba(255,220,120,.35);

    }

}

@keyframes textGlow{

    0%,100%{

        text-shadow:
            0 0 3px rgba(255,220,120,.25),
            0 0 8px rgba(212,175,55,.15);

    }

    50%{

        text-shadow:
            0 0 8px rgba(255,245,180,.9),
            0 0 18px rgba(255,220,120,.6),
            0 0 30px rgba(212,175,55,.4);

    }

}

#enterButton span{

    animation:textGlow 2.8s ease-in-out infinite;

}

.sparkle-glow{

    background:#FFD766;

    box-shadow:
        0 0 8px rgba(255,220,120,.8),
        0 0 20px rgba(255,215,0,.5);

}

/* ===========================
   CLOSING BIBLE VERSE
=========================== */

.closing-verse{

    padding:120px 30px 140px;

    text-align:center;

}

.verse-divider{

    color:var(--gold);

    font-size:1.8rem;

    margin-bottom:35px;

    text-shadow:
        0 0 10px rgba(212,175,55,.45);

}

.verse-text{

    max-width:720px;

    margin:0 auto;

    font-family:"Cormorant Garamond", serif;

    font-size:2rem;

    font-style:italic;

    line-height:1.8;

    color:rgba(255, 215, 107, 0.92);

}

.verse-reference{

    margin-top:28px;

    color:var(--gold);

    letter-spacing:8px;

    text-transform:uppercase;

    font-size:.95rem;

}

@media(max-width:768px){

    .closing-verse{

        padding:90px 24px 110px;

    }

    .verse-text{

        font-size:1.5rem;

    }

}

/* ===========================
   SCROLL ANIMATIONS
=========================== */

.fade-section{

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.fade-section.show{

    opacity:1;

    transform:translateY(0);

}

/* ===========================
   LANGUAGE SWITCH
=========================== */

.language-switch{

    margin-top:28px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

}

.language-switch span{

    color:rgba(212,175,55,.55);

    font-size:1rem;

}

.lang-btn{

    all: unset;

    cursor:pointer;

    font-family:"Cormorant Garamond", serif;

    font-size:1.25rem;

    color:rgba(255,255,255,.65);

    transition:color .3s ease, text-shadow .3s ease;

}

.lang-btn:hover{

    color:#D4AF37;

    text-shadow:0 0 10px rgba(212,175,55,.45);

}

.lang-btn.active{

    color:#D4AF37;

    text-shadow:0 0 10px rgba(212,175,55,.45);

}

/* ===========================
   LANGUAGE FADE
=========================== */

[data-i18n]{

    transition:opacity .25s ease;

}

/* ===========================
   LANGUAGE TRANSITION
=========================== */

.welcome-content{

    transition:opacity .35s ease;

}

/* ===========================
   HERO LANGUAGE SWITCH
=========================== */

.hero-language-switch{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;

    margin:0 0 45px;
    padding-top:15px;

}

.hero-language-switch span{

    color:rgba(212,175,55,.65);
    font-size:1.2rem;

}

.hero-language-switch .lang-btn{

    all:unset;
    cursor:pointer;

    font-family:"Cormorant Garamond", serif;
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;

    color:rgba(255,255,255,.75);

    transition:all .3s ease;

}

.hero-language-switch .lang-btn:hover{

    color:#D4AF37;
    transform:translateY(-1px);

}

.hero-language-switch .lang-btn.active{

    color:#D4AF37;
    text-shadow:
        0 0 8px rgba(212,175,55,.35),
        0 0 20px rgba(212,175,55,.18);

}

@media (max-width:768px){

    .countdown h2,
    .section-title h2{

        font-size:2.1rem;

        letter-spacing:2px;

        line-height:1.2;

    }

}
@media (max-width:768px){

    .welcome-content{

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

    }

    .welcome-logo{

        max-width:300px;

        margin:0 auto 15px;

    }

    .welcome-monogram{

        width:120px;

        margin-bottom:15px;

    }

    .welcome-date{

        font-size:1rem;

        margin-bottom:20px;

    }

    #enterButton{

        font-size:1.8rem;

        padding:16px 50px;

    }

    .language-switch{

        margin-top:18px;

    }

    .lang-btn{

        font-size:1.3rem;

    }

}