/* ===== Переменные ===== */
:root{
  --wine:#7d1832;
  --wine-dark:#4a1020;
  --ink:#2e2626;
  --muted:#6b5b5b;
  --paper:#fffdfc;
  --blush:#f7dfe4;
  --line:#d9c3c8;
  --serif:'Playfair Display', 'Times New Roman', serif;
  --body:'Cormorant', 'Times New Roman', serif;
  --script:'Marck Script', cursive;
  --pad:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* акварельные разводы фона */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 22% at 2% 14%,  rgba(247,214,222,.42), transparent 68%),
    radial-gradient(40% 18% at 100% 36%, rgba(244,206,214,.34), transparent 70%),
    radial-gradient(48% 20% at 0% 66%,  rgba(248,222,228,.36),  transparent 68%),
    radial-gradient(38% 18% at 100% 90%, rgba(243,205,213,.32), transparent 70%);
}

/* ===== Шапка ===== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px var(--pad); padding-top:calc(10px + env(safe-area-inset-top));
  background:linear-gradient(180deg, rgba(255,253,252,.96), rgba(255,253,252,0));
}
.burger{background:none; border:0; padding:6px; cursor:pointer; display:grid; gap:4px}
.burger span{display:block; width:22px; height:1.6px; background:var(--wine); border-radius:2px}
.btn-cal{
  font-family:var(--script); font-size:15px; color:#fff; cursor:pointer;
  background:var(--wine-dark); border:0; border-radius:999px;
  padding:8px 18px 10px; box-shadow:0 4px 14px rgba(74,16,32,.25);
}
.btn-cal:active{transform:translateY(1px)}

.menu{
  position:fixed; inset:0; z-index:70; background:rgba(255,253,252,.97);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.menu ul{list-style:none; margin:0; padding:0; text-align:center}
.menu li{margin:14px 0}
.menu a{
  font-family:var(--serif); font-size:18px; letter-spacing:.14em;
  color:var(--ink); text-decoration:none; text-transform:uppercase;
}
.menu-close{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:20px;
  background:none; border:0; font-size:38px; line-height:1; color:var(--wine); cursor:pointer;
}

/* ===== Общее ===== */
.sec{padding:56px var(--pad); max-width:560px; margin:0 auto; text-align:center; position:relative}
.h-caps{
  font-family:var(--serif); font-weight:400; font-size:19px;
  letter-spacing:.2em; color:var(--wine); margin:0 0 26px; text-transform:uppercase;
}
.script{font-family:var(--script); font-weight:400}
.script-title{font-size:30px; color:var(--ink); margin:0 0 22px}
.serif-text{color:var(--muted); font-size:18px; line-height:1.8; margin:0 auto; max-width:430px}
.serif-text p{margin:0 0 16px}
.quote{font-size:24px; color:var(--muted); line-height:1.7; margin:0}
.divider{margin:30px 0}
.dash{display:block; width:120px; height:1px; background:var(--line); margin:0 auto}

/* появление при скролле */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ===== Флористика ===== */
.floral{background-repeat:no-repeat; background-position:center; background-size:contain}
.floral-top{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(118%,640px); height:250px; background-image:url('img/floral-top.svg');
  background-position:top center; pointer-events:none;
}
.floral-line{
  width:min(78%,300px); height:64px; margin:0 auto;
  background-image:url('img/floral-line.svg');
}

/* ===== Обложка ===== */
.cover{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  align-items:center; padding:120px var(--pad) 80px; position:relative; text-align:center;
}
.cover-inner{max-width:520px; width:100%}
.cover-meta{
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-family:var(--serif); font-size:10.5px; letter-spacing:.24em;
  color:var(--muted); text-transform:uppercase; line-height:1.7; margin-bottom:24px;
}
.cover-meta .sep{width:1px; height:26px; background:var(--line)}
.names{
  font-family:var(--serif); font-weight:400; font-size:clamp(21px,6.6vw,32px);
  letter-spacing:.16em; margin:0; color:var(--ink); white-space:nowrap;
}
.names .amp{font-family:var(--script); letter-spacing:0; font-size:.9em; color:var(--wine); margin:0 .12em}
.cover-sub{font-size:23px; color:var(--muted); margin:14px 0 30px}

