/* Конверт на первом экране и его открытие (класс .opening ставит js/envelope.js). Значения из макета. */
.stage{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;width:100%;height:100%;padding:6vh 0 0;margin:0;border:0;cursor:pointer;color:inherit;font:inherit;-webkit-appearance:none;appearance:none;overflow:hidden;background:transparent}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background-color:#E6D9C4;background-image:radial-gradient(90% 60% at 28% 16%,rgba(255,251,243,.55) 0%,rgba(255,251,243,0) 62%),radial-gradient(140% 100% at 50% 50%,rgba(0,0,0,0) 46%,rgba(90,55,30,.30) 100%),url(../assets/linen.jpg);background-size:auto,auto,256px 256px}
html:not(.js) .stage{display:none}
.env-wrap{position:relative;flex:none;display:block;width:min(82vw,340px,44vh);aspect-ratio:360/500;isolation:isolate;transition:transform .2s ease}
@supports (height:1dvh){.env-wrap{width:min(82vw,340px,44dvh)}}
/* конверт проявляется, когда загружены все его слои, а не собирается по кусочкам */
.js .env-wrap{opacity:0;transition:transform .2s ease,opacity .5s ease}
.js .stage.is-ready .env-wrap{opacity:1}
.js .stage:not(.is-ready) .hint{visibility:hidden}
.stage:active .env-wrap{transform:scale(.985)}
.env-shadow{position:absolute;left:2%;right:2%;top:10%;bottom:-3%;z-index:-1;border-radius:12px;background:rgba(70,22,28,.5);filter:blur(18px)}
.env-contact{position:absolute;left:1%;right:1%;bottom:-1.2%;height:12%;z-index:-1;border-radius:6px;background:rgba(45,8,16,.4);filter:blur(5px)}
.e-inside{position:absolute;inset:0;z-index:0;border-radius:2px;background:linear-gradient(180deg,#2A050E 0%,#45101D 55%,#561327 100%)}
.e-layer{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible}
.pocket{z-index:3}
.fshadow{z-index:3}
.ff{position:absolute;inset:0;z-index:4;transform-origin:50% 0}
/* Safari из-за перспективы рисует клапан, повёрнутый на -90°, светлым треугольником над закрытым конвертом,
   поэтому до начала открытия он прозрачный (opacity:1 задаёт анимация fbOpen) */
.fb{position:absolute;left:0;right:0;bottom:100%;height:54%;z-index:1;transform-origin:50% 100%;transform:perspective(1100px) rotateX(-90deg);opacity:0}
.card{position:absolute;left:5.5%;right:5.5%;top:2%;height:95%;z-index:2}
.card-v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:16%;border-radius:2px;background-color:#F6EFE3;background-image:radial-gradient(130% 90% at 50% 40%,rgba(255,252,246,.9) 0%,rgba(246,239,227,0) 60%);box-shadow:0 4px 16px rgba(30,0,8,.28);transform-origin:50% 50%}
.card-v::before{content:"";position:absolute;inset:6px;pointer-events:none;border:46px solid transparent;border-image:url(../assets/frame.webp) 216 stretch}
.wax{position:absolute;left:50%;top:51.6%;width:42.5%;height:auto;display:block;transform:translate(-50%,-50%)}
.wax-a{clip-path:polygon(0 0,51% 0,48% 18%,53% 33%,47% 50%,52% 66%,48% 82%,51% 100%,0 100%)}
.wax-b{clip-path:polygon(51% 0,100% 0,100% 100%,51% 100%,48% 82%,52% 66%,47% 50%,53% 33%,48% 18%)}
.wax-sm{left:0;top:0;width:100%;transform:none}
.stage:focus-visible{outline:none}
.stage:focus-visible .env-wrap{outline:2px solid #6E1A2C;outline-offset:8px}
.hint{flex:none;font-style:italic;font-size:19px;letter-spacing:.04em;color:#7A4A50;animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* открытие */
.stage.opening{pointer-events:none}
.stage.opening::before{animation:fadeOut .8s 2.55s ease forwards}
.stage.opening .hint{animation:fadeOut .3s forwards}
.stage.opening .wax-a{animation:crackA .5s .05s cubic-bezier(.2,1.5,.4,1) forwards}
.stage.opening .wax-b{animation:crackB .5s .05s cubic-bezier(.2,1.5,.4,1) forwards}
.stage.opening .fshadow{animation:fadeOut .3s .3s forwards}
.stage.opening .ff{animation:ffOpen .6s .35s cubic-bezier(.55,0,.9,.45) forwards}
.stage.opening .fb{animation:fbOpen .55s .95s cubic-bezier(.1,.55,.45,1) forwards}
.stage.opening .card{animation:cardRise 1s 1.35s cubic-bezier(.45,0,.25,1) forwards,fadeOut .45s 2.8s ease forwards}
.stage.opening .card-v{animation:cardFly 1s 2.15s cubic-bezier(.55,0,.35,1) forwards}
.stage.opening .env-wrap{animation:envMove 3.6s linear forwards}
@keyframes crackA{to{transform:translate(calc(-50% - 3px),calc(-50% + 1px)) rotate(-4deg)}}
@keyframes crackB{to{transform:translate(calc(-50% + 3px),-50%) rotate(3deg)}}
@keyframes ffOpen{from{transform:perspective(1100px) rotateX(0deg)}to{transform:perspective(1100px) rotateX(90deg)}}
@keyframes fbOpen{from{transform:perspective(1100px) rotateX(-90deg);opacity:1}to{transform:perspective(1100px) rotateX(0deg);opacity:1}}
@keyframes cardRise{from{transform:translateY(0)}to{transform:translateY(-62%)}}
@keyframes cardFly{from{transform:translateY(0) scale(1)}to{transform:translateY(-105vh) scale(1.5);box-shadow:0 0 0 rgba(30,0,8,0)}}
@keyframes envMove{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,0,.2,1)}25%{transform:translateY(9vh)}59.72%{transform:translateY(9vh);animation-timing-function:cubic-bezier(.55,0,.35,1)}87.5%{transform:translateY(130vh)}100%{transform:translateY(130vh)}}
@keyframes fadeOut{to{opacity:0}}

@media (prefers-reduced-motion: reduce){
.hint{animation:none !important}
.stage.opening .ff,.stage.opening .fb,.stage.opening .card,.stage.opening .card-v,.stage.opening .env-wrap,.stage.opening .fshadow,.stage.opening .wax-a,.stage.opening .wax-b,.stage.opening::before{animation:none !important}
.stage.opening{animation:fadeOut .6s forwards !important}
}