/* InviteNoma — сценарии открытия приглашения.
   Один клик гостя открывает обложку, разблокирует звук и запускает страницу.
   Шаблон выбирает сценарий: конверт, коробка, занавес, печать, фото, лепестки. */

/* ================= Прелоадер ================= */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: grid; place-items: center;
  background: var(--c-cream);
  transition: opacity .8s var(--e-out), visibility .8s;
}
.loader__inner { display: grid; justify-items: center; gap: var(--sp-5); }
.loader__mono {
  width: 78px; height: 78px; color: var(--c-gold);
  animation: monoDraw 2.4s var(--e-inout) infinite;
}
.loader__mono path, .loader__mono circle {
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: strokeIn 2.2s var(--e-inout) infinite;
}
.loader__bar {
  width: 140px; height: 2px; border-radius: 2px;
  background: var(--c-line); overflow: hidden;
}
.loader__bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--c-gold-soft), var(--c-gold));
  transition: width .4s var(--e-out);
}
.loader__label {
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-ink-mute);
}
@keyframes strokeIn {
  0%   { stroke-dashoffset: 260; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -260; }
}
@keyframes monoDraw { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Прелоадер обязан перестать ловить нажатия сразу, а не по окончании
   перехода: если анимация где-то не доиграет, невидимая плёнка на весь
   экран заблокирует всю страницу. Через секунду скрипт вынимает его из
   разметки насовсем. */
html.is-ready .loader { opacity: 0; visibility: hidden; pointer-events: none; }

.cover-scene {
  position: fixed; inset: 0; z-index: var(--z-envelope);
  display: grid; place-items: center;
  padding: var(--gutter);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 8%, color-mix(in srgb, var(--c-gold-soft) 55%, transparent), transparent 60%),
    radial-gradient(90% 60% at 12% 92%, color-mix(in srgb, var(--c-rose) 22%, transparent), transparent 65%),
    radial-gradient(80% 70% at 88% 78%, color-mix(in srgb, var(--c-sage) 20%, transparent), transparent 65%),
    var(--c-cream);
  transition: opacity 1.1s var(--e-out), visibility 1.1s;
}
.cover-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../img/noise.svg");
  opacity: .5; mix-blend-mode: multiply;
}
html.is-open .cover-scene { opacity: 0; visibility: hidden; pointer-events: none; }
html.is-open .cover-scene * { pointer-events: none; }

.cover-stage {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 40%;
  display: grid; justify-items: center; align-content: center;
  gap: clamp(2rem, 7vh, 4rem);
  z-index: 2;
  width: min(100%, 560px);
  margin-inline: auto;
}
/* обложки центрируем явно: у каждой своя ширина, и полагаться на
   растягивание грид-ячейки нельзя */
.cover-stage > * { justify-self: center; margin-inline: auto; }

.cover-greeting { text-align: center; display: grid; gap: var(--sp-3); animation: fadeUp 1.4s var(--e-out) .3s both; }
.cover-greeting__to {
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-ink-mute);
}
.cover-greeting__name {
  font-family: var(--f-display); font-size: clamp(1.6rem, 5.5vw, 2.6rem);
  font-style: italic; color: var(--c-ink);
}

.cover-hint {
  display: grid; justify-items: center; gap: var(--sp-3);
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-ink-soft); font-weight: 500;
  animation: fadeUp 1.4s var(--e-out) .8s both;
}
.cover-hint__arrow {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--c-gold), transparent);
  animation: hintDrop 2.2s var(--e-inout) infinite;
}
html.is-opening .cover-hint,
html.is-opening .cover-greeting { opacity: 0; transition: opacity .5s var(--e-out); }

/* карточка-приглашение, общая для всех сценариев */
.cover-card {
  background: var(--c-paper);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(23,19,15,.10);
  display: grid; place-items: center;
  padding: var(--sp-5);
  overflow: hidden;
  text-align: center;
}
.cover-card__inner { display: grid; gap: var(--sp-2); opacity: 0; transition: opacity .6s var(--e-out) 1.1s; }
html.is-opening .cover-card__inner { opacity: 1; }
.cover-card__mono { width: 44px; height: 44px; margin-inline: auto; color: var(--c-gold); }
.cover-card__names { font-family: var(--f-display); font-size: clamp(1.4rem, 5vw, 2.1rem); line-height: 1.1; }
.cover-card__date {
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-ink-mute);
}

