:root{
  --brown-900:#3e2c23;
  --brown-700:#5a4032;
  --brown-500:#8b6f5c;
  --beige-300:#e9ddc9;
  --beige-100:#f8f3e9;
  --gold:#caa84a;
  --gold-light:#e3c980;
  --white:#fffdf8;
  --font-display:'Cormorant Garamond', serif;
  --font-body:'Montserrat', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  scroll-snap-type:y mandatory;
  overflow-y:scroll;
  height:100%;
  font-family:var(--font-body);
  color:var(--brown-700);
  background:var(--beige-100);
}

.scroll-container{
  height:100vh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
}

.page{
  min-height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  scroll-snap-align:start;
  position:relative;
  padding:60px 24px;
  text-align:center;
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1s ease, transform 1s ease;
}

.page.visible{
  opacity:1;
  transform:translateY(0);
}

/* HERO */
.hero{
  min-height:100vh;
  padding:0;
  overflow:hidden;
  justify-content:flex-start;
  align-items:center;
  background:#000;
}

/* Основное фото */
.hero-bg,
.hero-blur{
  position:absolute;
  inset:0;
  background-image:url("../assets/couple2.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

/* На телефоне показываем только чистое фото */
.hero-bg{
  z-index:1;
}

.hero-blur{
  display:none;
  z-index:0;
}

/* Затемнение для читаемости текста */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(
    180deg,
    rgba(20, 12, 8, 0.28) 0%,
    rgba(20, 12, 8, 0.18) 30%,
    rgba(20, 12, 8, 0.10) 55%,
    rgba(20, 12, 8, 0.22) 100%
  );
}

/* Контент в верхней половине */
.hero-content{
  position:relative;
  z-index:3;
  width:min(100%, 900px);
  padding:
    clamp(72px, 10vh, 120px)
    24px
    24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:50vh;
  text-align:center;
}

.hero-divider{
  width:120px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  margin:24px auto 14px;
}

.names{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(3rem, 9vw, 5.4rem);
  line-height:0.95;
  color:var(--white);
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  text-shadow:0 4px 18px rgba(0,0,0,0.28);
}

.names .amp{
  color:rgba(255,255,255,0.88);
  font-size:0.72em;
  font-family:'Playfair Display', serif;
}

.hero-date{
  margin-top:14px;
  font-size:1.1rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.92);
  text-shadow:0 2px 10px rgba(0,0,0,0.22);
}

.hero-note{
  font-family:var(--font-display);
  font-size:1.35rem;
  color:rgba(255,255,255,0.92);
  font-style:italic;
  text-shadow:0 2px 10px rgba(0,0,0,0.22);
}

.scroll-hint{
  position:absolute;
  z-index:3;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  font-size:0.75rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.82);
  opacity:0.95;
  animation:bounce 2s infinite;
}

@keyframes bounce{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(8px);}
}

/* TEXT PAGE */
.text-page{background:var(--white);}
.frame{
  max-width:600px;
}
.lead{
  font-family:var(--font-display);
  font-size:2.8rem;
  line-height:1.2;
  color:var(--brown-900);
  margin-bottom:24px;
}
.text-page p:not(.lead){
  font-size:1.2rem;
  line-height:1.9;
  margin-bottom:16px;
  color:var(--brown-700);
}
.divider{
  width:80px;
  height:2px;
  background:var(--gold);
  margin:32px auto;
}
.schedule{
  display:flex;
  gap:48px;
  justify-content:center;
  flex-wrap:wrap;
}
.schedule-item{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.schedule-item .time{
  font-family:var(--font-display);
  font-size:5rem;
  color:var(--gold);
  font-weight:600;
}
.schedule-item .label{
  font-size:0.85rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--brown-500);
  margin-top:4px;
}

/* SECTION TITLE */
.section-title{
  font-family:var(--font-display);
  font-size:2.8rem;
  color:var(--brown-900);
  margin-bottom:32px;
  position:relative;
}
.section-title::after{
  content:'';
  display:block;
  width:60px;
  height:2px;
  background:var(--gold);
  margin:12px auto 0;
}

