:root{
  --cream:#f8f5f0;
  --cream-deep:#ece3d6;
  --blush:#c3d0b0;
  --blush-deep:#6f7d5c;
  --sage:#9fae8c;
  --gold:#af8f5f;
  --ink:#2b2622;
  --ink-soft:#7a6c60;
  --paper:#fffdf9;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Cormorant Garamond', serif;
  overflow-x:hidden;
}

h1,h2,h3{
  font-weight:500;
  margin:0;
}

/* ===================== SIDE DECORATIONS ===================== */

.bg-fern{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('fern-bg.webp');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:0.9;
}

@media (max-width:1180px){
  .bg-fern{
    background-size:165% auto;
    opacity:0.5;
  }
}

/* ===== Летюче листя ===== */

.falling-leaves{
  position:fixed;
  inset:0;
  z-index:50;
  overflow:hidden;
  pointer-events:none;
}

.leaf{
  position:absolute;
  top:-8%;
  width:20px;
  height:20px;
  color:var(--sage);
  opacity:0;
  animation-name:leafFall;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

.leaf-1{ left:6%;  width:16px; height:16px; animation-duration:26s; animation-delay:-2s;  }
.leaf-2{ left:20%; width:22px; height:22px; animation-duration:32s; animation-delay:-14s; }
.leaf-3{ left:37%; width:14px; height:14px; animation-duration:24s; animation-delay:-8s;  }
.leaf-4{ left:52%; width:20px; height:20px; animation-duration:30s; animation-delay:-20s; }
.leaf-5{ left:68%; width:16px; height:16px; animation-duration:27s; animation-delay:-5s;  }
.leaf-6{ left:83%; width:24px; height:24px; animation-duration:34s; animation-delay:-24s; }
.leaf-7{ left:93%; width:14px; height:14px; animation-duration:22s; animation-delay:-11s; }

@keyframes leafFall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  8%{ opacity:.55; }
  50%{ transform:translate(26px, 55vh) rotate(170deg); }
  92%{ opacity:.45; }
  100%{ transform:translate(-18px, 112vh) rotate(340deg); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .falling-leaves{ display:none; }
}

/* ===== Конфеті з листя при відкритті конверта ===== */

.confetti-burst{
  position:fixed;
  inset:0;
  z-index:150;
  pointer-events:none;
}

.confetti-leaf{
  position:absolute;
  transform:translate(-50%,-50%);
  opacity:0;
  animation-name:confettiFly;
  animation-timing-function:cubic-bezier(.2,.8,.3,1);
  animation-fill-mode:forwards;
}

@keyframes confettiFly{
  0%{ transform:translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.4); opacity:0; }
  14%{ opacity:1; }
  100%{ transform:translate(-50%,-50%) translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .confetti-burst{ display:none; }
}

/* ===================== ENVELOPE SCREEN ===================== */

#envelope-screen{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  z-index:100;
  transition:opacity 1s ease, visibility 1s ease;
}

#envelope-screen.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.envelope-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  transition:transform .6s cubic-bezier(.4,0,.2,1) .1s;
}

@media (max-width:600px){
  .envelope-wrap.opened{
    transform:translateY(16vh);
  }
}

.envelope{
  position:relative;
  width:min(80vw, 340px);
  height:min(58vw, 232px);
  cursor:pointer;
  perspective:1400px;
  transform:rotate(-1.2deg);
  transition:transform .4s ease;
}

.envelope-wrap:hover .envelope:not(.open){
  transform:rotate(0deg) translateY(-2px);
}

.envelope-ground-shadow{
  position:absolute;
  left:6%;
  right:6%;
  bottom:-22px;
  height:24px;
  background:radial-gradient(ellipse at center, rgba(74,63,55,0.35), rgba(74,63,55,0) 72%);
  filter:blur(2px);
  z-index:0;
}

