:root {

    --navy: #101b2b;
    --navy2: #18283d;

    --gold: #b8944d;
    --gold-light: #e0c27b;

    --cream: #f8f3e9;
    --cream2: #eee5d5;

    --text: #273346;
    --muted: #737b86;

    --serif:
        "Noto Serif Armenian",
        Georgia,
        serif;

    --sans:
        "Noto Sans Armenian",
        Arial,
        sans-serif;
}


* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    width: 100%;
    height: 100%;

}


body {

    overflow: hidden;

    background:
        #101b2b;

    font-family:
        var(--sans);

    color:
        var(--text);
}


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

#envelope {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        var(--navy);

    z-index: 1;
}


.bg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}


.veil {

    position: absolute;

    inset: 0;

    background:
        rgba(8,18,31,.22);

    z-index: 1;
}


/* =====================================================
   ENVELOPE CONTENT
===================================================== */

.envelope-content {

    position: relative;

    width: 500px;
    height: 680px;

    z-index: 10;
}


/* =====================================================
   ENVELOPE BODY
===================================================== */

.env-back {

    position: absolute;

    left: 50%;

    bottom: 125px;

    width: 440px;
    height: 285px;

    transform:
        translateX(-50%);

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #1d2d43,
            #0c1726
        );

    border:
        1px solid
        rgba(184,148,77,.55);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.42);

    z-index: 20;
}


/* =====================================================
   POCKET
===================================================== */

.pocket {

    position: absolute;

    left: 50%;

    bottom: 125px;

    width: 440px;
    height: 285px;

    transform:
        translateX(-50%);

    overflow: hidden;

    border-radius: 8px;

    background:
        #16263b;

    z-index: 30;

    transition:
        opacity .8s ease;
}


.env-pattern {

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .28;

    mix-blend-mode: screen;
}


/* =====================================================
   FOLDS
===================================================== */

.fold {

    position: absolute;

    transition:
        transform 1s
        cubic-bezier(.18,.8,.25,1),
        opacity .7s ease;
}


.fold-left {

    left: 0;
    bottom: 0;

    width: 56%;
    height: 78%;

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

    clip-path:
        polygon(
            0 0,
            100% 100%,
            0 100%
        );
}


.fold-right {

    right: 0;
    bottom: 0;

    width: 56%;
    height: 78%;

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

    clip-path:
        polygon(
            100% 0,
            100% 100%,
            0 100%
        );
}


.fold-bottom {

    left: 0;
    bottom: 0;

    width: 100%;
    height: 50%;

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

    clip-path:
        polygon(
            0 100%,
            50% 0,
            100% 100%
        );
}


/* =====================================================
   FLAP
===================================================== */

.flap {

    position: absolute;

    left: 50%;

    bottom: 125px;

    width: 440px;
    height: 285px;

    transform:
        translateX(-50%);

    transform-origin:
        50% 0;

    z-index: 40;

    transition:
        transform 1s
        cubic-bezier(.18,.8,.25,1),
        opacity .6s ease;
}


.flap-face {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            145deg,
            #22364f,
            #101d2e
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            50% 70%
        );

    border-radius: 8px;
}


.left-edge,
.right-edge {

    position: absolute;

    top: 0;

    width: 1px;

    height: 75%;

    background:
        rgba(224,194,123,.55);
}


.left-edge {

    left: 1px;

    transform:
        rotate(-31deg);

    transform-origin:
        top;
}


.right-edge {

    right: 1px;

    transform:
        rotate(31deg);

    transform-origin:
        top;
}


/* =====================================================
   SEAL
===================================================== */

.seal {

    position: absolute;

    left: 50%;

    bottom: 162px;

    width: 78px;
    height: 78px;

    transform:
        translateX(-50%);

    z-index: 60;

    transition:
        transform .7s ease,
        opacity .6s ease;
}


.seal img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 9px
            rgba(0,0,0,.4)
        );
}


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

.env-btn {

    position: absolute;

    left: 50%;
    top: 9rem;

    width: 440px;
    height: 285px;

    transform:
        translateX(-50%);

    border: 0;

    background:
        transparent;

    cursor: pointer;

    z-index: 100;
}


/* =====================================================
   HINT
===================================================== */

.hint {

    position: absolute;

    left: 50%;
    bottom: 62px;

    transform:
        translateX(-50%);

    margin: 0;

    color:
        #e1d5bd;

    font-size:
        11px;

    letter-spacing:
        .22em;

    white-space:
        nowrap;

    z-index: 100;

    transition:
        opacity .5s ease;
}


/* =====================================================
   CARD
===================================================== */

