/* === Общие сбросы === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #3b3b3b;
  overflow-x: hidden;

  /* Анимированный градиент «свадебная магия» */
  background: linear-gradient(-45deg, #ffe6f0, #ffd1e6, #ffc1e3, #ffb3d9);
  background-size: 400% 400%;
  animation: gradientMove 20s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Overlay для читаемости */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.15);
  z-index: -1;
}

/* === Секции === */
.section {
  min-height: 100vh;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Анимация fade */
.fade {
  opacity: 0;
  transform: translateY(40px);
  transition: 1s ease, opacity 1s ease;
}
.fade.show {
  opacity: 1;
  transform: translateY(0);
}

/* Тексты */
.big { font-size: clamp(24px, 5vw, 42px); font-weight: 500; }
.script { font-family: 'Playfair Display', serif; font-size: clamp(32px,6vw,48px); font-style: italic; }
.text { font-size: 16px; line-height: 1.7; max-width: 360px; margin: 0 auto; word-break: break-word; }
.date { font-size: 50px; letter-spacing: 4px; font-family: 'Playfair Display', serif; }

/* Карточки */
.card, .place-card {
  background: rgba(255,255,255,0.96);
  color: #3b3b3b;
  border-radius: 26px;
  padding: 30px 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

/* Место */
.place-card { overflow: hidden; max-width: 360px; width: 100%; }

/* Карусель */
.place-carousel { width: 100%; height: 240px; overflow: hidden; position: relative; }
.place-track { display: flex; height: 100%; transition: transform 0.4s ease; }
.place-track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }

/* Кнопка карты */
.map-btn { display: inline-block; margin-top: 14px; padding: 12px 26px; background: #a58b63; color: #fff; border-radius: 30px; text-decoration: none; font-size: 14px; transition: 0.3s; }
.map-btn:hover { background: #96754f; }

/* Музыка */
.music-btn { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: white; color: #333; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s; }
.music-btn:active { transform: scale(0.95); }

/* Календарь */
.calendar { max-width: 100%; width: 100%; padding: 0 10px; box-sizing: border-box; }
.calendar-header { text-align: center; margin-bottom: 14px; }
.month { font-family: 'Playfair Display', serif; font-size: clamp(20px,5vw,26px); }
.year { font-size: clamp(12px,3vw,14px); letter-spacing:2px; opacity:0.6; }
.calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap:6px; margin-top:12px; }
.day-name { font-size: clamp(10px,3vw,12px); opacity:0.6; }
.day { font-size: clamp(12px,3vw,14px); padding: clamp(6px,2vw,8px) 0; border-radius:10px; text-align:center; }
.day.empty { visibility:hidden; }
.day.heart { position:relative; background:#f3c1cc; color:#3b3b3b; font-weight:600; }
.day.heart span { position:absolute; bottom:-10px; right:-6px; font-size:14px; color:#c35a7a; }
.calendar-note { margin-top:14px; font-size: clamp(12px,3vw,14px); }

/* === Главная секция с фото === */
.main-section { flex-direction: column; gap: 20px; }
.photo-grid { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.main-photo {
  width: clamp(150px,25vw,300px);
  height: clamp(150px,25vw,300px);
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  opacity: 0.7;
  transition: transform 0.3s ease, opacity 1.5s ease;
}
.main-photo.fade.show { opacity: 1; }
.main-photo:hover { transform: scale(1.05); }
.main-script {
  font-size: clamp(36px,7vw,56px);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  margin-top: 16px;
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #ffd1e6, 0 0 30px #ffc1e3;
  animation: glow 2.5s ease-in-out infinite alternate;
}

/* Эффект свечения */
@keyframes glow {
  0% { text-shadow: 0 0 10px #fff, 0 0 20px #ffd1e6, 0 0 30px #ffc1e3; }
  50% { text-shadow: 0 0 20px #fff, 0 0 30px #ffd1e6, 0 0 40px #ffc1e3; }
  100% { text-shadow: 0 0 10px #fff, 0 0 20px #ffd1e6, 0 0 30px #ffc1e3; }
}