/* ======================================================================
   1. Конверт
   ====================================================================== */
.cover-envelope {
  --env-w: min(80vw, 440px);
  --env-h: calc(var(--env-w) * .66);
  position: relative;
  width: var(--env-w); height: var(--env-h);
  transform-style: preserve-3d;
  animation: envFloat 7s var(--e-inout) infinite;
  transition: transform 1.2s var(--e-out);
  cursor: pointer;
}
@keyframes envFloat {
  0%, 100% { transform: translateY(0) rotateX(6deg); }
  50%      { transform: translateY(-12px) rotateX(4deg); }
}
.env-back {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--c-champagne), color-mix(in srgb, var(--c-champagne) 80%, var(--c-ink) 8%));
  border-radius: 8px;
  box-shadow: 0 30px 50px rgba(23,19,15,.20), 0 6px 14px rgba(23,19,15,.10);
}
.env-letter {
  position: absolute;
  left: 6%; width: 88%;
  bottom: 5%; height: 88%;
  transform: translateY(0) translateZ(1px);
  transition: transform 1.15s var(--e-out) .55s;
}
.env-pocket {
  position: absolute; inset: 0;
  transform: translateZ(2px);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(175deg,
    color-mix(in srgb, var(--c-champagne) 88%, #fff),
    var(--c-champagne));
}
.env-pocket::before, .env-pocket::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.55), rgba(23,19,15,.05));
}
.env-pocket::before { clip-path: polygon(0 0, 50% 52%, 0 100%); }
.env-pocket::after  { clip-path: polygon(100% 0, 100% 100%, 50% 52%); filter: brightness(.98); }
.env-pocket i {
  position: absolute; inset: 0;
  background: linear-gradient(190deg,
    color-mix(in srgb, var(--c-champagne) 92%, #fff),
    color-mix(in srgb, var(--c-champagne) 82%, var(--c-ink) 6%));
  clip-path: polygon(0 100%, 50% 52%, 100% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.env-flap {
  position: absolute; top: 0; left: 0; right: 0;
  height: 56%;
  transform-origin: top center;
  transform: rotateX(0deg) translateZ(3px);
  transition: transform 1s var(--e-inout);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-champagne) 92%, #fff),
    color-mix(in srgb, var(--c-champagne) 86%, var(--c-ink) 4%));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 8px 8px 0 0;
  backface-visibility: hidden;
}
.env-flap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(23,19,15,.06));
  clip-path: inherit;
}
html.is-opening .cover-envelope { animation: none; transform: translateY(-2vh) rotateX(2deg) scale(1.02); }
html.is-opening .env-flap { transform: rotateX(-176deg) translateZ(3px); }
/* -78% раньше уводило письмо за верхний край на невысоких экранах */
html.is-opening .env-letter { transform: translateY(-54%) translateZ(4px) scale(1.03); }
html.is-flying .env-letter {
  transition: transform 1.1s var(--e-inout), border-radius 1.1s var(--e-inout);
  /* --fly-tx/--fly-ty — посчитанный в JS сдвиг до центра экрана, чтобы
     раздутая в 3.6 раза карточка легла по центру, а не там, где сидел
     конверт на странице */
  transform: translate(var(--fly-tx, 0px), var(--fly-ty, 0px)) translateZ(4px) scale(3.6);
}
html.is-flying .env-letter .cover-card { border-radius: 0; box-shadow: none; }
html.is-flying .env-back,
html.is-flying .env-pocket,
html.is-flying .env-flap { opacity: 0; transition: opacity .5s var(--e-out); }

