/* «Позвать друга» — билет, конверты, пинги. */
.iv { padding-bottom: 120px; }
.iv-h1 { font: 500 clamp(40px, 6.4vw, 84px)/.98 var(--serif); letter-spacing: -.015em; margin: 0 0 20px; }
.iv-h2 { font: 500 clamp(32px, 4.4vw, 56px)/1 var(--serif); }
.iv-lead { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; margin: 0 0 26px; }
.iv-fine { font-size: 12.5px; color: var(--mute); margin: 12px 0 0; }
.iv-fine a { color: var(--brass); }
.iv-sub { font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); margin: 0 0 12px; }
.iv-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.iv-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.iv-ghost::after { background: var(--porcelain-2); }
.iv-link { background: none; border: 0; padding: 0; font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass); }
#ivAll { justify-self: start; }
.iv-invited__pts b, .iv-env-row__st { font-variant-numeric: lining-nums; }
.iv-none { color: var(--mute); font-size: 14.5px; margin: 0; }
.iv-none a { color: var(--brass); }
.iv-none--big { font: italic 400 24px/1.35 var(--serif); max-width: 40ch; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* вход по одному */
[data-in] { opacity: 0; transform: translateY(18px); }
[data-in].is-in { animation: ivIn .8s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes ivIn { to { opacity: 1; transform: none; } }

.iv-loading { min-height: 60vh; display: grid; place-items: center; }
.iv-loading span { width: 140px; height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.iv-loading span::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--brass); animation: load 1.1s var(--ease) infinite; }

/* ===== герой ===== */
.iv-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: 62vh; }
.iv-hero__art { display: grid; place-items: center; padding-top: 60px; }
.iv-stats { display: flex; gap: 40px; margin: 0; }
.iv-stats dt { font: 600 10.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); max-width: 14ch; }
.iv-stats dd { margin: 6px 0 0; font: 500 64px/1 var(--serif); color: var(--brass); font-variant-numeric: lining-nums tabular-nums; }
.iv-hero--me .iv-h1 { font-size: clamp(40px, 4.4vw, 68px); }

/* ===== билет ===== */
.iv-ticket { display: grid; gap: 16px; min-width: 0; }
.iv-ticket__tilt { position: relative; perspective: 1200px; transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .5s var(--ease); transform-style: preserve-3d;
  filter: drop-shadow(0 30px 40px rgba(20, 22, 26, .18)) drop-shadow(0 4px 8px rgba(20, 22, 26, .08)); opacity: 0; }
.iv-ticket__tilt.is-drawn { animation: ivTicket 1.1s var(--ease) forwards; }
@keyframes ivTicket { from { opacity: 0; transform: translateY(40px) rotate(-4deg) scale(.94); } 60% { opacity: 1; } to { opacity: 1; transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); } }
.iv-ticket__cv { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 560; }
.iv-ticket__shine { position: absolute; inset: 0; pointer-events: none; border-radius: 12px; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) calc(var(--gx, 30%) ), transparent 70%); opacity: .7; }
:root[data-theme="dark"] .iv-ticket__tilt { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)); }
.iv-link-row { display: flex; gap: 10px; min-width: 0; }
.iv-url { flex: 1; min-width: 0; height: 52px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); padding: 0 20px; font: 500 14px var(--sans); }
.iv-dl { flex: none; }

/* ===== кнопки шаринга ===== */
.iv-share { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-share__b { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); font: 600 12.5px var(--sans); letter-spacing: .03em; text-decoration: none; transition: transform .3s var(--ease), border-color .3s, background .3s; }
.iv-share__b:hover { transform: translateY(-2px); border-color: var(--brass); }
.iv-share__b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); }
.iv-share__tg::before { background: #2AABEE; }
.iv-share__wa::before { background: #25D366; }

/* ===== секции ===== */
.iv-sec { margin-top: clamp(64px, 9vw, 120px); }
.iv-sec__h { margin-bottom: 28px; }
.iv-sec__h .eyebrow { margin-bottom: 14px; }

/* ===== составитель приглашения ===== */
.iv-compose { display: grid; gap: 24px; padding: clamp(20px, 3vw, 36px); }
.iv-compose fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.iv-compose legend { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 12px; padding: 0; }
.iv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); background: transparent;
  font-size: 13.5px; transition: background .3s var(--ease), color .3s, border-color .3s, transform .3s var(--ease); }