/* Внутренняя часть конверта (видна, когда клапан открыт) */
.envelope-back{
  position:absolute;
  inset:0;
  border-radius:5px;
  background:
    repeating-linear-gradient(135deg, rgba(184,148,95,0.08) 0px, rgba(184,148,95,0.08) 2px, transparent 2px, transparent 10px),
    linear-gradient(160deg, var(--cream-deep), var(--blush) 100%);
  box-shadow:0 22px 40px -18px rgba(74,63,55,0.45);
  z-index:1;
}

/* ===== Письмо ===== */
.letter{
  position:absolute;
  left:8%;
  right:8%;
  top:9%;
  height:80%;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--paper);
  border:1px solid rgba(184,148,95,0.25);
  border-radius:3px;
  box-shadow:0 10px 26px rgba(74,63,55,0.22);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  transform:translateY(0) rotate(0deg) scale(1);
  transition:transform 1s cubic-bezier(.2,.8,.25,1);
  transition-delay:.55s;
  z-index:2;
}

.letter-monogram{
  font-family:'Bad Script', cursive;
  font-size:2rem;
  color:var(--gold);
  margin:0 0 8px;
}

.letter-rule{
  display:block;
  width:36px;
  height:1px;
  margin:0 auto 10px;
  background:var(--gold);
  opacity:.6;
}

.letter-text{
  font-size:1rem;
  line-height:1.4;
  color:var(--ink-soft);
  margin:0;
}

/* ===== 4 клапана, сходящиеся ровно в центре ===== */
.envelope-flap{
  position:absolute;
  inset:0;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  transition-delay:.28s;
}

.envelope-flap-bottom{
  clip-path:polygon(0 100%, 100% 100%, 50% 50%);
  background:linear-gradient(to top, var(--blush-deep), var(--blush) 75%);
  box-shadow:inset 0 10px 14px -10px rgba(74,63,55,0.35);
  z-index:3;
}

.envelope-flap-left{
  clip-path:polygon(0 0, 0 100%, 50% 50%);
  background:linear-gradient(to right, var(--blush-deep), var(--blush) 80%);
  box-shadow:inset -8px 0 12px -10px rgba(74,63,55,0.3);
  z-index:4;
}

.envelope-flap-right{
  clip-path:polygon(100% 0, 100% 100%, 50% 50%);
  background:linear-gradient(to left, var(--blush-deep), var(--blush) 80%);
  box-shadow:inset 8px 0 12px -10px rgba(74,63,55,0.3);
  z-index:4;
}

.envelope-flap-top{
  clip-path:polygon(0 0, 100% 0, 50% 50%);
  background:linear-gradient(to bottom, var(--blush) 20%, var(--blush-deep));
  box-shadow:inset 0 -10px 16px -10px rgba(74,63,55,0.35), 0 6px 10px -6px rgba(74,63,55,0.3);
  transform-origin:top center;
  z-index:6;
  border-radius:5px 5px 0 0;
  backface-visibility:hidden;
}

/* ===== Лента, держащая печать ===== */
.ribbon{
  position:absolute;
  top:calc(50% - 11px);
  width:52%;
  height:22px;
  background:linear-gradient(to bottom, #b7c4a1, var(--sage) 45%, #93a17d);
  box-shadow:0 2px 4px rgba(74,63,55,0.25);
  z-index:7;
  transition:transform .6s ease, opacity .6s ease;
  transition-delay:.15s;
}

.ribbon-left{
  left:-2%;
  border-radius:2px 0 0 2px;
}

.ribbon-right{
  right:-2%;
  border-radius:0 2px 2px 0;
}

/* ===== Печать ===== */
.envelope-seal{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-4deg);
  width:56px;
  height:56px;
  border-radius:44% 56% 52% 48% / 48% 44% 56% 52%;
  background:radial-gradient(circle at 32% 28%, #d3b073, var(--gold) 55%, #93713f 100%);
  color:#fbf1de;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Bad Script', cursive;
  font-size:1.5rem;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.35),
    inset 0 2px 3px rgba(255,255,255,0.45),
    inset 0 -4px 6px rgba(0,0,0,0.35);
  z-index:8;
  transition:opacity .45s ease, transform .45s ease;
}

