/* ==========================================
   Components
   Wedding Invitation 2026
========================================== */

/* -----------------------------
   Loader
------------------------------*/

#loader{

    transition:.8s ease;

}

#loader.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

/* -----------------------------
   Glass Card
------------------------------*/

.cover-container{

    transition:.5s ease;

}

.cover-container:hover{

    transform:translateY(-6px);

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

}

/* -----------------------------
   Hero
------------------------------*/

.hero-content{

    animation:fadeUp 1.2s ease;

}

/* -----------------------------
   Quote
------------------------------*/

.quote{

    max-width:650px;

    margin:auto;

}

.quote p{

    letter-spacing:.5px;

    line-height:1.9;

}

/* -----------------------------
   Guest Name
------------------------------*/

#guestName{

    display:inline-block;

    padding:12px 28px;

    margin:20px 0;

    border-radius:999px;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

/* -----------------------------
   Divider
------------------------------*/

.divider{

    opacity:.8;

    transition:.3s ease;

}

.divider:hover{

    transform:scale(1.05);

}

/* -----------------------------
   Countdown
------------------------------*/

.time-box{

    min-width:95px;

}

.time-box h2{

    transition:.3s;

}

.time-box:hover h2{

    transform:translateY(-5px);

    color:var(--gold);

}

/* -----------------------------
   Open Button
------------------------------*/

#openInvitation{

    position:relative;

    overflow:hidden;

}

#openInvitation::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

}

#openInvitation:hover::before{

    left:130%;

    transition:.9s;

}

#openInvitation:hover{

    box-shadow:

        0 20px 45px rgba(212,175,55,.35);

}

/* -----------------------------
   Music Button
------------------------------*/

#musicToggle{

    position:fixed;

    bottom:30px;

    right:30px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:var(--gold);

    color:#fff;

    font-size:22px;

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

    z-index:100;

}

#musicToggle:hover{

    transform:rotate(15deg) scale(1.08);

}

/* -----------------------------
   Scroll Indicator
------------------------------*/

.scroll-indicator{

    cursor:pointer;

    transition:.3s;

}

.scroll-indicator:hover{

    transform:translateY(8px);

}

/* -----------------------------
   Future Sections
------------------------------*/

#couple,
#event,
#gallery,
#rsvp,
#location{

    min-height:100vh;

}

/* -----------------------------
   Floating Glow
------------------------------*/

.cover-container::after{

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

}

/* ==========================================
   Music Button
========================================== */

#musicToggle{

    display:flex;

    justify-content:center;

    align-items:center;

}

#musicToggle.playing{

    animation:spin 6s linear infinite;

}