*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --night:#07070e;--gold:#c9a96e;--gold2:#e8d5a8;--gold3:#b8944e;
  --cream:#faf6ee;--cream2:#f3ece0;--rose:#e8bebe;
  --txt-d:#2a2420;--txt-l:#eee8dd;
}
html,body{height:100%;overflow:hidden;touch-action:manipulation;-ms-touch-action:manipulation;overscroll-behavior:none}

/* ===== ENVELOPE INTRO ===== */
#envelopeIntro{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#faf6ee,#f3ece0 50%,#efe0c8);
}
.envelope{
  position:relative;
  width:clamp(260px,70vw,380px);
  height:clamp(180px,48vw,260px);
  perspective:800px;
}
.env-back{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#d4a854,#c9a96e,#b8944e);
  border-radius:6px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
}
.env-front{
  position:absolute;bottom:0;left:0;right:0;height:60%;
  background:linear-gradient(180deg,#c9a96e,#b8944e);
  clip-path:polygon(0 40%, 50% 0, 100% 40%, 100% 100%, 0 100%);
  border-radius:0 0 6px 6px;
  z-index:3;
}
.env-flap{
  position:absolute;top:0;left:0;right:0;height:65%;
  background:linear-gradient(180deg,#d4a854,#c9a96e);
  clip-path:polygon(0 0, 50% 100%, 100% 0);
  transform-origin:top center;
  z-index:4;
}
.env-card{
  position:absolute;left:8%;right:8%;top:10%;bottom:10%;
  background:var(--night);
  border-radius:4px;
  border:1px solid var(--gold3);
  display:flex;align-items:center;justify-content:center;
  z-index:1;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
  overflow:hidden;
}
.env-card-stars{
  position:absolute;inset:0;
  background:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,0.7),transparent),
    radial-gradient(1px 1px at 60% 70%,rgba(255,255,255,0.5),transparent),
    radial-gradient(1.2px 1.2px at 80% 20%,rgba(255,255,255,0.6),transparent),
    radial-gradient(1px 1px at 40% 80%,rgba(255,255,255,0.5),transparent),
    radial-gradient(1px 1px at 10% 60%,rgba(255,255,255,0.4),transparent),
    radial-gradient(1.2px 1.2px at 70% 40%,rgba(255,255,255,0.7),transparent),
    radial-gradient(1px 1px at 90% 85%,rgba(255,255,255,0.4),transparent),
    radial-gradient(1px 1px at 30% 15%,rgba(255,255,255,0.5),transparent),
    radial-gradient(1px 1px at 50% 50%,rgba(255,255,255,0.3),transparent),
    radial-gradient(1px 1px at 15% 90%,rgba(255,255,255,0.5),transparent);
  animation:envTwinkle1 2.5s ease-in-out infinite alternate;
}
.env-card-stars::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(1px 1px at 25% 45%,rgba(255,255,255,0.5),transparent),
    radial-gradient(1.2px 1.2px at 75% 15%,rgba(255,255,255,0.6),transparent),
    radial-gradient(1px 1px at 45% 65%,rgba(255,255,255,0.4),transparent),
    radial-gradient(1px 1px at 85% 55%,rgba(255,255,255,0.5),transparent),
    radial-gradient(1.2px 1.2px at 35% 90%,rgba(255,255,255,0.6),transparent),
    radial-gradient(1px 1px at 55% 25%,rgba(255,255,255,0.4),transparent),
    radial-gradient(1px 1px at 5% 75%,rgba(255,255,255,0.5),transparent),
    radial-gradient(1px 1px at 95% 35%,rgba(255,255,255,0.3),transparent);
  animation:envTwinkle2 3.2s ease-in-out infinite alternate-reverse;
}
@keyframes envTwinkle1{
  0%{opacity:0.4}
  100%{opacity:1}
}
@keyframes envTwinkle2{
  0%{opacity:0.3}
  100%{opacity:0.85}
}
.env-card-text{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:0.4rem;
}
.env-address{
  position:absolute;
  bottom:15%;left:50%;
  transform:translateX(-50%);
  z-index:3;
  font-family:'Great Vibes',cursive;
  font-size:clamp(1rem,3vw,1.5rem);
  color:#4a3c28;
  pointer-events:none;
  text-shadow:0 1px 2px rgba(255,255,255,0.3);
  text-align:center;
  width:80%;
  word-wrap:break-word;
  overflow-wrap:break-word;
  line-height:1.4;
}
.env-seal{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:clamp(36px,10vw,50px);height:clamp(36px,10vw,50px);
  background:radial-gradient(circle,#c0392b,#922b21);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#e8d5a8;font-size:clamp(14px,4vw,20px);
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
  z-index:5;
}
body{
  font-family:'Inter',sans-serif;
  background:var(--night);
  color:var(--txt-l);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* ===== FIXED LAYERS ===== */
#starCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}
#creamBg{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(160deg,#faf6ee,#f5ead8 50%,#efe0c8);
  opacity:0;
}
#petalBox{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.petal{
  position:absolute;top:-30px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  pointer-events:none;opacity:0;
}
#flash{
  position:fixed;inset:0;z-index:99;
  background:#fff;opacity:0;pointer-events:none;
}

