/* Lov3ly · Mẫu 01 — Quà 20/10 */
:root{
  --bg1:#1d0b10; --bg2:#2a1215; --bg3:#3d1a20;
  --cream:#f7ead9; --blush:#f3b7c4; --rose:#e58aa0; --deep-rose:#b76e79;
  --paper:#fdf6ec; --ink:#5a3a3a;
  --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); color:var(--cream); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, var(--bg3) 0%, var(--bg2) 45%, var(--bg1) 100%);
}
#petals{position:fixed; inset:0; z-index:5; pointer-events:none}
body::after{content:""; position:fixed; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(115% 100% at 50% 42%, transparent 55%, rgba(10,3,6,.5) 100%)}
.screen{
  position:fixed; inset:0; z-index:10; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom)); text-align:center; overflow-y:auto;
}
.screen.active{display:flex; animation:fadeIn .65s cubic-bezier(.22,1,.36,1) both}
@keyframes fadeIn{from{opacity:0; transform:translateY(14px); filter:blur(6px)} to{opacity:1; transform:none; filter:blur(0)}}
.script{font-family:var(--script)}
.hidden{display:none !important}

/* — Màn chờ + hành trình + toast — */
#veil{position:fixed; inset:0; z-index:100; background:radial-gradient(120% 90% at 50% 0%, var(--bg3), var(--bg1));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; transition:opacity .7s ease}
#veil.gone{opacity:0; pointer-events:none}
.veil-heart{animation:heartbeat 1.15s ease-in-out infinite; line-height:0}
.veil-heart svg{width:58px; height:58px}
@keyframes heartbeat{0%,100%{transform:scale(1)}25%{transform:scale(1.18)}45%{transform:scale(1.02)}60%{transform:scale(1.14)}}
#veil p{font-family:var(--serif); font-style:italic; color:var(--blush); font-size:16.5px}
#journey{position:fixed; top:calc(12px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:40;
  display:flex; gap:7px; background:rgba(29,11,16,.45); padding:6px 13px; border-radius:999px; backdrop-filter:blur(6px)}
#journey span{display:block; line-height:0; opacity:.38; transition:all .4s cubic-bezier(.22,1,.36,1); color:#8a5f6c}
#journey span svg{width:15px; height:15px; fill:currentColor}
#journey span.on{opacity:1; transform:scale(1.15); color:#ff5d84}
#toast{position:fixed; left:50%; bottom:calc(30px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); z-index:60;
  background:rgba(253,246,236,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.35); color:#7a3049; font-size:14px; font-weight:500; padding:11px 20px; border-radius:999px;
  box-shadow:0 14px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6); opacity:0; pointer-events:none; transition:all .45s cubic-bezier(.22,1,.36,1); max-width:88vw; text-align:center}
