/* ==========================================================================
   Open modes — анимации открытия приглашения (openMode) на странице
   получателя (/meeting/v/*).
   Источник: витрина «Открывание приглашений v2» (stage1.openMode:
   none | envelope | gesture | clicker; gesture: swipe | scratch | hold).
   Параллакс удалён: гироскоп/наклон себя не оправдали (iOS требует
   DeviceOrientationEvent.requestPermission по тапу, без разрешения —
   мёртвый экран), вместо него — пружинная физика v2 на всех режимах.
   Все классы с префиксом .om- — не пересекаются с base.css,
   invitation-themes.css и constructor-animations.css.
   Тема гейта: атрибут data-om-style="letter|scrapbook|popart" на #openGate,
   значения повторяют body.t-* из invitation-themes.css. Без атрибута —
   розовый дефолт сайта.
   ========================================================================== */

/* ---------- гейт: подложка + карточка по центру (см. GATE AS CARD ниже) ---------- */
body.om-locked { overflow: hidden; }
#openGate {
  position: fixed;
  inset: 0;
  z-index: 80;
  height: 100dvh;
  border-radius: 0;
  transition: opacity 0.55s ease;
}
#openGate.is-open {
  opacity: 0;
  pointer-events: none;
}

/* ---------- сцена ---------- */
.om-stage {
  --om-stage-a: #fff;
  --om-stage-b: #fde8f0;
  --om-ink: #35232c;
  --om-ink-muted: #806b75;
  --om-accent: #df4f8b;
  --om-accent-dark: #b93f72;
  --om-line: #f6d3e2;
  --om-yes-a: #ff85b3;
  --om-yes-b: #e63d86;
  --om-bar-a: #df4f8b;
  --om-bar-b: #b93f72;
  --om-track: #fff;
  --om-cover-grad: linear-gradient(135deg, #ff85b3, #e63d86);
  --om-cover-shadow: 0 14px 30px rgba(190, 40, 110, 0.3);
  --om-cover-radius: 20px;
  --om-scratch-1: #df4f8b;
  --om-scratch-2: #fde8f0;
  --om-scratch-3: #b93f72;
  --om-scratch-ink: #35232c;
  --om-scratch-font: "Nunito";
  --om-scratch-fweight: 800;
  --om-scratch-fsize: 22px;
  --om-env: #f8d2e2;
  --om-seal: #b93f72;
  --om-seal-1: #f06a9c;
  --om-seal-2: #b93f72;
  --om-h1: #ffb3d1;
  --om-h2: #ff5c9d;
  --om-ck: rgba(40, 5, 15, 0.75);
  --om-lnc: rgba(60, 30, 30, 0.18);
  --om-lnw: 1.2;
  --om-lin: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.07));
  --om-ring: #df4f8b;
  --om-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  --om-env-ink: #35232c;
  --om-paper: #fff;
  --om-heart-shadow: rgba(190, 40, 110, 0.35);
  --om-crumb: #ffd3e3;
  --om-font: inherit;
  --om-emoji-mail: 💌;
  --om-heart: 💗;
  --om-float-1: 💕;
  --om-float-2: ✨;
  --om-hold-face: #fff;
  --om-hold-track: #fde8f0;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0, var(--om-stage-a) 0, var(--om-stage-b) 75%);
  font-family: var(--om-font, inherit);
  color: var(--om-ink, inherit);
  /* Перспектива для 3D-тилта конверта: в витрине v2 её даёт родитель
     (.cv{perspective:900px}), здесь эту роль играет сцена — конверт её
     прямой ребёнок. Свойство perspective действует на 3D-трансформы ДЕТЕЙ,
     поэтому perspective на самом .om-env его собственный поворот плоским
     и оставлял («не 3D»). На 2D-трансформы остальных детей не влияет. */
  perspective: 900px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

/* Подложка под обложкой: тематическая карточка «Тебе письмо». */
.om-under {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
}
.om-under-emoji { font-size: 44px; }
.om-under h3 { margin: 0; font-size: 22px; font-weight: 900; }
.om-under p { margin: 0; color: var(--om-ink-muted); font-size: 14px; }

