/* ==========================================
   Wedding Invitation 2026
   Premium Animations
========================================== */

/* ---------------- Fade Up ---------------- */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(50px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ---------------- Fade Down ---------------- */

@keyframes fadeDown{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ---------------- Fade In ---------------- */

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ---------------- Scale ---------------- */

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ---------------- Float ---------------- */

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ---------------- Pulse ---------------- */

@keyframes pulse{

    0%{

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

    }

    50%{

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

    }

    100%{

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

    }

}

/* ---------------- Shine ---------------- */

@keyframes shine{

    from{

        background-position:-200%;

    }

    to{

        background-position:200%;

    }

}

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

.loader-content{

    animation:

        fade 1.2s ease,

        scaleIn 1.3s ease;

}

/* ---------------- Cover ---------------- */

.cover-container{

    animation:

        fadeUp 1.4s ease;

}

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

.hero-content>*{

    opacity:0;

    animation:fadeUp .8s forwards;

}

.hero-content>*:nth-child(1){

    animation-delay:.2s;

}

.hero-content>*:nth-child(2){

    animation-delay:.35s;

}

.hero-content>*:nth-child(3){

    animation-delay:.5s;

}

.hero-content>*:nth-child(4){

    animation-delay:.65s;

}

.hero-content>*:nth-child(5){

    animation-delay:.8s;

}

.hero-content>*:nth-child(6){

    animation-delay:1s;

}

.hero-content>*:nth-child(7){

    animation-delay:1.2s;

}

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

.divider{

    animation:

        fade 2s ease,

        float 5s infinite;

}

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

#openInvitation{

    animation:

        pulse 3s infinite;

}

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

#musicToggle{

    animation:

        float 4s infinite;

}

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

.time-box{

    animation:

        fadeUp 1s ease;

}

.time-box:nth-child(1){

    animation-delay:.2s;

}

.time-box:nth-child(3){

    animation-delay:.4s;

}

.time-box:nth-child(5){

    animation-delay:.6s;

}

.time-box:nth-child(7){

    animation-delay:.8s;

}

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

.scroll-indicator{

    animation:

        float 2.5s infinite;

}

/* ==========================================
   Music Rotation
========================================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================
   Countdown Animation
========================================== */

@keyframes flip{

    0%{

        opacity:.3;

        transform:translateY(10px);

    }

    50%{

        opacity:1;

        transform:translateY(-6px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

.flip{

    animation:flip .4s ease;

}

/* ==========================================
   Scroll Reveal
========================================== */

.hidden-section{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================
   Couple Animation
========================================== */

.couple-name{

    animation:fadeUp 1s ease;

}

.heart{

    animation:

        pulse 3s infinite,

        float 4s infinite;

}


/* ==========================================
   Spinner
========================================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}