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

.phone-mockup .envelope-wrapper,
.hero-preview .envelope-wrapper{
    position: relative;
    width: min(260px, 85vw);
    height: min(173px, 56vw);
    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 #9e2a3b;   /* яркий бордовый */
    border-right: 130px solid #7a1f2d;  /* тёмно-бордовый */
    border-top: 87px solid transparent;
    border-bottom: 86px solid #b84c5e;    /* светлый бордовый */
    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: #6a1b2a;            /* тёмный бордовый фон */
    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 #c97a8a;       /* розовато-бордовый клапан */
    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 #9e2a3b;   /* яркий бордовый */
    border-right: 180px solid #7a1f2d;  /* тёмно-бордовый */
    border-top: 120px solid transparent;
    border-bottom: 120px solid #b84c5e; 
    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: #6a1b2a;   
    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 #c97a8a;  
    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);
}







@media (max-width: 410px) and (min-width: 0px)  {


     .envelope-wrapper {
        width: 230px;
        height: 153px;
    }
     .front {
        border-left: 115px solid #9e2a3b;
        border-right: 115px solid #7a1f2d;
        border-top: 77px solid transparent;
        border-bottom: 76px solid #b84c5e;
    }
     .flap {
        border-left: 115px solid transparent;
        border-right: 115px solid transparent;
        border-top: 87px solid #c97a8a;
    }
     .wax-seal-img {
        bottom: 55px;
        width: 40px;
    }
     .envelope-wrapper.open .letter {
        bottom: 55px;
    }



}