/* =============================================================================
   Taklifnoma — свадебное приглашение
   Вёрстка 1:1 по макету Figma (фрейм 683 × 2989).

   Система координат
   -----------------
   Все размеры взяты из макета в «дизайнерских» пикселях и умножены на
   переменную --k — коэффициент масштаба контейнера:

       --k = ширина_контейнера / 683

   На ширине 683px и больше --k = 1px, то есть страница совпадает с макетом
   пиксель в пиксель. На узких экранах вся композиция пропорционально
   ужимается, сохраняя расположение орнаментов.

   Поэтому вместо «96px» пишется «calc(96 * var(--k))»: число слева — ровно
   та величина, что стоит в Figma.

   Каждая секция позиционируется от верха полотна (--top в комментарии),
   а её содержимое — от верха самой секции.
   ============================================================================= */

/* --- Токены из макета ----------------------------------------------------- */
:root {
  --c-bg:      #FDFBF9; /* фон полотна    */
  --c-card:    #FCF8F6; /* фон карточки   */
  --c-title:   #907A69; /* «Taklifnoma»   */
  --c-text:    #6D605A; /* основной текст */
  --c-accent:  #9E8B7B; /* имена          */
  --c-date:    #AC9C8E;
  --c-time:    #AC9D90;
  --c-venue-1: #B4A599;
  --c-venue-2: #BAACA0;

  --f-display: "Italianno", cursive;
  --f-serif:   "Cormorant", Georgia, serif;
  --f-sans:    "Inter", system-ui, sans-serif;
}

/* --- Сброс ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-serif);
  overflow-x: hidden;
}
h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; }

/* --- Полотно -------------------------------------------------------------- */
.page {
  max-width: 683px;
  margin-inline: auto;
  container-type: inline-size;   /* источник для 1cqw */
  background: var(--c-bg);
}

.invite {
  --k: calc(100cqw / 683);       /* 1 «пиксель макета» */

  /* Высота блока с фотографией зала. В макете 775 — под вертикальную
     иллюстрацию FAYZ. У «AFSONA» и «Sheroz» иллюстрации горизонтальные,
     блок под них ниже, и всё, что под ним, поднимается на разницу. */
  --venue-h: 775;
  --venue-shift: calc((775 - var(--venue-h)) * var(--k));

  position: relative;
  height: calc(2989 * var(--k) - var(--venue-shift));
  overflow: hidden;              /* clipsContent фрейма */
}

/* Слои раскладываются абсолютно — ровно как в Figma. */
.invite section,
.invite .rule,
.invite .place,
.invite img,
.invite p,
.invite h1,
.invite h2,
.invite .card__bg { position: absolute; }

/* Секции тянутся на всю ширину; .place задаёт свои left/width сам. */
.invite section,
.invite .rule { left: 0; width: 100%; }


/* =============================================================================
   1. Обложка                                                      --top: 0
   ============================================================================= */
.hero {
  top: 0;
  height: calc(1036 * var(--k));
}

.hero__bg {                        /* 1483 × 1135 @ (-403, -99) */
  left:   calc(-403 * var(--k));
  top:    calc(-99  * var(--k));
  width:  calc(1483 * var(--k));
  height: calc(1135 * var(--k));
  max-width: none;
}

.hero__title {                     /* Italianno 96 / 120 */
  left: 0;
  top: calc(209.5 * var(--k));
  width: 100%;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(96 * var(--k));
  line-height: calc(120 * var(--k));
  color: var(--c-title);
  text-align: center;
}


/* =============================================================================
   2. Парящие сердечки (координаты от верха полотна)
   ============================================================================= */
.dec--heart-a { left: calc(334 * var(--k)); top: calc(839 * var(--k)); width: calc(16 * var(--k)); }
.dec--heart-b { left: calc(480 * var(--k)); top: calc(958 * var(--k)); width: calc(18 * var(--k)); }
.dec--heart-c { left: calc(197 * var(--k)); top: calc(965 * var(--k)); width: calc(14 * var(--k)); }


/* =============================================================================
   3. Разделитель «—— ♡ ——»                                     --top: 1000
   ============================================================================= */
.rule {
  top: calc(1000 * var(--k));
  height: calc(30 * var(--k));
  pointer-events: none;
}
.rule__band   { left: calc(194.2 * var(--k)); top: calc(10   * var(--k)); width: calc(297.7 * var(--k)); }
.rule__line-l { left: calc(198.8 * var(--k)); top: calc(13.4 * var(--k)); width: calc(126.6 * var(--k)); }
.rule__line-r { left: calc(363.1 * var(--k)); top: calc(14.6 * var(--k)); width: calc(126.6 * var(--k)); }
.rule__heart  { left: calc(334.5 * var(--k)); top: calc(6.6  * var(--k)); width: calc(19.4  * var(--k)); }


/* =============================================================================
   4. Карточка-приглашение                                       --top: 1050
   ============================================================================= */
