/* ==========================================================
   RB WEDDING
   OPENING COVER
========================================================== */

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

html{

    scroll-behavior:smooth;

}

body{

    background:#FFF8F3;

    overflow:hidden;

    font-family:"Patrick Hand",cursive;

}

/* ==========================================================
   COVER
========================================================== */

.opening-cover{

    position:fixed;

    inset:0;

    width:100%;

    height:100dvh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFF8F3;

    overflow:hidden;

    z-index:99999;

}

/* ==========================================================
   PAPER
========================================================== */

.opening-paper{

    position:relative;

    width:100%;

    max-width:420px;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:space-evenly;

    align-items:center;

    text-align:center;

    padding:20px;

}

/* ==========================================================
   DECORATION
========================================================== */

.opening-ring{

    position:absolute;

    top:10px;

    left:8px;

    width:62px;

    user-select:none;

    pointer-events:none;

}

.opening-ribbon{

    position:absolute;

    top:205px;

    right:5px;

    width:42px;

    user-select:none;

    pointer-events:none;

}

.sparkle-left{

    position:absolute;

    top:255px;

    left:8px;

    width:30px;

    user-select:none;

    pointer-events:none;

}

.sparkle-right{

    position:absolute;

    top:305px;

    right:18px;

    width:200px;

    user-select:none;

    pointer-events:none;

}

/* ==========================================================
   TAG
========================================================== */

.opening-tag{

    display:block;

    color:#B54836;

    font-size:15px;

    letter-spacing:5px;

    margin-top:5px;

}

/* ==========================================================
   TITLE
========================================================== */

.opening-title{

    font-family:"Short Stack";

    color:#B54836;

    font-size:36px;

    line-height:1.18;

    margin-top:12px;

}

/* ==========================================================
   ILLUSTRATION
========================================================== */

.opening-illustration{

    position:relative;

    width:100%;

    max-width:305px;

    margin:10px auto;

}

.hero-couple{

    width:100%;

    display:block;

}

/* ==========================================================
   PHOTO
========================================================== */

.hero-face{

    position:absolute;

    width:18.5%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:4px;

    z-index:10;

    box-shadow:

    0 8px 18px rgba(0,0,0,.15);

}

/* Groom */

.hero-groom{

    left:27.1%;

    top:20.2%;

}

/* Bride */

.hero-bride{

    left:52.7%;

    top:20.2%;

}


/* ==========================================================
   NAME
========================================================== */

.opening-name{

    font-family:"Short Stack";

    font-size:28px;

    color:#2F2F2F;

    line-height:1.2;

    margin-top:4px;

}

.opening-name span{

    color:#B54836;

}

/* ==========================================================
   DIVIDER
========================================================== */

.opening-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin:10px 0;

}

.opening-divider span{

    width:58px;

    height:2px;

    background:#D8C1B3;

    border-radius:999px;

}

/* ==========================================================
   DATE
========================================================== */

.opening-date{

    font-family:"Patrick Hand";

    font-size:18px;

    color:#B54836;

    margin-top:2px;

}

/* ==========================================================
   GUEST
========================================================== */

.opening-guest{

    margin-top:10px;

}

.opening-guest small{

    display:block;

    font-family:"Patrick Hand";

    color:#8A8A8A;

    font-size:16px;

    margin-bottom:6px;

}

#guestName{

    font-family:"Short Stack";

    font-size:18px;

    color:#B54836;

    line-height:1.5;

    min-height:28px;

}

/* ==========================================================
   BUTTON
========================================================== */

.opening-button{

    width:230px;

    height:58px;

    border:none;

    outline:none;

    border-radius:999px;

    background:#A63A50;

    color:#FFF;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-family:"Patrick Hand";

    font-size:20px;

    box-shadow:

    0 8px 18px rgba(166,58,80,.35);

    transition:.35s;

    margin-top:14px;

}

.opening-button svg{

    transition:.35s;

}

