*{ box-sizing:border-box; }

/* Hide utility */
.hidden{ display:none !important; }

:root{
  --bg1:#140326;
  --bg2:#3b1a7a;
  --bg3:#7c3aed;

  --paper:#fffaf3;
  --ink:#2f2545;
  --muted:#6b7280;
}

body{
  margin:0;
  min-height:100vh;
  font-family:"Poppins", Arial, sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(216,180,254,0.75), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(168,85,247,0.55), transparent 50%),
    linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
  background-attachment:fixed;
  color:white;
}

.wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 16px;
}

.stage{
  width:min(900px, 96vw);
  text-align:center;
}

/* ===================== */
/* TOP SECTION */
/* ===================== */

.topTitle{
  font-family:"Playfair Display", serif;
  font-size:44px;
  margin:0 0 8px;
}

.accent{ color:#d8b4fe; }

.topSub{
  margin:0 0 24px;
  opacity:0.85;
}

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

.envelopeWrap{
  display:grid;
  gap:12px;
  place-items:center;
}

.envelope{
  width:320px;
  height:210px;
  position:relative;
  border-radius:18px;
  overflow:hidden;
  animation: floaty 4.5s ease-in-out infinite;
}

@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

.shadow{
  position:absolute;
  inset:auto 0 -18px 0;
  height:30px;
  background: rgba(0,0,0,0.25);
  filter: blur(14px);
}

.front{
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,240,255,0.85));
  border:1px solid rgba(255,255,255,0.45);
  border-radius:18px;
}

.flap{
  position:absolute;
  top:-2px;
  left:0;
  width:100%;
  height:70%;
  background: linear-gradient(135deg, rgba(216,180,254,0.95), rgba(168,85,247,0.75));
  clip-path: polygon(0 0, 100% 0, 50% 70%);
  transform-origin: top;
  transform: rotateX(0deg);
  transition: transform 0.8s ease;
}

.opened .flap{
  transform: rotateX(180deg);
}

.seal{
  position:absolute;
  left:50%;
  top:52%;
  transform: translate(-50%, -50%);
  width:58px;
  height:58px;
  border-radius:999px;
  background: rgba(124,58,237,0.25);
  border:1px solid rgba(255,255,255,0.55);
  display:grid;
  place-items:center;
  font-size:22px;
  backdrop-filter: blur(8px);
}

/* Buttons */
.openBtn, .laterBtn{
  border:none;
  cursor:pointer;
  padding:12px 16px;
  border-radius:14px;
  font-weight:800;
  font-size:15px;
  transition: transform 0.12s ease, filter 0.2s ease;
}

.openBtn{
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color:white;
  box-shadow: 0 16px 30px rgba(124,58,237,0.35);
}

.openBtn:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.laterBtn{
  background: rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  color:white;
}

.laterBtn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.tiny{
  font-size:12px;
  opacity:0.8;
  margin:8px 0 0;
}

/* ===================== */
/* LETTER */
/* ===================== */

.paper{
  width:min(760px, 96vw);
  background: rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:28px;
  padding:18px;
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
  opacity:1;
}

#main.show .paper{
  animation: paperIn 0.85s ease forwards;
}

@keyframes paperIn{
  0%   { transform: translateY(30px) scale(0.98); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.paperHead{
  background: var(--paper);
  color: var(--ink);
  border-radius:20px;
  padding:18px 18px 12px;
  text-align:left;
  position:relative;
  border:1px solid rgba(0,0,0,0.06);
}

.stamp{
  position:absolute;
  right:14px;
  top:14px;
  width:44px;
  height:44px;
  border-radius:12px;
  background: rgba(124,58,237,0.18);
  display:grid;
  place-items:center;
  font-size:18px;
}

.paperTitle{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size:30px;
  color:#3c1d75;
}

.paperHint{
  margin:6px 0 0;
  color: var(--muted);
  font-size:12px;
}

.paperBody{
  margin-top:12px;
  background: var(--paper);
  color: var(--ink);
  border-radius:20px;
  padding:22px;
  height:360px;
  overflow:auto;
  text-align:left;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.03);
}

.paperMiniTitle{
  margin:0 0 12px;
  text-align:center;
  font-family:"Playfair Display", serif;
  font-size:24px;
  color:#3c1d75;
}

/* Handwritten text */

.hand{
  font-family:"Petit Formal Script", cursive;
  font-size:20px;
  line-height:1.85;
  margin:0 0 18px;
  color: var(--ink);
  letter-spacing:0.3px;
}

/* Signature */

.sign{
  font-family:"Great Vibes", cursive;
  font-size:34px;
  margin-top:16px;
  color:#4b2c83;
}

/* Hug section */

.hugEnd{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed rgba(124,58,237,0.35);
}

.tinyInk{
  font-size: 14px;
  opacity: 0.9;
  margin-top: 10px;
}

/* ===================== */
/* SLIDESHOW */
/* ===================== */

.slideshow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:20px 0;
}