.iv-chip:hover { border-color: var(--brass); }
.iv-chip:active { transform: scale(.95); }
.iv-chip[aria-pressed="true"] { background: var(--ink); color: var(--porcelain); border-color: var(--ink); }
.iv-chip--u { padding-left: 6px; }
.iv-chip--u[aria-pressed="true"] { background: var(--brass); color: #14161A; border-color: var(--brass); animation: ivPop .35s var(--ease); }
.iv-chip--p[data-p="Срочно!"][aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: #fff; }
@keyframes ivPop { 40% { transform: scale(1.08); } }
.iv-compose select, .iv-compose input[type="datetime-local"], .iv-compose textarea {
  width: 100%; max-width: 560px; font: 400 19px var(--serif); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 8px 0; border-radius: 0; }
.iv-compose select option { background: var(--paper); color: var(--ink); }
.iv-compose select:focus, .iv-compose input:focus, .iv-compose textarea:focus { outline: none; border-color: var(--brass); }
.iv-compose textarea { resize: vertical; max-width: none; }
.iv-note-l { display: grid; gap: 6px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.iv-compose__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; padding-top: 22px; border-top: 1px solid var(--rule); }
.iv-compose__foot .iv-sub { margin-bottom: 10px; }

/* бумажный самолётик */
.iv-plane { position: fixed; z-index: 140; width: 48px; height: 48px; pointer-events: none; animation: ivFly 1.6s cubic-bezier(.5, 0, .7, 1) forwards; }
.iv-plane svg { width: 100%; height: 100%; }
@keyframes ivFly {
  0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0; }
  12% { opacity: 1; transform: translate(-20px, 10px) rotate(-10deg) scale(1); }
  45% { transform: translate(18vw, -18vh) rotate(-24deg) scale(1.1); }
  100% { transform: translate(70vw, -90vh) rotate(-36deg) scale(.4); opacity: 0; } }

/* ===== список конвертов ===== */
.iv-list { display: grid; gap: 1px; border-top: 1px solid var(--rule); }
.iv-env-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 4px; text-decoration: none; border-bottom: 1px solid var(--rule); transition: background .3s, padding .3s var(--ease); }
.iv-env-row:hover { background: color-mix(in srgb, var(--brass) 6%, transparent); padding-left: 12px; }
.iv-env-row__ic { width: 38px; height: 26px; border: 1px solid var(--brass); border-radius: 2px; position: relative; overflow: hidden; }
.iv-env-row__ic::before { content: ""; position: absolute; left: 50%; top: -14px; width: 26px; height: 26px; border: 1px solid var(--brass); transform: translateX(-50%) rotate(45deg); }
.iv-env-row.is-new .iv-env-row__ic { background: color-mix(in srgb, var(--brass) 18%, transparent); animation: ivNudge 2.4s var(--ease) infinite; }
@keyframes ivNudge { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-8deg); } 86% { transform: rotate(6deg); } }
.iv-env-row__t b { display: block; font: 500 22px/1.15 var(--serif); }
.iv-env-row__t small { display: block; color: var(--mute); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-env-row__st { font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); text-align: right; }

