*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.page{display:none}
.page.is-active{display:block;animation:fadeIn .6s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ================= PAGE 1 : ENVELOPE ================= */
#page-envelope{position:fixed;inset:0;overflow:hidden;background:#e8e6e2}
.stage{
  position:absolute;left:50%;top:50%;
  width:max(100vw, calc(100vh * 1568 / 788));
  aspect-ratio:1568/788;
  transform:translate(-50%,-50%);
  container-type:size;
}
.envelope{position:absolute;inset:0;width:100%;height:100%}
.world-map{
  position:absolute;left:24.1%;top:68.3%;width:49.9%;
  filter:drop-shadow(-1px -1px 0 rgba(255,255,255,.9)) drop-shadow(1px 1.5px 1px rgba(110,95,70,.35));
  opacity:.95;pointer-events:none;
  clip-path:inset(0 4% 0 4%);
}
.journey{
  position:absolute;left:0;right:0;top:9.6%;
  font:500 2.25cqw/1.08 "Cormorant Garamond",serif;
  color:#1b1a19;text-align:center;letter-spacing:.01em;
}
.env-names{
  position:absolute;left:0;right:0;top:35.5%;
  font:400 min(7cqw, 22vw)/1 "Herr Von Muellerhoff",cursive;
  color:#51463e;text-align:center;white-space:nowrap;
}
.seal-link{position:absolute;left:44.75%;top:53.3%;width:9.6%;height:23.6%;cursor:pointer;transition:transform .25s ease,filter .25s ease;-webkit-tap-highlight-color:transparent}
.seal-link:hover,.seal-link:focus-visible{transform:scale(1.04);filter:brightness(1.03)}
.seal{display:block;width:100%;height:100%;overflow:visible}

/* envelope opening */
.env-flap{overflow:visible}
.flap-layer{position:absolute;inset:0;transform-origin:50% 0;transform:perspective(2200px) rotateX(0deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform 2s cubic-bezier(.55,.05,.35,1) .45s}
.env-card{
  position:absolute;left:50%;top:72cqh;height:62cqh;aspect-ratio:.72;max-width:88vw;
  transform:translateX(-50%);background:#fbfaf7;padding:1.4cqh;
  display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(80,60,30,.2);
  transition:top 1.7s cubic-bezier(.25,.7,.3,1) 2.2s,transform 1s ease;
}
.env-card img{display:block;width:100%;flex:1 1 auto;min-height:0;object-fit:cover}
.env-card-text{display:flex;flex-direction:column;align-items:center;padding:2cqh 0 1cqh;color:#204a86;text-align:center}
.ec-head{display:flex;flex-direction:column;align-items:stretch;width:max-content}
.ec-std{font:400 4.6cqh/1.1 "Gilda Display",serif;letter-spacing:.01em}
.ec-dash{display:block;height:2px;border-radius:2px;background:linear-gradient(90deg,#d9b56a,#f3dc9c 50%,#c99a4c);margin:.9cqh 0}
.ec-date{font:500 3cqh/1 "Cormorant SC",serif;margin-top:1cqh;letter-spacing:.02em}
#page-envelope.is-opening .seal-link{transform:scale(.85);opacity:0;pointer-events:none;transition:transform .45s ease,opacity .45s ease}
#page-envelope.is-opening .flap-layer{transform:perspective(2200px) rotateX(180deg)}
#page-envelope.is-opening .env-card{top:5cqh}
#page-envelope.is-leaving{animation:fadeOut .7s ease both}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
#page-envelope.is-leaving .env-card{transform:translateX(-50%) scale(1.2)}
@media (prefers-reduced-motion:reduce){.flap-layer,.env-card{transition:none}}

/* ================= PAGE 2 : INVITATION ================= */
#page-invitation{
  --u:min(100vw, 540px);           /* width of the centre column  */
  --hu:min(540px, 100vw / 2.1);    /* scale of the save-the-date row */
  --hshift:0px;
  overflow-x:hidden;
}
section{position:relative;overflow:hidden}
.bg{position:absolute;inset:0;background-size:cover;background-position:center}
.bg.blur{filter:blur(6px);inset:-12px}
.bg.fade::after{content:"";position:absolute;inset:0;background:#fff;opacity:var(--fade,.35)}
.final .bg.fade{--fade:.45}

/* --- Save the date --- */
.hero{height:calc(var(--hu) * 1.85)}
.hero-photo{
  position:absolute;top:0;height:100%;
  left:calc(50% + var(--hshift) - var(--hu) * .79);width:calc(var(--hu) * 1.11);
  object-fit:cover;
}
.hero-text{
  position:absolute;top:0;bottom:0;right:0;
  left:calc(50% + var(--hshift) + var(--hu) * .32);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 calc(var(--hu) * .04);
  color:#204a86;text-align:center;
}
.std-block{display:flex;flex-direction:column;align-items:stretch;width:max-content}
.gold-dash{display:block;width:auto;height:max(2px, calc(var(--hu)*.006));border-radius:2px;background:linear-gradient(90deg,#d9b56a,#f3dc9c 50%,#c99a4c);margin:calc(var(--hu)*.045) 0}
.std{font:400 calc(var(--hu)*.155)/1.12 "Gilda Display",serif;letter-spacing:.01em}
.std-date{font:500 calc(var(--hu)*.118)/1 "Cormorant SC",serif;margin-top:calc(var(--hu)*.07);letter-spacing:.02em}
.std-names{font:400 calc(var(--hu)*.17)/1 "Pinyon Script",cursive;margin-top:calc(var(--hu)*.07);white-space:nowrap}

.yt-player{position:fixed;left:0;bottom:0;width:200px;height:200px;opacity:0;pointer-events:none;z-index:-1}

/* --- Centre-column panels --- */
.panel .card{
  position:relative;margin:0 auto;width:var(--u);
  background-size:cover;background-position:center;text-align:center;
}
.panel .card p{position:absolute;left:0;right:0}
.passport .card{height:calc(var(--u) * 2.04)}
.passport-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.countdown .card,.final .card{height:calc(var(--u) * 1.92)}

/* passport */
.pack{top:calc(var(--u)*1.655);font:500 calc(var(--u)*.06)/1 "Cormorant Garamond",serif;color:#26304d;letter-spacing:-.01em}
.married-in{top:calc(var(--u)*1.735);font:400 calc(var(--u)*.112)/1 "Ms Madi",cursive;color:#383533;letter-spacing:.03em}
.armenia{top:calc(var(--u)*1.895);font:500 calc(var(--u)*.06)/1 "Cormorant Garamond",serif;color:#2b2a35;letter-spacing:.28em;padding-left:.28em}

/* countdown */
.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.trail-line{fill:none;stroke:#cfae74;stroke-width:1.3;opacity:.85}
.cd-the{top:calc(var(--u)*.03);font:400 calc(var(--u)*.2)/1 "Mrs Saint Delafield","Herr Von Muellerhoff",cursive;color:#3a3836;transform:translateX(calc(var(--u)*-.17))}
.cd-the{font-family:"Herr Von Muellerhoff",cursive}
.cd-word{top:calc(var(--u)*.188);font:400 calc(var(--u)*.056)/1 "Cormorant Garamond",serif;color:#3c3b3a;letter-spacing:.2em;padding-left:.2em}
.cd-ido{top:calc(var(--u)*.255);font:400 calc(var(--u)*.135)/1 "Great Vibes",cursive;color:#b48a4f}
.timer{
  position:absolute;left:0;right:0;top:calc(var(--u)*.455);
  display:flex;justify-content:center;align-items:flex-start;gap:calc(var(--u)*.022);
  font-family:Tinos,"Times New Roman",serif;color:#111;
}
.timer .unit{display:flex;flex-direction:column;align-items:center}
.timer .unit span,.timer .colon{font-size:calc(var(--u)*.128);line-height:1}
.timer .unit small{font-size:calc(var(--u)*.026);color:#444;margin-top:calc(var(--u)*.03);letter-spacing:.01em}
.formal{top:calc(var(--u)*.99);font:400 calc(var(--u)*.042)/1 "Cormorant Garamond",serif;color:#5e5c5a;letter-spacing:.005em}
.click-below{top:calc(var(--u)*1.1);font:400 calc(var(--u)*.04)/1 "Cormorant Garamond",serif;color:#6b6865}
.mail-btn{
  position:absolute;left:12.5%;right:12.5%;top:calc(var(--u)*1.165);height:calc(var(--u)*.097);
  display:grid;place-items:center;border-radius:999px;
  background:linear-gradient(180deg,#f3dcb0 0%,#dcb67a 45%,#c99a5a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 4px rgba(140,95,40,.35),0 2px 4px rgba(120,90,50,.3);
  font:700 calc(var(--u)*.031)/1 "Cormorant SC",serif;color:#3b2d1a;letter-spacing:.17em;
  transition:filter .2s,transform .2s;
}
.mail-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cant-wait{top:calc(var(--u)*1.42);font:400 calc(var(--u)*.108)/1.22 "Ms Madi",cursive;color:#3b3a39}

/* final */
.adventure{top:calc(var(--u)*.17);font:400 calc(var(--u)*.112)/1.05 "Hurricane",cursive;color:#7c5531}
.go-back{
  position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--u)*1.705);
  font:800 calc(var(--u)*.04)/1 "Playfair Display",serif;color:#fff;letter-spacing:-.03em;
  padding:6px 10px;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.25);
}
.go-back:hover{opacity:.75}

@media (max-width:1100px){#page-invitation{--hshift:calc(var(--hu) * -.225)}}
@media (max-width:600px){#page-invitation{--hu:calc(100vw / 2.2);--hshift:calc(var(--hu) * -.27)}}