.om-cover { position: absolute; inset: 0; transition: opacity 0.5s ease; perspective: 900px; }
/* Кликер и удержание: обложка непрозрачная (как .cv{background:inherit} в v2),
   иначе подложка «Тебе письмо» просвечивает сквозь сердце и шкалу. */
.om-cover.om-cl, .om-cover.om-solid { background: inherit; }
/* Текст подложки скрыт, пока гейт закрыт (в v2 .pp>*{opacity:0}); проявляется
   при открытии. Скретч (om-peek) не трогаем — там подложка видна сквозь стирание. */
.om-under > * { transition: opacity 0.45s ease 0.1s; }
.om-stage:not(.om-peek):not(.is-open) .om-under > * { opacity: 0; }
.om-stage.is-open .om-cover { opacity: 0; pointer-events: none; }

/* ---------- envelope: конверт / открытка (v2: фактура, подкладка, марка, трещина) ---------- */
.om-env {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 250px;
  height: 165px;
  transform: translate(-50%, -50%);
  --env: var(--om-env, #f8d2e2);
  --seal: var(--om-seal, #b93f72);
  perspective: 900px;
  transform-style: preserve-3d;
  /* Без transition на transform: тилт за курсором пишется в inline каждый
     кадр (как в витрине v2, где у .env перехода нет) — переход душил бы
     отклик, догоняя сам себя с лагом 0.6с. */
  transition: opacity 0.5s ease;
  will-change: transform;
}
.om-stage.is-open .om-env { opacity: 0; transform: translate(-50%, -30%) scale(0.9); pointer-events: none; }
.om-env > * { position: absolute; }
/* тень-ellipse под конвертом */
.om-shadow {
  left: 50%;
  top: calc(50% + 70px);
  width: 220px;
  height: 22px;
  margin-left: -110px;
  border-radius: 50%;
  background: radial-gradient(rgba(0, 0, 0, 0.28), transparent 70%);
}
.om-env-back {
  inset: 0;
  background:
    var(--om-grain),
    radial-gradient(120% 100% at 50% 0, rgba(0, 0, 0, 0.2), transparent 62%),
    var(--env);
  border-radius: 8px;
  z-index: 1;
  box-shadow: 0 26px 30px -12px rgba(30, 15, 25, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
.om-env-card {
  left: 14px;
  right: 14px;
  top: 12px;
  bottom: 12px;
  background: var(--om-paper, #fff);
  border-radius: 5px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--om-accent-dark, #b93f72);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
  transition: transform 1.7s cubic-bezier(0.22, 1.08, 0.3, 1);
  will-change: transform;
}
.om-env-card b { font-size: 17px; }
.om-env-card i {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--om-env-ink, #35232c);
  opacity: 0.14;
}
.om-env-card .om-card-heart { display: block; width: 20px; height: 20px; line-height: 0; margin-top: 2px; }
.om-env-front {
  inset: 0;
  z-index: 3;
  border-radius: 8px;
  background:
    var(--om-grain),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.07)),
    var(--env);
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
}
.om-env-front::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 42%, transparent 58%, rgba(0, 0, 0, 0.16));
}
.om-env-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.28), transparent 48%);
}
/* контурные швы передка */
.om-env-lines {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  fill: none;
  stroke: var(--om-lnc, rgba(60, 30, 30, 0.18));
  stroke-width: var(--om-lnw, 1.2);
  stroke-linejoin: round;
  pointer-events: none;
}
.om-env-lines path { vector-effect: non-scaling-stroke; }
.om-env-flap {
  left: 0;
  right: 0;
  top: 0;
  height: 92px;
  z-index: 4;
  transform-style: preserve-3d;
  transform-origin: top;
  transition: transform 1.2s cubic-bezier(0.5, 0, 0.15, 1), z-index 0s 0.55s;
  /* backface-visibility прячем только на гранях (i), не на контейнере с
     preserve-3d: в WebKit это скрывало клапан целиком при повороте. */
}
.om-env-flap i {
  position: absolute;
  inset: 0;
  background:
    var(--om-grain),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(0, 0, 0, 0.12)),
    var(--env);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* изнанка клапана — подкладочный узор стиля */
