:root{
--ivory:#faf6f0;
--paper:#f4ede3;
--ink:#33302b;
--ink-soft:#6b655c;
--gold:#a9884e;
--gold-light:#c9ad7c;
--sage:#8d9781;
--line:rgba(169,136,78,.28);
--ok:#7fbf96;
--error:#e08a72;
--serif:'Cormorant Garamond', Georgia, serif;
--sans:'Manrope', system-ui, sans-serif;
--sp:clamp(64px, 11vw, 130px);
--radius-lg:22px;
--radius-md:16px;
--shadow-sm:0 10px 30px rgba(0,0,0,.20);
--shadow-lg:0 30px 80px rgba(0,0,0,.30);
--transition:220ms cubic-bezier(0.16,1,0.3,1);
--text-on-video:#fffdf8;
--text-on-video-soft:rgba(255,253,248,.82);
}

*{box-sizing:border-box}
html{
scroll-behavior:auto;
}

body{
margin:0;color:var(--text-on-video);
font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.75;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
background:#1a1512;
}
body.locked{overflow:hidden;height:100vh}
img,video,iframe{max-width:100%;display:block}
a,button,input,textarea,select{font:inherit}
button{cursor:pointer}

.route-layout{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:22px;
align-items:start;
margin-top:24px;
text-align:left;
}

/* ---------- ЭКРАН-КОНВЕРТ ---------- */
.envelope-stage{
position:fixed;
inset:0;
z-index:999;
}
.envelope-stage:has(.envelope-screen.hidden){
pointer-events:none;
visibility:hidden;
}