.card-out {

    position: fixed;

    left: 50%;
    top: 50%;

    width: 500px;
    height: 720px;

    transform:
        translate(-50%, 310px)
        scale(.72);

    opacity: 0;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #f5efe4
        );

    border-radius: 7px;

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

    z-index: 5;

    pointer-events:
        none;

    transition:
        transform 1.4s
        cubic-bezier(.12,.86,.2,1),
        opacity .7s ease;
}


/* =====================================================
   CARD INNER
===================================================== */

.card-inner {

    position: relative;

    width: 100%;
    height: 100%;

    padding:
        28px 38px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    overflow:
        hidden;
}


/* DOUBLE BORDER */

.card-inner::before {

    content: "";

    position: absolute;

    inset: 11px;

    border:
        1px solid
        rgba(184,148,77,.75);

    pointer-events: none;
}


.card-inner::after {

    content: "";

    position: absolute;

    inset: 17px;

    border:
        1px solid
        rgba(184,148,77,.22);

    pointer-events: none;
}


/* =====================================================
   CORNERS
===================================================== */

.corner {

    position: absolute;

    width: 36px;
    height: 36px;

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

    opacity: .55;
}


.corner-tl {
    top: 23px;
    left: 23px;

    border-width:
        1px 0 0 1px;
}


.corner-tr {
    top: 23px;
    right: 23px;

    border-width:
        1px 1px 0 0;
}


.corner-bl {
    bottom: 23px;
    left: 23px;

    border-width:
        0 0 1px 1px;
}


.corner-br {
    bottom: 23px;
    right: 23px;

    border-width:
        0 1px 1px 0;
}


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

.card-small {

    position: relative;

    z-index: 5;

    margin-top: 1px;

    color:
        var(--gold);

    font-size:
        16px;

    letter-spacing:
        .35em;
        margin-bottom: 8px;
}


/* =====================================================
   50 IMAGE
===================================================== */

.number-wrap {

    position: relative;

    z-index: 5;

    width: 175px;
    height: 125px;

    margin-top:
        4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.five {

    width:
        175px;

    max-height:
        125px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 8px 5px
            rgba(65,45,20,.25)
        );
}


/* =====================================================
   ANNIVERSARY
===================================================== */

.anniversary-title {

    position: relative;

    z-index: 5;

    margin-top:
        -5px;

    font-family:
        var(--serif);

    font-size:
        20px;

    letter-spacing:
        .18em;

    color:
        var(--gold);
}


/* =====================================================
   GOLD LINE
===================================================== */

.gold-line {

    position: relative;

    z-index: 5;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin:
        4px 0;

    color:
        var(--gold);

    font-size:
        11px;
}


.gold-line span {

    width:
        65px;

    height:
        1px;

    background:
        var(--gold);
}


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

.birthday-name {

    position: relative;

    z-index: 5;

    margin-top:
        2px;

    font-family:
        var(--serif);

    font-size:
        24px;

    font-weight:
        500;

    letter-spacing:
        .08em;

    color:
        var(--navy);
}


/* =====================================================
   IMAGE
===================================================== */




.birthday-image img {

      width: 100%;
    height: 200px;
    object-fit: contain;

}


/* =====================================================
   TEXT
===================================================== */

.card-text {

    position: relative;

    z-index: 5;

    margin-top:
        10px;

    font-family:
        var(--serif);

    font-size:
        10px;

    line-height:
        1.65;

    color:
        #626b76;
}


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

.card-title {

    position: relative;

    z-index: 5;

    margin-top:
        6px;

    font-family:
        var(--serif);

    font-size:
        18px;

    font-weight:
        500;

    color:
        var(--navy);

    letter-spacing:
        .04em;
}


/* =====================================================
   EVENT INFO
===================================================== */

.event-info {

    position: relative;

    z-index: 5;

    width:
        100%;

    margin-top:
        12px;

    padding:
        10px 4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-top:
        1px solid
        rgba(184,148,77,.5);

    border-bottom:
        1px solid
        rgba(184,148,77,.5);
}


.info-item {

    flex:
        1;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}


.info-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        23px;

    font-family:
        var(--serif);

    font-size:
        11px;

    color:
        var(--gold);
}


.info-label {

    margin-top:
        2px;

    font-size:
        12px;

    letter-spacing:
        .20em;

    color:
        #92908a;
}


.info-value {

    margin-top:
        2px;

    font-family:
        var(--serif);

    font-size:
        12px;

    color:
        var(--navy);
}


.info-sub {

    font-size:
        8px;

    color:
        #777;
}


.restaurant {

    max-width:
        110px;

    line-height:
        1.35;
}


.map-link {

    margin-top:
        3px;

    font-size:
        7px;

    color:
        var(--gold);

    text-decoration:
        none;
}


.info-divider {

    width:
        1px;

    height:
        45px;

    background:
        rgba(184,148,77,.35);
}


/* =====================================================
   FINAL MESSAGE
===================================================== */

