@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Jost:wght@300;400;500;600;700&display=swap');

/* =========================================================
   VARIABLES
========================================================= */

:root{
  --pink-1:#ffd9e6;
  --pink-2:#ffeef3;
  --pink-3:#fff6f9;

  --rose:#d6336c;
  --rose-soft:#ff8fab;

  --white:#fffbfc;
  --ink:#6b3346;
  --muted:#b57690;

  --line:rgba(214,51,108,.14);

  --maxw:460px;
}

/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;

  overflow:hidden;

  font-family:'Jost',sans-serif;
  color:var(--ink);

  background:var(--pink-2);

  -webkit-font-smoothing:antialiased;
}

body{
  overscroll-behavior:none;
}

button,
input,
textarea,
select{
  font-family:'Jost',sans-serif;
}

.script{
  font-family:'Great Vibes',cursive;
}

h1,
h2,
h3{
  margin:0;
  font-weight:500;
  color:var(--ink);
}

p{
  line-height:1.7;
  color:var(--muted);
  font-size:15px;
  margin:0 0 14px;
}

.lead{
  color:var(--ink);
  font-size:16px;
}

/* =========================================================
   SLIDE CONTAINER
========================================================= */

#slides{
  width:100%;
  height:100vh;   /* fallback cho trình duyệt chưa hỗ trợ svh */
  height:100svh;

  position:relative;

  overflow:hidden;
}

.slide{
  width:100%;
  height:100vh;   /* fallback cho trình duyệt chưa hỗ trợ svh */
  height:100svh;

  position:absolute;
  inset:0;

  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:40px 28px;

  opacity:0;
  visibility:hidden;

  transform:translateY(40px) scale(.985);

  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.22,.61,.36,1),
    visibility .55s;

  pointer-events:none;
}

.slide.active{
  opacity:1;
  visibility:visible;

  transform:translateY(0) scale(1);

  pointer-events:auto;
}

.slide.prev{
  transform:translateY(-40px) scale(.985);
}

/* backgrounds */

.tone-a{
  background:var(--pink-3);
}

.tone-b{
  background:
    linear-gradient(
      180deg,
      var(--pink-2),
      var(--pink-3)
    );
}

/* =========================================================
   SLIDE INDICATOR
========================================================= */

#slideDots{
  position:fixed;

  right:12px;
  top:50%;

  transform:translateY(-50%);

  z-index:100;

  display:flex;
  flex-direction:column;
  gap:7px;

  transition:opacity .4s;
}

.slide-dot{
  width:5px;
  height:5px;

  border-radius:10px;

  background:var(--rose-soft);

  opacity:.35;

  transition:
    height .35s ease,
    opacity .35s ease,
    transform .35s ease;
}

.slide-dot.active{
  height:20px;

  opacity:1;

  transform:scaleX(1.15);
}

/* Hide dots on envelope */

body.locked #slideDots{
  opacity:0;
  pointer-events:none;
}

/* =========================================================
   COVER
========================================================= */

#cover{
  align-items:center;
  text-align:center;

  background:
    linear-gradient(
      180deg,
      #ffc2d9 0%,
      var(--pink-2) 55%,
      var(--pink-3) 100%
    );
}

.eyebrow-caps{
  font-size:11px;

  letter-spacing:.3em;

  color:var(--muted);

  margin-bottom:14px;
}

.cover-title{
  font-size:52px;

  color:var(--rose);

  line-height:1;

  margin-bottom:18px;
}

.bow{
  font-size:20px;

  margin-bottom:26px;
}

.envelope{
  width:230px;
  height:150px;

  position:relative;

  margin-bottom:22px;

  filter:
    drop-shadow(
      0 14px 24px
      rgba(214,51,108,.18)
    );
}

.env-base{
  position:absolute;
  inset:0;

  background:var(--white);

  border-radius:14px;

  overflow:hidden;
}

.env-flap{
  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:
    linear-gradient(
      135deg,
      #ff9dbb,
      var(--rose-soft)
    );

  clip-path:
    polygon(
      0 0,
      100% 0,
      50% 62%
    );

  transition:
    transform .7s
    cubic-bezier(.6,0,.3,1);

  transform-origin:top center;

  z-index:2;
}

.env-tip{
  position:absolute;

  bottom:0;
  left:0;

  width:100%;
  height:100%;

  background:var(--rose-soft);

  clip-path:
    polygon(
      30% 100%,
      70% 100%,
      50% 76%
    );

  opacity:.9;
}