.envelope-screen{
position:fixed;inset:0;z-index:999;
display:flex;align-items:center;justify-content:center;
background:#1a1512;
transition:opacity 1.2s ease;
}
.envelope-screen.hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
display:none;
transition:opacity 1.2s ease, visibility 0s 1.2s;
}
.envelope-shell{position:absolute;inset:0;cursor:pointer}
#envelopeVideo{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;transform-origin:center;transform:scale(1);
transition:opacity .6s ease;
}
#envelopeVideo.fade-out{opacity:0}
@media (min-width:900px){
#envelopeVideo{transform:scale(1.777)}
}
.stage-note{
position:absolute;
top:12%;
left:0;right:0;
text-align:center;
z-index:2;
font-family:var(--serif);
font-style:italic;
font-size:clamp(16px, 2.4vw, 22px);
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
color:#2b1f14;
text-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 30px rgba(0,0,0,.4);
animation:notePulse 2.4s ease-in-out infinite;
transition:opacity .4s ease;
}
.stage-note.hidden{animation:none;opacity:0;pointer-events:none}
@keyframes notePulse{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ---------- ШТОРКА ПЕРЕХОДА (убирает моргание) ---------- */
.transition-veil{
position:fixed;
inset:0;
z-index:1000;
background:#1a1512;
opacity:0;
pointer-events:none;
transition:opacity .6s ease;
}
.transition-veil.show{opacity:1}

/* ---------- ФОНОВОЕ ВИДЕО ---------- */
.bg-video{
position:fixed;
inset:0;
z-index:-2;
overflow:hidden;
width:100%;
height:100dvh;
background:#1a1512 url("assets/scrolly-poster.jpg") center / cover no-repeat;
}
.bg-video video, .bg-video canvas, .bg-video img{
display:block;
position:absolute;
inset:0;
width:100%;height:100%;
max-width:none;
object-fit:cover;
object-position:center;
}
.bg-video-veil{
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background:linear-gradient(
  180deg,
  rgba(30,24,16,.56) 0%,
  rgba(30,24,16,.40) 42%,
  rgba(30,24,16,.58) 100%
);
}
@media (prefers-reduced-motion:reduce){
.bg-video video{display:none}
}

/* ---------- ОСНОВНОЙ КОНТЕНТ ---------- */
.invite-root{
opacity:0;transform:translateY(28px);
transition:opacity 800ms ease, transform 800ms ease;
pointer-events:none;
position:relative;
z-index:1;
}
.invite-root.visible{opacity:1;transform:translateY(0);pointer-events:auto}

.wrap{width:min(92vw,1080px);margin:0 auto}
.wrap.narrow{width:min(92vw,660px)}
.center{text-align:center}
.section{
padding:calc(var(--sp) * 0.4) 0 var(--sp);
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:flex-start;
box-sizing:border-box;
}
.section.center-vertical{
justify-content:center;
}
.section.route{
padding:calc(var(--sp) * 0.5) 0;
}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.6vw,42px);letter-spacing:.03em;margin:0 0 34px;color:var(--text-on-video)}
.body{font-size:16px;color:var(--text-on-video-soft);margin:0 auto;max-width:48ch}
.lead{font-family:var(--serif);font-size:clamp(22px,3.4vw,30px);margin:0 0 18px;letter-spacing:.02em;color:var(--text-on-video)}
.ornament{color:var(--gold-light);font-size:20px;margin:0 0 18px;letter-spacing:.4em}
.eyebrow{font-size:11px;letter-spacing:.45em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 18px}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- HERO ---------- */
.hero{
position:relative;
min-height:100svh;
display:grid;
place-items:center;
overflow:hidden;
text-align:center;
}
.hero-content{position:relative;z-index:2;padding:0 6vw;color:#fffdf8}
.names{font-family:var(--serif);font-weight:300;margin:0;
font-size:clamp(44px,10vw,104px);line-height:1.05;letter-spacing:.02em;
text-shadow:0 2px 30px rgba(40,30,10,.35)}
.names span{display:block}
.names .amp{font-style:italic;font-size:.46em;color:#f0dcb2;margin:.1em 0;opacity:.95}
.hero-rule{width:70px;height:1px;background:rgba(255,253,248,.6);margin:30px auto}
.hero-meta{font-family:var(--serif);font-size:clamp(19px,2.6vw,26px);letter-spacing:.08em;margin:0 0 8px;
text-shadow:0 1px 20px rgba(35,28,15,.55)}
.hero-place{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,253,248,.9);margin:0;
text-shadow:0 1px 16px rgba(35,28,15,.6)}

.scroll-cue{
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);
z-index:100;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .5s ease, visibility .5s ease;
}
.scroll-cue.visible{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.scroll-cue-text{
font-family:var(--serif);
font-style:italic;
font-size:12px;
letter-spacing:.32em;
text-transform:uppercase;
color:rgba(255,253,248,.7);
margin:0 0 12px;
text-align:center;
animation:cueTextBreathe 3.6s ease-in-out infinite;
}

@keyframes cueTextBreathe{
0%, 100%{ opacity:.45; letter-spacing:.32em; }
50%{ opacity:.85; letter-spacing:.4em; }
}

/* ---------- ТАЙМЕР ---------- */
.cd-num{font-family:var(--serif);font-size:clamp(38px,8.4vw,66px);line-height:1;color:var(--text-on-video);font-variant-numeric:tabular-nums}
.cd-lbl{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-on-video-soft);margin-top:12px}
.cd-sep{font-family:var(--serif);font-size:clamp(24px,5vw,40px);color:var(--gold-light);line-height:1.1}
.countdown{display:flex;align-items:flex-start;justify-content:center;gap:clamp(10px,3.4vw,34px)}
.cd-cell{display:flex;flex-direction:column;align-items:center;min-width:clamp(58px,15vw,96px)}

