/* =========================================================
   50TH BIRTHDAY INVITATION
   COMPLETE NEW STYLE
========================================================= */

:root {
    --cream: #f8f3ea;
    --cream-dark: #eee3d2;
    --paper: #fffdf8;
    --brown: #554335;
    --brown-light: #806c59;
    --gold: #b99a68;
    --gold-light: #d7bf94;
    --shadow: rgba(55, 40, 25, .25);

    --serif: "Noto Serif Armenian", Georgia, serif;
    --sans: "Noto Sans Armenian", system-ui, sans-serif;
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background: #fff;

    color: var(--brown);

    font-family: var(--sans);

    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   TOAST
========================================================= */

#toast {
    position: fixed;

    top: 20px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 10000;

    padding: 10px 18px;

    border-radius: 8px;

    background: var(--brown);

    color: white;

    font-size: 13px;

    opacity: 0;

    pointer-events: none;

    transition: opacity .3s ease;
}

#toast.show {
    opacity: 1;
}


/* =========================================================
   ENVELOPE SCREEN
========================================================= */

#envelope {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    overflow: hidden;

    background: #fff;

    transition:
        opacity .9s ease,
        visibility .9s ease;
}


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

#envelope .bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    pointer-events: none;
}


/* Light overlay */

#envelope .veil {
    position: absolute;

    inset: 0;

    z-index: 1;

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

    pointer-events: none;
}


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