/* сургучная печать — используется конвертом и сценарием «печать» */
.wax-seal {
  position: absolute;
  left: 50%; top: 52%;
  width: clamp(64px, 17vw, 88px); height: clamp(64px, 17vw, 88px);
  transform: translate(-50%, -50%) translateZ(6px);
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--seal-1, #B9525B) 65%, #fff), transparent 42%),
    radial-gradient(circle at 68% 74%, rgba(0,0,0,.30), transparent 55%),
    linear-gradient(150deg, var(--seal-1, #B9525B), var(--seal-2, #8E2F3C));
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--seal-2, #8E2F3C) 45%, transparent),
    inset 0 2px 4px rgba(255,255,255,.35),
    inset 0 -3px 8px rgba(0,0,0,.30);
  color: #FBE9D8;
  transition: transform .5s var(--e-out), opacity .5s;
  animation: sealPulse 3.4s var(--e-inout) infinite;
  cursor: pointer;
}
.wax-seal svg { width: 54%; height: 54%; }
.wax-seal::before {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; background: inherit; opacity: .55; filter: blur(3px); z-index: -1;
  clip-path: polygon(50% 0,63% 6%,74% 2%,82% 13%,95% 18%,92% 32%,100% 44%,93% 56%,97% 70%,84% 76%,78% 89%,64% 88%,52% 98%,40% 89%,26% 91%,20% 79%,7% 73%,10% 59%,2% 47%,9% 34%,5% 20%,19% 15%,26% 3%,39% 6%);
}
@keyframes sealPulse {
  0%, 100% { box-shadow: 0 6px 18px color-mix(in srgb, var(--seal-2, #8E2F3C) 45%, transparent), inset 0 2px 4px rgba(255,255,255,.35), inset 0 -3px 8px rgba(0,0,0,.30), 0 0 0 0 color-mix(in srgb, var(--c-gold) 45%, transparent); }
  60%      { box-shadow: 0 6px 18px color-mix(in srgb, var(--seal-2, #8E2F3C) 45%, transparent), inset 0 2px 4px rgba(255,255,255,.35), inset 0 -3px 8px rgba(0,0,0,.30), 0 0 0 22px transparent; }
}
.cover-envelope:hover .wax-seal { transform: translate(-50%, -50%) translateZ(6px) scale(1.05); }
html.is-opening .wax-seal {
  animation: none;
  transform: translate(-50%, -50%) translateZ(6px) scale(1.35) rotate(14deg);
  opacity: 0;
}
.seal-shard {
  position: absolute; left: 50%; top: 52%;
  width: 14px; height: 14px; border-radius: 40% 60% 55% 45%;
  background: linear-gradient(150deg, var(--seal-1, #B9525B), var(--seal-2, #8E2F3C));
  pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) translateZ(7px);
}
html.is-opening .seal-shard { animation: shardFly .9s var(--e-out) forwards; }
@keyframes shardFly {
  0%   { opacity: 1; transform: translate(-50%,-50%) translateZ(7px) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 40px)), calc(-50% + var(--dy, -60px))) translateZ(7px) scale(.35) rotate(var(--dr, 180deg)); }
}

/* ======================================================================
   2. Подарочная коробка
   ====================================================================== */
.cover-box {
  --box-w: min(72vw, 340px);
  position: relative;
  justify-self: center;
  width: var(--box-w); height: calc(var(--box-w) * .82);
  transform-style: preserve-3d;
  cursor: pointer;
  animation: envFloat 7s var(--e-inout) infinite;
}
.box-body {
  position: absolute; inset: 22% 0 0 0;
  z-index: 2;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--c-champagne), color-mix(in srgb, var(--c-champagne) 78%, var(--c-ink) 10%));
  box-shadow: 0 26px 46px rgba(23,19,15,.22), inset 0 1px 0 rgba(255,255,255,.5);
}
/* вертикальная лента на корпусе */
.box-body::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(50% - 9%), var(--c-gold) calc(50% - 9%), var(--c-gold) calc(50% + 9%), transparent calc(50% + 9%));
  opacity: .85;
  border-radius: inherit;
}
/* карточка ждёт внутри коробки: её не видно, пока стенка выше неё */
.box-card {
  position: absolute;
  left: 8%; width: 84%;
  top: 28%; height: 66%;
  transform: translateY(0) scale(.96);
  transition: transform 1.15s var(--e-out) .45s;
  z-index: 1;
}
.box-lid {
  position: absolute; top: 6%; left: -3%; right: -3%; height: 26%;
  border-radius: 6px;
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--c-champagne) 94%, #fff),
    color-mix(in srgb, var(--c-champagne) 84%, var(--c-ink) 6%));
  box-shadow: 0 10px 22px rgba(23,19,15,.18), inset 0 1px 0 rgba(255,255,255,.6);
  transform-origin: center bottom;
  transition: transform 1.05s var(--e-inout), opacity .9s var(--e-out) .3s;
  z-index: 3;
}
.box-lid::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(50% - 8%), var(--c-gold) calc(50% - 8%), var(--c-gold) calc(50% + 8%), transparent calc(50% + 8%));
  opacity: .85; border-radius: inherit;
}
/* бант */
.box-bow {
  position: absolute; top: 0; left: 50%; translate: -50% -46%;
  width: 34%; aspect-ratio: 2 / 1;
  z-index: 4;
  color: var(--c-gold);
  transition: transform .9s var(--e-out), opacity .7s var(--e-out);
}
.box-bow svg { width: 100%; height: 100%; }
.cover-box:hover .box-bow { transform: scale(1.06) rotate(-2deg); }