.invitation-message {

    position: relative;

    z-index: 5;

    margin-top:
        10px;

    font-family:
        var(--serif);

    font-size:
        9px;

    line-height:
        1.6;

    color:
        #747b84;
}


.waiting-text {

    position: relative;

    z-index: 5;

    margin-top:
        5px;

    font-family:
        var(--serif);

    font-size:
        15px;

    font-style:
        italic;

    color:
        var(--gold);
}


.bottom-mark {

    position:
        relative;

    z-index:
        5;

    margin-top:
        1px;

    font-size:
        13px;

    color:
        var(--gold);
}


/* =====================================================
   OPEN ANIMATION
   CARD COMES FROM ABOVE THE ENVELOPE
===================================================== */

body.opening .card-out {

    transform:
        translate(-50%, -50%)
        scale(1);

    opacity:
        1;

    z-index:
        200;

    pointer-events:
        auto;
}


/* =====================================================
   FLAP
===================================================== */

body.opening .flap {

    transform:
        translateX(-50%)
        rotateX(180deg)
        translateY(-15px);

    opacity:
        0;
}


/* =====================================================
   POCKET
===================================================== */

body.opening .pocket {

    opacity:
        0;
}


/* =====================================================
   FOLDS
===================================================== */

body.opening .fold-left {

    transform:
        translateX(-120%);

    opacity:
        0;
}


body.opening .fold-right {

    transform:
        translateX(120%);

    opacity:
        0;
}


body.opening .fold-bottom {

    transform:
        translateY(120%);

    opacity:
        0;
}


/* =====================================================
   SEAL
===================================================== */

body.opening .seal {

    transform:
        translateX(-50%)
        scale(.15)
        rotate(15deg);

    opacity:
        0;
}


/* =====================================================
   HINT
===================================================== */

body.opening .hint {

    opacity:
        0;

    pointer-events:
        none;
}


body.opening .env-btn {

    pointer-events:
        none;
}


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

@media (max-width: 600px) {

    .envelope-content {
        width: 100vw;
        height: 100vh;
    }


    .env-back,
    .pocket,
    .flap,
    .env-btn {

        width: 88vw;
        height: 57vw;

        max-width: 440px;
        max-height: 285px;
    }


    .env-back,
    .pocket,
    .flap,
    .env-btn {

        top: 18rem;
    }


    .seal {

             width: 80px;
        height: 80px;
               top: 25rem;
    }

.main-container {

    display: flex;
    justify-content: center;
    align-items: center;
}
    .card-out {

        width: 91vw;

        height: 88vh;

        max-height: 720px;
    }


    .card-inner {

        padding:
            25px 17px;
    }


    .number-wrap {

        width: 145px;
        height: 105px;
    }


    .five {

        width: 145px;
        max-height: 105px;
    }


    .birthday-name {

        font-size: 19px;
    }


   


    .card-text {

        font-size: 14px;
    }


    .card-title {

        font-size: 16px;
    }


    .info-value {

        font-size: 12px;
    }
a {
    color: #101b2b;
}

    .restaurant {

        max-width: 78px;
    }


    .invitation-message {

        font-size: 16px;
    }


    .waiting-text {

        font-size: 13px;
    }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 380px) {

    .card-out {
        height: 90vh;
    }


    .number-wrap {

        width: 125px;
        height: 90px;
    }


    .five {

        width: 125px;
    }



    .birthday-name {

        font-size: 17px;
    }

}
/* =====================================================
   MUSIC BUTTON
===================================================== */

#musicButton {

    position: fixed;

    top: 22px;
    right: 22px;

    width: 52px;
    height: 52px;

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

    border-radius: 50%;

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

    background:
        linear-gradient(
            145deg,
            rgba(24,40,61,.96),
            rgba(8,18,31,.96)
        );

    color: var(--gold-light);

    font-size: 21px;

    cursor: pointer;

    z-index: 9999;

    box-shadow:
        0 8px 25px rgba(0,0,0,.35),
        inset 0 0 12px rgba(224,194,123,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* Hover */

#musicButton:hover {

    transform: scale(1.08);

    border-color: var(--gold-light);

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 20px rgba(224,194,123,.20);
}


/* Click */

#musicButton:active {

    transform: scale(.94);

}


/* Playing animation */

#musicButton.playing {

    animation:
        musicPulse 1.8s ease-in-out infinite;
}


@keyframes musicPulse {

    0%,
    100% {

        box-shadow:
            0 8px 25px rgba(0,0,0,.35),
            0 0 0 rgba(224,194,123,0);

    }

    50% {

        box-shadow:
            0 8px 25px rgba(0,0,0,.35),
            0 0 25px rgba(224,194,123,.35);

    }

}


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

@media (max-width: 600px) {

    #musicButton {

        top: 15px;
        right: 15px;

        width: 45px;
        height: 45px;

        font-size: 18px;

    }

}