.envelope-content {
    position: relative;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


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

.env-btn {
    position: relative;

    width: 430px;
    height: 285px;

    max-width: 90vw;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    perspective: 1800px;

    transform-style: preserve-3d;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   ENVELOPE BACK
========================================================= */

.env-back {
    position: absolute;

    inset: 0;

    z-index: 1;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #fffdf8 0%,
            #f7efe2 55%,
            #eadcc8 100%
        );

    border:
        1px solid
        rgba(185, 154, 104, .35);

    box-shadow:
        0 35px 70px -30px
        rgba(55, 40, 25, .55),

        inset 0 1px 0
        rgba(255, 255, 255, .95);
}


/* =========================================================
   FLORAL ENVELOPE
========================================================= */

.pocket {
    position: absolute;

    inset: 0;

    z-index: 5;

    overflow: hidden;

    border-radius: 7px;

    background: #f6eee1;
}


.env-pattern {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    opacity: .98;

    mix-blend-mode: multiply;

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


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

.fold {
    position: absolute;

    z-index: 6;

    pointer-events: none;

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


/* LEFT */

.fold-left {
    left: 0;
    bottom: 0;

    width: 52%;
    height: 73%;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.15),
            rgba(205,190,168,.08)
        );

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


/* RIGHT */

.fold-right {
    right: 0;
    bottom: 0;

    width: 52%;
    height: 73%;

    background:
        linear-gradient(
            225deg,
            rgba(255,255,255,.15),
            rgba(205,190,168,.08)
        );

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


/* BOTTOM */

.fold-bottom {
    left: 0;
    right: 0;
    bottom: 0;

    height: 46%;

    background:
        linear-gradient(
            to top,
            rgba(255,255,255,.05),
            rgba(255,255,255,.12)
        );

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


/* =========================================================
   FOLD LINES
========================================================= */

.fold-left::after,
.fold-right::after,
.fold-bottom::after {
    content: "";

    position: absolute;

    pointer-events: none;

    background:
        linear-gradient(
            transparent,
            rgba(125, 95, 60, .3),
            transparent
        );
}


.fold-left::after {
    width: 1px;
    height: 100%;

    right: 0;
    top: 0;

    transform:
        rotate(39deg);

    transform-origin: top center;
}


.fold-right::after {
    width: 1px;
    height: 100%;

    left: 0;
    top: 0;

    transform:
        rotate(-39deg);

    transform-origin: top center;
}


.fold-bottom::after {
    width: 1px;
    height: 100%;

    left: 50%;
    top: 0;
}


/* =========================================================
   INNER ENVELOPE BORDER
========================================================= */

.pocket::after {
    content: "";

    position: absolute;

    inset: 7px;

    z-index: 18;

    border:
        1px solid
        rgba(185, 154, 104, .25);

    border-radius: 5px;

    pointer-events: none;
}


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

.flap {
    position: absolute;

    inset: 0;

    z-index: 15;

    transform-origin: 50% 0%;

    transform-style: preserve-3d;

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


.flap-face {
    position: absolute;

    inset: 0;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #fffefa 0%,
            #faf4e9 60%,
            #f0e4d4 100%
        );

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

    border-radius: 7px;

    box-shadow:
        inset 0 -3px 5px
        rgba(120,95,65,.12),

        inset 0 1px 1px
        rgba(255,255,255,.95);
}


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

.flap-face .left-edge,
.flap-face .right-edge {
    position: absolute;

    top: 0;

    width: 18px;
    height: 100%;

    pointer-events: none;
}


.flap-face .left-edge {
    left: 0;

    background:
        linear-gradient(
            90deg,
            rgba(110,88,62,.18),
            rgba(255,255,255,.55),
            transparent
        );
}


.flap-face .right-edge {
    right: 0;

    background:
        linear-gradient(
            270deg,
            rgba(110,88,62,.18),
            rgba(255,255,255,.55),
            transparent
        );
}


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

.seal {
    position: absolute;

    left: 50%;
    top: 67%;

    z-index: 40;

    width: 78px;
    height: 78px;

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

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

    pointer-events: none;
}


.seal img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 10px
            rgba(74,59,46,.38)
        );
}


/* =========================================================
   SMALL CARD INSIDE ENVELOPE
========================================================= */

/* =========================================
   CARD COMES OUT FROM TOP OF ENVELOPE
========================================= */

.card-out {
    transform:
        translate(-50%, 0)
        translateY(100px)
        scale(.92);

    opacity: 0;

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


body.opening .card-out {
    position: fixed;

    left: 50%;
    top: 50%;

    width: min(500px, 90vw);
    height: min(720px, 88vh);

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

    opacity: 1;

    z-index: 10001;
    background: white;
}


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

.card-out::before {
    content: "";

    position: absolute;

    inset: 10px;

    z-index: 2;

    border:
        1px solid
        rgba(185,154,104,.25);

    pointer-events: none;
}


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

.card-inner {
    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

    text-align: center;
}


/* Small title */

.card-small {
    margin-bottom: 5px;

    font-family: var(--sans);

    font-size: 9px;

    letter-spacing: .28em;

    color: #9a856c;

    text-transform: uppercase;
}


/* 50 */

.card-title {
    font-family: var(--serif);

    font-size: 32px;

    line-height: 1.15;

    font-weight: 400;

    color: #765b40;
}


/* Name */

.birthday-name {
    margin-top: 3px;

    font-family: var(--serif);

    font-size: 17px;

    letter-spacing: .08em;

    color: #4e4034;
}


/* Image */

.birthday-image {
    display: none;

    overflow: hidden;

    border-radius: 5px;
}


/* Text */

.card-text {
    margin-top: 8px;

    font-family: var(--serif);

    font-size: 11px;

    line-height: 1.6;

    color: #85715d;
}


/* Number */

.big-number {
    font-family: var(--serif);

    font-size: 45px;

    line-height: 1;

    color: var(--gold);

    margin-top: 5px;
}


/* Event info */

.event-info {
    display: none;
}


/* Invitation message */

.invitation-message {
    display: none;
}


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

.hint {
    margin: 28px 0 0;

    font-family: var(--sans);

    font-size: 10px;

    letter-spacing: .3em;

    text-transform: uppercase;

    color: #756555;

    transition:
        opacity .4s ease;
}


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

body.opening .flap {
    transform:
        translateY(-120%);

    opacity: 0;
}


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;
}


body.opening .env-pattern {
    opacity: 0;

    transform:
        scale(.96);
}


body.opening .seal {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.35)
        rotate(-15deg);
}


body.opening .hint {
    opacity: 0;
}


/* =========================================================
   CARD OPENS — LARGE
========================================================= */

body.opening .card-out {
    position: fixed;

    left: 50%;
    top: 50%;

    right: auto;
    bottom: auto;

    width: min(500px, 90vw);

    height: min(720px, 88vh);

    opacity: 1;

    z-index: 10001;

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

    border-radius: 10px;

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

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


/* =========================================================
   LARGE CARD CONTENT
========================================================= */

body.opening .card-inner {
    padding: 42px 38px;
}


/* Small title */

body.opening .card-small {
    margin-bottom: 10px;

    font-size: 14px;

    letter-spacing: .35em;
    margin-top: 50px;
}


/* Main title */

body.opening .card-title {
    font-size: 46px;

    color: goldenrod;
}


/* Name */

body.opening .birthday-name {
    margin-top: 7px;

    font-size: 22px;

    letter-spacing: .1em;
}


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

body.opening .birthday-image {
    display: block;

    width: 250px;
    height: 190px;

    margin-top: 22px;

}


.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}


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

body.opening .card-text {
    margin-top: 20px;

    max-width: 370px;

    font-size: 14px;

    line-height: 1.8;

    color: #796755;
}


/* =========================================================
   BIG 50
========================================================= */

body.opening .big-number {
    margin-top: 10px;

    font-size: 76px;

    line-height: .9;

    font-weight: 400;

    color: var(--gold);
}


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

body.opening .event-info {
    width: 100%;

    display: flex;

    align-items: stretch;

    justify-content: center;

    gap: 0;

    margin-top: 22px;

    padding: 15px 0;

    border-top:
        1px solid
        rgba(185,154,104,.4);

    border-bottom:
        1px solid
        rgba(185,154,104,.4);
}


body.opening .info-item {
    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 0 10px;

    border-right:
        1px solid
        rgba(185,154,104,.25);
}


body.opening .info-item:last-child {
    border-right: 0;
}


body.opening .info-label {
    font-family: var(--sans);

    font-size: 9px;

    letter-spacing: .2em;

    color: #a28a6e;

    margin-bottom: 5px;
}


body.opening .info-value {
    font-family: var(--serif);

    font-size: 12px;

    line-height: 1.35;

    color: #514337;

    text-align: center;
}


/* =========================================================
   FINAL INVITATION
========================================================= */

body.opening .invitation-message {
    display: block;

    margin-top: 20px;

    font-family: var(--serif);

    font-size: 13px;

    line-height: 1.7;

    color: black;
}


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

body.opening .card-inner::after {
    content: "♥";

    position: absolute;

    bottom: 18px;
    left: 50%;

    transform:
        translateX(-50%);

    font-size: 12px;

    color: var(--gold);

    opacity: .75;
}


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

body.opened #envelope {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


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

@media (max-width: 600px) {

    #envelope {
        padding: 15px;
    }


    .env-btn {
        width: 350px;
        height: 235px;

        max-width: 92vw;
    }


    .seal {
        width: 65px;
        height: 65px;
    }


    .hint {
        margin-top: 22px;

        font-size: 9px;
    }


    .card-out {
        left: 15px;
        right: 15px;

        height: 170px;
    }


    .card-small {
        font-size: 7px;
    }


    .card-title {
        font-size: 26px;
    }


    .birthday-name {
        font-size: 14px;
    }


    .card-text {
        font-size: 9px;
    }


    .big-number {
        font-size: 38px;
    }


    /* OPEN CARD */

    body.opening .card-out {

        width: 91vw;

        height: 86vh;

        max-height: 700px;

        border-radius: 9px;
    }


    body.opening .card-inner {

        padding:
            30px 20px 35px;
    }


    body.opening .card-small {

        font-size: 15px;

        letter-spacing: .27em;

        margin-top: 53px;
    }


    body.opening .card-title {

        font-size:
            clamp(34px, 10vw, 44px);
    }


    body.opening .birthday-name {

        font-size: 18px;

        margin-top: 5px;
    }


 


    body.opening .card-text {

        margin-top: 15px;

        max-width: 330px;

        font-size: 15px;

        line-height: 1.65;
    }


    body.opening .big-number {

        font-size: 62px;

        margin-top: 7px;
    }


    body.opening .event-info {

        margin-top: 14px;

        padding: 11px 0;
    }


    body.opening .info-item {

        padding: 0 5px;
    }


    body.opening .info-label {

        font-size: 12px;

        letter-spacing: .12em;
    }


    body.opening .info-value {

        font-size: 12px;

        line-height: 1.3;
    }


    body.opening .invitation-message {

        margin-top: 14px;

        font-size: 16px;

        line-height: 1.55;
    }


    body.opening .card-inner::after {

        bottom: 10px;

        font-size: 10px;
    }
}


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