/* CALENDAR */
.calendar-page{background:var(--beige-100);}
.calendar-widget{
  background:var(--white);
  border-radius:24px;
  padding:32px;
  box-shadow:0 10px 40px rgba(139,111,92,0.15);
  max-width:380px;
  width:100%;
}
.cal-header{
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--brown-900);
  margin-bottom:16px;
  font-weight:600;
}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}
.cal-day-name{
  font-size:0.7rem;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:600;
  padding:6px 0;
}
.cal-day{
  font-size:0.9rem;
  color:var(--brown-700);
  padding:10px 0;
  border-radius:50%;
  position:relative;
}
.cal-day.empty{visibility:hidden;}
.cal-day.highlight{
  background:var(--gold-light);
  color:var(--brown-900);
  font-weight:700;
}
.cal-day.highlight::after{
  content:'♥';
  color:#b3392c;
  font-size:0.8rem;
  position:absolute;
  top:-6px;
  right:2px;
}

.countdown-label{
  margin-top:40px;
  font-size:0.9rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--brown-500);
}
.countdown{
  display:flex;
  gap:24px;
  margin-top:16px;
}
.countdown-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:60px;
}
.countdown-item span{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--brown-900);
  font-weight:600;
}
.countdown-item small{
  font-size:0.7rem;
  text-transform:uppercase;
  color:var(--brown-500);
  letter-spacing:1px;
}

/* PLACE */
.place-page{background:var(--white);}
.venue-name{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--brown-900);
  margin-bottom:6px;
}
.venue-address{
  color:var(--brown-500);
  margin-bottom:24px;
}
#wedding-map{
  width:100%;
  max-width:600px;
  height:380px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(139,111,92,0.2);
  background:var(--beige-300);
}

/* RSVP */
.rsvp-page{background:var(--beige-100);}
.rsvp-text{
  max-width:620px;
  margin-bottom:32px;
  color:var(--brown-700);
  line-height:1.85;
  font-size:1.15rem;
}
.rsvp-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:380px;
  width:100%;
  background:var(--white);
  padding:32px;
  border-radius:20px;
  box-shadow:0 10px 40px rgba(139,111,92,0.15);
}
.rsvp-form label{
  text-align:left;
  font-size:0.85rem;
  color:var(--brown-500);
  letter-spacing:0.5px;
}
.rsvp-form input[type="text"]{
  padding:12px 16px;
  border:1px solid var(--beige-300);
  border-radius:10px;
  font-family:var(--font-body);
  font-size:1rem;
  background:var(--beige-100);
  color:var(--brown-900);
}
.rsvp-form input[type="text"]:focus{
  outline:none;
  border-color:var(--gold);
}
.radio-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
}
.radio-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.95rem;
  color:var(--brown-700);
}
.rsvp-form button{
  margin-top:8px;
  padding:14px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:var(--white);
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.rsvp-form button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(202,168,74,0.4);
}
.rsvp-success{
  display:none;
  margin-top:20px;
  color:var(--brown-900);
  font-weight:600;
}
.rsvp-success.show{display:block;}
.footer{
  margin-top:60px;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--brown-500);
  font-size:1.1rem;
}

/* PROGRESS DOTS */
.progress-dots{
  position:fixed;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:100;
}
.dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--beige-300);
  cursor:pointer;
  transition:background 0.3s ease, transform 0.3s ease;
}
.dot.active{
  background:var(--gold);
  transform:scale(1.4);
}

.frame.narrow{
  max-width:720px;
}

.wishes-page{
  background:var(--white);
}

.colors-page{
  background:var(--beige-100);
}

.wishes-page p,
.colors-page p{
  font-size:1.15rem;
  line-height:1.9;
  margin-bottom:16px;
  color:var(--brown-700);
}

.palette{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:28px;
}

.palette-item{
  width:64px;
  height:64px;
  border-radius:50%;
  border:1px solid rgba(139,111,92,0.12);
  box-shadow:0 6px 18px rgba(139,111,92,0.10);
}

