.envelope{

    width: 100px;
    cursor: pointer;
	margin:10px;
}

.envelope:hover{
    transform:scale(1.03);
}

.envelope img{
    width:100%;
    display:block;
    user-select:none;
    pointer-events:none;
}

/* ===== КАРТОЧКА ===== */
.card{
    position:absolute;
    left:50%;
    top:20%;
    width:88%;

    /* СТАРТ: узкая щель (как будто внутри конверта) */
    transform:translate(-50%, 0) scale(0.3, 0.08);
    opacity:0;
    z-index:1;

    border-radius:14px;
    box-shadow:
            0 20px 60px rgba(0,0,0,0.7),
            0 0 0 1px rgba(255,255,255,0.08);

    transform-origin: center center;
    transition:
            transform 0.7s cubic-bezier(0.34, 1.2, 0.64, 1),
            opacity 0.4s ease;
    will-change: transform, opacity;
}

/* Закрытый конверт */
.closed{
    position:relative;
    z-index:3;
    opacity:1;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Открытый конверт */
.open{
    position:absolute;
    inset:0;
    z-index:2;
    opacity:0;
    transition: opacity 0.35s ease;
}

/* ===== АКТИВНОЕ СОСТОЯНИЕ ===== */
.envelope.active .closed{
    opacity:0;
    transform:scale(0.96);
}

.envelope.active .open{
    opacity:1;
}

/* ===== КАРТОЧКА ВЫЛЕТАЕТ И РАЗВОРАЧИВАЕТСЯ ===== */
.envelope.active .card{
    opacity:1;
    /* ФИНАЛ: полная ширина и высота */
    transform:translate(-50%, -82%) scale(1, 1);
    transition:
            transform 1.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.15s,
            opacity 0.5s ease 0.15s;
    z-index:7;
}

/* Дополнительный эффект парения */
.envelope.active:hover .card{
    transform:translate(-50%, -84%) scale(1.02, 1.02);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Адаптив */
@media (max-width: 500px){
    .envelope{
        width:85vw;
    }
    .envelope.active .card{
        transform:translate(-50%, -78%) scale(1, 1);
    }
}

.envelope{
    position:relative;
    width:150px;
    cursor:pointer;
}

/* карта */
.card{
    position:absolute;
    width:78% !important;
    left:50%;
    top:35%;
    transform:translateX(-50%);
    z-index:1;
}

/* закрытый конверт */
.closed{
    position:relative;
    z-index:3;
}

/* открытый конверт */
.open{
    position:absolute;
    inset:0;
    opacity:0;
    top: -38px;
    z-index: 5;
    width: 453px;
    left: -17px;
}

/* запуск анимации */

.envelope.animate .closed{
    animation:hideClosed 2.5s forwards;
}

.envelope.animate .open{
    animation:showOpen 2.5s forwards;
}

.envelope.animate .card{
    animation:extractCard 3.2s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes hideClosed{
    to{
        opacity:0;
    }
}

@keyframes showOpen{
    to{
        opacity:1;
    }
}

@keyframes extractCard{

    /* внутри конверта */
    0%{
        opacity:0;
        transform:
                translate(-50%,0)
                scale(0.25,0.06);
    }

    /* появилась щель */
    15%{
        opacity:1;
        transform:
                translate(-50%,-10px)
                scale(0.4,0.15);
    }

    /* начало выезда */
    40%{
        transform:
                translate(-50%,-70px)
                scale(0.7,0.45);
    }

    /* половина карты */
    70%{
        transform:
                translate(-50%,-150px)
                scale(0.92,0.85);
    }

    /* карта почти вышла */
    90%{
        transform:
                translate(-50%,-220px)
                scale(1.02);
    }

    /* финал */
    100%{
        transform:
                translate(-50%,-210px)
                scale(1);
        opacity:1;
    }
}

.convert{
    top: 6px;
    position: absolute;
    left: 0px;
    z-index: 12;
    width: 450px;
}

.open{
    width: 420px;
    position: absolute;
    inset: 0;
    opacity: 0;
    top: -58px;
    z-index: 5;
    left: 0px;
}
.label{
    font-family: "Adwaita Sans", serif;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 50%;
    font-variant-caps: all-petite-caps;
    color: #5c5642;
}

.conteiner_conv{
    display: flex;
    margin: 15px;
    position: fixed !important;  /* поверх всего */
    bottom: 20px;
    left: 20px;
    z-index: 9999 !important;    /* выше меню */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}