:root {
  /* Цвета фона и элементов */
  --bg: #ffffff;
  --bg-wash: #f3e8e6;
  --text: #1c1414;
  --muted: #4a3a3a;
  
  /* Акцентные цвета (красные оттенки) */
  --accent: #b01828;
  --accent-soft: #c75a66;
  --accent-thread: #d45662;
  
  /* Цвета карточек и элементов дресс-кода */
  --card: #fffdfb;
  --brown-dress: #5c3d2e;
  --wheat-dress: #d9c4a0;
  
  /* Настройки анимации */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Анимация появления снизу вверх */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Анимация движения пунктирной линии */
@keyframes line-drift {
  to {
    stroke-dashoffset: -80;
  }
}

/* Анимация мягкого парения для изображений */
@keyframes img-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Анимация свечения кролика */
@keyframes rabbit-glow {
  0%,
  100% {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.14));
  }
  50% {
    filter: drop-shadow(0 6px 14px rgba(176, 24, 40, 0.35));
  }
}

/* Анимация мягкого мерцания */
@keyframes shimmer-soft {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.88;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  /* Легкий красный градиент в верхней части сайта */
  background-image: radial-gradient(
    ellipse 120% 80% at 50% -20%,
    rgba(176, 24, 40, 0.07),
    transparent 55%
  );
  line-height: 1.45;
  overflow-x: hidden;
  position: relative;
}

/* Экран загрузки (Preloader) */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s ease, visibility 0.8s;
}

.preloader--hidden {
  opacity: 0;
  visibility: hidden;
}

.preloader__content {
  text-align: center;
}

.preloader__rabbit {
  width: 80px;
  height: auto;
  margin-bottom: 20px;
  animation: rabbit-glow 2s ease-in-out infinite, img-float 3s ease-in-out infinite;
}

.preloader__text {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-style: italic;
  color: var(--accent);
  animation: shimmer-soft 2s ease-in-out infinite;
}

/* Слой для фоновых элементов (линия и кролик) */
.background-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Стили SVG-линии, по которой бежит кролик */
.global-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.global-line path {
  stroke: var(--accent-thread);
  stroke-width: 2.5;
  stroke-dasharray: 6 10;
  fill: none;
  opacity: 0.55;
  animation: line-drift 24s linear infinite;
}

/* Стили изображения кролика, следующего за прокруткой */
.rabbit-follower {
  position: absolute;
  width: clamp(144px, 19.2vw, 269px);
  height: auto;
  transform-origin: center center;
  will-change: transform;
  animation: rabbit-glow 4s ease-in-out infinite;
}

.section {
  padding: 72px 16px;
}

/* Скрытие секций до их появления в зоне видимости */
main > section:not(.hero) {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(4px);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out),
    filter 0.85s var(--ease-out);
}

/* Класс, добавляемый через JS при прокрутке */
main > section:not(.hero).section--visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.container {
  width: min(640px, 100%);
  margin: 0 auto;
}

.title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.25rem, 6.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-align: center;
  color: var(--text);
}

.text {
  margin: 18px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: clamp(1.02rem, 2.4vw, 1.15rem);
  color: var(--muted);
}

.text--narrow {
  max-width: 480px;
}

.text strong {
  color: var(--text);
  font-weight: 600;
}

/* Стили для Hero-секции */
.hero .container {
  width: min(1120px, 100%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  min-height: 42vh;
  justify-content: center;
}

.hero__anim {
  opacity: 0;
  animation: fade-up 0.95s var(--ease-out) forwards;
}

.hero__anim:nth-child(1) {
  animation-delay: 0.1s;
}

.hero__anim:nth-child(2) {
  animation-delay: 0.28s;
}

.hero__eyebrow {
  margin: 0;
  font-size: clamp(0.78rem, 1.8vw, 0.9rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 500;
}

.hero__title {
  margin: 0;
  line-height: 0;
  width: 100%;
  max-width: min(1120px, 94vw);
}

.hero__title-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Стили интерактивного конверта в секции Invitation */
.invitation__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.invitation .container {
  width: min(700px, 100%);
  margin-top: 120px;
}

/* Надпись-подсказка над конвертом */
.envelope-hint {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.25rem, 6.5vw, 3.5rem); /* РАЗМЕР: Как у заголовков "Место" и "Дресс-код" */
  line-height: 1.05;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-align: center;
  color: var(--text); /* ЦВЕТ: Как у основных заголовков */
  margin-bottom: 25px;
  animation: shimmer-soft 3s ease-in-out infinite;
  pointer-events: none;
}

.envelope-wrapper {
  position: relative;
  width: min(700px, 94vw);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out);
}

