/* Lov3ly · Mẫu 02 — Pháo Hoa Chữ */
:root{
  --cream:#f9efe3; --blush:#f6c3d0; --rose:#ef8fab;
  --serif:"Playfair Display", Georgia, serif;
  --script:"Dancing Script", cursive;
  --sans:"Be Vietnam Pro", system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--sans); background:#0d0a24; color:var(--cream); overflow:hidden}
#sky{position:fixed; inset:0; display:block; touch-action:manipulation}
.hidden{display:none !important}
.script{font-family:var(--script)}

/* Bóng bay */
#balloon{position:fixed; left:6%; bottom:-260px; z-index:6; width:104px; pointer-events:none; transition:bottom 7s cubic-bezier(.22,.8,.36,1)}
#balloon.up{bottom:calc(100vh - 300px)}
.balloon-sway{animation:sway 5s ease-in-out infinite; display:flex; flex-direction:column; align-items:center}
@keyframes sway{0%,100%{transform:rotate(-3deg) translateX(0)}50%{transform:rotate(3deg) translateX(10px)}}
#balloon-photo{width:104px; height:124px; object-fit:cover; border-radius:50% 50% 50% 50%/55% 55% 45% 45%;
  border:3px solid rgba(255,255,255,.75); box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 -12px 24px rgba(239,143,171,.35)}
.balloon-knot{width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:10px solid #ef8fab; margin-top:-2px}
.balloon-string{width:2px; height:64px; background:linear-gradient(180deg, rgba(249,239,227,.85), rgba(249,239,227,.15)); border-radius:2px}
.balloon-heart{margin-top:-4px; line-height:0}
.balloon-heart svg{width:24px; height:24px; filter:drop-shadow(0 4px 14px rgba(239,93,126,.7))}
@media(max-width:560px){ #balloon{width:78px; left:4%} #balloon-photo{width:78px; height:94px} #balloon.up{bottom:calc(100vh - 240px)} }

/* Lớp phủ (mở đầu + thiệp kết) */
.overlay{position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; background:radial-gradient(90% 70% at 50% 40%, rgba(23,10,36,.25), rgba(9,5,20,.78))}
.kicker{letter-spacing:.18em; text-transform:uppercase; font-size:12px; color:var(--rose)}
#intro-title{font-family:var(--serif); font-weight:800; font-size:clamp(42px,9.5vw,76px); color:#fff5f7; margin-top:12px; text-shadow:0 6px 44px rgba(239,143,171,.5)}
.intro-sub{font-family:var(--serif); font-style:italic; font-size:clamp(17px,4.4vw,23px); color:var(--blush); margin-top:8px}
.btn-main{font-family:var(--sans); font-size:16.5px; font-weight:600; cursor:pointer; color:#3d1520;
  background:linear-gradient(180deg,#ffd9e2,#f3a8bc); border:none; border-radius:999px; padding:14px 34px; margin-top:28px;
  box-shadow:0 10px 32px rgba(239,143,171,.4); transition:transform .25s cubic-bezier(.22,1,.36,1)}
.btn-main:hover{transform:translateY(-2px)}
.btn-main:active{transform:scale(.97)}
.hint{margin-top:16px; font-size:12.5px; font-weight:300; color:rgba(249,239,227,.55)}

/* Thiệp kết */
#final{background:rgba(9,5,20,.45); backdrop-filter:blur(2px)}
.card{position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(48,22,40,.55), rgba(28,12,30,.62));
  -webkit-backdrop-filter:blur(14px) saturate(1.25); backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.35);
  border-radius:22px; padding:30px 28px 26px; max-width:440px; width:min(92vw,440px);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22);
  animation:cardIn .8s cubic-bezier(.22,1,.36,1) both}
@keyframes cardIn{from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none}}
/* Lấp lánh nhẹ trên thiệp kết: hai đốm sáng nhấp nháy lệch pha */
.card::before,.card::after{content:""; position:absolute; width:110px; height:110px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,236,200,.5) 0%, rgba(255,214,231,.18) 42%, transparent 68%);
  animation:cardTwinkle 3.4s ease-in-out infinite alternate}
.card::before{top:-38px; left:-30px}
.card::after{bottom:-42px; right:-30px; animation-delay:1.7s}
@keyframes cardTwinkle{from{opacity:.12; transform:scale(.82)} to{opacity:.55; transform:scale(1.12)}}
#final-photo{width:96px; height:96px; object-fit:cover; border-radius:50%; border:3px solid rgba(246,195,208,.7); box-shadow:0 10px 26px rgba(0,0,0,.5)}
#final-title{font-size:40px; color:#fff5f7; margin-top:12px}
.final-lines{font-family:var(--serif); font-size:16.5px; line-height:1.75; color:var(--blush); margin-top:8px}
.final-sign{margin-top:12px; font-size:14px; color:rgba(249,239,227,.75)}

.music-toggle{position:fixed; top:calc(14px + env(safe-area-inset-top)); right:16px; z-index:50; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(246,195,208,.5); background:rgba(20,10,30,.55); color:var(--blush); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .25s cubic-bezier(.22,1,.36,1)}
.music-toggle svg{width:19px; height:19px}
.music-toggle:active{transform:scale(.97)}
.music-toggle.off{opacity:.45}
.music-toggle.off svg{opacity:.6}

/* Đếm ngược mở màn */
#countdown{position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; background:rgba(9,5,20,.35)}
#cd-num{font-family:var(--serif); font-weight:800; font-size:clamp(90px,26vw,170px); color:#fff5f7; text-shadow:0 10px 60px rgba(239,143,171,.75); line-height:1}
#cd-num.pop{animation:cdPop .75s ease both}
@keyframes cdPop{0%{opacity:0; transform:scale(1.6)}25%{opacity:1}100%{opacity:1; transform:scale(1)}}
#cd-text{margin-top:12px; font-family:var(--serif); font-style:italic; color:var(--blush); font-size:clamp(16px,4.2vw,21px)}

/* — Ba điều ước trong thiệp kết — */
.final-wishes{list-style:none; margin:18px auto 4px; max-width:340px; display:grid; gap:10px; text-align:left}
.final-wishes li{display:flex; gap:11px; align-items:flex-start; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,215,234,.25); border-radius:14px; padding:11px 14px;
  font-size:13.5px; font-weight:300; line-height:1.6; color:#ffe9f4;
  animation:wishIn .55s cubic-bezier(.22,1,.36,1) both}
.final-wishes li:nth-child(1){animation-delay:.25s}
.final-wishes li:nth-child(2){animation-delay:.42s}
.final-wishes li:nth-child(3){animation-delay:.59s}
@keyframes wishIn{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .card::before,.card::after,.final-wishes li{animation:none} }
.final-wishes .wish-icon{font-size:17px; line-height:1.4}

/* ===== V2: chuyển màn thống nhất + noise chỉ trên lớp UI (không phủ canvas) ===== */
.overlay:not(.hidden), #countdown:not(.hidden){animation:uiIn .65s cubic-bezier(.22,1,.36,1) both}
@keyframes uiIn{from{opacity:0; transform:translateY(14px); filter:blur(6px)} to{opacity:1; transform:none; filter:blur(0)}}
.overlay::before, #countdown::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.overlay>*, #countdown>*{position:relative; z-index:1}
.lv-grain{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.wish-icon svg{width:17px; height:17px; display:block}
@media (prefers-reduced-motion: reduce){ .overlay:not(.hidden), #countdown:not(.hidden){animation:none} }

/* ===== 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}
@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} }