@media (max-width: 380px) {

    .env-btn {
        width: 320px;
        height: 215px;
    }


    .seal {
        width: 58px;
        height: 58px;
    }


    body.opening .card-out {

        width: 92vw;

        height: 88vh;
    }


    body.opening .card-inner {

        padding:
            25px 15px 30px;
    }


    body.opening .birthday-image {

        width: 190px;

        height: 140px;
    }


    body.opening .card-text {

        font-size: 10px;
    }


    body.opening .big-number {

        font-size: 55px;
    }


    body.opening .event-info {

        margin-top: 10px;
    }


    body.opening .info-value {

        font-size: 12px;
    }


    body.opening .invitation-message {

        font-size: 9px;
    }
}
a { color: goldenrod;}
.five {
  width: 11rem;
}
/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 340px) {

    .env-btn {
        width: 290px;
        height: 195px;
    }


    body.opening .card-out {

        height: 90vh;
    }


    body.opening .birthday-image {

        width: 170px;

        height: 120px;
    }


    body.opening .card-title {

        font-size: 31px;
    }


    body.opening .birthday-name {

        font-size: 15px;
    }


    body.opening .big-number {

        font-size: 48px;
    }
}

/* =====================================================
   MUSIC TOGGLE
===================================================== */

.music-toggle {
    position: fixed;

    right: 20px;
    bottom: 20px;

    width: 46px;
    height: 46px;

    border: 1px solid #c5a15a;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);

    color: #b28b43;

    font-size: 20px;

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

    cursor: pointer;

    z-index: 999999;

    opacity: 0;
    visibility: hidden;

    transform: scale(.8);

    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .3s ease;

    box-shadow:
        0 6px 20px rgba(70, 55, 35, .18);
}


/* Show after invitation opens */

body.opened .music-toggle {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}


/* Playing animation */

.music-toggle.playing {
    animation: musicPulse 1.8s ease-in-out infinite;
}


@keyframes musicPulse {

    0%, 100% {
        box-shadow:
            0 6px 20px rgba(70, 55, 35, .18);
    }

    50% {
        box-shadow:
            0 6px 28px rgba(197, 161, 90, .45);
    }

}


/* Click */

.music-toggle:active {
    transform: scale(.92);
}


/* Mobile */

@media (max-width: 600px) {

    .music-toggle {

        right: 14px;
        bottom: 14px;

        width: 43px;
        height: 43px;

        font-size: 18px;
    }

}