.envelope-wrapper:hover {
  transform: scale(1.02);
}

.envelope-state img {
  display: block;
  width: 100%;
  height: auto;
}

.envelope-layers {
  position: relative;
  width: 100%;
  margin-top: 70px; /* Отступ сверху для поднятой крышки */
}

.envelope-layers .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* Слой 1: Фон под конвертом */
.envelope-layers .layer.bg {
  position: relative; 
  z-index: 1;
}

/* Слой 2: Верхняя крышка (размещается НАД конвертом) */
.envelope-layers .layer.top {
  z-index: 2;
  top: auto;
  bottom: 100%; 
}

/* Слой 3: Выезжающий белый лист с текстом */
.envelope-layers .layer.letter {
  z-index: 3;
  position: absolute;
  top: 10%; /* Начальное положение (внутри конверта) */
  left: 5%;
  width: 90%;
  height: 80%;
  background: #fdf5e6; /* Желтоватый цвет старой бумаги */
  padding: 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  transition: transform 1s var(--ease-out), top 1s var(--ease-out);
  border: 1px solid rgba(0, 0, 0, 0.05); /* Тонкая рамка для объема */
}

/* Анимация выезда листа вверх */
.envelope-wrapper.is-open .layer.letter {
  top: -45%; /* Высота выезда листа */
}

.letter-content {
  width: 100%;
}

.letter-text {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

/* Слой 4: Передняя часть конверта (закрывает письмо снизу) */
.envelope-layers .layer.mid {
  z-index: 4;
}

/* Секция с датой свадьбы (на всю ширину) */
.wedding-date-block {
  width: 100%; /* ШИРИНА: Блок всегда занимает 100% ширины экрана */
  background-color: #820f17; /* ЦВЕТ ФОНА: Темно-красный цвет блока */
  padding: 100px 20px; /* ТОЛЩИНА (ВЫСОТА) БЛОКА: Измените первое значение (100px), чтобы сделать полосу толще или тоньше */
  margin-top: 300px; /* ОТСТУП СВЕРХУ: Увеличил расстояние от конверта (было 200px) */
  margin-bottom: 40px; /* ОТСТУП СНИЗУ: Расстояние до следующего блока */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10; /* Слой выше, чем у кролика, чтобы он забегал ПОД этот блок */
}

/* Стили для ленты (изображения band.png) */
.wedding-date-band {
  position: absolute;
  top: -160px; /* ВЫХОД ЗА КРАЙ: Регулируйте это значение, чтобы поднять или опустить ленту (поднял еще на 35px) */
  left: 50%;
  transform: translateX(calc(-50%)); /* СМЕЩЕНИЕ ВПРАВО: */
  width: min(980px, 100vw); /* ШИРИНА ЛЕНТЫ: Измените это значение, чтобы сделать ленту шире или уже (увеличил еще на 40%) */
  height: auto;
  z-index: 11; /* Чтобы лента была поверх красного блока */
  pointer-events: none;
}

.wedding-date-content {
  display: flex;
  flex-direction: column; /* Текст даты и времени друг под другом */
  align-items: center;
  justify-content: center;
  gap: 10px; /* ИНТЕРВАЛ: Расстояние между датой и временем */
}

.wedding-date-text {
  font-family: "Marck Script", cursive;
  font-size: clamp(2.8rem, 9vw, 5.5rem); /* РАЗМЕР ШРИФТА: Адаптивный размер текста даты (немного увеличил для этого шрифта) */
  color: #ffffff;
  margin: 0;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.02em;
}

.wedding-time-text {
  font-family: "Marck Script", cursive;
  font-size: clamp(1.6rem, 5.5vw, 3.2rem); /* РАЗМЕР ШРИФТА: Адаптивный размер текста времени (немного увеличил) */
  color: rgba(255, 255, 255, 0.9); /* Чуть прозрачнее для иерархии */
  margin: 0;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Секция места проведения */
.location__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Обертка для изображения места */
.location-image-wrapper {
  width: min(720px, 90vw); /* РАЗМЕР ИЗОБРАЖЕНИЯ: Ширина картинки места (увеличено на 60% с 450px до 720px) */
  margin: 20px 0 24px;
}

.location-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
  animation: img-float 5.5s ease-in-out infinite; /* ЛЕГКАЯ АНИМАЦИЯ: парение */
}

/* Секция дресс-кода */
.dresscode__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Обертка для изображения дресс-кода */
.dress-image-wrapper {
  width: min(630px, 90vw); /* РАЗМЕР ИЗОБРАЖЕНИЯ: (увеличено еще на 20% с 525px до 630px) */
  margin: 20px 0 24px;
}

.dress-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
  animation: img-float 5s ease-in-out infinite; /* ЛЕГКАЯ АНИМАЦИЯ: парение */
}

