:root{
  --cream:#efe7dd;
  --paper:#fffdf9;
  --blue:#1d56a4;
  --blue-deep:#153f7a;
  --card:#e2e9f0;
  --card-sel:#d3e3fb;
  --yellow:#ffde59;
  --yellow-soft:#fcdf96;
  --tan:#e6d9bf;
  --shadow:0 10px 30px rgba(21,63,122,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--cream);
  color:var(--blue);
  font-family:"Cormorant Garamond",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

/* ---------- Scroll deck ---------- */
.deck{
  height:100vh;height:100dvh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.slide{
  position:relative;
  height:100vh;height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* размытая «подложка» из той же картинки, чтобы заполнить поля по краям */
.slide::before{
  content:"";position:absolute;inset:-4%;
  background:var(--img) center/cover no-repeat;
  filter:blur(26px) saturate(1.05);
  transform:scale(1.12);
  z-index:0;
}
.slide::after{
  content:"";position:absolute;inset:0;
  background:rgba(239,231,221,.30);
  z-index:0;
}

/* карточка-экран строго 9:16, без обрезки */
.frame{
  position:relative;z-index:1;
  aspect-ratio:9/16;
  height:min(100dvh, calc(100vw * 16 / 9));
  box-shadow:0 18px 50px rgba(21,63,122,.16);
  overflow:hidden;
}
.frame img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Параллакс-фон слайда ---------- */
.bg-parallax{
  position:absolute;left:50%;top:50%;
  width:114%;height:114%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  will-change:transform;
}

/* ---------- Текст поверх фона (HTML, шрифт Italianno) ---------- */
.text-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.tx-pos{
  position:absolute;left:50%;top:0;
  width:max-content;max-width:92%;
  transform:translate(-50%,-50%);
  text-align:center;
  will-change:transform;
}
.tx{
  margin:0;
  font-family:"Italianno","Marck Script",cursive;
  font-weight:400;
  font-size:var(--fs,20px);
  color:var(--blue);
  text-shadow:0 1px 12px rgba(255,253,249,.7), 0 1px 2px rgba(255,253,249,.9);
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease, transform .8s ease;
}
.tx.in{opacity:1;transform:none}
.tx-navy{color:var(--blue-deep)}

/* ---------- Мини-календарь (экран 2) ---------- */
.cal-row{display:flex;justify-content:space-between;gap:4px}
.cal-row + .cal-row{margin-top:14px}
.cal-days span,.cal-nums span{
  font-family:"Italianno","Marck Script",cursive;
  color:var(--blue);
  font-size:var(--fs,18px);
  flex:1;
  display:flex;align-items:center;justify-content:center;
}
.cal-nums span{aspect-ratio:1/1}
.cal-active{
  background:var(--yellow);
  color:var(--blue-deep);
  border-radius:50%;
}

/* ---------- Кликабельная кнопка «Как добраться» (экран 4) ---------- */
.hot-btn{
  position:absolute;
  left:18.5%;top:63%;
  width:63%;height:8%;
  border-radius:16px;
  z-index:2;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease, box-shadow .15s ease;
}
.hot-btn:hover,.hot-btn:focus-visible{
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 3px rgba(29,86,164,.35);
  outline:none;
}

/* ---------- RSVP форма (экран 6) ---------- */
.slide-form{align-items:flex-start;overflow-y:auto}
.slide-form::before{filter:blur(34px) saturate(1.02);opacity:.55}
.form-card{
  position:relative;z-index:1;
  width:min(94vw, 460px);
  margin:clamp(20px,5vh,64px) auto;
  background:var(--paper);
  border:2px solid var(--tan);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:clamp(22px,6vw,38px) clamp(20px,5.5vw,34px);
}
.form-title{
  font-family:"Marck Script",cursive;font-weight:400;
  color:var(--blue);text-align:center;line-height:1.15;
  font-size:clamp(26px,7.5vw,36px);
  margin:0 0 22px;
}
.field{border:0;padding:0;margin:0 0 22px}
.field legend,.lbl{
  font-family:"Marck Script",cursive;color:var(--blue);
  font-size:clamp(18px,5vw,22px);
  padding:0;margin:0 0 10px;display:block;
}
.opt{display:block;margin:0 0 10px;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{
  display:block;
  background:var(--card);
  border:2px solid transparent;
  border-radius:16px;
  padding:16px 20px;
  font-family:"Marck Script",cursive;
  font-size:clamp(16px,4.6vw,20px);
  color:var(--blue-deep);
  transition:border-color .15s, background .15s, transform .08s;
}
.opt:hover span{background:#dbe6f4}
.opt input:checked + span{
  border-color:var(--blue);
  background:var(--card-sel);
}
.opt input:focus-visible + span{outline:3px solid rgba(29,86,164,.4);outline-offset:2px}
.opt:active span{transform:scale(.99)}

.text-in{
  width:100%;
  background:var(--paper);
  border:2px solid var(--tan);
  border-radius:14px;
  padding:15px 18px;
  font-family:"Cormorant Garamond",serif;
  font-size:18px;color:var(--blue-deep);
}
.text-in::placeholder{color:#a9b6c7}
.text-in:focus{outline:none;border-color:var(--blue)}

.submit{
  width:100%;margin-top:6px;
  background:var(--yellow-soft);
  border:0;border-radius:16px;
  padding:17px 20px;
  font-family:"Marck Script",cursive;
  font-size:clamp(19px,5.4vw,24px);
  color:var(--blue-deep);
  cursor:pointer;
  transition:filter .15s, transform .08s;
}
.submit:hover{filter:brightness(1.04)}
.submit:active{transform:scale(.99)}
.submit:disabled{opacity:.65;cursor:default}
.submit.ok{background:#bfe3c1;color:#215c34}

.form-note{
  text-align:center;color:#9aa7b8;
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:14px;margin:14px 0 0;
}
.form-note.err{color:#b5473e;font-style:normal}

/* ---------- Кнопка музыки ---------- */
.music-btn{
  position:fixed;z-index:50;right:16px;bottom:16px;
  width:52px;height:52px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  background:var(--blue);color:#fff;
  box-shadow:0 6px 18px rgba(21,63,122,.35);
  cursor:pointer;display:grid;place-items:center;
  font-size:22px;line-height:1;
  transition:transform .15s, background .15s;
}
.music-btn:hover{transform:scale(1.06)}
.music-btn[aria-pressed="true"]{background:var(--yellow);color:var(--blue-deep)}
.music-btn.hint{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 18px rgba(21,63,122,.35)}50%{box-shadow:0 6px 30px rgba(255,222,89,.9)}}
.music-ic.spin{animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Появление ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .tx{opacity:1;transform:none!important}
  .bg-parallax,.tx-pos{transform:translate(-50%,-50%)!important}
}