/* ---------- ПРОГРАММА ---------- */
.timeline{list-style:none;margin:0 auto;padding:0;max-width:640px;text-align:left;position:relative}
.timeline::before{content:"";position:absolute;left:calc(clamp(52px,14vw,74px) + 11px);top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.28)}
.timeline li{display:grid;grid-template-columns:clamp(52px,14vw,74px) 24px 1fr;align-items:start;gap:0;padding:0 0 34px}
.tl-time{font-family:var(--serif);font-size:19px;color:var(--gold-light);letter-spacing:.04em;padding-top:2px}
.tl-dot{position:relative;width:24px;height:24px}
.tl-dot::after{content:"";position:absolute;left:5px;top:8px;width:9px;height:9px;border-radius:50%;
background:rgba(30,24,16,.4);border:1px solid var(--gold-light)}
.tl-body h3{font-family:var(--serif);font-weight:500;font-size:21px;margin:0 0 4px;letter-spacing:.02em;color:var(--text-on-video)}
.tl-body p{margin:0;font-size:14.5px;color:var(--text-on-video-soft);line-height:1.6}

/* ---------- КАРТА ---------- */
.map{margin:16px auto 0;height:min(50vh,380px);border:1px solid rgba(255,255,255,.2);overflow:hidden;background:#e9e2d6;border-radius:10px}
.map iframe{width:100%;height:100%;border:0}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin:36px 0 34px;text-align:left}
.ways > div{
background:rgba(30,24,16,.32);
border:1px solid rgba(255,255,255,.14);
border-radius:12px;
padding:16px 18px;
}
.ways h3{font-family:var(--serif);font-weight:500;font-size:19px;margin:0 0 6px;color:var(--text-on-video)}
.ways p{margin:0;font-size:14.5px;color:var(--text-on-video-soft)}
.btn.ghost{
display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
background:transparent;color:var(--text-on-video);border:1px solid var(--gold-light);padding:16px 34px;
cursor:pointer;transition:.35s;text-decoration:none;
}
.btn.ghost:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* ---------- RSVP ---------- */
.card{
  width:100%;
  padding:32px 36px;
}

.card h2{
  margin:0 0 24px;
  font-family:var(--serif);
  font-size:clamp(28px,4vw,38px);
  font-weight:500;
  color:var(--text-on-video);
}

form{
  display:grid;
  gap:18px;
}

.row{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}

.row-2{
  grid-template-columns:1fr;
}

label{
  display:grid;
  gap:8px;
  font-size:14px;
  color:var(--text-on-video-soft);
}

.guest-main{
  display:grid;
  gap:18px;
}

.guest-section-title{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-light);
}

@media (min-width:700px){
  .row-2{
    grid-template-columns:1fr 1fr;
  }
}

@media (min-width:800px){
  .card{
    padding:40px 48px;
  }
}

input[type=text],
input[type=tel],
select,
textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);
  color:var(--text-on-video);
  border-radius:var(--radius-md);
  padding:14px 16px;
  outline:none;
  font-family:var(--sans);
  transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

input::placeholder,
textarea::placeholder{
  color:rgba(255,253,248,.5);
}

textarea{
  min-height:114px;
  resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--gold-light);
  box-shadow:0 0 0 4px rgba(201,173,124,.18);
  background:rgba(255,255,255,.16);
}

select{
  appearance:none;
  color-scheme:dark;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--gold-light) 50%),
    linear-gradient(135deg,var(--gold-light) 50%,transparent 50%);
  background-position:calc(100% - 16px) 22px, calc(100% - 11px) 22px;
  background-size:5px 5px;
  background-repeat:no-repeat;
}

select option{
  background:#2a221b;
  color:#fffdf8;
  padding:10px;
}

/* ---------- Дополнительные гости ---------- */
.guests-block{
  display:grid;
  gap:12px;
}

.guests-block.is-hidden{
  display:none;
}

.guests-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}

.guests-title{
  margin:0;
  font-size:14px;
  line-height:1.2;
  color:var(--text-on-video-soft);
}

.guest-add{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:var(--text-on-video);
  border-radius:999px;
  padding:9px 14px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  line-height:1;
  font-weight:500;
  white-space:nowrap;
  transition:background var(--transition), border-color var(--transition), transform var(--transition), opacity var(--transition);
}

.guest-add:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.32);
  transform:translateY(-1px);
}

.guest-add:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.guest-fields{
  display:grid;
  gap:14px;
}