/* Стили для секции подарков */
.gifts__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Обертка для изображения чашки */
.gifts-image-wrapper {
  width: min(504px, 85vw); /* РАЗМЕР ИЗОБРАЖЕНИЯ: (увеличено еще на 20% с 420px до 504px) */
  margin: 20px 0 24px;
}

.gifts-cup-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
  animation: img-float 6s ease-in-out infinite; /* ЛЕГКАЯ АНИМАЦИЯ: парение */
}

/* RSVP */
.rsvp__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rsvp-form {
  margin-top: 24px;
  width: min(520px, 100%);
  background: var(--card);
  border: 1px solid rgba(176, 24, 40, 0.12);
  padding: 28px 22px 24px;
  box-shadow: 0 8px 28px rgba(28, 20, 20, 0.04);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.rsvp-form:focus-within {
  border-color: rgba(176, 24, 40, 0.22);
  box-shadow: 0 12px 36px rgba(176, 24, 40, 0.08);
}

.rsvp-form__field {
  margin: 0 0 24px; /* ИНТЕРВАЛ: Отступ между блоками формы */
  padding: 0;
  border: 0;
}

.rsvp-form__group {
  margin-bottom: 24px; /* ИНТЕРВАЛ: Отступ для текстовых полей */
  text-align: left;
}

.rsvp-form__input {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid rgba(74, 58, 58, 0.2);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  transition: border-color 0.2s ease;
}

.rsvp-form__input:focus {
  outline: none;
  border-color: var(--accent);
}

.rsvp-form__submit {
  width: 100%;
  padding: 16px;
  background-color: var(--accent); /* ЦВЕТ КНОПКИ: Красный акцентный цвет */
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rsvp-form__submit:hover {
  background-color: #8a1420;
  transform: translateY(-2px);
}

.rsvp-form__submit:active {
  transform: translateY(0);
}

.rsvp-form__status {
  margin-top: 15px;
  font-size: 0.95rem;
  text-align: center;
  min-height: 1.2em;
}

.rsvp-form__status.success {
  color: #2e7d32; /* Цвет успеха */
}

.rsvp-form__status.error {
  color: #c62828; /* Цвет ошибки */
}

.rsvp-form__legend {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.2rem, 2.8vw, 1.4rem);
  padding: 0;
  margin-bottom: 14px;
  color: var(--text);
}

.rsvp-form__radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rsvp-form__radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(1rem, 2.2vw, 1.08rem);
  color: var(--muted);
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.2s ease, transform 0.2s var(--ease-out);
}

.rsvp-form__radio:hover {
  color: var(--text);
  transform: translateX(4px);
}

.rsvp-form__radio input {
  margin-top: 3px;
  accent-color: var(--accent);
}

.rsvp-form__label {
  display: block;
  margin-top: 22px;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  font-weight: 500;
  color: var(--text);
}

.rsvp-form__textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid rgba(74, 58, 58, 0.2);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  resize: vertical;
  min-height: 96px;
}

.rsvp-form__textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Секция контактов */
.contacts__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 96px;
}

.contacts__list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contacts__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid rgba(176, 24, 40, 0.1);
  transition:
    transform 0.3s var(--ease-out),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.contacts__item:hover {
  transform: translateY(-4px);
  border-color: rgba(176, 24, 40, 0.2);
  box-shadow: 0 10px 28px rgba(40, 18, 22, 0.08);
}

.contacts__name {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.35rem, 3.2vw, 1.65rem);
  font-weight: 600;
}

