/* ============================================================
   SCENE (v3) — облака-параллакс, сплошная волна перекраски
   (View Transitions), прозрачная обложка под облака,
   усиление контраста на жёлтой стороне.
   ============================================================ */

/* ---------- Сплошная волна перекраски (View Transitions) ----------
   Отключаем дефолтный кросс-фейд: новый (перекрашенный) кадр
   раскрывается расширяющимся кругом — анимацию задаёт side.js.
   Старый кадр остаётся снизу сплошным, поверх текста ничего
   полупрозрачного не висит. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }

/* ---------- Небосвод: луна (Иван) и солнце (Кристина) ----------
   Статичный (фиксированный, не скроллится) слой вверху.
   До выбора стороны затянут облаками (.sky-cover).
   Перекатываются, сменяя друг друга при смене стороны. */
.sky {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: clamp(200px, 34vh, 320px);
  z-index: -1;               /* за контентом, поверх параллакс-облаков */
  overflow: hidden;
  pointer-events: none;
  /* Сумеречный фон неба: тёмная насыщенная зона вокруг светила (для
     контраста), прозрачно у самого верха (чтобы навигация читалась). */
  background: linear-gradient(180deg,
    transparent 0%,
    var(--sky-deep, rgba(70, 55, 110, 0.18)) 40%,
    transparent 92%);
  transition: background var(--transition-side);
}
.orb {
  position: absolute;
  top: 48%; left: 50%;
  width: clamp(60px, 15vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* нейтраль: закатились за горизонт вниз, скрыты */
  transform: translate(-50%, -50%) translateY(230px) rotate(40deg);
  opacity: 0;
  transition: transform 1100ms cubic-bezier(0.34, 1.08, 0.4, 1), opacity 720ms ease;
  will-change: transform, opacity;
}
/* Луна — полумесяц (круг с вырезанным смещённым кругом через mask).
   Крупнее солнца и ярче, чтобы серп смотрелся выразительно. */
.orb--moon {
  width: clamp(92px, 22vw, 138px);   /* крупный, заметно больше солнца */
  background: radial-gradient(circle at 32% 42%, #ffffff 0%, #f6f5fc 45%, #dcdaf0 100%);
  /* серп потолще: вырез смещён сильнее вправо */
  -webkit-mask: radial-gradient(circle at 86% 37%, transparent 0 54%, #000 56%);
          mask: radial-gradient(circle at 86% 37%, transparent 0 54%, #000 56%);
  /* тройное свечение по форме серпа — яркий, не теряется на фоне */
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 20px rgba(214, 206, 248, 0.9))
          drop-shadow(0 0 40px rgba(150, 130, 220, 0.55));
}
/* Солнце */
.orb--sun {
  background: radial-gradient(circle at 50% 44%, #fff6cf 0%, #ffd44a 54%, #f5b11f 100%);
  box-shadow: 0 0 48px 5px rgba(255, 194, 58, 0.6);
}
.orb--sun::before {
  content: ''; position: absolute; inset: -36%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 198, 66, 0.55) 0deg 5deg, transparent 5deg 18deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 58%, #000 72%, transparent 76%);
          mask: radial-gradient(circle, transparent 55%, #000 58%, #000 72%, transparent 76%);
  animation: sun-rays 70s linear infinite;
}
@keyframes sun-rays { to { transform: rotate(360deg); } }

/* Свечение спрятанного светила — пробивается сквозь облака-кучу,
   намекая, что за тучами скрыто солнце/луна. */
.sky-glow {
  position: absolute;
  top: 48%; left: 50%;
  width: clamp(170px, 46vw, 300px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--sky-glow-color, rgba(255, 252, 245, 0.8)) 0%, transparent 64%);
  opacity: 0.85;
  pointer-events: none;
  transition: background var(--transition-side), opacity 800ms ease;
}

/* Звёзды — появляются на стороне Ивана (ночь), мерцают, в разброс */
.star {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 7px 1.5px rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: opacity 900ms ease;
}
.star::before {
  content: ''; position: absolute; inset: -3px;
  background: radial-gradient(circle, rgba(255,255,255,0.7), transparent 70%);
  border-radius: 50%;
}
.side-ivan .star {
  opacity: 1;
  animation: star-twinkle 3.4s ease-in-out infinite;
}
.star:nth-child(3) { animation-delay: .6s; }
.star:nth-child(4) { animation-delay: 1.2s; }
.star:nth-child(5) { animation-delay: 1.8s; }
.star:nth-child(6) { animation-delay: 2.4s; }
@keyframes star-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* Иван: луна восходит в центр, солнце закатывается вправо */
.side-ivan .orb--moon { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
.side-ivan .orb--sun  { transform: translate(-50%, -50%) translate(155%, 150px) rotate(150deg); opacity: 0; }
/* Кристина: солнце восходит в центр, луна закатывается влево */
.side-kristina .orb--sun  { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
.side-kristina .orb--moon { transform: translate(-50%, -50%) translate(-155%, 150px) rotate(-150deg); opacity: 0; }

/* Облака-завеса до выбора стороны — те же паттерны, что в фоне,
   собраны «в кучу» над светилом; при восходе раздвигаются и исчезают.
   Заполняет clouds.js. */
.sky-cover { position: absolute; inset: 0; }
.cover-puff {
  position: absolute;
  color: var(--c-accent);     /* как фоновые облака, перекрашивается со стороной */
  opacity: 0.6;
  transform: translate(-50%, -50%);
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 900ms ease,
              color var(--transition-side);
  will-change: transform, opacity;
}
.cover-puff-inner { display: block; }   /* масштаб конкретного облака */
.cover-puff svg { width: clamp(120px, 30vw, 185px); height: auto; display: block; }
/* при выборе стороны каждое облако расходится наружу и тает */
.has-side .cover-puff {
  transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0)) scale(0.85);
  opacity: 0;
}

/* ---------- Слой облаков ---------- */
.clouds {
  position: fixed;
  inset: 0;
  z-index: -1;            /* позади контента, поверх фона body */
  overflow: hidden;
  pointer-events: none;
}
/* Слой — общий параллакс и прозрачность на всю группу облаков */
.cloud-layer {
  position: absolute;
  inset: 0;
  will-change: transform; /* параллакс по вертикали (JS), одно смещение на слой */
}
.cloud {
  position: absolute;
}
.cloud-inner {
  display: block;
  color: var(--c-accent); /* перекрашивается вместе со стороной */
  transition: color var(--transition-side);
  /* чёткие края (без блюра); прозрачность задаётся на уровне слоя */
  /* горизонтальный дрейф — через margin, чтобы не конфликтовать
     с transform: scale() (его ставит clouds.js) */
  animation-name: cloud-drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.cloud-inner svg { width: 200px; height: auto; }
@keyframes cloud-drift {
  from { margin-left: 0; }
  to   { margin-left: var(--drift, 40px); }
}

/* ---------- Обложка прозрачная — чтобы облака были видны ---------- */
.hero {
  background: transparent !important;
}
/* мягкое свечение сверху обложки поверх облаков, но под контентом */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 80% at 50% 0%, var(--page-glow) 0%, transparent 60%);
  pointer-events: none;
  transition: background var(--transition-side);
}

/* ---------- Контраст на жёлтой стороне ---------- */
/* Вторичная кнопка: чёткая граница цветом deep вместо бледного accent */
.side-kristina .btn--secondary {
  color: var(--c-deep);
  box-shadow: inset 0 0 0 1.6px var(--c-deep);
}
/* Главная кнопка: тонкая тёмная обводка для читаемости на жёлтом */
.side-kristina .btn--primary {
  box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(68, 58, 24, 0.28);
}
/* Подписи/лейблы чуть жирнее на жёлтом */
.side-kristina .eyebrow,
.side-kristina .hero-date { font-weight: 800; }

/* ---------- Места: регистрация + банкет ---------- */
.places {
  display: grid;
  gap: var(--s-6);
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .places { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
.place {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  background: var(--surface-white);
  border-radius: var(--radius);
  padding: var(--s-4);
  box-shadow: var(--shadow-soft);
}
.place-head { display: flex; gap: var(--s-3); align-items: baseline; }
.place-time {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-deep);
  transition: color var(--transition-side);
}
.place-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.place .map-frame { margin: 0; }
.place .venue-note { margin: 0; }

/* ---------- Дресс-код: текст + цветные акценты ---------- */
.dresscode-copy {
  max-width: 560px;
  margin: 0 auto var(--s-8);
  display: grid;
  gap: var(--s-3);
}
.dresscode-copy.center { text-align: center; }
.hl { font-weight: 800; white-space: nowrap; }
.hl--ivan { color: #7E5CA8; }   /* фиолетовый акцент */
.hl--kris { color: #B0851A; }   /* жёлто-золотой акцент (читаемый на светлом) */

/* ---------- RSVP: визуальное разделение групп ---------- */
.rsvp-group { display: grid; gap: var(--s-6); }
.rsvp-group + .rsvp-group {
  margin-top: var(--s-4);
  padding-top: var(--s-8);
  border-top: 1px solid rgba(50, 40, 70, 0.12);
}
.rsvp-group-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-deep);
  margin-bottom: calc(-1 * var(--s-2));
  transition: color var(--transition-side);
}
/* Плашка «заполняете как …» вместо повторного ввода имени */
.rsvp-asname {
  display: inline-block;
  align-self: start;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-tint-ink);
  background: var(--c-tint);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-side), color var(--transition-side);
}

/* ---------- Переключатель версий (v3, мульти-ссылки) ---------- */
.version-switch {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-white);
  box-shadow: var(--shadow-card);
}
.version-switch::before { content: none; }
.version-switch-label {
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-caption);
  margin-right: 2px;
}
.version-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-secondary);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.version-switch a:hover { background: var(--c-tint); color: var(--c-deep); transform: translateY(-1px); }
.version-switch a.is-current {
  background: var(--c-primary);
  color: var(--c-on-primary);
  cursor: default;
}