.opening-button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 14px 28px rgba(166,58,80,.42);

}

.opening-button:hover svg{

    transform:translateX(4px);

}

.opening-button:active{

    transform:scale(.97);

}

/* ==========================================================
   ANIMATION
========================================================== */

.opening-tag{

    animation:fadeDown .8s;

}

.opening-title{

    animation:fadeUp .9s;

}

.opening-illustration{

    animation:zoomIn .9s;

}

.opening-name{

    animation:fadeUp 1.1s;

}

.opening-divider{

    animation:fadeUp 1.2s;

}

.opening-date{

    animation:fadeUp 1.3s;

}

.opening-guest{

    animation:fadeUp 1.45s;

}

.opening-button{

    animation:fadeUp 1.6s;

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ==========================================================
   FINAL POLISH
========================================================== */

/* Floating Decoration */

.opening-ring{

    animation:ringFloat 5s ease-in-out infinite;

}

.opening-ribbon{

    animation:ribbonFloat 6s ease-in-out infinite;

}

.sparkle-left{

    animation:sparkle 3s infinite;

}

.sparkle-right{

    animation:sparkle 3s infinite 1.2s;

}

/* ==========================================================
   PHOTO
========================================================== */

.hero-face{

    transition:.4s;

}

.opening-paper:hover .hero-face{

    transform:scale(1.04);

}

/* ==========================================================
   BUTTON
========================================================== */

.opening-button{

    position:relative;

    overflow:hidden;

}

.opening-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transition:.8s;

}

.opening-button:hover::before{

    left:120%;

}

/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes ringFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

}

@keyframes ribbonFloat{

0%,100%{

transform:rotate(0deg);

}

50%{

transform:rotate(6deg);

}

}

@keyframes sparkle{

0%{

opacity:.3;

transform:scale(.9);

}

50%{

opacity:1;

transform:scale(1.1);

}

100%{

opacity:.3;

transform:scale(.9);

}

}

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

@media (max-width:480px){

.opening-paper{

padding:14px 20px;

justify-content:space-evenly;

}

/* Ring */

.opening-ring{

width:250px;

top:10px;

left:-70px;

}

/* Ribbon */

.opening-ribbon{

width:200px;

top:150px;

right:-50px;

}

/* Sparkle */

.sparkle-left{

width:150px;

left:-10px;

top:230px;

}

.sparkle-right{

width:200px;

right:-20px;

top:275px;

}

/* Title */

.opening-title{

font-size:32px;

line-height:1.2;

}

/* Illustration */

.opening-illustration{

max-width:285px;

margin:8px auto;

}

/* Couple Name */

.opening-name{

font-size:26px;

}

/* Divider */

.opening-divider{

margin:8px 0;

}

.opening-divider span{

width:52px;

}

/* Date */

.opening-date{

font-size:18px;

}

/* Guest */

.opening-guest{

margin-top:8px;

}

.opening-guest small{

font-size:15px;

}

#guestName{

font-size:17px;

}

/* Button */

.opening-button{

width:220px;

height:56px;

font-size:19px;

margin-top:12px;

}

}

/* ==========================================================
   SMALL PHONE
========================================================== */

@media (max-height:720px){

.opening-paper{

justify-content:space-evenly;

padding:12px 18px;

}

.opening-title{

font-size:30px;

}

.opening-illustration{

max-width:260px;

}

.opening-name{

font-size:24px;

}

.opening-date{

font-size:17px;

}

.opening-button{

width:210px;

height:54px;

font-size:18px;

}

}

/* ==========================================================
   VERY SMALL DEVICE
========================================================== */

@media (max-height:670px){

.opening-title{

font-size:28px;

}

.opening-illustration{

max-width:245px;

}

.opening-name{

font-size:22px;

}

.opening-divider{

margin:6px 0;

}

.opening-date{

font-size:16px;

}

.opening-guest{

margin-top:6px;

}

.opening-button{

margin-top:10px;

}

}