.contacts__phone {
  font-size: clamp(1rem, 2.3vw, 1.12rem);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.contacts__phone:hover {
  text-decoration: underline;
  color: #8a1420;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 640px) {
  .section {
    padding: 24px 20px; /* УМЕНЬШИЛИ В 2 РАЗА (было 48px) */
  }

  .title {
    font-size: clamp(1.8rem, 8vw, 2.2rem); /* УМЕНЬШАЕМ ЗАГОЛОВКИ НА МОБИЛЬНЫХ */
  }

  /* Интерактивный конверт на мобильных */
  .hero__inner {
    min-height: auto; /* Убираем минимальную высоту на мобильных */
    padding-top: 40px;
  }

  .invitation__inner {
    min-height: auto; /* Убираем минимальную высоту для контейнера конверта */
  }

  .invitation .container {
    margin-top: 0px; /* Полностью убираем верхний отступ на мобильных */
  }

  /* КРОЛИК И ЛИНИЯ НА МОБИЛЬНЫХ:
     Возвращаем сложный маршрут "по всему экрану", адаптированный для узких дисплеев.
     Кролик снова совершает широкие маневры от края до края. */
  .global-line path {
    d: path("M 100 0 C 1300 400, 100 800, 1300 1200 S 100 1600, 1300 2000 S 100 2400, 1300 2800 S 100 3200, 1300 3600 S 720 4000");
    stroke-width: 2;
    opacity: 0.35;
  }

  .envelope-hint {
    font-size: 1.2rem; /* РАЗМЕР: Шрифт подсказки на мобильных */
    margin-bottom: 8px;
  }

  .envelope-wrapper {
    width: 65%; /* УВЕЛИЧИВАЕМ ШИРИНУ КОНВЕРТА НА МОБИЛЬНЫХ ДЛЯ ЛУЧШЕГО ВИДА */
  }

  .envelope-layers {
    margin-top: 30px; 
  }

  .envelope-layers .layer.letter {
    padding: 15px; 
  }

  .letter-text {
    font-size: 0.8rem; /* РАЗМЕР ТЕКСТА: Шрифт внутри приглашения на телефоне */
    line-height: 1.3;
  }

  /* Блок с датой на мобильных */
  .wedding-date-block {
    margin-top: 150px; /* УВЕЛИЧИЛИ ОТСТУП СВЕРХУ НА МОБИЛЬНЫХ (было 60px) */
    padding: 60px 15px;
  }

  .wedding-date-band {
    top: -90px; /* УМЕНЬШАЕМ СМЕЩЕНИЕ ЛЕНТЫ НА МОБИЛЬНЫХ (поднял пропорционально) */
  }

  .wedding-date-content {
    gap: 5px; 
  }

  .wedding-date-text {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
  }

  .wedding-time-text {
    font-size: clamp(1.2rem, 4vw, 1.8rem);
  }

  /* Место на мобильных */
  .location-image-wrapper {
    width: 95%; /* РАЗМЕР ИЗОБРАЖЕНИЯ МЕСТА НА МОБИЛЬНЫХ (увеличено для соответствия) */
    margin: 15px 0 20px;
  }

  /* Дресс-код на мобильных */
  .dress-image-wrapper {
    width: 95%; /* РАЗМЕР ИЗОБРАЖЕНИЯ ДРЕСС-КОДА НА МОБИЛЬНЫХ */
    margin: 15px 0 20px;
  }

  /* Подарки на мобильных */
  .gifts-image-wrapper {
    width: 85%; /* РАЗМЕР ИЗОБРАЖЕНИЯ ПОДАРКОВ НА МОБИЛЬНЫХ */
    margin: 15px 0 20px;
  }

  /* Форма RSVP на мобильных */
  .rsvp-form {
    padding: 24px 16px;
    margin-top: 16px;
  }

  .rsvp-form__group, 
  .rsvp-form__field {
    margin-bottom: 16px;
  }

  /* Контакты на мобильных */
  .contacts__item {
    flex-direction: column;
    align-items: center; /* ЦЕНТРИРУЕМ КОНТАКТЫ НА МОБИЛЬНЫХ */
    text-align: center;
    padding: 15px;
  }
}

/* Отключение анимаций при соответствующих настройках ОС */
@media (prefers-reduced-motion: reduce) {
  .global-line path,
  .dress-img,
  .gifts-cup-img {
    animation: none;
  }

  .rabbit-follower {
    animation: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.14));
  }

  .hero__anim {
    animation: none;
    opacity: 1;
    transform: none;
  }

  main > section:not(.hero) {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .contacts__item:hover,
  .rsvp-form__radio:hover {
    transform: none;
  }
}