/* ============================================================
   Әділет & Айгерим — Wedding invitation (Botanical theme)
   Design tokens
   ============================================================ */
:root {
  /* palette */
  --c-bg:        #f6f2ea;   /* cream */
  --c-bg-alt:    #efe9dd;   /* warm sand */
  --c-paper:     #fffdf8;   /* near-white card */
  --c-ink:       #4a4940;   /* main text */
  --c-ink-soft:  #6f6c61;   /* secondary text */
  --c-sage:      #8c9a7d;   /* eucalyptus accent */
  --c-sage-deep: #6c7a5e;   /* deep green */
  --c-muted:     #a79f8e;   /* labels */
  --c-line:      #d9d2c4;   /* hairlines */

  /* type */
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body:    'Forum', 'Cormorant Garamond', Georgia, serif;
  --f-script:  'Marck Script', cursive;

  /* metrics */
  --maxw: 480px;
  --pad: 28px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.6;
  max-width: var(--maxw);
  margin: 0 auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

section, header, footer { padding: 64px var(--pad); position: relative; }

/* shared script heading */
.section-script {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 2rem;
  color: var(--c-sage-deep);
  text-align: center;
  margin-bottom: 36px;
  letter-spacing: .5px;
}

.divider {
  width: 200px;
  margin: 22px auto;
  mix-blend-mode: multiply;
  opacity: .92;
}

/* ============ reveal-on-scroll ============ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============ HERO ============ */
.hero {
  padding: 0 0 56px;
  text-align: center;
  overflow: hidden;
}
.hero__photo {
  width: 100%;
  position: relative;
}
.hero__photo img {
  width: 100%;
  display: block;
}
.hero__photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 32%;
  background: linear-gradient(180deg, rgba(246,242,234,0) 0%, var(--c-bg) 96%);
  pointer-events: none;
}
.hero__overlay {
  padding: 18px var(--pad) 0;
  margin-top: -28px;
  position: relative; z-index: 1;
}
.hero__eyebrow {
  font-family: var(--f-body);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: .72rem;
  color: var(--c-ink-soft);
  margin-bottom: 20px;
}
.hero__names {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 3.5rem;
  line-height: 1.05;
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__amp { color: var(--c-sage); font-style: italic; font-size: 2.4rem; }
.hero__date {
  margin-top: 24px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-display);
  font-size: 1.5rem;
  letter-spacing: 4px;
  color: var(--c-sage-deep);
}
.hero__date i { color: var(--c-sage); font-style: normal; }
.hero__scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 46px; background: var(--c-sage);
  opacity: .5; overflow: hidden;
}
.hero__scroll span {
  position: absolute; top: -50%; left: -1px; width: 3px; height: 50%;
  background: var(--c-sage-deep);
  animation: scrolldot 1.8s ease-in-out infinite;
}
@keyframes scrolldot { 0%{top:-50%} 60%,100%{top:100%} }

/* ============ MUSIC ============ */
.music { text-align: center; background: var(--c-bg-alt); padding-top: 48px; padding-bottom: 48px; }
.music__hint {
  text-transform: uppercase; letter-spacing: 2px; font-size: .76rem;
  color: var(--c-ink-soft); margin-bottom: 22px;
}
.music__btn {
  width: 66px; height: 66px; border-radius: 50%;
  border: 1px solid var(--c-sage);
  background: var(--c-paper);
  color: var(--c-sage-deep);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .25s, box-shadow .25s;
  box-shadow: 0 6px 20px rgba(108,122,94,.18);
}
.music__btn:active { transform: scale(.94); }
.music__btn svg { fill: currentColor; }
.music__btn .ic-pause { display: none; }
.music__btn.playing .ic-play { display: none; }
.music__btn.playing .ic-pause { display: block; }
.music__bars {
  height: 22px; margin-top: 18px;
  display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  opacity: .35; transition: opacity .3s;
}
.music__bars.active { opacity: 1; }
.music__bars span {
  width: 3px; height: 6px; background: var(--c-sage-deep); border-radius: 2px;
}
.music__bars.active span { animation: eq 1s ease-in-out infinite; }
.music__bars.active span:nth-child(2){ animation-delay:.2s }
.music__bars.active span:nth-child(3){ animation-delay:.4s }
.music__bars.active span:nth-child(4){ animation-delay:.1s }
.music__bars.active span:nth-child(5){ animation-delay:.3s }
@keyframes eq { 0%,100%{height:6px} 50%{height:20px} }

