* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink: #ff4f91;
  --deep: #bd2e69;
  --ink: #6f3b52;
  --paper: #fffaf2;
}

html, body { min-height: 100%; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Nunito", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.95), transparent 24%),
    radial-gradient(circle at 85% 24%, rgba(255,255,255,.48), transparent 20%),
    linear-gradient(135deg, #ffc8df 0%, #ffdff0 46%, #f7b5d3 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.24) 50%, transparent 70%);
  animation: sheen 8s ease-in-out infinite;
}

.ambient {
  position: fixed;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  filter: blur(65px);
  opacity: .35;
  pointer-events: none;
}
.ambient-a { background: #fff; left: -170px; top: 25%; }
.ambient-b { background: #ff75ae; right: -160px; bottom: 0; }

.scene { min-height: 100vh; position: relative; z-index: 3; }

/* ---------- FLOATING DECOR ---------- */
.float-layer, .sparkle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Layer depan: love tetap terlihat di atas amplop, kertas, dan kartu */
  z-index: 24;
}
.sparkle-layer { z-index: 23; }

.float-heart {
  position: absolute;
  bottom: -80px;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  opacity: var(--opacity);
  animation: floatUp var(--duration) linear var(--delay) infinite;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 10px rgba(190, 45, 103, .14));
}
.float-heart::before {
  content: "♥";
  display: block;
  color: #ff5e9d;
  font-size: var(--size);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.55), 0 7px 13px rgba(199,49,108,.14);
}
.float-heart.bubble {
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  box-shadow: inset 4px 4px 8px rgba(255,255,255,.5), 0 5px 20px rgba(255,95,155,.1);
}
.float-heart.bubble::before { content: "♡"; color: rgba(255,88,151,.55); text-align: center; }

.sparkle {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--size);
  height: var(--size);
  opacity: var(--opacity);
  animation: twinkle var(--duration) ease-in-out var(--delay) infinite;
}
.sparkle::before, .sparkle::after { content: ""; position: absolute; background: white; border-radius: 99px; }
.sparkle::before { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }
.sparkle::after { height: 2px; width: 100%; top: 50%; transform: translateY(-50%); }

/* ---------- INTRO ---------- */
.intro-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 30px 18px;
  transition: opacity .65s ease, transform .65s ease;
}
.intro-screen.hide { opacity: 0; transform: scale(1.04) translateY(-20px); pointer-events: none; }

