@font-face{font-family:"Cormorant";font-weight:300;font-display:swap;src:url(/fonts/cormorant-garamond-cyrillic-300-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant";font-weight:300;font-display:swap;src:url(/fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-22FF}
@font-face{font-family:"Cormorant";font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant";font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-22FF}
@font-face{font-family:"Cormorant";font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant";font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-22FF}
@font-face{font-family:"Cormorant";font-weight:300;font-style:italic;font-display:swap;src:url(/fonts/cormorant-garamond-cyrillic-300-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant";font-weight:300;font-style:italic;font-display:swap;src:url(/fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-22FF}
@font-face{font-family:"Lora";font-weight:400;font-display:swap;src:url(/fonts/lora-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Lora";font-weight:400;font-display:swap;src:url(/fonts/lora-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-22FF}
@font-face{font-family:"Lora";font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/lora-cyrillic-400-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Lora";font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/lora-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-22FF}
@font-face{font-family:"Marck";font-weight:400;font-display:swap;src:url(/fonts/marck-script-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Marck";font-weight:400;font-display:swap;src:url(/fonts/marck-script-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-22FF}

@font-face{font-family:"Digits";font-weight:400;font-display:swap;src:url(/fonts/lora-latin-400-normal.woff2) format("woff2");unicode-range:U+0030-0039}

:root{
  --bg:#ffffff; --ink:#1b1b1a; --muted:#6c6964; --line:#1b1b1a; --dark:#2b2a28; --err:#9b2c22;
  --head:"Digits","Cormorant","Times New Roman",serif; --body:"Lora",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-variant-numeric:lining-nums;background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--body);overflow-x:hidden}
body.locked{overflow:hidden;height:100svh}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- экран блокировки ---------- */
.lock{position:fixed;inset:0;z-index:50;background:var(--dark);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:1.5rem;
  transition:opacity 1.5s cubic-bezier(.4,0,.2,1),visibility 1.5s}
body.opening .lock,body:not(.locked) .lock{opacity:0;visibility:hidden;pointer-events:none}
.lock-photo{margin:0;width:min(66vw,18rem);border:6px solid #e9e7e3;box-shadow:0 20px 50px -18px rgba(0,0,0,.7);animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both;
  transition:transform 1.6s cubic-bezier(.4,0,.2,1),filter 1.6s ease}
body.opening .lock-photo{transform:scale(1.35);filter:blur(8px)}
body.opening .unlock{opacity:0;transition:opacity .5s}
.lock-photo img{width:100%}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
/* полароид после анкеты */
.polaroid-sec{padding-top:2.5rem}
.polaroid{position:relative;margin:0 auto;width:min(76vw,20rem);transform:rotate(-2.5deg);box-shadow:0 1px 2px rgba(0,0,0,.15),0 22px 44px -16px rgba(0,0,0,.45)}
.polaroid.reveal{transform:rotate(4deg) translateY(24px)}
.polaroid.reveal.in{transform:rotate(-2.5deg)}
.polaroid img{width:100%}
/* надпись на нижнем белом поле полароида */
.polaroid figcaption{position:absolute;left:0;right:0;bottom:2.5%;height:19%;display:grid;place-items:center;font:400 clamp(1.8rem,8.4vw,2.4rem)/1 "Marck",var(--head);color:#232220;transform:rotate(-2deg)}
.unlock{display:flex;flex-direction:column;align-items:center;gap:.9rem;background:none;border:0;padding:.5rem;color:#fff;cursor:pointer;font:400 .95rem/1.3 var(--body);text-align:center;animation:fadein 1s .6s both}
@keyframes fadein{from{opacity:0}}
.lock-ico{display:grid;place-items:center;width:3.6rem;height:3.6rem;border:1px solid rgba(255,255,255,.85);border-radius:50%;transition:background .3s}
.lock-ico svg{width:1.6rem;height:1.6rem;fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round}
.shackle{transition:transform .5s ease;transform-origin:15.5px 10.5px}
.unlock:hover .lock-ico{background:rgba(255,255,255,.08)}
.unlock:hover .shackle,.unlocking .shackle{transform:translateY(-1.5px) rotate(-18deg)}

/* ---------- первый экран ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#555;color:#fff}
.hero picture,.hero-img{position:absolute;inset:0;width:100%;height:100%}
/* переливание: фото под замком сначала размыто и увеличено, при открытии плавно проявляется */
.hero-img{object-fit:cover;object-position:50% 50%;transition:filter 2.4s cubic-bezier(.4,0,.2,1),transform 6s cubic-bezier(.2,.6,.2,1)}
body.locked .hero-img{filter:blur(16px) brightness(1.25);transform:scale(1.12)}
.hero-mono,.countdown{transition:opacity 1.6s ease 1s}
body.locked .hero-mono,body.locked .countdown{opacity:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.4))}
.hero-mono{position:absolute;z-index:1;left:50%;top:21%;transform:translateX(-50%);display:grid;grid-template-columns:auto auto auto;align-items:start;font-family:var(--head);font-weight:300;line-height:.8;text-shadow:0 2px 30px rgba(0,0,0,.2)}
.mono-d,.mono-a{font-size:clamp(7.5rem,34vw,13rem)}
.mono-d{grid-column:1;grid-row:1}
.mono-names{grid-column:2;grid-row:1/3;writing-mode:vertical-rl;text-transform:uppercase;font-size:clamp(1.1rem,4.6vw,1.7rem);letter-spacing:.14em;line-height:1;padding:.4em .35em 0}
.mono-a{grid-column:3;grid-row:2;margin-top:-.32em}
.countdown{position:absolute;z-index:1;left:0;right:0;bottom:calc(3rem + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:clamp(.7rem,3.5vw,1.4rem)}
.countdown div{width:clamp(3.9rem,17vw,4.8rem);aspect-ratio:1;border:1px solid rgba(255,255,255,.9);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.08)}
.countdown b{font:400 clamp(1.5rem,6.5vw,1.9rem)/1 var(--head);font-variant-numeric:lining-nums tabular-nums}
.countdown span{font-size:.62rem;margin-top:.15rem}
.done-text{font:400 1.8rem/1 var(--head)}

/* ---------- разделители ---------- */
.divider{position:relative;height:1px;margin:3.2rem 0 0}
.divider::before{content:"";position:absolute;top:0;height:0;border-top:2px dotted var(--ink);width:52%}
.divider::after{content:"♥";position:absolute;top:-.62em;font-size:.85rem;line-height:1}
.divider.r::before{right:0}.divider.r::after{right:52%;margin-right:-.3em}
.divider.l::before{left:0}.divider.l::after{left:52%;margin-left:-.3em}

/* ---------- секции ---------- */
.sec{max-width:34rem;margin:0 auto;padding:3.2rem 1.5rem 1rem;text-align:center}
.title{font:400 clamp(2.3rem,10.5vw,3.2rem)/1.05 var(--head);text-transform:uppercase;letter-spacing:.01em;margin:0 0 1.6rem}
.text{margin:0 auto 1.2rem;max-width:22rem;font-size:.98rem}
.heart{display:block;font-size:.85rem;line-height:1;margin:.2rem 0 1.4rem}

.btn{display:inline-block;min-width:9rem;margin-top:.8rem;padding:1.05rem 1.8rem;border:1px dashed var(--ink);background:none;color:var(--ink);text-decoration:none;text-transform:uppercase;font:400 .85rem/1 var(--body);letter-spacing:.06em;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:#fff}
.btn:disabled{opacity:.6;cursor:wait}

/* ---------- календарь ---------- */
.cal{margin-top:2.6rem}
.cal-month{margin-bottom:1rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:.4rem;max-width:20rem;margin:0 auto;font:400 1.15rem/1 var(--head)}
.cal-grid span{display:grid;place-items:center;height:2.25rem}
.cal-grid .wd{text-transform:uppercase;font-size:1rem;height:1.8rem}
.cal-grid .day-on{position:relative}
.cal-grid .day-on svg{position:absolute;left:50%;top:50%;width:2.9rem;height:2.9rem;transform:translate(-50%,-52%);overflow:visible}
.cal-grid .day-on path{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.6s ease .3s}
.cal.in .day-on path{stroke-dashoffset:0}

/* ---------- программа ---------- */
.timeline{list-style:none;margin:0 auto;padding:0;max-width:22rem;position:relative}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.timeline li{display:grid;grid-template-columns:1fr 1fr;align-items:start;padding:1.5rem 0}
.timeline .t{padding-right:.7rem;text-align:right}
.timeline time{display:block;font:400 2rem/1 var(--head);padding-bottom:.45rem;border-bottom:1px dashed #9c9893}
.timeline .t span{display:block;font-size:.82rem;padding-top:.4rem}
.timeline p{margin:.55rem 0 0;padding-left:.7rem;text-align:left;font-size:.82rem;line-height:1.45}

/* ---------- фото ---------- */
.photo{margin:3.5rem auto 0;max-width:34rem}
.photo img{width:100%;aspect-ratio:853/1280;object-fit:cover}

/* ---------- анкета ---------- */
.form{max-width:22rem;margin:0 auto;text-align:left}
.q{display:block;font:400 1.3rem/1.25 var(--head);margin:0 0 .8rem;padding:0}
.input{display:block;width:100%;border:1px solid var(--ink);border-radius:0;padding:1rem;font-size:.9rem;background:#fff;margin-bottom:1.8rem}
.input::placeholder{color:#8a8782}
.input.bad{border-color:var(--err)}
fieldset{border:0;margin:0 0 1rem;padding:0}
fieldset.bad .choice span::before{border-color:var(--err)}
.choice{display:block;padding:.35rem 0;cursor:pointer;font-size:.85rem}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:flex;align-items:center;gap:.6rem}
.choice span::before{content:"";flex:none;width:1.05rem;height:1.05rem;border:1px solid var(--ink);border-radius:50%;box-shadow:inset 0 0 0 3px #fff;transition:background .2s}
.choice input:checked+span::before{background:var(--ink)}
.choice input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-err{color:var(--err);font-size:.85rem;min-height:1.2em;margin:0 0 .4rem}
.form .btn{display:block;margin:0 auto}
.thanks{outline:none;animation:fadein .8s both}

/* ---------- контакты ---------- */
.contacts .title{margin-bottom:2rem}
.person{margin-bottom:2rem}
.person p{margin:0 0 .7rem;font-size:.98rem}
.person a[href^="tel"]{color:inherit;text-decoration:none}
.wa{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem}
.wa svg{width:1.7rem;height:1.7rem;fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}

/* ---------- финал ---------- */
.end{text-align:center;padding:2rem 1.5rem calc(6rem + env(safe-area-inset-bottom))}
.end-mono{font:300 4.2rem/1 var(--head);margin:0 0 .8rem}
.end-mono i{font-size:.55em;vertical-align:.2em}

/* ---------- музыка ---------- */
.music{position:fixed;z-index:20;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));width:3.1rem;height:3.1rem;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 20px -6px rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center}
.music[hidden]{display:none}
.bars{display:flex;gap:3px;align-items:flex-end;height:16px}
.bars i{width:3px;height:5px;background:var(--ink);border-radius:1px}
.music[aria-pressed=true] .bars i{animation:eq 1s ease-in-out infinite}
.music[aria-pressed=true] .bars i:nth-child(2){animation-delay:-.4s}
.music[aria-pressed=true] .bars i:nth-child(3){animation-delay:-.7s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}

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

@media (min-width:900px){
  .hero-mono{top:18%}
  .sec{padding-top:4.5rem}
  .divider{margin-top:4.5rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .polaroid.reveal{transform:rotate(-2.5deg)}
  .cal-grid .day-on path{stroke-dashoffset:0}
}
.cal-month .yr{font-size:.8em;letter-spacing:.02em}