.env-seal{
  position:absolute;

  top:56%;
  left:50%;

  transform:
    translate(-50%,-50%);

  width:44px;
  height:44px;

  border-radius:50%;

  background:var(--white);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;

  box-shadow:
    0 6px 14px
    rgba(214,51,108,.25);

  z-index:4;
}

.env-to{
  position:absolute;

  bottom:20px;
  left:0;

  width:100%;

  text-align:center;

  font-size:12px;

  color:var(--muted);

  z-index:1;
}

.env-to b{
  color:var(--ink);
}

#cover.opened .env-flap{
  transform:rotateX(180deg);
}

.hint{
  font-size:12px;

  color:var(--muted);

  letter-spacing:.03em;

  animation:
    hintPulse 1.8s ease-in-out infinite;
}

@keyframes hintPulse{

  0%,100%{
    opacity:.5;
  }

  50%{
    opacity:1;
  }

}

/* =========================================================
   NAME GATE (trang nhập tên — chỉ hiện 1 lần)
========================================================= */

#nameGate{
  align-items:center;
  text-align:center;

  background:
    linear-gradient(
      180deg,
      #ffc2d9 0%,
      var(--pink-2) 55%,
      var(--pink-3) 100%
    );
}

.gate-icon{
  font-size:34px;

  margin-bottom:14px;
}

.gate-text{
  max-width:300px;

  margin:0 auto 26px;
}

.gate-form{
  width:100%;
  max-width:300px;

  margin:0 auto;

  display:flex;
  flex-direction:column;

  gap:12px;
}

.gate-input{
  width:100%;

  background:var(--white);

  border:
    1px solid var(--line);

  border-radius:12px;

  padding:14px 16px;

  color:var(--ink);

  font-size:15px;

  text-align:center;

  outline:none;
}

.gate-input:focus{
  border-color:var(--rose-soft);
}

.gate-btn{
  width:100%;

  padding:14px;

  border-radius:12px;

  border:none;

  background:
    linear-gradient(
      120deg,
      var(--rose),
      var(--rose-soft)
    );

  color:#fff;

  font-size:15px;

  cursor:pointer;

  box-shadow:
    0 10px 20px
    rgba(214,51,108,.25);

  transition:transform .15s ease;
}

.gate-btn:active{
  transform:scale(.97);
}

.gate-error{
  min-height:16px;

  margin-top:2px;

  font-size:12px;

  color:var(--rose);
}

/* =========================================================
   REVEAL
========================================================= */

#reveal{
  align-items:center;
  text-align:center;

  background:
    linear-gradient(
      180deg,
      #ffd3e2 0%,
      var(--pink-2) 60%,
      var(--pink-3) 100%
    );
}

#confettiLayer{
  position:absolute;

  inset:0;

  overflow:hidden;

  pointer-events:none;
}

.confetti{
  position:absolute;

  top:-20px;

  border-radius:2px;

  animation:
    confettiFall
    linear
    forwards;
}

@keyframes confettiFall{

  to{
    transform:
      translateY(115vh)
      rotate(var(--rot));

    opacity:.9;
  }

}

.reveal-eyebrow{
  font-size:11px;

  letter-spacing:.3em;

  color:var(--muted);

  margin-bottom:10px;

  z-index:2;
}

.reveal-title{
  font-size:46px;

  color:var(--rose);

  line-height:1;

  margin-bottom:10px;

  z-index:2;
}

.reveal-names{
  font-size:20px;

  color:var(--ink);

  margin-bottom:18px;

  z-index:2;
}

.invite-photos{
  display:flex;

  justify-content:center;

  gap:16px;

  margin:6px 0 22px;

  z-index:2;
}

.invite-photo{
  width:118px;
  height:148px;

  border-radius:16px;

  overflow:hidden;

  background:
    linear-gradient(
      160deg,
      var(--pink-1),
      var(--rose-soft)
    );

  border:4px solid var(--white);

  box-shadow:
    0 10px 22px
    rgba(214,51,108,.2);

  transform:rotate(-4deg);
}

.invite-photo:nth-child(2){
  transform:rotate(4deg);
}

.invite-photo img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;
}

.photo-stack{
  display:flex;

  justify-content:center;

  margin:
    6px 0 18px;

  z-index:2;
}

.photo-circle{
  width:96px;
  height:96px;

  border-radius:50%;

  border:4px solid var(--white);

  background:
    linear-gradient(
      160deg,
      var(--pink-1),
      var(--rose-soft)
    );

  box-shadow:
    0 10px 22px
    rgba(214,51,108,.22);

  position:relative;

  overflow:hidden;

  display:flex;

  align-items:center;
  justify-content:center;
}