.om-env-flap i + i {
  transform: rotateX(180deg);
  background: var(--om-lin), var(--env);
  filter: brightness(0.92);
}
.om-fl-lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--om-lnc, rgba(60, 30, 30, 0.18));
  stroke-width: var(--om-lnw, 1.2);
  stroke-linejoin: round;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.om-fl-lines path { vector-effect: non-scaling-stroke; }
.om-env-label {
  left: 0;
  right: 0;
  bottom: 9px;
  z-index: 5;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--om-env-ink, #35232c);
  line-height: 1.25;
}
.om-env-label small { font-weight: 600; opacity: 0.8; }
/* марка — только letter */
.om-stamp {
  display: none;
  right: 14px;
  bottom: 12px;
  width: 30px;
  height: 36px;
  padding: 5px 4px;
  background: #fffdf8;
  border: 2px dashed #cf3a3a;
  z-index: 5;
  transform: rotate(4deg);
  place-items: center;
}
.om-stamp svg { width: 18px; height: 18px; }
.om-seal {
  left: 50%;
  top: 60px;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  padding: 0;
  z-index: 6;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
  animation: omSeal 2s ease-in-out infinite;
  transition: opacity 0.25s, transform 0.25s;
}
@keyframes omSeal { 50% { transform: scale(1.08); } }
.om-seal-half {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform;
}
.om-seal-half.sh1 { clip-path: inset(0 50% 0 0); }
.om-seal-half.sh2 { clip-path: inset(0 0 0 50%); }
.om-seal-half svg { display: block; width: 56px; height: 56px; }
.om-crack {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--om-ck, rgba(40, 5, 15, 0.75));
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  pointer-events: none;
}
/* состояния раскрытия (выставляет JS по хореографии v2) */
.om-env.op .om-env-flap { transform: rotateX(180deg); z-index: 1; }
.om-env.up .om-env-card { transform: translateY(-108px) rotate(-1.6deg); }
/* восковые крошки печати */
.om-wax {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
  z-index: 9;
  border-radius: 50%;
  background: var(--om-seal-1);
  box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* ---------- gesture: swipe ---------- */
.om-stage.om-peek { touch-action: none; }
.om-g { display: grid; place-items: center; }
.om-g-card {
  width: 78%;
  max-width: 340px;
  height: 62%;
  border-radius: var(--om-cover-radius, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  font-weight: 800;
  color: #fff;
  padding: 16px;
  cursor: grab;
  background: var(--om-cover-grad, linear-gradient(135deg, #ff85b3, #e63d86));
  box-shadow: var(--om-cover-shadow, 0 14px 30px rgba(190, 40, 110, 0.3));
  touch-action: none;
  will-change: transform;
}
.om-g-ico { font-size: 64px; line-height: 1; }
.om-g-ico svg { display: block; width: 64px; height: 64px; }
.om-chev { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.om-chev i {
  width: 13px;
  height: 13px;
  margin-top: -4px;
  border-top: 3px solid;
  border-left: 3px solid;
  transform: rotate(45deg);
  animation: omChev 1.6s ease-in-out infinite;
  opacity: 0;
}
.om-chev i + i { animation-delay: 0.25s; }
@keyframes omChev { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
.om-scratch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  transition: opacity 0.5s;
}
.om-stage.is-open .om-scratch { opacity: 0; pointer-events: none; }
.om-hold {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--om-hold-face, #fff);
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
  font-size: 46px;
  line-height: 1;
  touch-action: none;
  will-change: transform;
}
.om-hold svg.r {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.om-hold circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.om-hold .bg { stroke: rgba(128, 128, 128, 0.22); }
.om-hold .fg { stroke: var(--om-accent, #df4f8b); stroke-dasharray: 339.3; stroke-dashoffset: 339.3; }
.om-hold .om-hold-ico { display: block; width: 70px; height: 70px; line-height: 0; will-change: transform; }
.om-hold.holding { animation: omHold 0.35s ease-in-out infinite; }
@keyframes omHold { 50% { transform: scale(1.07); } }
.om-g-hint { margin: 14px 0 0; font-weight: 800; color: var(--om-accent-dark, #b93f72); text-align: center; }

/* ---------- clicker (v2: сияющий прогресс-бар, SVG-сердце, частицы) ---------- */
.om-cl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.om-cl-heart {
  width: 120px;
  height: 120px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 16px 16px rgba(214, 40, 110, 0.42));
  touch-action: manipulation;
  will-change: transform;
  line-height: 0;
}
.om-cl-heart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.om-cl-heart.hit { animation: omSq 0.28s ease-out; }
@keyframes omSq { 0% { transform: scale(1); } 35% { transform: scale(0.82); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }
.om-cl-bar {
  position: relative;
  width: 68%;
  max-width: 300px;
  height: 16px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(214, 40, 110, 0.18), rgba(255, 255, 255, 0.55));
  border: 1.5px solid var(--om-ink);
  box-shadow: inset 0 2px 4px rgba(120, 20, 70, 0.28), 0 6px 16px -6px rgba(255, 92, 157, 0.55);
  overflow: hidden;
}
.om-cl-bar i {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff8fbd, #ff4f9a, #ffc2d9, #c9a0ff, #8fd3ff, #ffc2d9, #ff6aa9, #ff8fbd);
  background-size: 300% 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
  animation: omBarShift 3.2s linear infinite;
  box-shadow: 0 0 14px rgba(255, 92, 157, 0.7);
}
.om-cl-bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: omBarSweep 1.8s ease-in-out infinite;
}
.om-cl-bar::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 2px;
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.om-cl-knob {
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(#fff 15%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0) 72%);
  will-change: transform;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.om-cl-bar.full { animation: omBarFull 0.9s ease-in-out infinite; }
@keyframes omBarShift { to { background-position: -300% 0; } }
@keyframes omBarSweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes omBarFull { 50% { filter: brightness(1.25) saturate(1.2); } }
.om-cl-phrase { margin: 0; font-weight: 800; color: var(--om-accent-dark, #b93f72); min-height: 24px; text-align: center; }
.om-float { position: absolute; pointer-events: none; font-size: 22px; animation: omFl 0.9s ease-out forwards; }
@keyframes omFl { to { transform: translateY(-90px) scale(1.3); opacity: 0; } }
/* частицы v2 (сердечки/искры/кольца) */
.om-pt {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  pointer-events: none;
  line-height: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 3px rgba(190, 40, 110, 0.35));
}
.om-pt .heart { display: block; }
.om-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  border: 3px solid var(--om-ring, #df4f8b);
  pointer-events: none;
  z-index: 6;
}

/* ---------- ластик и крошки (scratch) ---------- */
.om-eraser {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 30px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity 0.2s;
  filter: drop-shadow(0 6px 6px rgba(80, 20, 50, 0.35));
}
.om-eraser.on { opacity: 1; }
.om-stage.is-open .om-eraser { opacity: 0; }
.om-eraser i, .om-eraser b { position: absolute; top: 0; bottom: 0; }
.om-eraser i { left: 0; width: 20px; border-radius: 6px 0 0 6px; background: linear-gradient(#5aa9ff, #2f7fe0); }
.om-eraser b { left: 20px; right: 0; border-radius: 0 8px 8px 0; background: linear-gradient(#ffc0d6, #f48bb2); }
.om-eraser.down { filter: drop-shadow(0 2px 3px rgba(80, 20, 50, 0.45)); }
.om-crumb {
  position: absolute;
  z-index: 5;
  width: 6px;
  height: 4px;
  border-radius: 2px;
  background: var(--om-crumb, #ffd3e3);
  pointer-events: none;
  animation: omCrumb 0.7s ease-out forwards;
}
@keyframes omCrumb { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }

/* ==========================================================================
   ТЕМЫ — повторяют body.t-letter / t-scrap / t-pop из invitation-themes.css
   ========================================================================== */

/* --- letter: авиапочта --- */
.om-stage[data-om-style="letter"] {
  --om-stage-a: #d9cfbc;
  --om-stage-b: #d9cfbc;
  --om-ink: #1f2c55;
  --om-ink-muted: #55608a;
  --om-accent: #cf3a3a;
  --om-accent-dark: #2b57a8;
  --om-line: #2b57a8;
  --om-yes-a: #cf3a3a;
  --om-yes-b: #cf3a3a;
  --om-bar-a: #cf3a3a;
  --om-bar-b: #2b57a8;
  --om-track: #fffdf8;
  --om-cover-grad: linear-gradient(135deg, #d44848, #2b57a8);
  --om-cover-shadow: 0 22px 36px -22px rgba(55, 35, 8, 0.6);
  --om-cover-radius: 0px;
  --om-scratch-1: #cf3a3a;
  --om-scratch-2: #fffdf8;
  --om-scratch-3: #2b57a8;
  --om-scratch-ink: #1f2c55;
  --om-scratch-font: "Marck Script";
  --om-scratch-fweight: 400;
  --om-scratch-fsize: 30px;
  --om-env: #ece3cf;
  --om-seal: #b02a31;
  --om-seal-1: #e8545a;
  --om-seal-2: #7e171e;
  --om-h1: #ffb3d1;
  --om-h2: #ff5c9d;
  --om-ck: rgba(40, 5, 15, 0.75);
  --om-lnc: rgba(60, 30, 30, 0.18);
  --om-lnw: 1.2;
  --om-lin: repeating-linear-gradient(45deg, rgba(43, 87, 168, 0.4) 0 6px, transparent 6px 12px);
  --om-ring: #cf3a3a;
  --om-env-ink: #1f2c55;
  --om-paper: #fffdf8;
  --om-heart-shadow: rgba(120, 20, 20, 0.5);
  --om-crumb: #ece3cf;
  --om-font: "Literata", Georgia, "Times New Roman", serif;
  --om-emoji-mail: ✉️;
  --om-heart: ❤️;
  --om-float-1: 💕;
  --om-float-2: ✨;
  --om-hold-face: #fffdf8;
  --om-hold-track: rgba(43, 87, 168, 0.25);
}
.om-stage[data-om-style="letter"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  z-index: 7;
  background: repeating-linear-gradient(-45deg, #cf3a3a 0 14px, #fffdf8 14px 22px, #2b57a8 22px 36px, #fffdf8 36px 44px);
}
.om-stage[data-om-style="letter"] .om-under {
  background: #fffdf8;
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #cf3a3a 0 16px, #fffdf8 16px 26px, #2b57a8 26px 42px, #fffdf8 42px 52px) 12;
  box-shadow: 0 22px 36px -22px rgba(55, 35, 8, 0.6);
  margin: 26px 22px 22px;
  inset: 0;
  position: absolute;
}
.om-stage[data-om-style="letter"] .om-under h3 {
  font-family: "Marck Script", cursive;
  font-weight: 400;
  font-size: 34px;
  color: #2b57a8;
}
.om-stage[data-om-style="letter"] .om-env-card b {
  font-family: "Marck Script", cursive;
  font-weight: 400;
  font-size: 19px;
}
.om-stage[data-om-style="letter"] .om-env-label { font-family: "Literata", serif; font-weight: 600; }
.om-stage[data-om-style="letter"] .om-stamp { display: grid; }
.om-stage[data-om-style="letter"] .om-env-label { padding-right: 44px; }
.om-stage[data-om-style="letter"] .om-eraser i {
  background: linear-gradient(#ece3cf, #d9cfbc);
  box-shadow: inset 0 0 0 1px rgba(70, 48, 15, 0.2);
}
.om-stage[data-om-style="letter"] .om-eraser b { background: linear-gradient(#e8545a, #b02a31); }

/* --- scrapbook: тетрадь --- */
.om-stage[data-om-style="scrapbook"] {
  --om-stage-a: #fffbea;
  --om-stage-b: #fffbea;
  --om-ink: #2c2b4b;
  --om-ink-muted: #66648a;
  --om-accent: #ff5a6e;
  --om-accent-dark: #2c2b4b;
  --om-line: #9b99bd;
  --om-yes-a: #ff5a6e;
  --om-yes-b: #ff5a6e;
  --om-bar-a: #ffe66d;
  --om-bar-b: #ff5a6e;
  --om-track: #fff;
  --om-cover-grad: none;
  --om-cover-shadow: 0 0 0 1.5px rgba(44, 43, 75, 0.14), 0 16px 26px -16px rgba(70, 48, 0, 0.45);
  --om-cover-radius: 4px;
  --om-scratch-1: #fff8d8;
  --om-scratch-2: #ffe66d;
  --om-scratch-3: #ff5a6e;
  --om-scratch-ink: #2c2b4b;
  --om-scratch-font: "Caveat";
  --om-scratch-fweight: 700;
  --om-scratch-fsize: 30px;
  --om-env: #f2dfc0;
  --om-seal: #ff5a6e;
  --om-seal-1: #ff8a98;
  --om-seal-2: #cf2e49;
  --om-h1: #ffb3d1;
  --om-h2: #ff5c9d;
  --om-ck: rgba(40, 5, 15, 0.75);
  --om-lnc: rgba(60, 30, 30, 0.18);
  --om-lnw: 1.2;
  --om-lin: radial-gradient(rgba(255, 90, 110, 0.5) 2px, transparent 2.5px) 0 0/12px 12px;
  --om-ring: #ff5a6e;
  --om-env-ink: #2c2b4b;
  --om-paper: #fff8d8;
  --om-heart-shadow: rgba(255, 90, 110, 0.55);
  --om-crumb: #fff8d8;
  --om-font: inherit;
  --om-emoji-mail: 💌;
  --om-heart: 💗;
  --om-float-1: 💕;
  --om-float-2: ✨;
  --om-hold-face: #fff;
  --om-hold-track: rgba(255, 90, 110, 0.2);
  background:
    linear-gradient(rgba(74, 134, 184, 0.17) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(74, 134, 184, 0.17) 1px, transparent 1px) 0 0 / 24px 24px,
    #fffbea;
}
.om-stage[data-om-style="scrapbook"]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 28px;
  width: 2px;
  background: rgba(255, 90, 110, 0.35);
  z-index: 7;
}
.om-stage[data-om-style="scrapbook"] .om-under {
  background: #fff;
  border-radius: 3px 3px 22px 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 16px 26px -16px rgba(70, 48, 0, 0.45);
  margin: 26px 22px 22px;
  inset: 0;
  position: absolute;
}
.om-stage[data-om-style="scrapbook"] .om-under h3 {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 42px;
  color: #2c2b4b;
}
.om-stage[data-om-style="scrapbook"] .om-g-card { background: #fff; color: #2c2b4b; position: relative; }
.om-stage[data-om-style="scrapbook"] .om-g-card::before,
.om-stage[data-om-style="scrapbook"] .om-g-card::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 20px;
  z-index: 2;
  background: repeating-linear-gradient(45deg, rgba(122, 214, 182, 0.8) 0 6px, rgba(255, 255, 255, 0.35) 6px 12px);
  box-shadow: 0 2px 4px rgba(70, 48, 0, 0.15);
}
.om-stage[data-om-style="scrapbook"] .om-g-card::before { left: -18px; top: -9px; transform: rotate(-8deg); }
.om-stage[data-om-style="scrapbook"] .om-g-card::after {
  right: -18px;
  bottom: -9px;
  transform: rotate(7deg);
  background: repeating-linear-gradient(45deg, rgba(255, 206, 92, 0.82) 0 6px, rgba(255, 255, 255, 0.35) 6px 12px);
}
.om-stage[data-om-style="scrapbook"] .om-env-card b {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 23px;
}
.om-stage[data-om-style="scrapbook"] .om-env-label { font-family: "Caveat", cursive; font-weight: 700; font-size: 19px; }
.om-stage[data-om-style="scrapbook"] .om-eraser i { background: linear-gradient(#7ad6b6, #5fc4a2); box-shadow: none; }
.om-stage[data-om-style="scrapbook"] .om-eraser b { background: linear-gradient(rgba(255, 150, 178, 0.95), rgba(255, 120, 150, 0.95)); }

/* --- popart --- */
.om-stage[data-om-style="popart"] {
  --om-stage-a: #2b4bff;
  --om-stage-b: #2b4bff;
  --om-ink: #12121c;
  --om-ink-muted: #45455e;
  --om-accent: #ff6fb1;
  --om-accent-dark: #12121c;
  --om-line: #12121c;
  --om-yes-a: #ffe14d;
  --om-yes-b: #ffe14d;
  --om-bar-a: #ffe14d;
  --om-bar-b: #ff6fb1;
  --om-track: #fff;
  --om-cover-grad: none;
  --om-cover-shadow: 6px 6px 0 #12121c;
  --om-cover-radius: 18px;
  --om-scratch-1: #ffe14d;
  --om-scratch-2: #ff6fb1;
  --om-scratch-3: #2b4bff;
  --om-scratch-ink: #12121c;
  --om-scratch-font: "Unbounded";
  --om-scratch-fweight: 700;
  --om-scratch-fsize: 17px;
  --om-env: #ffe14d;
  --om-seal: #12121c;
  --om-seal-1: #3a3a52;
  --om-seal-2: #12121c;
  --om-h1: #ffa6d6;
  --om-h2: #ff4f9e;
  --om-ck: #ffe14d;
  --om-lnc: #12121c;
  --om-lnw: 3;
  --om-lin: radial-gradient(#12121c 2px, transparent 2.5px) 0 0/10px 10px;
  --om-ring: #ff6fb1;
  --om-env-ink: #12121c;
  --om-paper: #fff8ef;
  --om-heart-shadow: rgba(18, 18, 28, 0.5);
  --om-crumb: #ffe14d;
  --om-font: "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  --om-emoji-mail: 💌;
  --om-heart: 💘;
  --om-float-1: 💥;
  --om-float-2: ⭐;
  --om-hold-face: #fff8ef;
  --om-hold-track: rgba(255, 255, 255, 0.3);
  background: radial-gradient(rgba(255, 255, 255, 0.2) 22%, transparent 24%) 0 0 / 16px 16px, #2b4bff;
}
.om-stage[data-om-style="popart"] .om-under {
  background: #fff8ef;
  border: 3px solid #12121c;
  border-radius: 24px;
  box-shadow: 6px 6px 0 #12121c;
  margin: 26px 22px 22px;
  inset: 0;
  position: absolute;
}
.om-stage[data-om-style="popart"] .om-under h3 {
  font-family: "Unbounded", sans-serif;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: #12121c;
}
.om-stage[data-om-style="popart"] .om-cl-phrase { color: #fff; }
.om-stage[data-om-style="popart"] .om-g-hint { color: #fff; }
.om-stage[data-om-style="popart"] .om-cl-bar { border: 3px solid #12121c; box-shadow: 3px 3px 0 #12121c; }
.om-stage[data-om-style="popart"] .om-env-back { border-radius: 8px; box-shadow: 6px 6px 0 rgba(18, 18, 28, 0.9); border: 3px solid #12121c; }
.om-stage[data-om-style="popart"] .om-env-front { border-radius: 8px; }
.om-stage[data-om-style="popart"] .om-env-card {
  border-radius: 5px;
  border: 3px solid #12121c;
  font-family: "Golos Text", sans-serif;
}
.om-stage[data-om-style="popart"] .om-env-card b {
  font-family: "Unbounded", sans-serif;
  font-weight: 900;
  font-size: 12px;
}
.om-stage[data-om-style="popart"] .om-hold { border: 3px solid #12121c; }
.om-stage[data-om-style="popart"] .om-env-label { font-family: "Golos Text", sans-serif; font-weight: 700; }
.om-stage[data-om-style="popart"] .om-eraser i { background: linear-gradient(#ffe14d, #ffd900); box-shadow: inset 0 0 0 2px #12121c; }
.om-stage[data-om-style="popart"] .om-eraser b { background: linear-gradient(#ff6fb1, #ff4f9e); box-shadow: inset -2px 0 0 #12121c; }
.om-stage[data-om-style="popart"] .om-g-card { background: #fff8ef; color: #12121c; border: 3px solid #12121c; }

/* ---------- prefers-reduced-motion: гасим декоративные анимации ---------- */
@media (prefers-reduced-motion: reduce) {
  .om-seal { animation: none; }
  .om-chev i { animation: none; opacity: 1; }
  .om-hold.holding { animation: none; }
  .om-cl-heart.hit { animation: none; }
  .om-cl-bar i, .om-cl-bar i::after { animation: none; }
  .om-cl-bar.full { animation: none; }
  /* Клапан/открытка раскрываются по тапу пользователя — 3D-переход
     оставляем и при reduced-motion (JS ждёт его полную длительность). */
  #openGate { transition: none; }
}

/* ==========================================================================
   GATE AS CARD — обложка-карточка вместо полноэкранного слоя.
   #openGate становится подложкой, .om-stage — карточкой по центру.
   ========================================================================== */

/* подложка: затемнение + блюр, как .notify-backdrop на сайте */
#openGate {
  position: fixed;
  inset: 0;
  z-index: 80;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  border-radius: 0;
  background: rgba(67, 34, 48, 0.34);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  overflow: hidden;
}

/* карточка-обложка: аккуратные пропорции вместо «на весь экран» */
#openGate .om-stage {
  width: min(420px, 100%);
  height: clamp(420px, 78dvh, 640px);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(40, 10, 30, 0.35);
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease,
              box-shadow 0.35s ease;
}
#openGate:not(.is-open) .om-stage {
  transform: scale(1);
  opacity: 1;
}
#openGate.is-open .om-stage {
  transform: scale(0.94);
  opacity: 0;
}

/* видимость всего гейта управляется как раньше */
#openGate { opacity: 1; transition: opacity 0.4s ease; }
#openGate.is-open { opacity: 0; pointer-events: none; }

/* --- темы: у карточки сцены свои «фишечные» рамки/тени --- */

/* letter: авиаполоса ложится на скруглённый верх, обрезка — overflow:hidden */
#openGate .om-stage[data-om-style="letter"] {
  border-radius: 14px;                       /* почти прямой угол — почтовый лист */
  box-shadow: 0 26px 50px -18px rgba(55, 35, 8, 0.65);
}

/* scrapbook: лист тетради со скруглением одного угла, как .t-scrap .card */
#openGate .om-stage[data-om-style="scrapbook"] {
  border-radius: 4px 4px 26px 8px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 30px 50px -20px rgba(70, 48, 0, 0.6);
}

/* popart: жёсткая тень вместо мягкой */
#openGate .om-stage[data-om-style="popart"] {
  border-radius: 24px;
  box-shadow: 8px 8px 0 #12121c, 0 30px 50px -20px rgba(0, 0, 0, 0.5);
}

/* --- на телефоне карточка почти на весь экран, но с полями и воздухом --- */
@media (max-width: 480px) {
  #openGate { padding: 12px; }
  #openGate .om-stage {
    width: 100%;
    height: min(calc(100dvh - 44px), 620px);
    border-radius: 20px;
  }
}

/* reduced-motion: без анимации входа */
@media (prefers-reduced-motion: reduce) {
  #openGate .om-stage { transition: none; transform: none; }
  #openGate { transition: none; }
}