/* BIZ-34 С5 (templates-direction.md 6.7, прототипът docs/design/prototypes/templates): пликът на колекцията над поканата.
   Цветовете са от палитрата (--ev-* от dzApply), хартията и восъкът – --dz-env-paper / --dz-env-wax (роли), подплатата –
   --dz-env-liner (маска от файл на колекцията). Отварянето е с клас .is-open (≤ 1,5 s): печатът се вдига → капакът се
   отгъва → картата излиза → пликът слиза. При намалено движение – без движение. */
.dz-env {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 40px 24px;
  background: var(--dz-page, var(--ev-page, #e9dcc0));
  color: var(--ev-text, #2e2a25);
  font-family: var(--ev-body, 'Montserrat', sans-serif);
  text-align: center;
  overflow: hidden;
}
.dz-env-inline {
  position: absolute;
  z-index: 5;
}
:root.dz-env-lock,
:root.dz-env-lock body {
  overflow: hidden;
}
.dz-env-skip {
  position: absolute;
  top: 16px;
  right: 16px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--ev-text, #2e2a25) 25%, transparent);
  border-radius: 22px;
  background: transparent;
  color: var(--ev-text, #2e2a25);
  font: 500 12px/1 var(--ev-body, 'Montserrat', sans-serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.dz-env-eyebrow {
  margin: 0;
  font: 600 11px/1.4 var(--ev-body, 'Montserrat', sans-serif);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ev-primary, #8f6d23);
}
.dz-env-name {
  margin: 8px 0 0;
  font: italic 400 26px/1.2 var(--ev-heading, 'Lora', serif);
}
.dz-env-box {
  position: relative;
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1.42;
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 900px;
  cursor: pointer;
}
.dz-env-box:focus-visible {
  outline: 2px solid var(--ev-primary, #8f6d23);
  outline-offset: 8px;
}
.dz-env-back,
.dz-env-pocket,
.dz-env-flap,
.dz-env-flap > span,
.dz-env-card {
  position: absolute;
}
/* Гърбът и вътрешността на капака са от хартията на плика (VIS-TM3-03: не в цвета на страницата – иначе при отваряне
   се вижда само шарката, „плаваща“ над плика); вътрешността е малко по-тъмна от лицето, за да се чете като триъгълник. */
.dz-env-back {
  inset: 0;
  border-radius: 3px;
  background: var(--dz-env-paper, var(--ev-accent, #e9dcc0));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-text, #2e2a25) 10%, transparent), 0 1px 2px rgba(0, 0, 0, 0.1), 0 18px 40px rgba(0, 0, 0, 0.16);
}
/* Подплатата: шарката на колекцията като маска в основния цвят, ≤ 55 % непрозрачност (6.7); на гърба – с отстъп 6 %,
   за да не излиза по ръба на джоба. */
.dz-env[data-liner] [data-dz-liner]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dz-env-liner-color, var(--ev-primary, #8f6d23));
  opacity: 0.55;
  -webkit-mask: var(--dz-env-liner) 0 0 / 64px repeat;
  mask: var(--dz-env-liner) 0 0 / 64px repeat;
}
.dz-env-card {
  left: 7%;
  right: 7%;
  top: 7%;
  bottom: 7%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  background: var(--ev-bg, #fbf7ef);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.dz-env-names {
  font: 300 24px/1 var(--ev-heading, 'Lora', serif);
  color: var(--ev-primary, #8f6d23);
}
.dz-env-date {
  font: 500 9px/1.4 var(--ev-body, 'Montserrat', sans-serif);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ev-muted, #6c6760);
}
.dz-env-pocket {
  inset: 0;
  z-index: 3;
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  border-radius: 3px;
  background: var(--dz-env-paper, var(--ev-accent, #e9dcc0));
  background-image: var(--dz-env-material, none);
  background-size: cover;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ev-text, #2e2a25) 12%, transparent);
}
.dz-env-flap {
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.dz-env-flap > span {
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
}
.dz-env-flap-out {
  background: color-mix(in srgb, var(--dz-env-paper, var(--ev-accent, #e9dcc0)) 92%, var(--ev-text, #2e2a25));
  background-image: var(--dz-env-material, none);
  background-size: cover;
}
.dz-env[data-liner] .dz-env-back::before {
  inset: 6%;
}
.dz-env-flap-in {
  transform: rotateX(180deg);
  background: color-mix(in srgb, var(--dz-env-paper, var(--ev-accent, #e9dcc0)) 88%, var(--ev-text, #2e2a25));
}
/* Вътрешността се вижда след обръщането на капака (два пъти огледална) – затова изрязването ѝ е с върха нагоре: отвореният
   капак е „покрив“ над плика, с основата по горния му ръб (VIS-TM3-03). */
.dz-env-flap > span.dz-env-flap-in,
.dz-env-flap-in::before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.dz-env-seal {
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 5;
  width: 64px;
  height: 64px;
  translate: -50% -50%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}
.dz-env-wax,
.dz-env-foil {
  fill: var(--dz-env-wax, var(--ev-primary, #8f6d23));
}
.dz-env-emboss {
  fill: color-mix(in srgb, var(--dz-env-paper, var(--ev-accent, #e9dcc0)) 85%, var(--ev-bg, #fff));
  stroke: color-mix(in srgb, var(--ev-text, #2e2a25) 12%, transparent);
}
.dz-env-ribbon-band {
  fill: var(--dz-env-wax, var(--ev-primary, #8f6d23));
  opacity: 0.85;
}
.dz-env-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--ev-bg, #fff) 55%, transparent);
  stroke-width: 1;
}
.dz-env-letter {
  fill: var(--ev-bg, #fff);
  font: italic 400 20px/1 var(--ev-heading, 'Lora', serif);
  text-anchor: middle;
}
.dz-env-seal-emboss .dz-env-letter,
.dz-env-seal-ribbon .dz-env-letter {
  fill: var(--dz-env-wax, var(--ev-primary, #8f6d23));
}
.dz-env-seal-emboss .dz-env-ring,
.dz-env-seal-ribbon .dz-env-ring {
  stroke: color-mix(in srgb, var(--dz-env-wax, var(--ev-primary, #8f6d23)) 45%, transparent);
}
.dz-env-solo {
  font-size: 26px;
}
.dz-env-hint {
  margin: 0;
  font: 500 11px/1.4 var(--ev-body, 'Montserrat', sans-serif);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ev-muted, #6c6760);
}
/* Отварянето – общо ≤ 1,5 s (тех. 4.6). */
.dz-env.is-open .dz-env-seal {
  animation: dz-env-seal 240ms ease both;
}
.dz-env.is-open .dz-env-flap {
  animation: dz-env-flap 520ms cubic-bezier(0.45, 0, 0.2, 1) 160ms both;
}
.dz-env.is-open .dz-env-card {
  animation: dz-env-card 600ms ease 600ms both;
}
.dz-env.is-open .dz-env-box {
  animation: dz-env-sink 400ms ease 1000ms both;
}
.dz-env.is-open {
  animation: dz-env-fade 300ms ease 1180ms both;
}
.dz-env.is-open .dz-env-skip,
.dz-env.is-open .dz-env-hint,
.dz-env.is-open .dz-env-to {
  opacity: 0;
  transition: opacity 200ms ease;
}
@keyframes dz-env-seal {
  to {
    opacity: 0;
    transform: scale(1.12);
  }
}
@keyframes dz-env-flap {
  0% {
    transform: rotateX(0deg);
    z-index: 4;
  }
  49% {
    z-index: 4;
  }
  50% {
    z-index: 1;
  }
  100% {
    transform: rotateX(180deg);
    z-index: 1;
  }
}
@keyframes dz-env-card {
  to {
    transform: translateY(-62%);
  }
}
@keyframes dz-env-sink {
  to {
    transform: translateY(26%);
  }
}
@keyframes dz-env-fade {
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dz-env.is-open,
  .dz-env.is-open * {
    animation: none !important;
    transition: none !important;
  }
}
/* IMP-05: подплата с „оригинални цветове“ (рисунка, акварел) – картина в плочка 64 px, не маска. */
.dz-env[data-liner='img'] [data-dz-liner]::before {
  background: var(--dz-env-liner) 0 0 / 64px repeat;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
}