.card {
  top: calc(1050 * var(--k));
  height: calc(480 * var(--k));
}

.card__bg {                        /* 552 × 469, радиус 29.7 */
  left:   calc(69.9  * var(--k));
  top:    calc(5.6   * var(--k));
  width:  calc(552.1 * var(--k));
  height: calc(468.8 * var(--k));
  border-radius: calc(29.7 * var(--k));
  background: var(--c-card);
}

.card__leaf-l { left: calc(234.2 * var(--k)); top: calc(22.7 * var(--k)); width: calc(87.8 * var(--k)); }
.card__leaf-r { left: calc(366.5 * var(--k)); top: calc(22.7 * var(--k)); width: calc(89   * var(--k)); }
.card__heart  { left: calc(335.7 * var(--k)); top: calc(28.4 * var(--k)); width: calc(17.1 * var(--k)); }

.card__title {                     /* Cormorant SemiBold Italic 25.55 / 48.55 */
  left: 0;
  top: calc(72.6 * var(--k));
  width: 100%;
  font-size: calc(25.55 * var(--k));
  line-height: calc(48.55 * var(--k));
  font-weight: 600;
  font-style: italic;
  color: var(--c-text);
  text-align: center;
}

.card__text {                      /* Cormorant Light Italic 25.55 / 48.55 */
  left:  calc(135 * var(--k));
  top:   calc(119.3 * var(--k));
  width: calc(413 * var(--k));
  font-size: calc(25.55 * var(--k));
  line-height: calc(48.55 * var(--k));
  font-weight: 300;
  font-style: italic;
  color: var(--c-text);
  text-align: center;
}

.card__hr { left: calc(227.3 * var(--k)); top: calc(282.8 * var(--k)); width: calc(235 * var(--k)); }

.card__ico-date { left: calc(257   * var(--k)); top: calc(314.7 * var(--k)); width: calc(26.2 * var(--k)); }
.card__ico-time { left: calc(255.8 * var(--k)); top: calc(362.7 * var(--k)); width: calc(27.4 * var(--k)); }

/* Дата и время выключены по центру своего блока (368 в макете), а не полосы */
.card__date,
.card__time {
  left:  calc(268 * var(--k));
  width: calc(200 * var(--k));
  text-align: center;
  white-space: nowrap;
  font-weight: 400;
}
.card__date {
  top: calc(313.6 * var(--k));
  font-size: calc(23.95 * var(--k));
  line-height: calc(29.01 * var(--k));
  color: var(--c-date);
}
.card__time {
  top: calc(345.8 * var(--k));
  font-size: calc(41.06 * var(--k));
  line-height: calc(49.73 * var(--k));
  color: var(--c-time);
}

.card__orn-b { left: calc(263.8 * var(--k)); top: calc(428.8 * var(--k)); width: calc(162 * var(--k)); }

/* Растительный декор вокруг карточки */
.card__branch  { left: calc(534.2 * var(--k)); top: calc(177.9 * var(--k)); width: calc(143.7 * var(--k)); }
.card__twig    { left: calc(40.3  * var(--k)); top: calc(264.6 * var(--k)); width: calc(19.4  * var(--k)); }
.card__heart-l { left: calc(22    * var(--k)); top: calc(298.8 * var(--k)); width: calc(22.8  * var(--k)); }


/* =============================================================================
   5. Имена                                                      --top: 1560
   ============================================================================= */
.couple {
  top: calc(1560 * var(--k));
  height: calc(200 * var(--k));
}

.couple__pre {                     /* Cormorant Light Italic 22 / 26.64 */
  left: 0;
  top: calc(8.2 * var(--k));
  width: 100%;
  font-size: calc(22 * var(--k));
  line-height: calc(26.64 * var(--k));
  font-weight: 300;
  font-style: italic;
  color: var(--c-accent);
  text-align: center;
}

.couple__rings   { left: calc(502 * var(--k)); top: calc(29 * var(--k)); width: calc(151 * var(--k)); }
.couple__flowers { left: calc(50  * var(--k)); top: calc(69 * var(--k)); width: calc(116 * var(--k)); }

.couple__names {                   /* Cormorant Light Italic 38 / 46 */
  left: 0;
  top: calc(46 * var(--k));
  width: 100%;
  font-size: calc(38 * var(--k));
  line-height: calc(46.02 * var(--k));
  font-weight: 300;
  font-style: italic;
  color: var(--c-accent);
  text-align: center;
  white-space: nowrap;
}

.couple__orn { left: calc(275 * var(--k)); top: calc(106 * var(--k)); width: calc(131 * var(--k)); }


/* =============================================================================
   6. Место проведения                                           --top: 1704
   ============================================================================= */