.guest-card{
  display:grid;
  gap:14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.04);
}

.guest-card-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px;
  align-items:center;
  gap:10px;
}

.guest-card-title{
  font-size:14px;
  color:var(--text-on-video-soft);
}

.guest-remove{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text-on-video-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.guest-remove:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.30);
  color:var(--text-on-video);
  transform:translateY(-1px);
}

.submit{
  border:none;
  border-radius:999px;
  padding:15px 22px;
  background:var(--gold);
  color:#fff;
  font-weight:600;
  transition:transform var(--transition), opacity var(--transition), background var(--transition);
}

.submit:hover{
  transform:translateY(-1px);
  background:var(--gold-light);
}

.submit:disabled{
  opacity:.65;
  cursor:progress;
  transform:none;
}

.status{
  min-height:22px;
  font-size:14px;
  color:var(--text-on-video-soft);
}

.status.ok{
  color:var(--ok);
}

.status.error{
  color:var(--error);
}

@media (max-width:640px){
  .card{
    padding:26px 18px;
  }

  .guest-add{
    min-height:36px;
    padding:8px 13px;
    font-size:13px;
  }

  .guest-card{
    padding:12px;
  }

  .guest-card-head{
    grid-template-columns:minmax(0,1fr) 32px;
    gap:8px;
  }

  .guest-remove{
    width:32px;
    height:32px;
    font-size:18px;
  }
}

/* ---------- Звук ---------- */
.sound-toggle{
position:fixed;
bottom:24px;
right:24px;
z-index:1001;
width:46px;
height:46px;
border-radius:50%;
border:1px solid rgba(201,173,124,.45);
background:rgba(30,24,16,.18);
color:var(--gold-light);
font-size:17px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
backdrop-filter:blur(6px);
transition:background .3s ease, border-color .3s ease, transform .3s ease;
opacity:0;
pointer-events:none;
}
.sound-toggle.visible{
opacity:1;
pointer-events:auto;
}
.sound-toggle:hover{
background:rgba(30,24,16,.32);
border-color:var(--gold-light);
transform:scale(1.08);
}

/* ---------- Галерея фотографий ---------- */
.photo-carousel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:20px;
  padding:0 4px;
}

.carousel-viewport{
  position:relative;
  width:min(90vw, 720px);
  height:clamp(320px, 62vw, 460px);
  overflow:hidden;
}

.carousel-track{
  position:relative;
  width:100%;
  height:100%;
}

.carousel-slide{
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(180px, 46vw, 260px);
  height:clamp(240px, 62vw, 350px);
  transform-origin:center center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease, z-index 0s;
  cursor:pointer;
}

.carousel-slide-face{
  width:100%;
  height:100%;
  border-radius:10px;
  overflow:hidden;
}

.carousel-slide-face img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.carousel-slide[data-pos="0"]{
  transform:translate(-50%,-50%) scale(1);
  z-index:3;
  opacity:1;
}

.carousel-slide[data-pos="-1"]{
  transform:translate(-135%,-50%) scale(.78) rotate(-3deg);
  z-index:2;
  opacity:.85;
}

.carousel-slide[data-pos="1"]{
  transform:translate(35%,-50%) scale(.78) rotate(3deg);
  z-index:2;
  opacity:.85;
}

.carousel-slide[data-pos="hidden"]{
  transform:translate(-50%,-50%) scale(.6);
  z-index:0;
  opacity:0;
  pointer-events:none;
}

.carousel-arrow{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,253,248,.35);
  background:rgba(30,24,16,.28);
  color:rgba(255,253,248,.75);
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .3s ease, border-color .3s ease, opacity .3s ease;
  opacity:.55;
}

.carousel-arrow:hover{
  opacity:1;
  background:rgba(30,24,16,.5);
  border-color:rgba(255,253,248,.6);
}