/* Таймер */
.timer{display:flex; justify-content:center; gap:clamp(12px,5vw,26px)}
.timer .cell{min-width:44px}
.timer .num{
  font-family:var(--serif); font-size:clamp(22px,6.4vw,28px);
  letter-spacing:.06em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.timer .lbl{
  font-family:var(--body); font-size:10px; letter-spacing:.16em;
  color:var(--muted); text-transform:lowercase; margin-top:2px;
}

.scroll-hint{position:absolute; bottom:26px; left:50%; transform:translateX(-50%)}
.scroll-hint span{
  display:block; width:1px; height:44px;
  background:linear-gradient(180deg,var(--line),transparent);
  animation:hint 2.2s ease-in-out infinite;
}
@keyframes hint{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ===== Конверт ===== */
.envelope{width:min(70%,250px); margin:0 auto 26px}
.env{width:100%; height:auto; overflow:visible;
     animation:envFloat 5s ease-in-out infinite}
@keyframes envFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.env-front{fill:var(--wine-dark)}
.env-fold{stroke:rgba(255,255,255,.13); stroke-width:1.4; fill:none}
.env-flap{fill:#5e1527; transform-origin:150px 62px; transform-box:view-box}
.env-letter rect{fill:#fffaf7; stroke:#e8d5d9; stroke-width:1}
.env-lines{stroke:#e0cdd2; stroke-width:2.6; stroke-linecap:round}
.env-heart{fill:var(--wine)}
.env-word{
  font-family:var(--script); font-size:26px; fill:var(--wine-dark);
  text-anchor:middle;
}
/* закрытое состояние: письмо спрятано, клапан опущен, цветы видны */
.env-letter{transform-box:view-box; transform-origin:center; transform:translateY(160px); opacity:0}
.env-flower{opacity:1}

/* открытие при появлении секции */
.envelope.in .env-flap{animation:flapOpen 1s cubic-bezier(.45,.05,.2,1) .2s forwards}
.envelope.in .env-flower{animation:flowerFade .45s ease .35s forwards}
.envelope.in .env-letter{animation:letterUp 1.3s cubic-bezier(.25,.8,.25,1) .9s forwards}
@keyframes flapOpen{to{transform:rotateX(-172deg)}}
@keyframes letterUp{
  0%{transform:translateY(160px); opacity:0}
  12%{opacity:1}
  100%{transform:translateY(0); opacity:1}
}
@keyframes flowerFade{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .env{animation:none}
  .envelope.in .env-flap, .envelope.in .env-letter, .envelope.in .env-flower{animation:none}
  .env-letter{opacity:0}
}

/* ===== Скрепка ===== */
.clip{
  width:16px; height:40px; margin:0 auto 22px;
  border:1.6px solid var(--line); border-radius:999px; border-bottom-color:transparent;
}

/* ===== Календарь ===== */
.calendar{
  margin:32px auto 26px; max-width:330px; padding:16px 14px 20px;
  border:1.6px solid var(--wine); border-radius:22px; background:rgba(247,223,228,.5);
}
.cal-title{font-family:var(--script); font-size:26px; color:var(--wine-dark); margin:0 0 10px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-grid div{
  font-family:var(--serif); font-size:13px; color:var(--ink);
  aspect-ratio:1; display:grid; place-items:center; position:relative;
}
.cal-grid .dow{font-size:9.5px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
.cal-grid .off{color:#c9b7ba}
.cal-grid .day-x{color:var(--wine-dark)}
.cal-grid .day-x::before{
  content:''; position:absolute; inset:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 27C8 21 2 16 2 10.5 2 6 5.5 3 9.5 3c2.6 0 4.9 1.4 6.5 3.6C17.6 4.4 19.9 3 22.5 3 26.5 3 30 6 30 10.5 30 16 24 21 16 27z' fill='none' stroke='%237d1832' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== Дресс-код ===== */
.palette{display:flex; justify-content:center; gap:4px; margin:26px 0 10px; flex-wrap:wrap}
.swatch{
  width:80px; height:24px; filter:url(#rough);
  clip-path:polygon(0% 52%,6% 26%,18% 14%,32% 24%,48% 10%,64% 20%,80% 12%,92% 28%,100% 48%,
                    93% 70%,80% 86%,64% 74%,48% 88%,32% 76%,18% 88%,7% 74%);
}

/* ===== Форма ===== */
.field{
  width:100%; max-width:430px; display:block; margin:0 auto 14px;
  font-family:var(--body); font-size:17px; color:var(--ink);
  background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:12px;
  padding:13px 16px; resize:vertical;
}
.field::placeholder{color:#a99699}
.field:focus{outline:none; border-color:var(--wine)}
.btn-confirm{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--script); font-size:19px; color:#fff;
  background:linear-gradient(180deg,var(--wine),var(--wine-dark));
  border:0; border-radius:999px; padding:12px 40px 14px;
  box-shadow:0 8px 22px rgba(125,24,50,.28);
}
.btn-confirm:active{transform:translateY(1px)}
.btn-confirm.done{background:linear-gradient(180deg,#4a7d5a,#2f5b3d); box-shadow:none}
.extra{margin-top:26px; text-align:left; max-width:430px; margin-inline:auto}
.form-intro{
  border-left:3px solid var(--wine); padding:6px 0 6px 14px; margin:22px 0 18px;
  font-size:15px; color:var(--muted); text-align:center;
}
.q{margin:0 0 22px}
.q h3{font-family:var(--body); font-weight:400; font-size:17px; color:var(--ink); margin:0 0 10px}
.q label{display:flex; align-items:center; gap:10px; margin:7px 0; color:var(--muted); font-size:16px; cursor:pointer}
.q input{accent-color:var(--wine); width:16px; height:16px}
.btn-send{
  display:block; width:100%; cursor:pointer; margin-top:8px;
  font-family:var(--body); font-size:17px; color:#fff;
  background:var(--wine); border:0; border-radius:999px; padding:12px;
}
.form-status{text-align:center; font-size:15px; color:var(--wine); min-height:22px; margin:12px 0 0}

/* ===== Расписание ===== */
.timeline{position:relative; padding:6px 0 10px}
.tl-svg{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:120px; height:100%; pointer-events:none; overflow:visible;
}
.tl-svg path{
  stroke:var(--wine-dark); stroke-width:1.5; fill:none;
  stroke-dasharray:1600; stroke-dashoffset:1600; transition:stroke-dashoffset 2.6s ease .2s;
}
.timeline.in .tl-svg path{stroke-dashoffset:0}
.tl-item{
  display:grid; grid-template-columns:1fr 62px 1fr; align-items:center;
  gap:6px; margin:0 0 40px; position:relative; z-index:1;
}
.tl-item .tl-txt{grid-column:1; text-align:right; padding-right:8px}
.tl-item .tl-icon{grid-column:3}
.tl-item.right .tl-txt{grid-column:3; text-align:left; padding-left:8px; padding-right:0}
.tl-item.right .tl-icon{grid-column:1}
.tl-dot{
  grid-column:2; width:9px; height:9px; border-radius:50%;
  background:var(--wine-dark); margin:0 auto; box-shadow:0 0 0 4px rgba(255,253,252,.9);
}
.tl-time{font-family:var(--serif); font-size:21px; color:var(--ink); margin:0}
.tl-title{font-family:var(--body); font-size:16px; color:var(--wine-dark); margin:2px 0 5px}
.tl-text{font-size:14px; color:var(--muted); line-height:1.5; margin:0}
.tl-icon{color:var(--ink)}
.tl-icon svg{width:100%; max-width:78px; height:auto}

/* ===== Карта ===== */
.sec-map{max-width:600px}
.tabs{display:flex; justify-content:center; gap:10px; margin-bottom:14px}
.tab{
  font-family:var(--body); font-size:16px; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:7px 20px;
}
.tab.active{background:var(--wine); border-color:var(--wine); color:#fff}
.map-addr{font-size:16px; color:var(--muted); margin:0 0 14px}
.map-wrap{border-radius:16px; overflow:hidden; border:1px solid var(--line); line-height:0}
.map-wrap iframe{width:100%; height:340px; border:0}
.btn-route{
  display:inline-block; margin-top:16px; text-decoration:none;
  font-family:var(--body); font-size:16px; color:#fff; background:var(--wine-dark);
  border-radius:999px; padding:11px 28px;
}

/* ===== Подвал ===== */
.footer{text-align:center; padding:40px var(--pad) 60px; color:var(--muted)}
.footer .script{font-size:26px; color:var(--wine-dark); margin:0}
.foot-date{font-family:var(--serif); font-size:12px; letter-spacing:.2em; margin:6px 0 0}

@media (min-width:620px){
  .sec{padding:78px var(--pad)}
  body{font-size:19px}
}

/* фикс: скрытые блоки */
[hidden]{display:none !important}

/* ===== Дополнительный декор ===== */
.sprig{
  width:min(72%,290px); height:56px; margin:0 auto;
  background:url('img/sprig.svg') center/contain no-repeat;
  opacity:.9;
}
.monogram{
  width:150px; height:150px; margin:0 auto 6px; position:relative;
  background:url('img/wreath.svg') center/contain no-repeat;
  display:grid; place-items:center;
}
.monogram span{
  font-family:var(--script); font-size:34px; color:var(--wine-dark);
  line-height:1; padding-bottom:6px;
}
.has-corner::before{
  content:''; position:absolute; top:10px; left:2px; width:104px; height:104px;
  background:url('img/corner.svg') left top/contain no-repeat;
  opacity:.5; pointer-events:none;
}
.has-corner::after{
  content:''; position:absolute; bottom:10px; right:2px; width:104px; height:104px;
  background:url('img/corner.svg') left top/contain no-repeat;
  transform:rotate(180deg); opacity:.5; pointer-events:none;
}
/* фактура бумаги */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
/* поле «вторая половинка» */
.q-sub{margin:10px 0 4px; max-width:100%}

.floral-bottom{
  position:absolute; bottom:-14px; left:50%;
  transform:translateX(-50%) rotate(180deg);
  width:min(118%,640px); height:210px;
  background-image:url('img/floral-top.svg'); background-position:top center;
  opacity:.85; pointer-events:none;
}
.scroll-hint{z-index:2}

/* ===== Анимации календаря ===== */
.cal-grid div{opacity:0}
.calendar.in .cal-grid div{animation:dayIn .45s ease forwards}
@keyframes dayIn{to{opacity:1}}
.calendar.in .cal-grid .day-x::before{
  transform-origin:center;
  animation:heartDraw .8s ease 1.2s backwards, heartBeat 2.8s ease-in-out 2.2s infinite;
}
@keyframes heartDraw{
  0%{transform:scale(.2); opacity:0}
  60%{transform:scale(1.2); opacity:1}
  100%{transform:scale(1); opacity:1}
}
@keyframes heartBeat{
  0%, 100%{transform:scale(1)}
  8%{transform:scale(1.16)}
  16%{transform:scale(1)}
  24%{transform:scale(1.1)}
  32%{transform:scale(1)}
}
.cal-title{animation:none}
@media (prefers-reduced-motion:reduce){
  .cal-grid div{opacity:1; animation:none}
  .calendar.in .cal-grid div{animation:none; opacity:1}
  .calendar.in .cal-grid .day-x::before{animation:none}
}