/* MORPH HERO — main visual, above slides */
.morph-main{
  position:fixed;z-index:6;pointer-events:none;
  top:25%;left:50%;
  transform:translate(-50%,-50%);
  width:clamp(260px,55vw,420px);
  height:clamp(260px,55vw,420px);
  opacity:0;
  filter:drop-shadow(0 4px 30px rgba(201,169,110,0.25));
}
.morph-main svg{width:100%;height:100%}

/* ===== SLIDES ===== */
.slide{
  position:fixed;inset:0;z-index:5;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2rem;
  visibility:hidden;opacity:0;
}
.slide.slide-hero{
  justify-content:center;
  padding-top:52vh;
  padding-bottom:3vh;
}

/* ===== TYPOGRAPHY ===== */
.q{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  text-align:center;line-height:1.3;
  overflow-wrap:normal;
  word-break:keep-all;
}
.q-big{font-size:clamp(2.6rem,7.5vw,5.5rem);line-height:1.1}
.q-mid{font-size:clamp(2rem,5.5vw,3.8rem)}
.q-sm{font-size:clamp(1.5rem,3.5vw,2.4rem);font-style:italic;color:var(--gold2)}
.q-greet{
  font-size:clamp(1.6rem,4.5vw,2.8rem);
  font-style:italic;font-weight:400;
  color:var(--gold);
  margin-bottom:0.2rem;
  letter-spacing:1px;
}
.q em{color:var(--gold);font-weight:700;font-style:italic}

.char{display:inline-block;opacity:0;transform:translateY(15px);white-space:pre}

/* ===== BUTTONS ===== */
.btn-row{
  display:flex;gap:1.2rem;margin-top:2.5rem;
  flex-wrap:wrap;justify-content:center;
  opacity:0;
}
.btn{
  padding:0.95rem 2.8rem;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.2rem,3vw,1.6rem);
  font-weight:600;letter-spacing:1px;
  border-radius:50px;cursor:pointer;
  transition:all 0.3s ease;
  min-width:130px;text-align:center;
  border:2px solid var(--gold);
  -webkit-user-select:none;user-select:none;
}
.btn-fill{
  background:var(--gold);color:var(--night);
  animation:btnPulse 2.2s ease-in-out infinite;
  position:relative;overflow:hidden;
}
.btn-fill::after{
  content:'';position:absolute;
  top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);
  animation:btnShimmer 3s ease-in-out infinite;
}
.btn-fill:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 6px 25px rgba(201,169,110,0.4);animation:none}
.btn-fill:hover::after{animation:none;opacity:0}
.btn-ghost{
  background:transparent;color:var(--gold);
  animation:btnBreath 3s ease-in-out infinite;
}
.btn-ghost:hover{background:rgba(201,169,110,0.12);transform:translateY(-2px);animation:none}
.btn:active{transform:translateY(0)!important;animation:none!important}