html.is-opening .cover-box { animation: none; transform: translateY(-2vh); }
html.is-opening .box-bow { transform: translateY(-120px) rotate(24deg) scale(.7); opacity: 0; }
html.is-opening .box-lid { transform: translateY(-150px) rotate(-8deg); opacity: 0; }
/* -62% было тесновато на невысоких экранах */
html.is-opening .box-card { transform: translateY(-44%) scale(1.04); z-index: 5; }
html.is-flying .box-card {
  transition: transform 1.1s var(--e-inout);
  transform: translate(var(--fly-tx, 0px), var(--fly-ty, 0px)) scale(3.4);
}
html.is-flying .box-card .cover-card { border-radius: 0; box-shadow: none; }
html.is-flying .box-body { opacity: 0; transition: opacity .5s; }

/* ======================================================================
   3. Занавес
   ====================================================================== */
.cover-curtain { position: absolute; inset: 0; cursor: pointer; }
/* бархат: частые складки поверх широкой светотени */
.curtain-panel {
  --curtain-1: var(--curtain-light, color-mix(in srgb, var(--c-gold) 92%, #000));
  --curtain-2: var(--curtain-dark, color-mix(in srgb, var(--c-gold-deep) 70%, #000));
  position: absolute; top: 0; bottom: 0; width: 52%;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--curtain-2) 92%, #000) 0 4px,
      var(--curtain-1) 12px,
      color-mix(in srgb, var(--curtain-2) 88%, #000) 26px,
      color-mix(in srgb, var(--curtain-2) 92%, #000) 30px),
    linear-gradient(90deg, var(--curtain-2), var(--curtain-1) 45%, var(--curtain-2));
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 0 120px rgba(0,0,0,.55), inset 0 60px 90px rgba(0,0,0,.35);
  transition: transform 1.6s var(--e-inout);
  z-index: 3;
}
.curtain-panel--left  { left: 0;  transform-origin: left center; }
.curtain-panel--right { right: 0; transform-origin: right center; }
.curtain-panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 38%, rgba(0,0,0,.55));
}
.curtain-panel--left::after  { background: linear-gradient(90deg, rgba(0,0,0,.5), transparent 45%, rgba(0,0,0,.35)); }
.curtain-panel--right::after { background: linear-gradient(270deg, rgba(0,0,0,.5), transparent 45%, rgba(0,0,0,.35)); }
.curtain-rod {
  position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-gold-soft) 92%, #fff),
    var(--c-gold-deep));
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* ручка: за неё «дёргают», чтобы раздвинуть занавес */
.curtain-handle {
  position: absolute; left: 50%; bottom: 12%;
  translate: -50% 0;
  z-index: 6;
  display: grid; justify-items: center; gap: var(--sp-3);
  color: color-mix(in srgb, var(--c-gold-soft) 90%, #fff);
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
  text-align: center; max-width: 16rem;
  transition: opacity .5s var(--e-out), transform .6s var(--e-out);
}
.curtain-handle svg {
  width: 54px; height: 54px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
  animation: sealPulse 3.4s var(--e-inout) infinite;
  border-radius: 50%;
}
.cover-curtain:hover .curtain-handle { transform: translateY(-4px); }
html.is-opening .curtain-handle { opacity: 0; transform: scale(.9); }
.cover-curtain .cover-card {
  position: absolute; left: 50%; top: 50%;
  width: min(76vw, 380px); height: min(62vh, 460px);
  translate: -50% -50%;
  z-index: 2;
  opacity: 0;
  transition: opacity .8s var(--e-out) .6s, transform 1.1s var(--e-out) .6s;
  transform: scale(.94);
}
html.is-opening .curtain-panel--left  { transform: translateX(-102%); }
html.is-opening .curtain-panel--right { transform: translateX(102%); }
html.is-opening .cover-curtain .cover-card { opacity: 1; transform: scale(1); }
html.is-flying .cover-curtain .cover-card {
  transition: transform 1.1s var(--e-inout), opacity .6s;
  transform: translate(var(--fly-tx, 0px), var(--fly-ty, 0px)) scale(3.2);
}

/* ======================================================================
   4. Тиснёная печать на листе
   ====================================================================== */
.cover-sheet {
  position: relative;
  width: min(78vw, 380px);
  aspect-ratio: 3 / 4;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: envFloat 8s var(--e-inout) infinite;
}
.sheet-paper {
  position: absolute; inset: 0;
  background: var(--c-paper);
  border-radius: 2px;
  box-shadow: 0 30px 60px rgba(23,19,15,.18), 0 2px 6px rgba(23,19,15,.08);
  display: grid; place-items: center;
  overflow: hidden;
}
.sheet-paper::before {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid var(--c-line);
}
.sheet-emboss {
  position: relative;
  width: clamp(88px, 26vw, 128px); aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-gold-deep);
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.9), transparent 60%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.9),
    inset 0 -2px 4px color-mix(in srgb, var(--c-ink) 12%, transparent),
    0 1px 0 rgba(255,255,255,.8);
  border: 1px solid color-mix(in srgb, var(--c-gold) 40%, transparent);
  transition: transform .6s var(--e-out), box-shadow .6s var(--e-out);
}
.sheet-emboss svg { width: 52%; height: 52%; }
.cover-sheet:hover .sheet-emboss { transform: scale(1.05); }
.sheet-caption {
  position: absolute; bottom: 12%; left: 0; right: 0;
  text-align: center;
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-ink-mute);
}
html.is-opening .cover-sheet { animation: none; }
html.is-opening .sheet-emboss { transform: scale(.86); opacity: 0; transition: transform .7s var(--e-out), opacity .6s; }
html.is-opening .sheet-caption { opacity: 0; transition: opacity .4s; }
html.is-opening .cover-sheet .cover-card { opacity: 1; }
.cover-sheet .cover-card {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .9s var(--e-out) .35s;
  background: transparent; box-shadow: none;
}
html.is-flying .cover-sheet {
  transition: transform 1.2s var(--e-inout);
  transform: translate(var(--fly-tx, 0px), var(--fly-ty, 0px)) scale(3.4);
}