/* ===== Состояние "открыто" ===== */
.envelope.open .envelope-seal{
  opacity:0;
  transform:translate(-50%,-50%) rotate(35deg) scale(0.4);
  transition-delay:0s;
}

.envelope.open .ribbon-left{
  transform:translateX(-70%) rotate(-8deg);
  opacity:0;
}

.envelope.open .ribbon-right{
  transform:translateX(70%) rotate(8deg);
  opacity:0;
}

.envelope.open .envelope-flap-top{
  transform:rotateX(-165deg);
}

.envelope.open .letter{
  transform:translateY(-96%) rotate(-2.5deg) scale(1.04);
  box-shadow:0 22px 34px rgba(74,63,55,0.3);
}

.envelope-hint{
  color:var(--ink-soft);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.75rem;
  font-family:'Cormorant Garamond', serif;
  animation:pulse 2s ease-in-out infinite;
  transition:opacity .3s ease;
}

@keyframes pulse{
  0%,100%{opacity:.5;}
  50%{opacity:1;}
}

/* ===================== MAIN SITE ===================== */

#site{
  position:relative;
  z-index:1;
  max-width:640px;
  margin:0 auto;
  padding:0 24px 60px;
  animation:fadeUp 1.2s ease both;
  background:rgba(248,245,240,0.5);
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}

.section-title{
  text-align:center;
  font-size:1.5rem;
  color:var(--gold);
  margin-bottom:28px;
  position:relative;
}

/* HERO */

.hero{
  padding:80px 0 40px;
  text-align:center;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.25em;
  font-size:.75rem;
  color:var(--ink-soft);
  margin-bottom:18px;
}

.couple-photo{
  width:172px;
  height:172px;
  margin:0 auto 24px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid var(--paper);
  box-shadow:0 0 0 2px var(--gold), 0 16px 32px -14px rgba(74,63,55,0.45);
}

.couple-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.names{
  font-family:'Bad Script', cursive;
  font-size:clamp(3rem, 12vw, 4.5rem);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  line-height:1;
}

.names .amp{
  font-size:0.6em;
  color:var(--gold);
}

.hero-date{
  margin-top:18px;
  font-size:1.3rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
}

.hero-divider{
  margin:26px auto;
  color:var(--gold);
  font-size:1.2rem;
}

.hero-quote{
  font-size:1.15rem;
  color:var(--ink-soft);
  font-style:italic;
  line-height:1.6;
}

/* COUNTDOWN */

.countdown-section{
  padding:40px 0;
  border-top:1px solid var(--cream-deep);
}