@media (max-width:640px){
  .photo-carousel{
    gap:0;
  }

  .carousel-arrow{
    display:none;
  }

  .carousel-viewport{
    width:100%;
    height:clamp(380px, 92vw, 500px);
  }

  .carousel-slide{
    width:clamp(220px, 62vw, 300px);
    height:clamp(300px, 82vw, 400px);
  }

  .carousel-slide[data-pos="-1"]{
    transform:translate(-118%,-50%) scale(.7) rotate(-2deg);
  }

  .carousel-slide[data-pos="1"]{
    transform:translate(18%,-50%) scale(.7) rotate(2deg);
  }
}

/* ---------- КООРДИНАТОР ---------- */
.coordinator-card{
padding:12px 0;
}

.coordinator-text{
margin-bottom:20px;
}

.coordinator-phone{
display:inline-block;
font-family:var(--serif);
font-size:clamp(25px, 5vw, 34px);
letter-spacing:.05em;
color:var(--gold-light);
text-decoration:none;
border-bottom:1px solid rgba(201,173,124,.55);
padding-bottom:4px;
transition:color var(--transition), border-color var(--transition), transform var(--transition);
}

.coordinator-phone:hover{
color:var(--text-on-video);
border-color:var(--text-on-video);
transform:translateY(-2px);
}

/* ---------- Адаптив (общий) ---------- */
@media (max-width:520px){
.countdown{gap:6px}
.cd-sep{display:none}
.cd-cell{min-width:64px}
.timeline li{grid-template-columns:56px 20px 1fr}
.timeline::before{left:67px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important;
}
.reveal{opacity:1;transform:none}
}

/* ---------- Dress code / fan rotated 90deg ---------- */
.dress-strokes{
  position: relative;
  width: 250px;
  height: 170px;
  margin: 10px auto 0;
  transform: rotate(-90deg) translateX(-26px);
  transform-origin: center;
}

.dress-strokes .stroke{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 290px;
  height: 54px;
  overflow: visible;
  opacity: .98;
  transform-origin: center;
  filter:
    drop-shadow(0 8px 14px rgba(0,0,0,.14))
    drop-shadow(0 2px 4px rgba(0,0,0,.06));
}

.dress-strokes .stroke path:first-child{
  opacity: .97;
}

.dress-strokes .stroke path:last-child{
  opacity: .38;
}

.stroke-1{
  transform: translate(-50%, -50%) translate(-26px, -82px) rotate(-13deg);
  z-index: 1;
}

.stroke-2{
  transform: translate(-50%, -50%) translate(22px, -42px) rotate(-6deg);
  z-index: 2;
}

.stroke-3{
  transform: translate(-50%, -50%) translate(-10px, -6px) rotate(-1deg);
  z-index: 4;
}

.stroke-4{
  transform: translate(-50%, -50%) translate(14px, 28px) rotate(4deg);
  z-index: 3;
}

.stroke-5{
  transform: translate(-50%, -50%) translate(-18px, 62px) rotate(9deg);
  z-index: 5;
}

.stroke-6{
  transform: translate(-50%, -50%) translate(12px, 96px) rotate(14deg);
  z-index: 6;
}

@media (max-width: 720px){
  .dress-strokes{
    width: 220px;
    height: 170px;
    margin-top: 10px;
    transform: rotate(-90deg) translateX(-26px);
  }

  .dress-strokes .stroke{
    width: 255px;
    height: 48px;
  }

  .stroke-1{
    transform: translate(-50%, -50%) translate(-18px, -72px) rotate(-11deg);
  }

  .stroke-2{
    transform: translate(-50%, -50%) translate(16px, -38px) rotate(-5deg);
  }

  .stroke-3{
    transform: translate(-50%, -50%) translate(-8px, -6px) rotate(-1deg);
  }

  .stroke-4{
    transform: translate(-50%, -50%) translate(10px, 24px) rotate(4deg);
  }

  .stroke-5{
    transform: translate(-50%, -50%) translate(-14px, 54px) rotate(8deg);
  }

  .stroke-6{
    transform: translate(-50%, -50%) translate(8px, 82px) rotate(12deg);
  }
}