/* ======================================================================
   5. Фотокарточка
   ====================================================================== */
.cover-photo {
  position: relative;
  width: min(78vw, 360px);
  cursor: pointer;
  padding: 14px 14px 62px;
  background: var(--c-paper);
  border-radius: 3px;
  box-shadow: 0 26px 50px rgba(23,19,15,.24);
  transform: rotate(-2deg);
  transition: transform 1s var(--e-out);
  animation: envFloat 9s var(--e-inout) infinite;
}
.photo-frame {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(160deg, var(--c-champagne), color-mix(in srgb, var(--c-gold-soft) 70%, var(--c-cream)));
  overflow: hidden;
  display: grid; place-items: center;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
/* «проявление» снимка */
.photo-develop {
  position: absolute; inset: 0;
  background: var(--c-ink);
  opacity: .92;
  transition: opacity 2.2s var(--e-inout);
}
html.is-opening .photo-develop { opacity: 0; }
.photo-caption {
  position: absolute; left: 0; right: 0; bottom: 18px;
  text-align: center;
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: var(--c-ink-soft);
}
html.is-opening .cover-photo { animation: none; transform: rotate(0) scale(1.03); }
html.is-flying .cover-photo {
  transition: transform 1.1s var(--e-inout), opacity .8s;
  transform: translate(var(--fly-tx, 0px), var(--fly-ty, 0px)) scale(3.2); opacity: 0;
}

/* ======================================================================
   6. Лепестки
   ====================================================================== */
.cover-petals { position: relative; display: grid; justify-items: center; gap: var(--sp-6); cursor: pointer; }
.cover-petals .cover-card {
  width: min(78vw, 360px); aspect-ratio: 3 / 4;
  transition: transform 1.1s var(--e-out), box-shadow 1s;
}
/* У остальных обложек карточка спрятана внутри конверта/коробки, поэтому
   ей можно быть пустой до открытия. Здесь её видно с самого начала — не
   заполнить её было бы похоже на баг. До тапа показываем монограмму,
   имена и дату — прячем и раскрываем вместе с лепестками. */
.cover-petals .cover-card__inner { opacity: 1; }
.cover-petals .cover-card__mono {
  opacity: 1; transition: opacity .6s var(--e-out), transform .6s var(--e-out);
}
.cover-petals .cover-card__names,
.cover-petals .cover-card__date {
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s var(--e-out) 1.1s, transform .6s var(--e-out) 1.1s;
}
html.is-opening .cover-petals .cover-card__mono { opacity: 0; transform: scale(.7); }
html.is-opening .cover-petals .cover-card__names,
html.is-opening .cover-petals .cover-card__date { opacity: 1; transform: translateY(0); }
.petal-veil { position: absolute; inset: -10%; pointer-events: none; }
/* лепесток: каплевидная форма, лёгкий разворот и мягкий край */
.petal-veil span {
  position: absolute;
  width: var(--pw, 22px); aspect-ratio: 1 / 1.55;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--c-rose) 78%, #fff),
    color-mix(in srgb, var(--c-gold-soft) 70%, var(--c-rose)));
  box-shadow: 0 3px 8px color-mix(in srgb, var(--c-rose) 25%, transparent);
  opacity: var(--po, .85);
  rotate: var(--pa, 0deg);
  transition: transform 1.4s var(--e-out), opacity 1.1s var(--e-out);
}
.petal-veil span:nth-child(3n) { filter: blur(.6px); }
html.is-opening .petal-veil span {
  transform: translate(var(--px, 0), var(--py, -160px)) rotate(var(--pr, 120deg)) scale(.5);
  opacity: 0;
}
html.is-opening .cover-petals .cover-card { transform: scale(1.04); }
html.is-flying .cover-petals .cover-card {
  transition: transform 1.1s var(--e-inout);
  transform: translate(var(--fly-tx, 0px), var(--fly-ty, 0px)) scale(3.4);
}

