/* ─────────────────────────────────────────────────────────────
   Оскар ВИНСИТ 24 — стили лендинга
   Корпоративная палитра: синий + серебро, шрифты и анимации
   лендинга сохранены.
   ───────────────────────────────────────────────────────────── */

:root {
  --font-display: "Oswald";
  --font-body: 'Century Gothic', Arial, sans-serif;
  --font-meta: ui-monospace;

  --bg: #050b1e; /* глубокий тёмно-синий */
  --surface: #0b1430; /* подложка светлее на ступень */
  --ink: #e9edf7; /* серебристо-белый */
  --muted: #98a3c0; /* серо-синий */
  --line: #1d2a55; /* волосяная линия */
  --accent: #2f7bf0; /* корпоративный синий: заливки */
  --accent-ink: #7eb1ff; /* тот же синий, но читаемый текстом на тёмном */
  --silver: #ccd4e4; /* серебро */
  --danger: #ff5c5c;
  --radius: 0.25rem;

  --on-accent: #ffffff;
  --scrim: color-mix(in srgb, var(--ink) 62%, transparent);
  --accent-hover: color-mix(in srgb, var(--accent) 88%, var(--ink));
  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--ink));
  --ink-soft: color-mix(in srgb, var(--ink) 70%, var(--bg));
  --ink-faint: color-mix(in srgb, var(--ink) 45%, var(--bg));
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--line);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: 'Century Gothic', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Базовые утилиты ─────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Поля, скрытые скриптом, не должны спорить с display:flex */
[hidden] {
  display: none !important;
}

.h2 {
  font-size: 1.875rem;
  line-height: 1.15;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.accent {
  color: var(--accent-ink);
}

.muted {
  color: var(--muted);
}

.lead {
  max-width: 60ch;
  margin-top: 1rem;
  line-height: 1.625;
}

/* Металлик: то, что раньше было золотом, теперь серебро */
.metal-text {
  background: linear-gradient(178deg, #ffffff, var(--silver) 42%, #7f8aa3 76%, #eef2f9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Пыль поверх всей страницы */
.grain {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* Линия с бегущим бликом */
.sweep-line {
  position: relative;
  height: 1px;
  margin-top: 2.5rem;
  max-width: 28rem;
  overflow: hidden;
  background: var(--line);
}

.sweep-line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: line-sweep 3.2s ease-in-out infinite;
}

@keyframes line-sweep {
  0% {
    transform: translate(-120%);
  }
  100% {
    transform: translate(430%);
  }
}

/* Пульсация синего свечения в шапке-герое */
.flicker {
  animation: flicker 4s ease-in-out infinite;
}

@keyframes flicker {
  0%,
  100% {
    opacity: 0.32;
  }
  8% {
    opacity: 0.38;
  }
  12% {
    opacity: 0.28;
  }
  45% {
    opacity: 0.34;
  }
  50% {
    opacity: 0.26;
  }
}

/* ── Заставка с хлопушкой ────────────────────────────────────── */

body.is-locked {
  overflow: hidden;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 65; /* выше шапки (50), ниже зерна (70) */
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
    var(--bg);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.intro.is-leaving {
  opacity: 0;
  visibility: hidden;
}

.intro.is-done {
  display: none;
}

.intro-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 0.6s ease;
}

.intro.is-leaving .intro-open {
  transform: scale(1.05);
}

.intro-open:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 14px;
}

.intro-board {
  position: relative;
  /* высота тоже ограничена, чтобы хлопушка не упиралась в края окна */
  width: min(84vw, 36rem, 62vh);
  aspect-ratio: 1600 / 1491;
  filter: drop-shadow(0 30px 60px rgb(0 0 0 / 0.55));
  animation: intro-float 5s ease-in-out infinite;
}

.board-layer {
  position: absolute;
  inset: 0;
  background: url("assets/clapperboard.png") center / 100% 100% no-repeat;
}

/* Рукоятка отделена от корпуса прямой линией через петлю.
   Картинка обрезана по контенту 1600×1491:
   петля 18.6% / 28%, наклон рукоятки 10.14°. */
.board-body {
  clip-path: polygon(0 0, 25.55% 0, 25.55% 26.66%, 100% 12.37%, 100% 100%, 0 100%);
}

.board-arm {
  clip-path: polygon(25.55% 0, 100% 0, 100% 12.37%, 25.55% 26.66%);
  transform-origin: 18.6% 28%;
  transform: rotate(10.14deg); /* закрытое положение */
  transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.5, 1);
}

.intro.is-opening .board-arm {
  transform: rotate(0deg); /* рукоятка поднялась — хлопушка открыта */
}

/* Вспышка в момент хлопка */
.board-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 19% 28%, rgb(255 255 255 / 0.85), transparent 38%);
}