/* ===== приглашённые ===== */
.iv-invited { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.iv-invited li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.iv-invited__n { font: italic 400 22px var(--serif); color: var(--brass); width: 2ch; }
.iv-invited a { text-decoration: none; min-width: 0; }
.iv-invited b { display: block; font: 500 21px/1.1 var(--serif); }
.iv-invited small { display: block; color: var(--mute); font-size: 12px; }
.iv-invited__pts { text-align: right; }
.iv-invited__pts b { font: 500 26px var(--serif); color: var(--brass); }

/* ===== конверт ===== */
.iv-env { --ew: min(560px, 100%); position: relative; width: var(--ew); aspect-ratio: 1.55; margin: 0 auto; }
.iv-env__back, .iv-env__front, .iv-env__flap { position: absolute; left: 0; right: 0; }
.iv-env__back { inset: 0; background: color-mix(in srgb, var(--brass) 70%, #3a2c18); border-radius: 6px; }
.iv-env__front { inset: 0; z-index: 3; border-radius: 6px; background: linear-gradient(160deg, var(--brass-hi), var(--brass));
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); box-shadow: 0 24px 50px rgba(20, 22, 26, .2); }
.iv-env__flap { top: 0; height: 58%; z-index: 4; background: linear-gradient(180deg, #d9bd84, var(--brass)); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0; transition: transform .7s var(--ease), z-index 0s .35s; }
.iv-env__seal { position: absolute; left: 50%; top: 52%; z-index: 5; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c76a52, var(--rose) 60%, #6e2e20); color: #f6e7d3; display: grid; place-items: center; font: 600 24px var(--serif);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25); transition: transform .5s var(--ease), opacity .4s; }
.iv-env__card { position: absolute; left: 5%; right: 5%; top: 8%; z-index: 2; transition: transform 1s var(--ease) .55s; }
.iv-env__card .iv-ticket__cv { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .18)); }
.iv-env.is-open .iv-env__flap { transform: rotateX(180deg); z-index: 1; }
.iv-env.is-open .iv-env__seal { transform: scale(.4) translateY(-40px); opacity: 0; }
.iv-env.is-open .iv-env__card { transform: translateY(-62%); }
.iv-env--art { --ew: min(420px, 100%); }
.iv-env__card--art { aspect-ratio: 2.1; background: var(--porcelain); border: 1px solid var(--brass); display: grid; place-content: center; text-align: center; gap: 2px; animation: ivFloat 5s ease-in-out infinite 1.6s; }
.iv-env__card--art b { font: 600 26px var(--serif); letter-spacing: .3em; color: #14161A; }
.iv-env__card--art span { font: 700 9px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #B08D57; }
.iv-env__card--art i { font: italic 400 22px var(--serif); color: #6B6A66; }
:root:not([data-theme="light"]) .iv-env__card--art { background: #F4F1EA; }
@keyframes ivFloat { 50% { translate: 0 -8px; } }
.iv-env--art.is-open .iv-env__card { transform: translateY(-58%); }
.iv-env--art .iv-env__flap { animation: ivFlapArt 1.2s var(--ease) both .4s; transform: none; }
@keyframes ivFlapArt { from { transform: rotateX(0); z-index: 4; } to { transform: rotateX(180deg); z-index: 1; } }

/* ===== лендинг ===== */
.iv-land { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: 70vh; }
.iv-land .iv-env { margin-top: 140px; --ew: min(600px, 100%); }
.iv-land__who { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.iv-land__who b { display: block; font: 500 22px/1.1 var(--serif); }
.iv-land__who small { color: var(--mute); font-size: 12.5px; }
.iv-perks { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.iv-perks li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--mute); }
.iv-perks b { display: block; font: 500 20px/1.2 var(--serif); color: var(--ink); }

/* ===== приглашение-пинг ===== */
.iv-ping { position: relative; max-width: 720px; margin: 0 auto; padding-top: 12px; }
.iv-env--ping { --ew: min(360px, 80%); position: absolute; left: 0; right: 0; top: 40px; z-index: 5; pointer-events: none; transition: opacity .5s .9s, transform .8s var(--ease) .8s; }
.iv-env--ping.is-open { opacity: 0; transform: translateY(80px) scale(.9); }
.iv-pcard { position: relative; background: var(--paper); border: 1px solid var(--rule); padding: clamp(22px, 4vw, 44px); display: grid; gap: 16px;
  opacity: 0; transform: translateY(70px) scale(.96); box-shadow: 0 30px 60px rgba(20, 22, 26, .1); }
.iv-pcard::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); pointer-events: none; }
.iv-pcard.is-out { transition: opacity .7s .7s, transform 1s var(--ease) .65s; opacity: 1; transform: none; }
.iv-pcard__head { display: flex; align-items: center; gap: 14px; }
.iv-pcard__head > div { flex: 1; min-width: 0; }
.iv-pcard__head b { font: 500 22px/1.15 var(--serif); }
.iv-pcard__k { margin: 0; font: 600 10.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.iv-tag { flex: none; font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--brass); color: var(--brass); }
.iv-tag--hot { background: var(--rose); border-color: var(--rose); color: #fff; animation: ivPulse 1.6s ease-in-out infinite; }
@keyframes ivPulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--rose) 0%, transparent); } 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rose) 45%, transparent); } }
.iv-pcard__venue { font: 500 clamp(38px, 6vw, 64px)/1 var(--serif); margin-top: 6px; overflow-wrap: anywhere; }
.iv-pcard__addr { margin: -6px 0 0; color: var(--mute); font-size: 14px; }
.iv-pcard__when { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; margin: 4px 0 0; padding: 14px 0; border-block: 1px solid var(--rule); }
.iv-pcard__when span { font: 600 10.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.iv-pcard__when b { font: italic 500 28px/1 var(--serif); }
.iv-pcard__when small { grid-column: 2; color: var(--mute); font-size: 12.5px; }
.iv-pcard__note { margin: 0; font: italic 400 22px/1.4 var(--serif); color: var(--ink-2); padding-left: 18px; border-left: 2px solid var(--brass); }
.iv-pcard__links { gap: 20px; }
.iv-ext { min-width: 0; }

.iv-map { position: relative; height: 220px; overflow: hidden; border: 1px solid var(--rule); background: var(--porcelain-2); }
.iv-map__tiles { position: absolute; width: 768px; height: 768px; }
.iv-map__tiles img { position: absolute; width: 256px; height: 256px; filter: grayscale(.85) sepia(.25) contrast(.95); }
:root[data-theme="dark"] .iv-map__tiles img { filter: grayscale(1) invert(.9) contrast(.85) brightness(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .iv-map__tiles img { filter: grayscale(1) invert(.9) contrast(.85) brightness(.9); } }
.iv-pin { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -30px 0 0 -15px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--rose); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); animation: ivDrop 1s var(--ease) both 1.4s; z-index: 2; }
.iv-pin::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--paper); }
.iv-map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 6px; margin: -2px 0 0 -7px; border-radius: 50%; background: rgba(0, 0, 0, .3); animation: ivShadow 1s var(--ease) both 1.4s; }
.iv-map::before { content: ""; position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 2px solid var(--rose); z-index: 1; opacity: 0; animation: ivRipple 2.4s ease-out infinite 2.2s; }
@keyframes ivDrop { from { transform: translateY(-120px) rotate(-45deg); opacity: 0; } 60% { opacity: 1; transform: translateY(4px) rotate(-45deg); } to { transform: rotate(-45deg); opacity: 1; } }
@keyframes ivShadow { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ivRipple { from { transform: scale(.2); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.iv-map--blank { display: grid; place-items: end center; padding-bottom: 18px; color: var(--mute); font-size: 12.5px;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; }
.iv-map__osm { position: absolute; right: 6px; bottom: 4px; z-index: 3; font-size: 10px; color: var(--mute); background: var(--paper); padding: 1px 6px; text-decoration: none; }

.iv-answer { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.iv-answer .btn { height: 60px; font-size: 16px; }
.iv-go.is-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 35%, transparent); }
.iv-go.is-on::before { content: "✓"; }
.iv-no.is-on { box-shadow: inset 0 0 0 2px var(--mute); }
.iv-replies { display: grid; gap: 0; }
.iv-reply { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.iv-reply span { flex: 1; min-width: 0; }
.iv-st { font: 600 11px var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.iv-st--go { color: var(--ok); }
.iv-st--no { color: var(--rose); }

/* ===== итоговые экраны ===== */
.iv-done, .iv-empty { min-height: 70vh; display: grid; align-content: center; justify-items: start; gap: 4px; max-width: 760px; }
.iv-done__pair { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.iv-done__amp { font: italic 400 48px var(--serif); color: var(--brass); }

/* конфетти */
.iv-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 150; overflow: hidden; }
.iv-confetti i { position: absolute; top: -20px; left: var(--x); width: 8px; height: 13px; animation: ivFall var(--d) cubic-bezier(.2, .6, .4, 1) var(--del) forwards; opacity: 0; }
@keyframes ivFall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: .9; transform: translate(var(--dx), 105vh) rotate(var(--r)); } }

@media (max-width: 900px) {
  .iv-hero, .iv-land { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .iv-land .iv-env { margin-top: 110px; order: -1; }
  .iv-hero__art { padding-top: 90px; }
}
@media (max-width: 560px) {
  .iv-stats { gap: 24px; }
  .iv-stats dd { font-size: 48px; }
  .iv-link-row { flex-wrap: wrap; }
  .iv-dl { width: 100%; }
  .iv-answer { grid-template-columns: 1fr; }
  .iv-invited li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .iv-invited__n { display: none; }
  .iv-env-row { grid-template-columns: auto minmax(0, 1fr); }
  .iv-env-row__st { grid-column: 2; text-align: left; }
  .iv-compose__foot .btn { width: 100%; }
  .iv-land .iv-env { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-in] { opacity: 1; transform: none; animation: none !important; }
  .iv-ticket__tilt { opacity: 1; animation: none !important; }
  .iv-pcard { opacity: 1; transform: none; }
  .iv-env, .iv-env * { transition: none !important; animation: none !important; }
}

.iv .iv-invited__pts b, .iv .iv-stats dd, .iv .iv-invited__n { font-variant-numeric: lining-nums tabular-nums; }