@media (prefers-reduced-motion: reduce) {
  .cover-envelope, .cover-box, .cover-sheet, .cover-photo,
  .wax-seal, .cover-hint__arrow { animation: none !important; }
  .cover-scene *, .cover-scene { transition-duration: .3s !important; }
}

/* имя гостя на обложках, где нет отдельной подписи сверху */
.curtain-handle__guest {
  display: grid; gap: .15rem;
  font-size: var(--fs-micro); letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.curtain-handle__guest b {
  display: block;
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.2rem, 4.5vw, 1.8rem);
  letter-spacing: 0; text-transform: none;
  color: color-mix(in srgb, var(--c-gold-soft) 96%, #fff);
}
.sheet-guest {
  position: absolute; top: 12%; left: 0; right: 0;
  display: grid; gap: .2rem; text-align: center;
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-ink-mute);
}
.sheet-guest b {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.3rem, 5vw, 2rem);
  letter-spacing: 0; text-transform: none; color: var(--c-ink);
}


/* Витрина шаблонов держит внизу полосу с миниатюрами: приподнимаем всё,
   что иначе оказалось бы под ней. */
html.has-tpl-switch .curtain-handle { bottom: 22%; }
html.has-tpl-switch .cover-hint { margin-bottom: 104px; }
html.has-tpl-switch .sheet-caption { bottom: 18%; }

