/* Lov3ly · Mẫu 05 — Thiệp Tỏ Tình */
:root{
  --ink:#4a2b3a; --muted:#a2758a; --pink:#ff6b9d; --pink2:#ff8fb5; --hot:#e75480; --deep:#c2437a;
  --line:#ffd9e6; --head:"Playfair Display",Georgia,serif; --script:"Dancing Script",cursive; --sans:"Be Vietnam Pro",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --sh:0 14px 34px rgba(231,84,128,.13), 0 3px 8px rgba(194,67,122,.07);
  --sh-lg:0 26px 60px rgba(194,67,122,.20), 0 8px 20px rgba(194,67,122,.10), 0 2px 5px rgba(194,67,122,.06);
  --glass-bg:rgba(255,255,255,.66); --glass-brd:1px solid rgba(255,255,255,.35);
  --glass-sh:0 18px 42px rgba(194,67,122,.14), 0 3px 10px rgba(194,67,122,.07), inset 0 1px 0 rgba(255,255,255,.65);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans); color:var(--ink); line-height:1.65; overflow-x:hidden; min-height:100vh;
  background:radial-gradient(720px 380px at 8% -4%, #ffe3ee 0%, transparent 60%),
             radial-gradient(680px 360px at 96% 4%, #e9e2ff 0%, transparent 60%),
             linear-gradient(180deg,#fff7f9,#fffdf8 55%,#fff5f8); background-attachment:fixed}
.script{font-family:var(--script)}
.hidden{display:none !important}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:80}

/* Lớp hạt nhiễu (noise) phủ toàn trang — chiều sâu kiểu in ấn */
body::after{content:""; position:fixed; inset:0; z-index:95; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hearts{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.hearts span{position:absolute; bottom:-6vh; opacity:0; animation:rise linear infinite; display:block}
.hearts span svg{width:100%; height:100%; display:block}
@keyframes rise{0%{transform:translateY(0) rotate(-8deg); opacity:0}10%{opacity:.5}90%{opacity:.4}100%{transform:translateY(-112vh) rotate(14deg); opacity:0}}

.screen{display:none; position:relative; z-index:1; min-height:100vh; min-height:100dvh;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:44px 20px 90px}
.screen.active{display:flex; animation:fadeUp .65s var(--ease) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px); filter:blur(6px)}to{opacity:1; transform:translateY(0); filter:blur(0)}}

/* Phong bì */
.env-label{font-size:clamp(30px,7.4vw,44px); color:var(--deep); max-width:520px}
.envelope{position:relative; width:min(340px,84vw); height:228px; margin-top:30px; background:none; border:0; cursor:pointer;
  filter:drop-shadow(0 24px 40px rgba(194,67,122,.28)); transition:transform .45s cubic-bezier(.2,.8,.3,1.2);
  perspective:1100px; -webkit-tap-highlight-color:transparent}
.envelope:hover{transform:translateY(-4px) rotate(-1deg)}
.envelope:active{transform:scale(.97)}
.envelope.open{transform:translateY(3px)}
.env-back{position:absolute; inset:0; border-radius:14px;
  background:linear-gradient(165deg,#ffe3ee,#ffd0e2);
  box-shadow:inset 0 0 0 1px rgba(194,67,122,.10), inset 0 -20px 32px rgba(231,84,128,.12), inset 0 10px 22px rgba(255,255,255,.45)}
.env-letter-peek{position:absolute; left:50%; top:16px; transform:translateX(-50%); width:66px; z-index:2;
  filter:drop-shadow(0 10px 18px rgba(194,67,122,.30));
  transition:top 1.05s cubic-bezier(.25,.9,.3,1.18) .38s, transform 1.05s cubic-bezier(.25,.9,.3,1.18) .38s}
.env-letter-peek svg{width:100%; height:auto; display:block}
.env-front{position:absolute; inset:0; z-index:3; border-radius:14px;
  background:linear-gradient(160deg,#fff6fa, #ffe6f0 55%, #ffd9e8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -14px 26px rgba(231,84,128,.08);
  clip-path:polygon(0 26%, 50% 62%, 100% 26%, 100% 100%, 0 100%)}
.env-flap{position:absolute; left:0; right:0; top:0; height:52%; z-index:4; transform-origin:top center;
  background:linear-gradient(180deg,#ffc7da,#ff8fb5 68%,#f97fab); clip-path:polygon(0 0, 100% 0, 50% 100%);
  box-shadow:inset 0 -10px 18px rgba(194,67,122,.18);
  border-radius:14px 14px 0 0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .85s cubic-bezier(.55,-.25,.3,1.12), filter .85s ease, z-index 0s .3s}
.env-seal{position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); z-index:5; width:44px; height:44px;
  animation:beat 1.1s ease-in-out infinite; filter:drop-shadow(0 6px 14px rgba(231,84,128,.45));
  transition:opacity .3s ease, scale .3s ease}
.env-seal svg{width:100%; height:100%; display:block}
@keyframes beat{0%,100%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-50%) scale(1.18)}45%{transform:translate(-50%,-50%) scale(1.04)}}
.envelope.open .env-flap{transform:rotateX(180deg); z-index:1; filter:brightness(1.07) saturate(1.05)}
.envelope.open .env-letter-peek{top:-72px; transform:translateX(-50%) scale(1.38) rotate(-6deg)}
.envelope.open .env-seal{opacity:0; scale:.35; animation:none}
.hint{margin-top:26px; font-size:13.5px; color:var(--muted); font-weight:400}

/* Lá thư */
.letter-card{border:1px solid rgba(255,217,230,.9); border-radius:20px;
  box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 46px rgba(231,84,128,.05);
  max-width:600px; width:100%; text-align:left; padding:34px 30px 30px;
  background-color:#fffdf7;
  background-image:radial-gradient(420px 200px at 12% -6%, rgba(255,227,238,.55), transparent 65%),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(231,84,128,.08) 27px 28px)}
.letter-card h3{font-size:36px; color:var(--deep); margin-bottom:14px}
.letter-card p{font-weight:400; font-size:16px; line-height:1.75; color:#5d3a4a; margin-bottom:6px}
#letter-body p{opacity:0; transform:translateY(10px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
#letter-body p.reveal{opacity:1; transform:none}
.letter-card .signoff{margin-top:16px; opacity:0; transform:translateY(8px); transition:opacity .7s ease .05s, transform .7s ease .05s}
.signature{font-size:29px; color:var(--deep); text-align:right; margin-top:2px; opacity:0; transform:translateY(8px) rotate(-2deg); transition:opacity .7s ease .18s, transform .7s ease .18s}
.letter-card.signed .signoff, .letter-card.signed .signature{opacity:1; transform:none}
.letter-card.signed .signature{transform:rotate(-2deg)}

/* Câu hỏi tỏ tình */
.question{margin-top:34px; background:var(--glass-bg); -webkit-backdrop-filter:blur(14px) saturate(1.35); backdrop-filter:blur(14px) saturate(1.35);
  border:2px dashed var(--pink2); border-radius:24px; box-shadow:var(--glass-sh);
  padding:28px 24px; max-width:600px; width:100%; animation:fadeUp .65s var(--ease) both}
.q-text{font-family:var(--head); font-style:italic; font-weight:600; font-size:clamp(32px,7.6vw,44px); color:var(--deep); line-height:1.25}
.q-btns{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:20px; min-height:64px}
.btn-yes{font-family:var(--head); font-weight:800; font-size:17px; padding:14px 30px; border-radius:999px; border:0; cursor:pointer;
  background:linear-gradient(180deg,var(--pink2),var(--pink) 55%,var(--hot)); color:#fff; box-shadow:0 12px 26px rgba(231,84,128,.4);
  transition:transform .3s ease}
.btn-yes:active{transform:scale(.97)}
.btn-no{font-family:var(--head); font-weight:700; font-size:15px; padding:12px 22px; border-radius:999px; cursor:pointer;
  background:#fff; border:2px solid var(--line); color:var(--muted); transition:transform .3s ease, opacity .3s ease}

/* Kết */
.finale-title{font-family:var(--head); font-weight:800; font-size:clamp(40px,9vw,58px); color:var(--deep); line-height:1.15}
.polaroid{position:relative; background:#fff; padding:10px 10px 12px; border-radius:8px; box-shadow:var(--sh-lg);
  width:min(280px,80vw); margin-top:26px; transform:rotate(-3deg)}
.polaroid img{width:100%; height:280px; object-fit:cover; border-radius:5px; display:block; background:#ffe9f1}
.polaroid figcaption{font-family:var(--script); font-size:20px; color:#8a5a6e; margin-top:9px;
  display:flex; align-items:center; justify-content:center; gap:6px}
.polaroid figcaption svg{width:15px; height:15px; display:block; flex:none}
.polaroid .tape{position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg); width:92px; height:24px;
  background:rgba(255,214,231,.75); border-left:1.5px dashed rgba(194,67,122,.25); border-right:1.5px dashed rgba(194,67,122,.25); z-index:2}
.finale-line{max-width:520px; font-weight:400; font-size:16px; color:#5d3a4a; margin-top:24px}
.started{margin-top:14px; font-size:14px; color:var(--muted)}
.started b{font-family:var(--head); font-weight:700; color:var(--hot)}
.btn-soft{display:inline-flex; align-items:center; gap:8px; font-family:var(--head); font-weight:700; font-size:15px;
  padding:12px 26px; border-radius:999px; border:2px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; margin-top:28px; box-shadow:var(--sh);
  transition:transform .3s var(--ease)}
.btn-soft:active{transform:scale(.97)}

.music-toggle{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:60; width:50px; height:50px; border-radius:50%;
  border:2px solid var(--line); background:#fff; box-shadow:var(--sh-lg); font-size:20px; color:var(--deep); cursor:pointer}
.music-toggle.playing{background:linear-gradient(180deg,var(--pink2),var(--hot)); color:#fff; border-color:transparent; animation:spinPulse 2.4s linear infinite}
.music-toggle:active{transform:scale(.97)}
@keyframes spinPulse{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .hearts{display:none} .screen.active{animation:none}
  .env-flap, .env-letter-peek, #letter-body p, .letter-card .signoff, .signature{transition:none}
  #letter-body p, .letter-card .signoff, .signature{opacity:1; transform:none}
  .screen.active .cert, .screen.active .cert-stamp, .screen.active .cert-stamp::after, .burst-heart, .burst-ring{animation:none} }

/* — 3 bí mật — */
.secrets-title{font-family:var(--head); font-weight:800; font-size:clamp(34px,8vw,46px); text-align:center; color:var(--ink)}
.secrets-sub{text-align:center; color:#7c4a61; font-weight:400; margin:10px auto 0; max-width:440px; font-size:15px; line-height:1.7}
.secrets-grid{display:grid; gap:14px; margin-top:28px}
.secret-card{position:relative; text-align:left; background:var(--glass-bg); -webkit-backdrop-filter:blur(14px) saturate(1.35); backdrop-filter:blur(14px) saturate(1.35);
  border:var(--glass-brd); border-radius:20px;
  padding:20px 20px 20px 74px; cursor:pointer; box-shadow:var(--glass-sh); font-family:var(--sans); transition:transform .3s var(--ease), border-color .3s var(--ease); overflow:hidden}
.secret-card:hover{transform:translateY(-2px); border-color:rgba(255,143,181,.65)}
.secret-card:active{transform:scale(.99)}
.secret-card .sec-icon{position:absolute; left:18px; top:50%; transform:translateY(-50%); width:36px; height:36px; color:var(--hot);
  filter:grayscale(.45); opacity:.75; transition:all .35s var(--ease)}
.secret-card .sec-icon svg{width:100%; height:100%; display:block}
.secret-card .sec-name{display:block; font-family:var(--head); font-weight:700; font-size:16.5px; color:var(--ink)}
.secret-card .sec-text{display:block; margin-top:5px; font-size:14px; font-weight:400; color:#7c4a61; line-height:1.7;
  filter:blur(5px); opacity:.45; user-select:none; transition:filter .5s, opacity .5s}
.secret-card.open{border-color:rgba(255,143,181,.65); background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,245,248,.78))}
.secret-card.open .sec-icon{filter:none; opacity:1; animation:beat 1.3s ease-in-out infinite}
.secret-card.open .sec-text{filter:none; opacity:1}
#btn-to-letter{margin:26px auto 0; display:flex}
#btn-to-letter.hidden{display:none}
.btn-main{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--head); font-weight:700; font-size:15.5px;
  padding:13px 28px; border-radius:999px; border:2px solid transparent; cursor:pointer; color:#fff;
  background:linear-gradient(180deg,var(--pink2),var(--pink) 55%,var(--hot)); box-shadow:0 12px 26px rgba(231,84,128,.35); transition:transform .3s var(--ease)}
.btn-main:hover{transform:translateY(-2px)}
.btn-main:active{transform:scale(.97)}

/* — Giấy chứng nhận — */
.cert{position:relative; margin:30px auto 6px; max-width:430px;
  background-image:radial-gradient(300px 130px at 18% -8%, rgba(236,217,168,.35), transparent 70%),
    radial-gradient(240px 160px at 95% 110%, rgba(231,84,128,.06), transparent 70%),
    linear-gradient(180deg,#fffdf6,#fff7ea);
  border:2px solid #ecd9a8; border-radius:14px; padding:28px 26px 22px;
  box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 36px rgba(160,120,40,.07); transform:rotate(-.6deg)}
.cert::before{content:""; position:absolute; inset:7px; border:1.5px dashed #e3c98c; border-radius:9px; pointer-events:none}
.cert-heading{font-family:var(--head); font-weight:800; font-size:19px; letter-spacing:.18em; text-transform:uppercase; color:#8a6d1f; text-align:center}
.cert-body{margin-top:12px; font-size:14px; font-weight:400; line-height:1.75; color:#6b5636; text-align:center}
.cert-fields{margin-top:16px; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:13.5px; text-align:left}
.cert-fields dt{color:#a2758a; font-weight:400; white-space:nowrap}
.cert-fields dd{font-weight:600; color:var(--ink)}
.cert-stamp{position:absolute; right:16px; bottom:44px; transform:rotate(-12deg); font-family:var(--head); font-weight:800;
  font-size:14px; color:#e75480; border:2.5px solid #e75480; border-radius:8px; padding:5px 12px; opacity:.85; background:rgba(255,255,255,.6)}
.cert-stamp::after{content:""; position:absolute; inset:-2.5px; border:2px solid rgba(231,84,128,.65); border-radius:9px; opacity:0; pointer-events:none}
.screen.active .cert{animation:certSettle .45s ease .62s both}
.screen.active .cert-stamp{animation:stampIn .55s cubic-bezier(.2,1.6,.4,1) .55s both}
.screen.active .cert-stamp::after{animation:stampRipple .8s ease-out .68s both}
@keyframes stampIn{0%{opacity:0; transform:scale(2.9) rotate(-32deg)}55%{opacity:1; transform:scale(.9) rotate(-11deg)}75%{transform:scale(1.06) rotate(-12.5deg)}100%{opacity:.92; transform:scale(1) rotate(-12deg)}}
@keyframes stampRipple{0%{opacity:.85; transform:scale(1)}100%{opacity:0; transform:scale(1.65)}}
@keyframes certSettle{0%{transform:rotate(-.6deg)}35%{transform:rotate(-.6deg) translateY(2.5px)}100%{transform:rotate(-.6deg) translateY(0)}}

/* Bùng tim khi bấm Đồng ý */
.burst-heart{position:fixed; z-index:90; pointer-events:none; transform:translate(-50%,-50%); animation:burstPop .95s cubic-bezier(.2,.8,.3,1) both}
.burst-heart svg{width:100%; height:100%; display:block; filter:drop-shadow(0 10px 22px rgba(231,84,128,.45))}
.burst-ring{position:fixed; z-index:89; pointer-events:none; width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(231,84,128,.75); transform:translate(-50%,-50%); animation:burstRing .8s ease-out both}
@keyframes burstPop{0%{opacity:0; scale:.2}30%{opacity:1; scale:1.25}55%{scale:.96}100%{opacity:0; scale:1.5; translate:0 -46px}}
@keyframes burstRing{0%{opacity:.9; scale:.4}100%{opacity:0; scale:3.4}}
.cert-note{margin-top:16px; font-size:12.5px; color:var(--muted); text-align:center; font-style:italic}

/* ===== Lov3ly ambient: cánh hoa rơi + mở trang mượt ===== */
.lv-ambient{position:fixed; inset:0; pointer-events:none; z-index:4; overflow:hidden}
.lv-ambient span{position:absolute; top:-6vh; opacity:0; animation-name:lvFall; animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform,opacity; display:block}
.lv-ambient span svg{width:100%; height:100%; display:block}
@keyframes lvFall{0%{transform:translate3d(0,-6vh,0) rotate(0deg); opacity:0} 8%{opacity:.5} 50%{transform:translate3d(2.6vw,52vh,0) rotate(170deg)} 92%{opacity:.42} 100%{transform:translate3d(-1.6vw,108vh,0) rotate(330deg); opacity:0}}
body{animation:lvPageIn .55s ease both}
@keyframes lvPageIn{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .lv-ambient{display:none} body{animation:none} }