.venue {
  top: calc(1704 * var(--k));
  height: calc(var(--venue-h) * var(--k));
  overflow: hidden;                /* clipsContent «Frame 3» */
  /* Фона тут нет намеренно: у фрейма белая заливка помечена visible:false,
     то есть отключена. Если её вернуть, блок срежет кольца, которые заходят
     на него сверху. */
}

.venue__photo {                    /* 939 × 1254 @ (-127, -228) внутри секции */
  left:   calc(-127 * var(--k));
  top:    calc(-228 * var(--k));
  width:  calc(939  * var(--k));
  height: calc(1254 * var(--k));
  max-width: none;
}

.venue__orn { left: calc(150 * var(--k)); top: calc(632 * var(--k)); width: calc(387 * var(--k)); }

/* Горизонтальная иллюстрация: занимает всю ширину блока, блок равен ей по
   высоте. Гирлянда из макета скрыта — она рисовалась под ступени FAYZ и на
   чужом здании оказывается посреди фасада. */
.venue--wide .venue__photo {
  left: 0;
  /* Кольца из блока с именами заходят на этот блок сверху и кончаются на
     y 1758, а блок начинается на 1704. Без отступа крыша здания срезала бы
     их горизонтальной линией. */
  top: calc(56 * var(--k));
  width: 100%;
  height: auto;
}
.venue--wide .venue__orn { display: none; }


/* =============================================================================
   6b. Подпись места                                             --top: 2481

   Взято из фрейма «Shoxruxbek»: там подпись вынесена под фотографию.
   Во фрейме «Abdulhafiz» она лежит поверх фасада и почти не читается —
   применяем для обеих страниц вариант поновее (см. README).

   Метка и текст выложены flex-строкой, а не по фиксированным координатам:
   названия залов у разных свадеб разной длины, и при жёстких отступах
   длинная вторая строка наезжает на иконку. Так строка центрируется целиком
   и остаётся корректной при любом названии.
   ============================================================================= */
.place {
  top:   calc(2482.4 * var(--k) - var(--venue-shift));
  left:  0;
  width: 100%;
}

/* Вся подпись — ссылка на карту. Иконка метки уже намекает на это, поэтому
   из явных признаков ссылки оставлена только тонкая подчёркивающая линия
   под названием зала. */
.place__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--k));
  text-decoration: none;
  color: inherit;
}

/* Селекторы с .invite — иначе общее правило «.invite img → position:
   absolute» окажется специфичнее и выбьет иконку из flex-потока. */
.invite .place__pin {
  position: static;
  flex: none;
  width: calc(24 * var(--k));
}

.place__text { text-align: center; }

.place__city,
.place__name {
  display: block;
  font-family: var(--f-sans);
  font-weight: 400;
}
.place__city {
  font-size: calc(15 * var(--k));
  line-height: calc(18.15 * var(--k));
  color: var(--c-venue-1);
}
.place__name {
  margin-top: calc(5.25 * var(--k));
  font-size: calc(16 * var(--k));
  line-height: calc(19.36 * var(--k));
  color: var(--c-venue-2);
  border-bottom: 1px solid rgba(186, 172, 160, .45);
  padding-bottom: calc(2 * var(--k));
}

.place__link:hover .place__name,
.place__link:focus-visible .place__name {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}
.place__link:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: calc(6 * var(--k));
  border-radius: calc(4 * var(--k));
}


/* =============================================================================
   7. Финал                                                      --top: 2550
   ============================================================================= */
.outro {
  top: calc(2550 * var(--k) - var(--venue-shift));
  height: calc(439 * var(--k));
}

.outro__envelope { left: calc(136 * var(--k)); top: calc(26 * var(--k)); width: calc(420 * var(--k)); }

.outro__text {                     /* Cormorant Light Italic 30 / 36.33 */
  left: 0;
  top: calc(238.3 * var(--k));
  width: 100%;
  font-size: calc(30 * var(--k));
  line-height: calc(36.33 * var(--k));
  font-weight: 300;
  font-style: italic;
  color: var(--c-accent);
  text-align: center;
}


/* =============================================================================
   Появление при прокрутке (класс .js навешивает js/main.js)
   ============================================================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(calc(18 * var(--k)));
  transition: opacity .9s ease, transform .9s ease;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =============================================================================
   Кнопка фоновой музыки
   Появляется из JS, только когда аудиофайл реально доступен.
   ============================================================================= */
.music {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10;

  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;

  border: 1px solid rgba(158, 139, 123, .35);
  border-radius: 50%;
  background: rgba(253, 251, 249, .92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--c-accent);
  cursor: pointer;

  transition: color .2s ease, border-color .2s ease;
}
.music[hidden] { display: none; }

.music:hover,
.music:focus-visible { color: #8A7566; border-color: rgba(158, 139, 123, .6); }

/* Перечёркивание видно, пока музыка не играет */
.music.is-playing .music__slash { opacity: 0; }
.music__slash { opacity: 1; transition: opacity .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .music, .music__slash { transition: none; }
}