.countdown{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.countdown-item{
  background:var(--paper);
  border:1px solid var(--cream-deep);
  border-radius:10px;
  padding:16px 14px;
  min-width:76px;
  text-align:center;
  box-shadow:0 8px 24px -16px rgba(74,63,55,0.4);
}

.countdown-num{
  display:block;
  font-size:1.8rem;
  color:var(--gold);
  font-weight:600;
}

.countdown-label{
  display:block;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:2px;
}

/* DETAILS / TIMELINE */

.details-section{
  padding:40px 0;
  border-top:1px solid var(--cream-deep);
}

.arrival-note{
  text-align:center;
  color:var(--ink-soft);
  font-size:1.05rem;
  margin:0 auto 32px;
  max-width:420px;
}

.timeline{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:280px;
  margin:0 auto 36px;
}

.timeline-item{
  display:flex;
  gap:20px;
  align-items:baseline;
  text-align:left;
}

.timeline-time{
  font-size:1.5rem;
  color:var(--gold);
  font-weight:600;
  white-space:nowrap;
  min-width:64px;
}

.timeline-body h3{
  font-size:1.15rem;
  margin-bottom:4px;
}

.timeline-body p{
  color:var(--ink-soft);
  margin:0;
  font-size:.95rem;
}

.venue-card{
  background:var(--paper);
  border:1px solid var(--cream-deep);
  border-radius:14px;
  padding:28px;
  text-align:center;
  box-shadow:0 8px 24px -16px rgba(74,63,55,0.4);
}

.venue-card h3{
  font-size:1.4rem;
  color:var(--ink);
  margin-bottom:6px;
}

.venue-card p{
  color:var(--ink-soft);
  margin:0 0 16px;
}

.map-link{
  display:inline-block;
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid var(--gold);
  padding-bottom:2px;
  font-size:.95rem;
  letter-spacing:.03em;
  transition:opacity .2s ease;
}

.map-link:hover{
  opacity:.7;
}

/* DRESS CODE */

.dresscode-section{
  padding:40px 0;
  border-top:1px solid var(--cream-deep);
  text-align:center;
}

.dresscode-text{
  color:var(--ink-soft);
  font-size:1.15rem;
  margin-bottom:20px;
}

.palette{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.palette-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.palette-item span{
  width:38px;
  height:38px;
  border-radius:50%;
  display:inline-block;
  border:1px solid rgba(74,63,55,0.15);
  box-shadow:0 4px 10px -4px rgba(74,63,55,0.3);
}

.palette-item small{
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* RSVP */

.rsvp-section{
  padding:40px 0 20px;
  border-top:1px solid var(--cream-deep);
  text-align:center;
}

.rsvp-sub{
  color:var(--ink-soft);
  max-width:420px;
  margin:0 auto 28px;
  line-height:1.5;
}

.rsvp-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:400px;
  margin:0 auto;
}

.rsvp-form input[type="text"],
.rsvp-form textarea{
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
  padding:12px 16px;
  border:1px solid var(--cream-deep);
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  resize:none;
}

.rsvp-form input[type="text"]:focus,
.rsvp-form textarea:focus{
  outline:none;
  border-color:var(--gold);
}

.rsvp-radio-group{
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
  background:var(--paper);
  border:1px solid var(--cream-deep);
  border-radius:10px;
  padding:14px 16px;
}

.rsvp-radio{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1rem;
  color:var(--ink);
  cursor:pointer;
}

.rsvp-radio input{
  accent-color:var(--gold);
  width:16px;
  height:16px;
}

.rsvp-submit{
  font-family:'Cormorant Garamond', serif;
  font-size:1.1rem;
  letter-spacing:.05em;
  padding:13px 20px;
  border:none;
  border-radius:30px;
  background:var(--gold);
  color:var(--paper);
  cursor:pointer;
  transition:transform .2s ease, opacity .2s ease;
}

.rsvp-submit:hover{
  opacity:.9;
  transform:translateY(-1px);
}

.rsvp-thanks{
  font-size:1.2rem;
  color:var(--ink);
  padding:30px 0;
}

.gift-note{
  max-width:420px;
  margin:32px auto 0;
  padding:20px 24px;
  background:var(--paper);
  border:1px solid var(--cream-deep);
  border-radius:14px;
}

.gift-note p{
  margin:0;
  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.5;
}

.contact-note{
  margin-top:24px;
  color:var(--ink-soft);
  font-size:.95rem;
}

.contact-note a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid var(--gold);
}

/* FOOTER */

.footer{
  text-align:center;
  padding:50px 0 10px;
  color:var(--ink-soft);
  font-size:.9rem;
  letter-spacing:.05em;
}

.footer-monogram{
  font-family:'Bad Script', cursive;
  font-size:2rem;
  color:var(--gold);
  margin-bottom:8px;
}

@media (max-width:420px){
  .countdown{gap:8px;}
  .countdown-item{min-width:64px; padding:12px 8px;}
  .countdown-num{font-size:1.4rem;}
}