/* ============ INVITE / MONOGRAM ============ */
.invite { text-align: center; }
.monogram { position: relative; width: 230px; margin: 0 auto 8px; }
.monogram__wreath { width: 100%; mix-blend-mode: multiply; }
.monogram__letters {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--f-display); font-weight: 500;
  font-size: 3rem; color: var(--c-ink);
}
.monogram__letters span { color: var(--c-sage); font-style: italic; font-size: 1.6rem; }
.invite__couple {
  font-family: var(--f-display); font-weight: 500;
  font-size: 1.9rem; letter-spacing: 2px; color: var(--c-ink);
  margin-bottom: 4px;
}
.invite__text {
  font-size: 1.12rem; color: var(--c-ink-soft);
  max-width: 360px; margin: 0 auto 16px;
}
.invite__text b { color: var(--c-sage-deep); font-weight: 500; }

/* ============ DATE + CALENDAR ============ */
.date { text-align: center; background: var(--c-bg-alt); }
.date__big {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--f-display); font-weight: 300;
  font-size: 4.6rem; line-height: 1.02; color: var(--c-sage-deep);
}
.date__weekday {
  font-family: var(--f-script); font-size: 1.5rem;
  color: var(--c-sage); margin: 6px 0 30px;
}
.calendar {
  max-width: 320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  font-family: var(--f-display); font-size: 1.05rem;
}
.calendar .cal-head {
  text-transform: uppercase; font-family: var(--f-body);
  font-size: .68rem; letter-spacing: .5px; color: var(--c-muted);
  padding-bottom: 6px;
}
.calendar .cal-day { padding: 8px 0; color: var(--c-ink); position: relative; }
.calendar .cal-day.empty { visibility: hidden; }
.calendar .cal-day.target { color: var(--c-paper); font-weight: 600; }
.calendar .cal-day.target::before {
  content: ""; position: absolute; inset: 2px;
  background: var(--c-sage-deep); border-radius: 50%; z-index: -1;
}

/* ============ PROGRAM ============ */
.program { text-align: center; }
.program__item { margin-bottom: 44px; }
.program__item:last-child { margin-bottom: 0; }
.program__img {
  width: 168px; height: 168px; margin: 0 auto 18px;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 10px 30px rgba(108,122,94,.18);
  border: 4px solid var(--c-paper);
}
.program__img img { width: 100%; height: 100%; object-fit: cover; }
.program__time {
  font-family: var(--f-display); font-size: 1.8rem;
  color: var(--c-sage-deep); font-weight: 500;
}
.program__desc { color: var(--c-ink-soft); font-size: 1.05rem; }

/* ============ LOCATION ============ */
.location { text-align: center; background: var(--c-bg-alt); }
.location__photo {
  border-radius: 14px; overflow: hidden; margin-bottom: 22px;
  box-shadow: 0 12px 34px rgba(108,122,94,.2);
}
.location__photo img { width: 100%; height: 260px; object-fit: cover; }
.location__venue {
  font-family: var(--f-display); font-size: 1.7rem; font-weight: 500;
  color: var(--c-ink); letter-spacing: 1px;
}
.location__addr { color: var(--c-ink-soft); font-size: 1.05rem; margin: 6px 0 22px; }
.btn-2gis {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-sage-deep); color: var(--c-paper);
  text-decoration: none; padding: 13px 26px; border-radius: 40px;
  font-size: .92rem; letter-spacing: .5px;
  box-shadow: 0 8px 22px rgba(108,122,94,.32);
  transition: transform .2s, box-shadow .2s;
}
.btn-2gis svg { fill: currentColor; }
.btn-2gis:active { transform: scale(.96); }

