/*========================================================Шаг 1==================================================================*/

.phone-mockup .envelope-wrapper,
.hero-preview .envelope-wrapper {
    position: relative;
    width: 260px;
    height: 173px;      /* 260 / 3 * 2 = 173 */
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    z-index: 20;
    /*filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.15));*/
    margin: 0 auto;
}

.phone-mockup .front,
.hero-preview .front  {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 130px solid #e7c89c;
    border-right: 130px solid #debb86;
    border-top: 87px solid transparent;
    border-bottom: 86px solid #f2dbb4;
    z-index: 10;
    border-radius: 0 0 10px 10px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.05));
    transition: all 0.3s ease;
    z-index: 10 !important;
}

.phone-mockup .envelope-back,
.hero-preview .envelope-back  {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f3dcb2;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.02), 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1;
    transition: all 0.5s ease; 
}

.phone-mockup .flap,
.hero-preview .flap  {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 130px solid transparent;
    border-right: 130px solid transparent;
    border-top: 98px solid #fbefd5;
    transform-origin: top;
    transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 10;
}

.phone-mockup .wax-seal-img,
.hero-preview .wax-seal-img  {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: auto;
    z-index: 15;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.phone-mockup .envelope-wrapper.open .flap,
.hero-preview .envelope-wrapper.open .flap {
    transform: rotateX(180deg);
    z-index: 9;
}

.phone-mockup .envelope-wrapper.open .letter,
.hero-preview .envelope-wrapper.open .letter {
    bottom: 60px;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(0,0,0,0.2);
    z-index: 10;
}

.phone-mockup .envelope-wrapper.hide,
.hero-preview .envelope-wrapper.hide {
    opacity: 0;
    transform: scale(0.3) rotate(-5deg);
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.34, 1.1, 0.55, 1);
    filter: blur(3px);
}



/*========================================================Открытка==================================================================*/

.envelope-wrapper {
    position: relative;
    width:360px;    
    height: 240px;    
    
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    z-index: 20;
    /*filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.15));*/
    margin: 0 auto; 
}

.front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 180px solid #e7c89c;
    border-right: 180px solid #debb86;
    border-top: 120px solid transparent;
    border-bottom: 120px solid #f2dbb4;
    z-index: 10;
    border-radius: 0 0 12px 12px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.05));
    transition: all 0.3s ease; 
}

.envelope-back {
    position: absolute;
    width: 100%;
    height: 100%;   
    background: #f3dcb2;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.02), 0 6px 12px rgba(0,0,0,0.1);
    z-index: 1;
    transition: all 0.5s ease;  
}

.flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 180px  solid transparent;
    border-right: 180px solid transparent;
    border-top: 135px solid #fbefd5;
    transform-origin: top;
    transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 10;
    border-radius: 0px 0px 0 0;
    transition: all 0.3s ease;  
}

.wax-seal-img {
    position: absolute;
    bottom: 85px;          
    left: 50%;
    transform: translateX(-50%);
    width: 65px;            
    height: auto;
    z-index: 15;
    pointer-events: none;   
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.envelope-wrapper.open .flap {
    transform: rotateX(180deg);
    z-index: 9;
}

.envelope-wrapper.open .letter {
    bottom: 60px;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(0,0,0,0.2);
    z-index: 10;
}

.envelope-wrapper.hide {
    opacity: 0;
    transform: scale(0.3) rotate(-5deg);
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.34, 1.1, 0.55, 1);
    filter: blur(3px);
}





/* Адаптация для экранов до 750px */
@media (max-width: 410px) and (min-width: 0px)  {
    .envelope-wrapper {
        width: 230px;
        height: 153px;
    }
    .front {
        border-left: 115px solid #e7c89c;
        border-right: 115px solid #debb86;
        border-top: 77px  solid transparent;
        border-bottom: 76px solid #f2dbb4;
    }
    .flap {
        border-left: 115px  solid transparent;
        border-right: 115px  solid transparent;
        border-top: 87px solid #fbefd5;
    }
    .wax-seal-img {
        bottom: 55px;
        width: 40px;
    }
    .envelope-wrapper.open .letter {
        bottom: 55px;
    }
}