.photo-circle:nth-child(2){
  margin-left:-22px;
}

.photo-circle svg{
  width:44px;
  height:44px;

  opacity:.85;
}

.photo-circle img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
}

.hat{
  position:absolute;

  top:-10px;
  left:50%;

  transform:
    translateX(-50%)
    rotate(-8deg);

  font-size:20px;

  z-index:4;
}

.reveal-date{
  font-size:13px;

  letter-spacing:.08em;

  color:var(--muted);

  z-index:2;
}

/* =========================================================
   TEXT
========================================================= */

.quote-mark{
  font-family:'Great Vibes',cursive;

  font-size:54px;

  color:var(--rose-soft);

  line-height:.6;

  margin-bottom:6px;

  display:block;
}

.kicker{
  font-size:12px;

  letter-spacing:.15em;

  color:var(--rose-soft);

  margin-bottom:8px;

  display:block;

  text-transform:uppercase;
}

.sec-title{
  font-size:25px;

  color:var(--ink);

  margin-bottom:18px;

  max-width:300px;
}

/* =========================================================
   INFO
========================================================= */

.info-row{
  display:flex;

  gap:16px;

  padding:18px 0;

  border-bottom:
    1px solid var(--line);

  align-items:flex-start;
}

.info-row:last-child{
  border-bottom:none;
}

.info-ico{
  width:34px;
  height:34px;

  border-radius:50%;

  background:var(--pink-1);

  display:flex;

  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.info-ico svg{
  width:16px;
  height:16px;
}

.info-row h3{
  font-size:16px;

  color:var(--ink);

  margin-bottom:4px;
}

.info-row p{
  margin:0;

  font-size:14px;
}

/* =========================================================
   CALENDAR
========================================================= */

.cal{
  background:var(--white);

  border-radius:18px;

  padding:20px;

  border:
    1px solid var(--line);
}

.cal-head{
  text-align:center;

  color:var(--rose);

  font-size:16px;

  margin-bottom:14px;

  font-weight:600;
}

.cal-grid{
  display:grid;

  grid-template-columns:
    repeat(7,1fr);

  gap:6px;

  text-align:center;

  font-size:12px;
}

.cal-grid .dow{
  color:var(--muted);

  font-size:11px;

  padding-bottom:4px;
}

.cal-grid .day{
  padding:8px 0;

  border-radius:8px;

  color:var(--ink);
}

.cal-grid .day.empty{
  visibility:hidden;
}

.cal-grid .day.today{
  background:
    linear-gradient(
      135deg,
      var(--rose),
      var(--rose-soft)
    );

  color:#fff;

  font-weight:700;
}

/* =========================================================
   MAP
========================================================= */

.map-frame{
  width:100%;

  height:220px;

  border-radius:18px;

  overflow:hidden;

  border:
    1px solid var(--line);
}

.map-frame iframe{
  width:100%;
  height:100%;

  border:0;
}

.addr{
  margin-top:14px;

  font-size:14px;

  color:var(--ink);
}

/* =========================================================
   WISHES
========================================================= */

.wish-list{
  display:flex;

  flex-direction:column;

  gap:10px;

  margin:18px 0;

  max-height:190px;

  overflow-y:auto;
}

.wish{
  background:var(--white);

  border:
    1px solid var(--line);

  border-radius:
    14px 14px 14px 4px;

  padding:10px 14px;

  font-size:13px;

  color:var(--ink);
}

.wish b{
  color:var(--rose);

  display:block;

  font-size:12px;

  margin-bottom:3px;
}

.wish-form{
  display:flex;

  flex-wrap:wrap;

  gap:8px;
}

.wish-form input{
  background:var(--white);

  border:
    1px solid var(--line);

  border-radius:10px;

  padding:12px 14px;

  color:var(--ink);

  font-size:14px;

  outline:none;
}

#wishInput{
  flex:1;

  min-width:0;
}

.wish-form button{
  width:48px;

  border-radius:10px;

  border:none;

  background:
    linear-gradient(
      120deg,
      var(--rose),
      var(--rose-soft)
    );

  color:#fff;

  cursor:pointer;
}

.wish-form button:disabled{
  opacity:.5;

  cursor:default;
}

.wish-status{
  min-height:16px;

  margin-top:8px;

  font-size:12px;

  color:var(--rose);

  text-align:center;
}

