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

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

html{
    scroll-behavior:smooth;
}

body{

    background:#050505;

    color:#ffffff;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    overflow:hidden;

    -webkit-font-smoothing:antialiased;

}

/* ===================================================
   VARIABLES
=================================================== */

:root{

    --bg:#050505;

    --gold:#E8C46A;

    --gold-soft:rgba(232,196,106,.18);

    --text:#ffffff;

    --muted:#9b9b9b;

}

/* ===================================================
   BACKGROUND
=================================================== */

#bg{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    z-index:0;

}

/* ===================================================
   COMMON
=================================================== */

section{

    position:relative;

    width:100%;

    min-height:100vh;

}

.hidden{

    display:none;

}

/* ===================================================
   OPENING
=================================================== */

#opening{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

    z-index:20;

}

.opening-content{

    width:100%;

    max-width:520px;

    text-align:center;

}

/* ===================================================
   LOGO
=================================================== */

.logo{

    font-size:52px;

    color:var(--gold);

    margin-bottom:28px;

    text-shadow:

        0 0 20px rgba(232,196,106,.35);

}

/* ===================================================
   SUBTITLE
=================================================== */

.eyebrow{

    color:var(--muted);

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:13px;

    margin-bottom:18px;

}

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

#recipient{

    font-size:68px;

    line-height:1.1;

    font-weight:700;

    margin-bottom:42px;

}

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

#openBtn{

    border:none;

    outline:none;

    cursor:pointer;

    background:var(--gold);

    color:#111;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    padding:18px 56px;

    border-radius:999px;

    transition:.35s;

}

#openBtn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 0 35px rgba(232,196,106,.25);

}

#openBtn:active{

    transform:scale(.96);

}

/* ===================================================
   MORPH
=================================================== */

#morphScene{

    position:fixed;

    inset:0;

    display:none;

    z-index:15;

}

#morphCanvas{

    width:100%;

    height:100%;

    display:block;

}

/* ===================================================
   LANDING
=================================================== */

#landing{

    display:none;

}

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 24px;

}

.hero-content{

    width:100%;

    max-width:720px;

    text-align:center;

}

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

.hero-photo{

    width:180px;

    height:180px;

    margin:0 auto 30px;

    border-radius:50%;

    overflow:hidden;

    border:2px solid rgba(232,196,106,.25);

}

.hero-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

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

.hero-label{

    color:var(--gold);

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:13px;

    margin-bottom:18px;

}

#heroName{

    font-size:62px;

    margin-bottom:26px;

}

#heroMessage{

    max-width:620px;

    margin:auto;

    color:#bdbdbd;

    line-height:1.8;

    font-size:18px;

}

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

@media(max-width:768px){

    .logo{

        font-size:42px;

    }

    .eyebrow{

        font-size:11px;

        letter-spacing:3px;

    }

    #recipient{

        font-size:42px;

    }

    #openBtn{

        width:100%;

        max-width:280px;

    }

    .hero-photo{

        width:140px;

        height:140px;

    }

    #heroName{

        font-size:42px;

    }

    #heroMessage{

        font-size:16px;

    }

}