.intro-card {
  width: min(100%, 660px);
  position: relative;
  padding: 58px 28px 36px;
  text-align: center;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.98);
  border-radius: 42px;
  box-shadow: 0 35px 100px rgba(164,47,96,.2), inset 0 0 0 1px rgba(255,255,255,.45);
  backdrop-filter: blur(15px);
  animation: cardIn .9s cubic-bezier(.2,.8,.2,1);
}
.intro-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,111,165,.18);
  border-radius: 34px;
  pointer-events: none;
}
.mini-bow {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 48px;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(135deg,#ff78ad,#d82f73);
  color: white;
  font-size: 29px;
  line-height: 45px;
  box-shadow: 0 12px 25px rgba(210,47,112,.25);
}
.mini-bow::before,.mini-bow::after { content:""; position:absolute; top:22px; width:40px; height:34px; background:linear-gradient(135deg,#ff78ad,#d82f73); z-index:-1; }
.mini-bow::before { left:-25px; clip-path:polygon(100% 0,0 18%,70% 100%); }
.mini-bow::after { right:-25px; clip-path:polygon(0 0,100% 18%,30% 100%); }
.intro-heart {
  width: 82px;
  height: 82px;
  margin: 0 auto 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ef4384;
  font-size: 49px;
  background: linear-gradient(145deg,#fff5fa,#ffe0ec);
  box-shadow: 0 15px 32px rgba(198,48,104,.14), inset 0 0 0 1px white;
  animation: heartbeat 1.7s infinite;
}
.small-kicker { font-size: 11px; letter-spacing: 3px; font-weight: 800; color: #c75b84; }
.intro-card h1 {
  margin-top: 12px;
  font-family: "Caveat", cursive;
  font-size: clamp(50px, 9vw, 74px);
  line-height: .96;
  color: #a02c61;
}
.intro-card h1 span { color: #e43d7b; }
.intro-card h1 i { font-style: normal; font-size: .48em; vertical-align: middle; }
.intro-subtitle { margin-top: 20px; color:#966278; line-height:1.75; font-size:14px; }
.open-btn {
  position: relative;
  margin-top: 28px;
  border: 0;
  padding: 16px 42px;
  min-width: 190px;
  border-radius: 999px;
  cursor: pointer;
  color: white;
  background: linear-gradient(135deg,#ff65a3,#d82f72);
  font: 800 17px "Nunito",sans-serif;
  box-shadow: 0 16px 35px rgba(210,47,112,.28), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.open-btn b { margin-left: 8px; }
.open-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow:0 20px 42px rgba(210,47,112,.34); }
.open-btn:active { transform: translateY(0) scale(.98); }
.tap-hint { margin-top: 13px; color:#b18396; font-size:11px; font-style:italic; }

/* ---------- LETTER SCENE ---------- */
.letter-scene {
  min-height: 100vh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 16px 45px;
  opacity: 0;
}
.letter-scene.show { display:flex; animation: sceneIn .7s ease forwards; }
.scene-title {
  font-family: "Caveat", cursive;
  font-size: clamp(25px,5vw,37px);
  color:#a42d63;
  margin-bottom: 25px;
  opacity: .95;
}

.envelope-wrap {
  width: min(92vw, 720px);
  height: min(75vw, 490px);
  min-height: 330px;
  position: relative;
  perspective: 1400px;
}
.envelope-shadow {
  position:absolute;
  left:10%; right:10%; bottom:3%; height:48px;
  border-radius:50%;
  background:rgba(129,37,74,.18);
  filter:blur(18px);
  transform:scaleX(.88);
}
.envelope {
  position:absolute;
  left:50%; top:50%;
  width:min(86vw, 620px);
  height:min(56vw, 400px);
  min-height:250px;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
}
.envelope-back, .envelope-pocket, .envelope-front-left, .envelope-front-right, .envelope-flap {
  position:absolute; inset:0; border-radius:18px; overflow:hidden;
}
.envelope-back {
  background:linear-gradient(145deg,#ffd4e5,#ffbfd8);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 25px 55px rgba(164,47,96,.22);
}
.envelope-back::after {
  content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.55); border-radius:13px;
}
.envelope-pocket {
  z-index:4;
  background:linear-gradient(145deg,#ffb3d1,#ff8fba);
  clip-path:polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
  box-shadow:0 -4px 15px rgba(170,42,91,.08);
}
.envelope-front-left {
  z-index:5;
  background:linear-gradient(135deg,#ffb8d4,#ff9fc5);
  clip-path:polygon(0 0,50% 54%,0 100%);
}
.envelope-front-right {
  z-index:5;
  background:linear-gradient(225deg,#ffb8d4,#ff9fc5);
  clip-path:polygon(100% 0,50% 54%,100% 100%);
}
.envelope-flap {
  z-index:8;
  transform-origin: top center;
  background:linear-gradient(180deg,#ff9dc5,#ff78ad);
  clip-path:polygon(0 0,100% 0,50% 67%);
  backface-visibility:hidden;
  transition:transform 1.15s cubic-bezier(.2,.8,.2,1), z-index 0s linear .6s;
  transform-style:preserve-3d;
}
.envelope.open .envelope-flap {
  transform:rotateX(180deg);
  z-index:2;
}
.seal {
  position:absolute;
  z-index:10;
  left:50%; top:42%;
  transform:translate(-50%,-50%);
  width:66px; height:66px;
  display:grid; place-items:center;
  border-radius:50%;
  color:white;
  font-size:30px;
  background:radial-gradient(circle at 35% 30%,#ff94bc,#d52e71 70%);
  border:4px solid rgba(255,255,255,.55);
  box-shadow:0 9px 22px rgba(174,38,89,.25);
  transition:opacity .25s, transform .4s;
}
.envelope.open .seal { opacity:0; transform:translate(-50%,-50%) scale(.5); }

/* ---------- PAPER ---------- */
.paper {
  position:absolute;
  z-index:3;
  left:8%; right:8%;
  top:7%;
  height:86%;
  border-radius:7px;
  background:
    linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)),
    repeating-linear-gradient(0deg, rgba(166,125,87,.035) 0, rgba(166,125,87,.035) 1px, transparent 1px, transparent 27px),
    var(--paper);
  box-shadow:0 9px 25px rgba(101,46,59,.18);
  transform:translateY(48%) scale(.96);
  opacity:.96;
  overflow:hidden;
  transition:transform 1.25s cubic-bezier(.2,.82,.2,1) .42s, height 1.2s ease .42s, top 1.2s ease .42s, z-index 0s linear 1.1s;
}
.paper::before { content:""; position:absolute; inset:0; opacity:.25; background:radial-gradient(circle at 20% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 70%,#d3b79b 0 1px,transparent 2px); background-size:45px 45px,55px 55px; pointer-events:none; }
.envelope.open .paper {
  z-index:7;
  top:-92%;
  height:184%;
  transform:translateY(0) scale(1);
}
.paper-inner { position:relative; z-index:1; height:100%; overflow:auto; padding:34px 34px 30px; scrollbar-width:thin; }
.paper-top { text-align:center; color:#bd5a7e; font-size:11px; letter-spacing:2.2px; font-weight:800; }
.paper-divider { display:flex; align-items:center; gap:12px; justify-content:center; color:#df7c9d; margin:9px 0 12px; }
.paper-divider::before,.paper-divider::after { content:""; height:1px; width:80px; background:linear-gradient(90deg,transparent,#e7a4b9); }
.paper-divider::after { background:linear-gradient(90deg,#e7a4b9,transparent); }
.paper-photo-wrap { width:84px; height:84px; margin:0 auto 8px; padding:4px; border-radius:50%; background:linear-gradient(135deg,#ff83b4,#d94378); }
.paper-photo-wrap img { width:100%; height:100%; object-fit:cover; border-radius:50%; border:3px solid white; display:block; }
.paper h2 { text-align:center; font:700 38px/1 "Caveat",cursive; color:#a12e61; }
.prayer { margin-top:15px; text-align:left; font:500 16px/1.72 "Caveat",cursive; color:#674957; }
.prayer p + p { margin-top:10px; }
.prayer strong { color:#a62f62; }
.final-prayer { text-align:center; color:#b7336b; font-size:22px; line-height:1.35; margin-top:17px !important; }
.signature { text-align:center; margin-top:16px; font:600 22px "Caveat",cursive; color:#b85a7c; }
.after-hint { margin-top:22px; color:#9f6680; font-size:12px; opacity:0; transform:translateY(10px); transition:opacity .6s ease 1.8s, transform .6s ease 1.8s; }
.letter-scene.revealed .after-hint { opacity:1; transform:translateY(0); }

.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,30px); opacity:0; z-index:50; padding:10px 16px; border-radius:999px; color:white; background:rgba(91,38,61,.86); font-size:12px; pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }

.music-btn {
  position:fixed; top:18px; right:18px; z-index:30;
  border:1px solid rgba(255,255,255,.9); background:linear-gradient(135deg,#ff5b9b,#d82d72); color:white;
  border-radius:999px; padding:10px 15px 10px 11px; display:flex; align-items:center; gap:7px;
  font:800 12px "Nunito",sans-serif; cursor:pointer; box-shadow:0 12px 30px rgba(190,40,99,.25); transition:.2s;
}
.music-btn:hover { transform:translateY(-2px); }
.music-icon { font-size:23px; line-height:1; animation:musicPulse 1s ease-in-out infinite; }
.music-btn.playing .music-icon { animation:musicPulse .55s ease-in-out infinite alternate; }

@keyframes cardIn { from {opacity:0; transform:translateY(30px) scale(.96)} to {opacity:1; transform:none} }
@keyframes sceneIn { from {opacity:0} to {opacity:1} }
@keyframes sheen { 0%,100% {transform:translateX(-20%);opacity:.3} 50% {transform:translateX(20%);opacity:.7} }
@keyframes heartbeat { 0%,100% {transform:scale(1)} 14% {transform:scale(1.14)} 28% {transform:scale(1)} }
@keyframes musicPulse { from {transform:rotate(-7deg) scale(.96)} to {transform:rotate(7deg) scale(1.06)} }
@keyframes floatUp { 0% {transform:translate3d(0,0,0) rotate(0) scale(.7);opacity:0} 10% {opacity:var(--opacity)} 50% {transform:translate3d(var(--drift),-55vh,0) rotate(90deg) scale(1)} 100% {transform:translate3d(calc(var(--drift)*-1),-125vh,0) rotate(220deg) scale(.85);opacity:0} }
@keyframes twinkle { 0%,100% {transform:scale(.3) rotate(0);opacity:.15} 50% {transform:scale(1.2) rotate(45deg);opacity:.9} }

@media (max-width: 600px) {
  /* Mobile: jangan pusatkan surat terlalu tinggi. Setelah amplop dibuka,
     halaman boleh discroll sehingga bagian atas kertas tidak terpotong. */
  html, body { min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  .float-layer, .sparkle-layer { z-index: 24; }
  .float-heart { filter: drop-shadow(0 5px 9px rgba(190, 45, 103, .22)); }
  .music-btn { top:12px; right:12px; padding:9px 12px; }
  .music-label { display:none; }
  .intro-screen { min-height: 100svh; padding: 76px 16px 30px; }
  .intro-card { padding:52px 20px 30px; border-radius:30px; }
  .intro-heart { width:70px; height:70px; font-size:42px; }
  .intro-subtitle br { display:none; }

  .letter-scene {
    min-height: 100svh;
    justify-content: flex-start;
    padding: 82px 10px 46px;
    overflow: visible;
  }
  .scene-title {
    margin-bottom: 12px;
    font-size: 25px;
    text-align: center;
  }
  .envelope-wrap {
    width:96vw;
    height: 720px;
    min-height: 720px;
    flex: 0 0 auto;
  }
  .envelope {
    width:92vw;
    height:59vw;
    min-height:230px;
    top: 50%;
  }
  .paper-inner { padding:26px 20px 25px; }
  .paper h2 { font-size:31px; }
  .prayer { font-size:15px; line-height:1.62; }
  .paper-photo-wrap { width:68px; height:68px; }
  .seal { width:52px; height:52px; font-size:24px; }

  /* Saat terbuka, kertas dimulai dekat bagian atas envelope-wrap,
     bukan jauh di atas viewport. Ini mencegah judul surat terpotong. */
  .envelope.open .paper {
    top: -34%;
    height: 164%;
    transform: translateY(0) scale(1);
  }

  .after-hint { margin-top: 2px; padding-bottom: 10px; }
}

@media (min-width: 601px) and (max-height: 800px) {
  /* Layar desktop/laptop yang pendek juga jangan memotong kepala surat. */
  .letter-scene {
    justify-content: flex-start;
    padding-top: 58px;
  }
  .envelope-wrap { height: 650px; min-height: 650px; }
  .envelope.open .paper { top: -70%; height: 170%; }
}