/* =========================================================
   QR CHUYỂN TIỀN
========================================================= */

.qr-note{
  text-align:center;

  font-size:13px;

  margin:2px 0 20px;
}

.qr-grid{
  display:flex;

  justify-content:center;

  gap:14px;
}

.qr-item{
  flex:1;

  max-width:150px;

  text-align:center;
}

.qr-img{
  background:var(--white);

  border:
    1px solid var(--line);

  border-radius:14px;

  padding:8px;

  box-shadow:
    0 8px 18px
    rgba(214,51,108,.14);
}

.qr-img img{
  width:100%;

  aspect-ratio:1/1;

  object-fit:contain;

  display:block;

  border-radius:8px;
}

.qr-name{
  margin-top:8px;

  font-size:13px;

  font-weight:600;

  color:var(--ink);
}

.qr-bank{
  font-size:11px;

  opacity:.75;
}

.qr-dl{
  margin-top:8px;

  width:100%;

  padding:7px 4px;

  border-radius:9px;

  border:
    1px solid var(--line);

  background:var(--white);

  color:var(--rose);

  font-family:inherit;

  font-size:11px;

  cursor:pointer;

  transition:.2s;
}

.qr-dl:active{
  transform:scale(.96);
}

#cover {
  /* Không đặt lại position ở đây — #cover đã kế thừa
     position:absolute; inset:0 từ .slide. Nếu ghi đè
     thành position:relative, #cover sẽ co lại theo
     nội dung thay vì phủ toàn màn hình, khiến vùng
     chạm thực tế bị lệch khỏi phong bì hiển thị trên
     iPhone (khu vực trống phía dưới không bắt được tap). */
  z-index: 100;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;

  touch-action: manipulation;

  user-select: none;
  -webkit-user-select: none;
}

#cover * {
  pointer-events: none;
}
/* =========================================================
   HEART
========================================================= */

.heart-btn{
  margin-top:18px;

  width:100%;

  padding:12px;

  border-radius:12px;

  border:
    1px solid var(--line);

  background:transparent;

  color:var(--rose);

  font-size:14px;

  cursor:pointer;
}

#heartLayer{
  position:fixed;

  inset:0;

  pointer-events:none;

  z-index:200;
}

.fly-heart{
  position:absolute;

  bottom:40px;

  font-size:20px;

  animation:
    fly 2.2s ease-out
    forwards;
}

@keyframes fly{

  0%{
    opacity:1;

    transform:
      translateY(0)
      scale(.8);
  }

  100%{
    opacity:0;

    transform:
      translateY(-70vh)
      scale(1.1)
      translateX(var(--drift));
  }

}

/* =========================================================
   MUSIC
========================================================= */

#musicBtn{
  position:fixed;

  bottom:22px;
  right:20px;

  z-index:150;

  width:46px;
  height:46px;

  border-radius:50%;

  background:var(--white);

  border:
    1px solid var(--line);

  box-shadow:
    0 8px 20px
    rgba(214,51,108,.22);

  display:flex;

  align-items:center;
  justify-content:center;

  cursor:pointer;

  opacity:0;

  transform:scale(.7);

  pointer-events:none;

  transition:
    opacity .5s ease,
    transform .5s ease;
}

#musicBtn.show{
  opacity:1;

  transform:scale(1);

  pointer-events:auto;
}

#musicBtn .bar{
  animation:
    eq .9s ease-in-out infinite;

  transform-origin:bottom;
}

#musicBtn.paused .bar{
  animation-play-state:paused;
}

.b1{
  animation-delay:0s;
}

.b2{
  animation-delay:.15s;
}

.b3{
  animation-delay:.3s;
}

@keyframes eq{

  0%,100%{
    transform:scaleY(.4);
  }

  50%{
    transform:scaleY(1);
  }

}

/* =========================================================
   FOOTER
========================================================= */

footer{
  text-align:center;
}

footer p{
  font-size:12px;
}

/* =========================================================
   MOBILE TWEAK
========================================================= */

@media(max-height:700px){

  .slide{
    padding-top:25px;
    padding-bottom:25px;
  }

  .cover-title{
    font-size:45px;
  }

  .envelope{
    transform:scale(.88);
    margin-top:-5px;
    margin-bottom:5px;
  }

  .photo-circle{
    width:82px;
    height:82px;
  }

  .map-frame{
    height:180px;
  }

  .sec-title{
    font-size:22px;
  }

}