.intro.is-opening .board-flash {
  animation: intro-flash 0.5s ease-out;
}

.intro-hint {
  font-family: var(--font-display), ui-sans-serif, sans-serif;
  font-size: 0.9375rem;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
  color: var(--accent-ink);
  animation: intro-hint 2.4s ease-in-out infinite;
  transition: opacity 0.35s ease;
}

.intro.is-opening .intro-hint {
  opacity: 0;
  animation: none;
}

@keyframes intro-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.9rem);
  }
}

@keyframes intro-hint {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes intro-flash {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

/* ── Кнопки ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display), ui-sans-serif, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease,
    filter 0.18s ease;
}

.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-accent:hover {
  background: var(--accent-hover);
  transform: scale(1.02);
}

.btn-accent:active {
  transform: scale(0.98);
}

.btn-ghost {
  border-color: var(--line);
  background: transparent;
  color: var(--ink-soft);
}

.btn-ghost:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

/* Серебряная кнопка — тот же формат, что и синяя акцентная */
.btn-silver {
  background: linear-gradient(178deg, #ffffff, var(--silver) 42%, #7f8aa3 76%, #eef2f9);
  color: var(--surface);
}

.btn-silver:hover {
  filter: brightness(1.06);
  transform: scale(1.02);
}

.btn-silver:active {
  transform: scale(0.98);
}

.btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── Шапка ───────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}

/* При скролле шапка получает подложку — иначе она съедает таблицу под собой */
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

/* Заголовки секций: с фиксированной шапкой больше нет — нужен лишь воздух */
section[id] {
  scroll-margin-top: 2rem;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding-block: 1rem;
}

/* ── Служебные утилиты ───────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Герой ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  min-height: 100dvh;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  height: 115%;
  width: 100%;
  object-fit: cover;
  opacity: 0.7;
  will-change: transform;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 60%, transparent),
    color-mix(in srgb, var(--bg) 30%, transparent),
    var(--bg)
  );
}

.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 20%, rgb(47 123 240 / 0.22), transparent 55%);
}

.hero-inner {
  position: relative;
  padding-top: 7rem;
  padding-bottom: 6rem;
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
}

.hero-number {
  margin: 0;
  font-family: var(--font-display), ui-sans-serif, sans-serif;
  font-size: clamp(7rem, 22vw, 17rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.02em;
}

.hero-copy {
  padding-bottom: 1rem;
}

.eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.hero-title {
  max-width: 16ch;
  margin-top: 1rem;
  font-size: 2.25rem;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero-lead {
  max-width: 48ch;
  margin-top: 1.25rem;
  line-height: 1.625;
  color: var(--ink-soft);
}

.hero-meta {
  margin-top: 1.5rem;
  font-family: var(--font-meta), ui-monospace, SFMono-Regular, monospace;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* ── Блок наград в герое ─────────────────────────────────────── */

.hero-awards {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-trophy-img {
  width: clamp(9rem, 15vw, 13.5rem);
  height: auto;
  filter: drop-shadow(0 24px 50px rgb(0 0 0 / 0.55));
}

.hero-awards-title {
  margin-top: 1.75rem;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Акцент блока — золото, как у статуэтки */
.gold {
  background: linear-gradient(
    100deg,
    #e8c877 0%,
    #d5a94e 38%,
    #b8862f 62%,
    #f0d998 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-awards-text {
  max-width: 34ch;
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted);
}

/* Тонкая золотая линия под текстом */
.gold-line {
  width: min(16rem, 70%);
  height: 1px;
  margin-top: 1.75rem;
  background: linear-gradient(
    90deg,
    transparent,
    #d5a94e 30%,
    #d5a94e 70%,
    transparent
  );
}

/* ── Заголовок программы ─────────────────────────────────────── */

.section-head {
  padding-top: 6rem;
  padding-bottom: 2.5rem;
  text-align: center;
}

/* Описание под заголовком — по центру, не шире строки */
.section-head .lead {
  margin-inline: auto;
}

/* ── План мероприятия (таймлайн) ────────────────────────────── */

.plan {
  padding-bottom: 3rem;
}

/* Лента программы: центральная светящаяся линия + карточки по бокам */
.timeline {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 0;
  list-style: none;
}

/* Концы линии: проценты считаются от высоты самой ленты, поэтому
   линия стартует под заголовком (от «Сбора гостей») и гаснет внутри
   финального блока, не срезая ни заголовок, ни «Развлекательную программу» */
.timeline::before,
.timeline::after {
  inset-block: 7% 7%;
}

/* Центральная линия — узкий градиентный след */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    var(--line) 4%,
    var(--accent) 50%,
    var(--line) 96%,
    transparent
  );
}

/* Бегущий блик по линии — «живая» программа.
   Блик — узкий светящийся участок внутри статичной линии: он начинает
   движение от её верхнего конца и доезжает до нижнего, поэтому нигде
   не выходит за отрезок линии. */
.timeline::after {
  content: "";
  position: absolute;
  top: 7%;
  left: 50%;
  width: 2px;
  height: 16%;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    rgb(126 177 255 / 0.9),
    transparent
  );
  animation: tl-sweep 7s linear infinite;
}

@keyframes tl-sweep {
  0% {
    top: -15%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2.5rem 1fr;
  align-items: start;
  padding-bottom: 1.75rem;
}

.tl-item:last-child {
  padding-bottom: 0;
}

/* Точка на линии — ровно по центру своей карточки */
.tl-dot {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Карточка события */
.tl-card {
  grid-column: 1;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  /* Плотная подложка — линия и блик не просвечивают сквозь текст */
  background:
    linear-gradient(160deg, var(--surface), var(--bg)),
    var(--bg);
  text-align: right;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.tl-item:nth-child(even) .tl-card {
  grid-column: 3;
  text-align: left;
}

.tl-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 18px 40px rgb(3 8 22 / 0.5);
}

/* Время — плашка-пилюля */
.tl-time {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-meta), ui-monospace, SFMono-Regular, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.tl-title {
  margin-top: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.tl-speaker {
  margin-top: 0.5rem;
  color: var(--accent-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Перерывы — аккуратные «пилюли» поперёк линии */
.tl-item.tl-break .tl-card {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 26rem;
  padding: 0.9rem 1.75rem;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background:
    color-mix(in srgb, var(--accent) 10%, var(--bg)),
    var(--bg);
  text-align: center;
}

.tl-break .tl-title {
  margin-top: 0.4rem;
  color: var(--accent-ink);
  font-family: var(--font-display), ui-sans-serif, sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Старт дня — приглашающая пилюля над началом линии */
.tl-item.tl-start .tl-card {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 26rem;
  padding: 1.1rem 2rem 1.2rem;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 16%, var(--bg)),
    color-mix(in srgb, var(--accent) 6%, var(--bg))
  );
  text-align: center;
  box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 18%, transparent);
}

.tl-start .tl-title {
  margin-top: 0.5rem;
  font-family: var(--font-display), ui-sans-serif, sans-serif;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Финал дня — крупный блок-прощание поперёк линии */
.tl-item.tl-finale .tl-card {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 40rem);
  padding: 2rem 2.5rem 2.25rem;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background:
    radial-gradient(
      120% 140% at 50% 0%,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 90%, transparent),
      color-mix(in srgb, var(--bg) 92%, transparent)
    ),
    var(--bg);
  text-align: center;
  box-shadow: 0 24px 60px rgb(3 8 22 / 0.55);
}

.tl-finale .tl-title {
  margin-top: 0.65rem;
  font-family: var(--font-display), ui-sans-serif, sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Тонкая линия-прощание под финальным заголовком */
.tl-finale .tl-card::after {
  content: "";
  display: block;
  width: min(14rem, 60%);
  height: 1px;
  margin: 1.25rem auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 70%, transparent),
    transparent
  );
}

/* Главный момент дня — номинанты в золоте */
.tl-gold .tl-dot {
  background: #d5a94e;
  box-shadow:
    0 0 0 4px rgb(213 169 78 / 0.2),
    0 0 20px rgb(213 169 78 / 0.55);
}

.tl-gold .tl-card {
  border-color: rgb(213 169 78 / 0.45);
  background:
    linear-gradient(
      160deg,
      rgb(213 169 78 / 0.12),
      color-mix(in srgb, var(--bg) 88%, transparent)
    ),
    var(--bg);
}

.tl-gold .tl-title {
  color: #e8c877;
}

@media (max-width: 767px) {
  /* Кнопка в шапке должна уложиться в одну строку рядом с логотипом */
  .btn-sm {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  /* На телефоне линия идёт по левому краю; её концы задают те же
     проценты, что и на десктопе — от «Сбора гостей» до финального блока */
  .timeline::before,
  .timeline::after {
    left: 0.375rem;
  }

  .tl-item {
    grid-template-columns: 1.75rem 1fr;
    padding-bottom: 1.25rem;
  }

  .tl-dot {
    grid-column: 1;
    margin-top: 0;
    align-self: center;
    justify-self: normal;
  }

  .tl-card,
  .tl-item:nth-child(even) .tl-card {
    grid-column: 2;
    padding: 1rem 1.15rem;
    text-align: left;
  }

  .tl-item.tl-break .tl-card {
    grid-column: 1 / -1;
    margin-left: 1.75rem;
    padding: 0.8rem 1.25rem;
    text-align: left;
  }

  /* Старт и финал на телефоне занимает ширину после линии */
  .tl-item.tl-start .tl-card,
  .tl-item.tl-finale .tl-card {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin-left: 1.75rem;
    text-align: center;
  }

  .tl-item.tl-finale .tl-card {
    padding: 1.5rem 1.25rem 1.75rem;
  }

  .tl-title {
    font-size: 1.0625rem;
  }

  .tl-time {
    font-size: 0.75rem;
  }
}

/* ── Дресс-код ───────────────────────────────────────────────── */

.dress {
  position: relative;
  overflow: hidden;
  padding-block: 6rem;
}

/* Шапка блока — по центру */
.dress-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

/* Описание центрируем и как блок, и как текст — иначе при max-width
   оно прижимается к левому краю и «уезжает» от заголовка */
.dress-head .lead {
  max-width: 40rem;
  margin-inline: auto;
}

.dress-head .sweep-line {
  max-width: 12rem;
  margin: 2rem auto 0;
}

/* Два образа: слева мужчина, справа девушка */
.dress-gallery {
  display: grid;
  gap: 2rem;
  max-width: 62rem;
  margin: 3.5rem auto 0;
}

.dress-look {
  margin: 0;
}

/* Место под фото: общая сцена-фон из assets, края растворяются в фоне страницы */
.dress-shot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: url("assets/gen-muzwlo17.jpg") center / cover no-repeat;
  /* срезы по краям уходят в фон — фото выглядит частью сцены, а не карточкой */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 7%, #000 86%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 7%, #000 86%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

.dress-shot-hint {
  display: inline-grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.dress-shot-hint svg {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--muted);
}

/* Как только фото добавлено — заглушка уходит сама */
.dress-shot:has(.dress-shot-img) .dress-shot-hint {
  display: none;
}

.dress-shot-img {
  display: block;
  width: 100%;
  height: auto;
  /* Фото остаётся плотным, но края растворяются в общей сцене:
     тёмный фон снимка сливается с тёмной сценой, остаётся человек и свет */
  -webkit-mask-image: radial-gradient(
    ellipse 72% 82% at 50% 44%,
    #000 58%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 72% 82% at 50% 44%,
    #000 58%,
    transparent 100%
  );
  /* Чуть притушен и уведен в холодный тон — фото садится в палитру сайта */
  filter: saturate(0.85) brightness(0.92);
  transition: transform 0.6s ease, filter 0.4s ease;
}

.dress-look:hover .dress-shot-img {
  transform: scale(1.04);
  filter: saturate(1) brightness(1);
}

/* Подпись под фото */
.dress-caption {
  margin-top: 1.25rem;
  text-align: center;
}

.dress-card-title {
  display: block;
  font-family: var(--font-display), ui-sans-serif, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dress-card-text {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Акцент под обоими образами — по центру */
.dress-note {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
  max-width: 40rem;
  margin: 2.5rem auto 0;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--muted);
  text-align: center;
}

.dress-note-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--accent);
}

/* ── Форма ───────────────────────────────────────────────────── */

.rsvp {
  padding-block: 6rem;
}

/* Заголовок формы — по центру, как и описание под ним */
.rsvp > .h2 {
  text-align: center;
  /* letter-spacing 0.2em добавляет пустоту после последней буквы —
     indent возвращает оптический центр строки */
  text-indent: 0.2em;
}

.rsvp > .lead {
  margin-inline: auto;
  text-align: center;
}

/* Бегущая линия под заголовком — тоже по центру */
.rsvp-body .sweep-line {
  margin-inline: auto;
}

.rsvp-body {
  margin-top: 3rem;
}

.rsvp-form {
  display: grid;
  gap: 1.5rem;
  max-width: 48rem;
  margin-inline: auto;
  /* отступ от бегущей полоски над формой — чтобы форма не упиралась в неё */
  margin-top: 3.5rem;
}

/* Переключатель роли — по центру формы */
.field-center {
  align-items: center;
  text-align: center;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Подпись поля — и для инпутов, и для группы переключателей */
.field label,
.field-tag {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  outline: none;
  transition: border-color 0.18s ease;
}

.field textarea {
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
}

.field input[aria-invalid="true"] {
  border-color: var(--danger);
}

/* Сегментированный переключатель: «Сотрудник / Партнёр», «Да / Нет» */
.seg {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s ease;
}

.seg:has(input[aria-invalid="true"]) {
  border-color: var(--danger);
}

.seg-opt {
  position: relative;
  display: inline-flex;
}

.seg-opt + .seg-opt {
  border-left: 1px solid var(--line);
}

/* Радиокнопка утоплена: кликается вся плашка */
.seg-opt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg-opt span {
  padding: 0.6rem 1.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.seg-opt:hover span {
  background: var(--surface-hover);
}

.seg-opt input:checked + span {
  background: var(--accent);
  color: var(--on-accent);
}

.seg-opt input:focus-visible + span {
  outline: 2px solid var(--accent-ink);
  outline-offset: -2px;
}

.form-status {
  min-height: 1.25rem;
  font-size: 0.875rem;
  color: var(--accent-ink);
}

.form-status[data-state="error"] {
  color: var(--danger);
}

.form-status[data-state="pending"] {
  color: var(--muted);
}

/* ── Подвал ──────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 3rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Логотип в подвале: прозрачная версия, без белой плашки */
.footer-logo {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.footer-logo img {
  height: 2.5rem;
  width: auto;
}

.footer-logo:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* Статичная строка «есть вопросы?..» — ничего не бегает */
.footer-phone {
  font-family: var(--font-display), ui-sans-serif, sans-serif;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  text-decoration: none;
}

.footer-phone:hover {
  color: var(--ink);
}

/* ── Появление при прокрутке ─────────────────────────────────── */

.reveal,
.reveal-up {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal {
  transform: translateY(30px);
}

.reveal-up {
  transform: translateY(90px) rotate(-14deg);
}

.awards-halo.reveal-up {
  transform: translateY(40px);
}

.reveal.is-visible,
.reveal-up.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Адаптив ─────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .h2 {
    font-size: 2.25rem;
  }

  .section-head {
    padding-top: 9rem;
  }

  .hero-grid {
    grid-template-columns: auto 1fr auto;
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }

  .hero-awards {
    display: flex;
  }

  .hero-number {
    font-size: clamp(11rem, 18vw, 20rem);
  }

  .eyebrow {
    font-size: 0.875rem;
  }

  .hero-title {
    font-size: 3.75rem;
  }

  .hero-lead {
    font-size: 1.125rem;
  }

  .dress {
    padding-block: 9rem;
  }

  .dress-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .rsvp {
    padding-block: 9rem;
  }

  .rsvp-form {
    grid-template-columns: 1fr 1fr;
  }

  .field-wide {
    grid-column: span 2;
  }

  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ── Уважение к настройке «меньше движения» ──────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .flicker,
  .intro-board,
  .intro-hint,
  .timeline::after,
  .sweep-line::after {
    animation: none;
  }

  .timeline::after,
  .sweep-line::after {
    opacity: 0.4;
  }

  .reveal,
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}