/* ======================================================================
   7. Стрельчатая арка (михраб)
   Створки расходятся в стороны, за ними — приглашение. Форма взята у
   арки михраба: она сразу задаёт тон, ещё до того, как прочитан текст.
   ====================================================================== */
.cover-arch {
  position: relative;
  width: min(78vw, 340px);
  cursor: pointer;
  display: grid; gap: var(--sp-5); justify-items: center;
}
.arch-wall {
  position: relative;
  width: 100%; aspect-ratio: 320 / 460;
  filter: drop-shadow(0 26px 46px rgba(16, 37, 28, .28));
}
.arch-shape { position: absolute; inset: 0; width: 100%; height: 100%; }

.arch-frame {
  fill: var(--c-paper);
  stroke: var(--c-gold);
  stroke-width: 3;
}
.arch-door {
  fill: var(--arch-1, #1D4636);
  transition: transform 1.5s var(--e-inout);
}
.arch-door--left  { transform-origin: 0 50%; }
.arch-door--right { transform-origin: 100% 50%; }

/* створки покрыты тем же узором, что и декор шаблона */
.arch-wall::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23B08D3E' stroke-width='.9' opacity='0.5'%3E%3Cpath d='M30 4 56 30 30 56 4 30Z'/%3E%3Cpath d='M30 16 44 30 30 44 16 30Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 62px 62px;
  clip-path: polygon(0 100%, 0 41%, 6% 30%, 16% 17%, 30% 6%, 50% 2%, 70% 6%, 84% 17%, 94% 30%, 100% 41%, 100% 100%);
  opacity: .5;
  transition: opacity .9s var(--e-out);
  pointer-events: none;
}

.arch-ornament {
  position: absolute; top: 16%; left: 50%; translate: -50% 0;
  width: 34%; color: var(--c-gold-soft);
  transition: opacity .7s var(--e-out), transform .9s var(--e-out);
}

.arch-card {
  position: absolute; inset: 14% 12% 10%;
  opacity: 0;
  transition: opacity .8s var(--e-out) .7s, transform 1s var(--e-out) .7s;
  transform: scale(.94);
}
.arch-card .cover-card { width: 100%; height: 100%; background: transparent; box-shadow: none; }

.arch-hint {
  display: grid; justify-items: center; gap: var(--sp-2);
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-ink-soft); font-weight: 500;
  text-align: center;
}
.arch-hint__guest { display: grid; gap: .15rem; }
.arch-hint__guest b {
  display: block; font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.2rem, 4.5vw, 1.7rem);
  letter-spacing: 0; text-transform: none; color: var(--c-ink);
}

html.is-opening .arch-door--left  { transform: translateX(-102%); }
html.is-opening .arch-door--right { transform: translateX(102%); }
html.is-opening .arch-ornament { opacity: 0; transform: translateY(-14px) scale(.9); }
html.is-opening .arch-wall::after { opacity: 0; }
html.is-opening .arch-card { opacity: 1; transform: scale(1); }
html.is-opening .arch-hint { opacity: 0; transition: opacity .4s; }

html.is-flying .cover-arch {
  transition: transform 1.1s var(--e-inout);
  transform: translate(var(--fly-tx, 0px), var(--fly-ty, 0px)) scale(3.2);
}
html.is-flying .arch-frame { stroke-opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .arch-door, .arch-card, .arch-ornament { transition-duration: .3s !important; }
}