@keyframes btnPulse{
  0%,100%{box-shadow:0 0 8px rgba(201,169,110,0.2)}
  50%{box-shadow:0 0 28px rgba(201,169,110,0.5),0 0 60px rgba(201,169,110,0.15)}
}
@keyframes btnShimmer{
  0%{left:-100%}
  60%,100%{left:100%}
}
@keyframes btnBreath{
  0%,100%{border-color:var(--gold);opacity:0.7}
  50%{border-color:var(--gold2);opacity:1}
}

/* ===== REVEAL ===== */
.names-block{
  position:fixed;
  top:25%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;
  align-items:center;
  z-index:4;
  pointer-events:none;
}
.names-floral{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:clamp(300px,85vw,560px);
  opacity:0;pointer-events:none;
  z-index:0;
  filter:saturate(0.6);
}
.names-hero{
  position:relative;z-index:1;
  width:clamp(300px,80vw,520px);
  opacity:0;
  filter:drop-shadow(0 2px 8px rgba(160,130,80,0.15));
}
.reveal-center{
  position:relative;z-index:8;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  text-align:center;
  width:100%;max-width:600px;
  padding-top:42vh;
}
.reveal-divider{
  width:clamp(70px,18vw,120px);
  height:clamp(14px,3vw,22px);
  object-fit:contain;
  margin:0.1rem 0;
  opacity:0;
  display:block;
}
.rev-name{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3.5rem,12vw,7rem);
  font-weight:700;color:var(--txt-d);
  line-height:1;opacity:0;
  white-space:nowrap;
  text-shadow:0 0 12px rgba(250,246,238,1),0 0 30px rgba(250,246,238,0.9),0 0 50px rgba(250,246,238,0.5);
}
.rev-amp{
  font-family:'Great Vibes',cursive;
  font-size:clamp(2rem,5vw,3.5rem);
  color:var(--gold);
  line-height:1;opacity:0;
  margin:0.1rem 0;
}
.rev-sub{
  font-family:'Inter',sans-serif;
  font-size:clamp(0.85rem,1.8vw,1.1rem);
  text-transform:uppercase;letter-spacing:6px;
  color:var(--gold3);font-weight:500;opacity:0;
  margin:0;
  background:rgba(250,246,238,0.95);
  padding:0.4rem 1.5rem;
  border-radius:30px;
}
.rev-type{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.2rem,2.8vw,1.7rem);
  font-weight:300;font-style:italic;
  color:#6a5d50;opacity:0;
  margin:0;
}
.text-cununie-big{
  width:clamp(170px,36vw,300px);
  height:auto;
  opacity:0;
  margin:0;
}
.rev-date{
  display:inline-block;
  padding:0.65rem 2.5rem;
  border:1.5px solid var(--gold);
  border-radius:50px;
  font-family:'Inter',sans-serif;
  font-size:clamp(1rem,2.2vw,1.3rem);
  letter-spacing:5px;
  text-transform:uppercase;
  color:var(--gold3);margin-top:0.3rem;opacity:0;
}