.tone-1  { background:#d7d1c7; } /* серый */
.tone-2  { background:#ddd1bb; } /* светлый песочный */
.tone-3  { background:#efd3b8; } /* светло-оранжевый */
.tone-4  { background:#e6e4b8; } /* жёлтый пастельный */
.tone-5  { background:#f1e3a8; } /* более тёплый жёлтый */
.tone-6  { background:#fad6df; } /* светлый розовый */
.tone-7  { background:#e5c5cf; } /* розовый */
.tone-8  { background:#d6c7da; } /* сиреневый */
.tone-9  { background:#cdd9e6; } /* голубой */
.tone-10 { background:#dbe3d7; } /* светлый зелёный */
.tone-11 { background:#cfd7b8; } /* зелёный шалфейный */
.tone-12 { background:#c6a183; } /* акцентный оттенок */
@media (max-width:600px){
  .page{
    padding:28px 18px 36px;
  }

  .hero{
  padding-top:0;
  }

  .hero-content{
    min-height:48vh;
    padding:68px 18px 18px;
  }

  .calendar-page,
  .place-page,
  .colors-page,
  .rsvp-page{
    padding-top:18px;
    padding-bottom:28px;
  }

  .hero > *:not(.scroll-hint){
  transform:translateY(-14px);
  }
  .calendar-page > *,
  .place-page > *,
  .colors-page > *,
  .rsvp-page > *{
    transform:translateY(-14px);
  }

  .progress-dots{
    right:10px;
  }

  .hero-photo{
    width:170px;
    height:170px;
    margin-bottom:10px;
  }

  .names{
    font-size:clamp(2.2rem, 10vw, 3.4rem);
    gap:10px;
    line-height:0.98;
  }

  .hero-date{
    font-size:0.92rem;
    letter-spacing:2px;
    margin-top:10px;
  }

  .hero-note{
    font-size:1.08rem;
  }

  .hero-divider{
    margin:18px auto 12px;
    width:88px;
  }

  .lead{
    font-size:2.1rem;
    line-height:1.2;
    margin-bottom:18px;
  }

  .section-title{
    font-size:2rem;
    margin-bottom:24px;
  }

  .text-page{
    padding-top:24px;
  }

  .text-page p:not(.lead){
    font-size:0.98rem;
    line-height:1.65;
    margin-bottom:12px;
  }

  .frame{
    max-width:100%;
  }

  .wishes-page p,
  .colors-page p,
  .rsvp-text{
    font-size:1rem;
    line-height:1.7;
    margin-bottom:14px;
  }

  .schedule{
    gap:24px;
  }

  .schedule-item .time{
    font-size:2.5rem;
  }

  .schedule-item .label{
    font-size:0.75rem;
  }

  .calendar-widget{
    padding:22px 18px;
    max-width:100%;
  }

  .countdown{
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .countdown-item{
    min-width:46px;
  }

  .countdown-item span{
    font-size:1.35rem;
  }

  .venue-name{
    font-size:1.5rem;
  }

  .venue-address{
    font-size:0.95rem;
  }

  #wedding-map{
    height:280px;
  }

  .rsvp-form{
    padding:22px 18px;
  }

  .rsvp-form label{
    font-size:0.8rem;
  }

  .rsvp-form input[type="text"]{
    font-size:0.95rem;
    padding:11px 14px;
  }

  .radio-label{
    font-size:0.9rem;
  }

  .rsvp-form button{
    padding:12px;
    font-size:0.9rem;
  }

  .footer{
    margin-top:40px;
    font-size:1rem;
  }

  .palette-item{
    width:44px;
    height:44px;
  }

  .palette{
    gap:10px;
    margin-top:22px;
  }

  .scroll-hint{
    bottom:120px;
    font-size:0.7rem;
    letter-spacing:1.5px;
  }
}
@media (min-width: 901px){
  .hero{
    background:#926D6B;
  }

  .hero-bg{
    inset:0;
    background-size:contain;
    background-position:center center;
    background-color:#926D6B;
  }

  .hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(15,10,8,0.30) 0%,
        rgba(15,10,8,0.12) 35%,
        rgba(15,10,8,0.10) 65%,
        rgba(15,10,8,0.22) 100%
      );
  }

  .hero-content{
    min-height:52vh;
    padding-top:clamp(72px, 9vh, 110px);
  }
}

.preloader{
  position:fixed;
  inset:0;
  background:#f8f3e9;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:1;
  visibility:visible;
  transition:opacity 0.8s ease, visibility 0.8s ease;
}

.preloader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.preloader-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}

.preloader-monogram{
  font-family:'Playfair Display', serif;
  font-size:2.8rem;
  color:#926D6B;
  letter-spacing:2px;
}

.preloader-line{
  width:72px;
  height:1px;
  background:linear-gradient(90deg, transparent, #caa84a, transparent);
  animation:preloaderPulse 1.4s ease-in-out infinite;
}

.preloader-text{
  font-family:'Playfair Display', sans-serif;
  font-size:0.72rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#8b6f5c;
  opacity:0.85;
}

@keyframes preloaderPulse{
  0%{transform:scaleX(0.65); opacity:0.45;}
  50%{transform:scaleX(1); opacity:1;}
  100%{transform:scaleX(0.65); opacity:0.45;}
}