.slideFrame{
  width:280px;
  max-width:90%;
  height:360px;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

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

.slideBtn{
  border:none;
  background:#f3e8ff;
  color:#4b2c83;
  padding:12px 16px;
  border-radius:999px;
  cursor:pointer;
  font-size:20px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition: all 0.2s ease;
}

.slideBtn:hover{
  background:#e9d5ff;
  transform:scale(1.05);
}

/* ===================== */
/* CINEMATIC SLIDESHOW   */
/* ===================== */

.cinematicShow{
  position:relative;
}

.cinematicFrame{
  position:relative;
}

.heartsOverlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:2;
  border-radius:18px;
}

.fadeZoom{
  opacity:1;
  transform:scale(1);
}

.activeFadeZoom{
  animation: photoFadeZoom 3s ease forwards;
}

@keyframes photoFadeZoom{
  0%{
    opacity:0.25;
    transform:scale(1);
  }
  20%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:scale(1.08);
  }
}

.memoryHeart{
  position:absolute;
  bottom:-20px;
  opacity:0.9;
  animation: memoryFloat linear forwards;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.15));
}

@keyframes memoryFloat{
  0%{
    transform:translateY(0) scale(0.8);
    opacity:0;
  }
  15%{
    opacity:1;
  }
  100%{
    transform:translateY(-260px) scale(1.2);
    opacity:0;
  }
}

/* ===================== */
/* BUTTONS */
/* ===================== */

.paperBtns{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  margin-top:14px;
}

.tabBtn{
  border:none;
  padding:14px 12px;
  border-radius:16px;
  font-weight:600;
  cursor:pointer;
  background: #f3e8ff;
  border:1px solid rgba(124,58,237,0.25);
  color:#4b2c83;
  font-family:"Petit Formal Script", cursive;
  font-size:18px;
  transition: all 0.2s ease;
}

.tabBtn:hover{
  background:#e9d5ff;
  transform: translateY(-2px);
}

.credit{
  margin-top:12px;
  font-size:12px;
  opacity:0.85;
}

.center{ text-align:center; }

/* ===================== */
/* HUG ANIMATION */
/* ===================== */

.kissArea{
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}

.kissEmoji{
  font-size:58px;
  cursor:pointer;
  animation: kissPop 1.2s ease forwards;
}

@keyframes kissPop{
  0%   { transform: scale(0.6); opacity: 0; }
  40%  { transform: scale(1.2); opacity: 1; }
  70%  { transform: scale(1); }
  100% { transform: scale(0.85); opacity: 0; }
}

.heart{
  position:absolute;
  font-size:20px;
  animation: floatUp 1.8s ease forwards;
}

@keyframes floatUp{
  0%{ transform: translateY(0) scale(0.8); opacity: 1; }
  100%{ transform: translateY(-90px) scale(1.4); opacity: 0; }
}

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

@media (max-width: 520px){

  .topTitle{ font-size:34px; }

  .envelope{ width:290px; }

  .paperBody{ height:320px; }

  .paperBtns{ grid-template-columns: 1fr; }

  .hand{ font-size:18px; }

  .sign{ font-size:32px; }

  .slideshow{ gap:8px; }

  .slideFrame{
    width:220px;
    height:300px;
  }

  .slideBtn{
    padding:10px 12px;
    font-size:18px;
  }

  .memoryHeart{
    font-size:16px !important;
  }
}