/* ===== DETAILS ===== */
.slide#sl-det{
  overflow:visible;
}
.slide#sl-reveal{
  z-index:9;
  justify-content:flex-start;
}
.det-wrap{
  display:flex;flex-wrap:wrap;gap:1.2rem;
  justify-content:center;width:100%;max-width:750px;
  margin-top:1rem;
}
.det-card{
  display:block;position:relative;
  flex:1 1 240px;max-width:320px;
  opacity:0;
  text-decoration:none;color:var(--txt-l);
  cursor:pointer;
  border-radius:16px;
  overflow:hidden;
  filter:drop-shadow(0 8px 25px rgba(160,130,80,0.2));
  transition:filter 0.5s;
  animation:cardFloat 4s ease-in-out infinite;
}
.det-card:nth-child(2){animation-delay:-2s}
.det-card:hover{
  filter:drop-shadow(0 14px 35px rgba(160,130,80,0.3));
  animation-play-state:paused;
}
@keyframes cardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.card-bg{width:100%;height:auto;display:block}
.card-text{
  position:absolute;bottom:0;left:0;right:0;
  padding:0.8rem 0.8rem 0.6rem;
  background:rgba(250,246,238,0.95);
  border-top:2px solid var(--gold);
  text-align:center;
}
.det-time{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,4.5vw,2.2rem);font-weight:700;color:var(--gold3);
  line-height:1;
  text-shadow:0 1px 2px rgba(184,148,78,0.2);
}
.det-event{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.05rem,2.8vw,1.25rem);font-weight:700;color:var(--txt-d);
  margin:0.15rem 0;
  text-transform:uppercase;
  letter-spacing:2px;
}
.det-loc{font-size:clamp(0.7rem,1.8vw,0.8rem);color:#555;line-height:1.3}

/* ===== CALENDAR ===== */
.cal-btn{
  display:inline-flex;align-items:center;gap:0.8rem;
  padding:1.1rem 2.8rem;
  background:var(--gold);color:var(--night);
  border:none;border-radius:60px;
  font-family:'Inter',sans-serif;
  font-size:1rem;font-weight:600;
  cursor:pointer;transition:all 0.35s;
  text-transform:uppercase;letter-spacing:3px;
  opacity:0;
  animation:btnPulse 2.2s ease-in-out infinite;
  position:relative;overflow:hidden;
}
.cal-btn::after{
  content:'';position:absolute;
  top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);
  animation:btnShimmer 3s ease-in-out infinite;
}
.cal-btn:hover{
  background:var(--gold2);transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(201,169,110,0.35);
  animation:none;
}
.cal-btn:hover::after{animation:none;opacity:0}
.cal-btn:active{transform:translateY(0)}
.cal-btn svg{width:20px;height:20px}

.cal-footer{
  position:absolute;
  bottom:1.5rem;left:0;right:0;
  text-align:center;
  pointer-events:none;
}
.foot-hearts{font-size:1.2rem;letter-spacing:10px;color:var(--rose);opacity:0}
.foot-copy{font-size:0.7rem;color:rgba(255,255,255,0.2);margin-top:0.6rem;letter-spacing:2px;opacity:0}
.confetto{position:fixed;pointer-events:none;z-index:98;border-radius:2px}

/* dark text for light bg slides */
.slide-light{color:var(--txt-d)}
.slide-light .q{color:var(--txt-d)}

@media(max-width:600px){
  .slide{padding:1.5rem 1rem}
  .slide.slide-hero{padding-top:45vh;padding-bottom:2vh}
  .btn{min-width:110px;padding:0.85rem 2rem}
  /* Details: cards stacked in column, smaller on mobile */
  .slide#sl-det{padding:0.6rem 0.8rem}
  #detT .rev-date{padding:0.35rem 1.2rem;font-size:0.75rem;letter-spacing:3px;margin-bottom:0.2rem}
  #detT .q-mid{font-size:1.3rem}
  .det-wrap{flex-direction:column;align-items:center;gap:0.5rem;margin-top:0.3rem}
  .det-card{width:clamp(180px,55vw,220px);max-width:none;border-radius:10px}
  .card-text{padding:0.4rem 0.5rem 0.3rem}
  .det-time{font-size:1.4rem}
  .det-event{font-size:0.95rem}
  .det-loc{font-size:0.7rem}
  /* Reveal */
  .reveal-center{padding-top:38vh}
  .names-hero{width:clamp(260px,78vw,420px)}
  .foot-hearts{margin-top:1rem!important}
  .foot-copy{margin-top:0.8rem}
}
@media(max-height:700px){
  /* Short viewports — tighten everything */
  .slide.slide-hero{padding-top:28vh;padding-bottom:3vh}
  .det-card{max-width:260px}
  .det-wrap{gap:0.6rem;margin-top:0.4rem}
  .q-mid{font-size:clamp(1.5rem,4vw,2.5rem)}
  .cal-btn{padding:0.8rem 2rem;font-size:0.85rem}
}