#toast.show{opacity:1; transform:translate(-50%, 0)}
.bloom.on{animation:bloomPop .7s ease}
@keyframes bloomPop{0%{transform:scale(.4) rotate(-14deg)}60%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1)}}
.env-seal{animation:sealPulse 1.9s ease-in-out infinite}
@keyframes sealPulse{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(213,88,110,.45)}50%{box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 10px rgba(213,88,110,0)}}
.finale-photo img, .garden-photo-ring img{animation:kenburns 9s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.2%, -1.2%)}}
.wall{display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-top:26px; max-width:600px}
.wall img{width:70px; height:88px; object-fit:cover; border:4px solid #fff; border-bottom-width:13px; border-radius:3px;
  box-shadow:0 10px 22px rgba(0,0,0,.45); background:#fff}
.wall img:nth-child(3n+1){transform:rotate(-4deg)}
.wall img:nth-child(3n+2){transform:rotate(2.5deg)}
.wall img:nth-child(3n){transform:rotate(-1.5deg)}
.wall-note{margin-top:12px; font-size:12.5px; font-weight:300; color:rgba(247,234,217,.55)}

/* — Buttons — */
.btn-primary{
  font-family:var(--sans); font-size:17px; font-weight:500; cursor:pointer;
  color:#3d1520; background:linear-gradient(180deg,#ffd9e2,#f3a8bc);
  border:none; border-radius:999px; padding:14px 34px; margin-top:26px;
  box-shadow:0 8px 28px rgba(229,138,160,.35); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(229,138,160,.45)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{
  font-family:var(--sans); font-size:15px; cursor:pointer; color:var(--blush);
  background:rgba(255,255,255,.06); border:1px solid rgba(243,183,196,.45);
  border-radius:999px; padding:10px 22px; transition:background .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-ghost:active{transform:scale(.97)}
.hint{margin-top:16px; font-size:12.5px; font-weight:300; color:rgba(247,234,217,.55)}

/* — Màn 1: Bìa — */
.floral{position:absolute; width:110px; height:110px; color:rgba(243,183,196,.16); pointer-events:none; line-height:0}
.floral svg{width:100%; height:100%}
.floral.tl{top:6%; left:4%; transform:rotate(-18deg)}
.floral.br{bottom:8%; right:4%; transform:rotate(160deg)}
.cover-kicker{letter-spacing:.18em; text-transform:uppercase; font-size:12px; color:var(--rose); margin-bottom:14px}
#cover-greeting{font-family:var(--serif); font-size:clamp(44px, 9.5vw, 80px); font-weight:700; color:#ffeef2; text-shadow:0 4px 30px rgba(229,138,160,.35)}
.cover-line{font-family:var(--serif); font-style:italic; font-size:clamp(18px, 4.4vw, 26px); color:var(--blush); margin-top:10px}

/* — Màn 2: Vườn — */
.garden-photo-ring{
  width:min(46vw, 240px); aspect-ratio:1; border-radius:50%; padding:10px; overflow:hidden;
  background:conic-gradient(from 40deg,#f7c8d3,#b76e79,#f3b7c4,#e58aa0,#f7c8d3);
  box-shadow:0 0 0 6px rgba(243,183,196,.18), 0 18px 50px rgba(0,0,0,.5);
  animation:spinRing 24s linear infinite;
}
@keyframes spinRing{to{transform:rotate(360deg)}}
.garden-photo-ring img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}
.garden-big{font-family:var(--serif); font-weight:700; font-size:clamp(56px, 14vw, 110px); letter-spacing:.04em; color:#ffeef2; margin-top:26px}
.garden-line{font-family:var(--serif); font-style:italic; font-size:clamp(17px, 4.2vw, 24px); color:var(--blush); max-width:560px}

/* — Màn 3: Chương hoa — */
.chapter-wrap{display:flex; gap:44px; align-items:center; justify-content:center; width:100%; max-width:980px}
.bouquet-box{flex:0 0 240px}
.bouquet{position:relative; width:200px; height:250px; margin:0 auto}
.bouquet .stem{position:absolute; left:50%; bottom:0; width:90px; height:130px; transform:translateX(-50%);
  background:linear-gradient(180deg,#f9dfe6,#eec3cf); clip-path:polygon(8% 0, 92% 0, 62% 100%, 38% 100%); border-radius:0 0 30px 30px}
.bloom{position:absolute; width:44px; height:44px; line-height:0; opacity:.14; filter:grayscale(80%); transform:scale(.7); transition:all .8s cubic-bezier(.22,1,.36,1)}
.bloom svg{width:100%; height:100%}
.bloom.b1{color:#f6a8c1}.bloom.b2{color:#ffd166}.bloom.b3{color:#ef8fab}
.bloom.b4{color:#f78fb0}.bloom.b5{color:#f3b7c4}.bloom.b6{color:#e75480}
.bloom.on{opacity:1; filter:none; transform:scale(1)}
.bloom.b1{top:8px; left:78px}.bloom.b2{top:38px; left:22px}.bloom.b3{top:38px; right:22px}
.bloom.b4{top:74px; left:52px}.bloom.b5{top:74px; right:52px}.bloom.b6{top:104px; left:78px}
.bouquet-note{margin-top:14px; font-size:13px; font-weight:300; color:rgba(247,234,217,.6); max-width:230px}
.chapter-main{flex:1; max-width:440px; display:flex; flex-direction:column; align-items:center}
.chapter-count{font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--rose)}
.chapter-title{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(20px, 4.6vw, 27px); color:#ffeef2; margin:10px 0 20px}
.polaroid{background:#fff; padding:12px 12px 0; border-radius:6px; width:min(78vw, 330px); cursor:pointer; position:relative;
  box-shadow:0 18px 44px rgba(0,0,0,.5); transform:rotate(-1.6deg); transition:transform .2s ease}
.polaroid::before{content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-3deg); z-index:2;
  width:96px; height:27px; background:rgba(250,232,190,.8); box-shadow:0 2px 6px rgba(0,0,0,.18);
  border-left:1px dashed rgba(120,90,40,.25); border-right:1px dashed rgba(120,90,40,.25)}
.polaroid:hover{transform:rotate(0deg) scale(1.015)}
.polaroid img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:3px}
.polaroid figcaption{font-family:var(--serif); font-style:italic; color:var(--ink); font-size:15.5px; padding:12px 6px 14px; min-height:64px}
.chapter-nav{margin-top:20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center}
.dots{display:flex; gap:7px}
.dots span{width:8px; height:8px; border-radius:50%; background:rgba(243,183,196,.3)}
.dots span.on{background:var(--rose)}
@media (max-width:760px){
  .chapter-wrap{flex-direction:column; gap:10px}
  .bouquet-box{flex:none; transform:scale(.62); margin:-52px 0 -64px}
  .bouquet-note{display:none}
}

/* — Màn 4: Thư — */
.letter-intro{font-family:var(--serif); font-style:italic; font-size:clamp(18px, 4.4vw, 24px); color:var(--blush); margin-bottom:28px}
.envelope{position:relative; width:min(84vw, 420px); aspect-ratio:1.55; cursor:pointer; transition:transform .25s cubic-bezier(.22,1,.36,1)}
.envelope:hover{transform:translateY(-4px)}
.envelope:active{transform:scale(.97)}
.env-back{position:absolute; inset:0; background:#eec3cf; border-radius:10px}
.env-letter-peek{position:absolute; left:6%; right:6%; top:4%; bottom:16%; background:var(--paper); border-radius:6px;
  display:flex; align-items:center; justify-content:center; transition:transform .8s cubic-bezier(.22,1,.36,1)}
.env-letter-peek svg{width:56px; height:56px}
.env-front{position:absolute; inset:0; background:linear-gradient(180deg,#f6d3dd,#eeb9c8); border-radius:10px;
  clip-path:polygon(0 32%, 50% 68%, 100% 32%, 100% 100%, 0 100%)}
.env-seal{position:absolute; left:50%; top:56%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d4586e, #a52a44); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35); z-index:3; transition:opacity .4s ease}
.env-seal svg{width:24px; height:24px}
.envelope.open .env-letter-peek{transform:translateY(-46%)}
.envelope.open .env-seal{opacity:0}
.letter-paper{background-color:rgba(253,246,236,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.35); color:var(--ink); border-radius:10px; width:min(92vw, 620px);
  background-image:repeating-linear-gradient(180deg, transparent 0 30px, rgba(165,69,92,.09) 30px 31px);
  padding:34px 30px 28px; text-align:left;
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
  max-height:82vh; overflow-y:auto}
.letter-paper h3{font-size:34px; color:#a5455c; margin-bottom:16px}
.letter-photo{float:right; width:118px; aspect-ratio:4/5; object-fit:cover; border:6px solid #fff; border-bottom-width:20px;
  border-radius:3px; transform:rotate(3deg); box-shadow:0 8px 20px rgba(0,0,0,.22); margin:2px 0 10px 16px}
.letter-body p{font-family:var(--serif); font-size:16.5px; line-height:1.75; margin-bottom:14px; min-height:1em}
.letter-signoff{font-family:var(--serif); font-style:italic; margin-top:6px}
.letter-signature{font-size:30px; color:#a5455c; margin:6px 0 18px}
.letter-paper .btn-ghost{color:#a5455c; border-color:rgba(165,69,92,.5); background:rgba(165,69,92,.06)}

/* — Màn 5: Kết — */
.finale-photo{width:min(62vw, 300px); border-radius:160px 160px 12px 12px; overflow:hidden;
  border:3px solid rgba(243,183,196,.55); box-shadow:0 22px 55px rgba(0,0,0,.55)}
.finale-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block}
.finale-headline{font-family:var(--serif); font-weight:700; font-size:clamp(26px, 6vw, 40px); color:#ffeef2; margin-top:26px}
.finale-date{font-family:var(--script); font-size:clamp(30px, 7vw, 44px); color:var(--rose); margin-top:2px}
.finale-line{font-family:var(--serif); font-style:italic; font-size:clamp(16px, 4vw, 20px); color:var(--blush); max-width:520px; margin-top:10px}
.finale-signature{margin-top:12px; font-size:14.5px; color:rgba(247,234,217,.75)}
.finale-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.finale-actions .btn-primary{margin-top:22px}
.finale-actions .btn-ghost{margin-top:22px; align-self:center}

/* — Nút nhạc — */
.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(243,183,196,.5); background:rgba(42,18,21,.6); color:var(--blush); cursor:pointer; backdrop-filter:blur(6px);
  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}
@media (prefers-reduced-motion: reduce){
  .garden-photo-ring{animation:none}
  .screen.active{animation:none}
}

/* ===== V2: lớp noise hạt mịn phủ cố định ===== */
.lv-noise{position:fixed; inset:0; z-index:80; 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")}

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

/* ===== Nâng cấp chuyển động: chương so le · polaroid · máy chữ · tường ảnh ===== */
.screen.active .chapter-wrap > *{animation:chapterIn .65s cubic-bezier(.22,1,.36,1) both}
.screen.active .chapter-wrap > *:nth-child(2){animation-delay:.14s}
@keyframes chapterIn{from{opacity:0; translate:0 18px} to{opacity:1; translate:0 0}}
.polaroid{transition:transform .18s ease-out}
.polaroid.swap img{animation:photoIn .5s ease both}
@keyframes photoIn{from{opacity:.2; transform:scale(1.045)} to{opacity:1; transform:scale(1)}}
.type-cursor{display:inline-block; width:2px; height:1.02em; margin-left:2px; vertical-align:-0.14em;
  background:#a5455c; animation:cursorBlink .78s steps(1) infinite}
.type-cursor.done{animation-duration:1.15s}
@keyframes cursorBlink{0%,54%{opacity:1} 55%,100%{opacity:0}}
.wall img{animation:wallIn .55s cubic-bezier(.22,1,.36,1) both}
@keyframes wallIn{from{opacity:0; scale:.5} to{opacity:1; scale:1}}
@media (prefers-reduced-motion: reduce){
  .screen.active .chapter-wrap > *, .polaroid.swap img, .wall img{animation:none}
}