/* ============ COUNTDOWN ============ */
.countdown { text-align: center; }
.countdown__grid {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.countdown__grid div {
  display: flex; flex-direction: column; align-items: center;
  min-width: 58px;
}
.countdown__grid b {
  font-family: var(--f-display); font-weight: 400;
  font-size: 2.8rem; color: var(--c-sage-deep); line-height: 1;
}
.countdown__grid span {
  text-transform: uppercase; font-size: .64rem; letter-spacing: 1px;
  color: var(--c-muted); margin-top: 6px;
}
.countdown__grid i {
  font-family: var(--f-display); font-size: 2rem; color: var(--c-line);
  font-style: normal; align-self: flex-start; margin-top: 4px;
}

/* ============ RSVP ============ */
.rsvp { text-align: center; background: var(--c-bg-alt); }
.rsvp__title {
  font-family: var(--f-display); font-weight: 500; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: 1px; line-height: 1.4;
  color: var(--c-ink); margin-bottom: 30px;
}
.rsvp__form { max-width: 360px; margin: 0 auto; text-align: left; }
.rsvp__label {
  display: block; font-size: .78rem; text-transform: uppercase;
  letter-spacing: 1px; color: var(--c-muted); margin-bottom: 8px;
}
.rsvp__form input[type="text"] {
  width: 100%; padding: 14px 16px; font-family: var(--f-body);
  font-size: 1rem; color: var(--c-ink);
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: 10px; margin-bottom: 22px; outline: none;
  transition: border-color .2s;
}
.rsvp__form input[type="text"]:focus { border-color: var(--c-sage); }
.rsvp__options { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.rsvp__options label {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.05rem; color: var(--c-ink-soft); cursor: pointer;
}
.rsvp__options input { position: absolute; opacity: 0; }
.rsvp__options span {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--c-sage); flex: 0 0 auto; position: relative;
  transition: border-color .2s;
}
.rsvp__options input:checked + span { border-color: var(--c-sage-deep); }
.rsvp__options input:checked + span::after {
  content: ""; position: absolute; inset: 4px;
  background: var(--c-sage-deep); border-radius: 50%;
}
.rsvp__submit {
  width: 100%; padding: 15px; border: none; border-radius: 40px;
  background: var(--c-sage-deep); color: var(--c-paper);
  font-family: var(--f-body); font-size: 1rem; letter-spacing: 2px;
  text-transform: lowercase; cursor: pointer;
  box-shadow: 0 8px 22px rgba(108,122,94,.32);
  transition: transform .2s, opacity .2s;
}
.rsvp__submit:active { transform: scale(.97); }
.rsvp__done {
  display: none; text-align: center; margin-top: 20px;
  font-family: var(--f-display); font-size: 1.25rem; color: var(--c-sage-deep);
}
.rsvp__form.sent .rsvp__done { display: block; }
.rsvp__form.sent input, .rsvp__form.sent .rsvp__options, .rsvp__form.sent .rsvp__submit { display: none; }

/* ============ FOOTER ============ */
.footer { text-align: center; padding-bottom: 80px; }
.footer__host {
  font-family: var(--f-display); font-size: 2.2rem; font-weight: 500;
  color: var(--c-sage-deep); margin-bottom: 40px;
}
.footer__monogram {
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 4px;
  color: var(--c-sage);
}
.footer__date {
  font-family: var(--f-body); letter-spacing: 3px; font-size: .9rem;
  color: var(--c-muted); margin-top: 8px;
}

/* tiny screens */
@media (max-width: 360px) {
  .hero__names { font-size: 2.9rem; }
  :root { --pad: 20px; }
}