/* Lov3ly · Mẫu 06 — Kỷ Niệm Của Chúng Ta */
: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)}

/* 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)}}
.story-screen{justify-content:flex-start; padding-top:56px}

.kicker{display:inline-block; background:#fff; border:2px dashed var(--pink2); color:var(--deep); font-weight:700;
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; padding:7px 18px; border-radius:999px; transform:rotate(-1.2deg); box-shadow:var(--sh)}
.big{font-family:var(--head); font-weight:800; font-size:clamp(44px,10vw,72px); line-height:1.12; margin-top:24px}
.sub{max-width:540px; font-weight:400; font-size:16px; color:#7c4a61; margin-top:14px}
.sec-title{font-family:var(--head); font-weight:800; font-size:clamp(34px,8vw,46px)}

.btn-main{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--head); font-weight:700; font-size:16px;
  padding:14px 30px; border-radius:999px; border:2px solid transparent; cursor:pointer; margin-top:30px;
  background:linear-gradient(180deg,var(--pink2),var(--pink) 55%,var(--hot)); color:#fff; box-shadow:0 12px 26px rgba(231,84,128,.35);
  transition:transform .15s, box-shadow .15s}
.btn-main:hover{transform:translateY(-2px) rotate(-.4deg); box-shadow:0 16px 34px rgba(231,84,128,.45)}
.btn-main:active{transform:scale(.97)}
.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; box-shadow:var(--sh);
  transition:transform .3s var(--ease)}
.btn-soft:active{transform:scale(.97)}
.music-toggle:active{transform:scale(.97)}

/* Dòng thời gian */
.timeline{position:relative; width:min(680px,100%); margin-top:44px; padding:6px 0 10px; --tlp:0}
.timeline::before{content:""; position:absolute; left:19px; top:0; bottom:0; width:4px; border-radius:99px;
  background:#ffe0ec}
.timeline::after{content:""; position:absolute; left:19px; top:0; width:4px; border-radius:99px;
  height:calc(var(--tlp) * 100%); max-height:100%;
  background:linear-gradient(180deg,var(--pink2),var(--hot),var(--pink2));
  box-shadow:0 0 12px rgba(231,84,128,.45); transition:height .25s var(--ease)}
.node{position:relative; margin:0 0 34px 0; padding-left:58px; text-align:left;
  opacity:0; transition:opacity .65s var(--ease), transform .65s var(--ease)}
.node:nth-child(odd){transform:translate(-18px,14px)}
.node:nth-child(even){transform:translate(18px,14px)}
.node.in{opacity:1; transform:none}
.node .dot{position:absolute; left:4px; top:6px; width:34px; height:34px; border-radius:50%;
  background:#fff; border:2px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:#e79bbb; box-shadow:var(--sh); transition:all .4s var(--ease)}
.node .dot svg{width:15px; height:15px; display:block}
.node.in .dot{background:linear-gradient(180deg,var(--pink2),var(--hot)); border-color:transparent; transform:scale(1.12); color:#fff}
.node .card{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:22px; box-shadow:var(--glass-sh); padding:18px; overflow:hidden}
.node .date{display:inline-block; font-family:var(--head); font-weight:700; font-size:12.5px; color:#fff;
  background:linear-gradient(90deg,var(--pink),var(--hot)); padding:4px 13px; border-radius:999px; letter-spacing:.03em}
.node h4{font-family:var(--head); font-weight:800; font-size:19px; margin-top:10px}
.node p{font-weight:400; font-size:14.5px; color:#5d3a4a; margin-top:6px; line-height:1.75}
.node figure{margin-top:14px; position:relative; background:#fff; padding:8px 8px 10px; border-radius:8px;
  box-shadow:var(--sh); border:1.5px solid var(--line); transform:rotate(-1.4deg)}
.node figure img{width:100%; height:230px; object-fit:cover; border-radius:5px; display:block; background:#ffe9f1}
.node:nth-child(even) figure{transform:rotate(1.4deg)}

/* Kết */
.finale{margin-top:16px; width:min(680px,100%); text-align:center; padding:10px 0 0;
  opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.finale.in{opacity:1; transform:none}
.big-heart{animation:beat 1.1s ease-in-out infinite; filter:drop-shadow(0 14px 26px rgba(231,84,128,.4))}
.big-heart svg{width:76px; height:76px; display:block; margin:0 auto}
@keyframes beat{0%,100%{transform:scale(1)}25%{transform:scale(1.18)}45%{transform:scale(1.04)}}
.finale-headline{font-family:var(--head); font-weight:800; font-size:clamp(22px,5.6vw,29px); margin-top:16px; line-height:1.4}
.finale-line{font-weight:400; font-size:15.5px; color:#5d3a4a; max-width:540px; margin:12px auto 0; line-height:1.75}
.wall{display:flex; gap:10px; justify-content:center; margin-top:24px; flex-wrap:wrap;
  perspective:700px; transform-style:preserve-3d; transition:transform .5s var(--ease); will-change:transform}
.wall img{width:76px; height:76px; object-fit:cover; border-radius:12px; border:3px solid #fff; box-shadow:var(--sh); background:#ffe9f1;
  opacity:0; filter:blur(5px); transform:translateY(14px) scale(.9);
  transition:opacity .5s var(--ease), filter .5s var(--ease), transform .55s var(--ease)}
.finale.in .wall img{opacity:1; filter:none; transform:none}
.wall img:hover{transform:scale(1.1) rotate(-2deg); box-shadow:var(--sh-lg); z-index:2}
.signature{font-size:30px; color:var(--deep); margin:22px 0 20px}

.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}
@keyframes spinPulse{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .hearts{display:none} .screen.active{animation:none}
  .node,.finale,.little,.little-card,.wall img{opacity:1; transform:none; filter:none; transition:none}
  .timeline::after{transition:none} .wall{transition:none} .big-heart{animation:none} }

/* — Nhãn chương trên dòng thời gian — */
.card .chapter{display:inline-block; font-family:var(--head); font-weight:800; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; background:linear-gradient(180deg,var(--pink2),var(--hot));
  border-radius:999px; padding:3px 11px; margin-bottom:8px; box-shadow:0 6px 14px rgba(231,84,128,.3)}

/* — Những điều nhỏ nhặt — */
.little{max-width:640px; margin:56px auto 0; padding:0 4px; opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.little.in{opacity:1; transform:none}
.little-title{font-family:var(--head); font-weight:800; font-size:clamp(21px,5vw,26px); text-align:center; color:var(--ink)}
.little-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:13px; margin-top:24px}
.little-card{--tilt:0deg; 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:18px; padding:18px 16px; box-shadow:var(--glass-sh);
  opacity:0; transform:translateY(18px) rotate(var(--tilt)) scale(.96);
  transition:opacity .55s var(--ease), transform .6s var(--ease)}
.little-card:nth-child(odd){--tilt:-.7deg}
.little-card:nth-child(even){--tilt:.7deg}
.little.in .little-card{opacity:1; transform:translateY(0) rotate(var(--tilt)) scale(1)}
.little.in .little-card:nth-child(2){transition-delay:.1s}
.little.in .little-card:nth-child(3){transition-delay:.2s}
.little.in .little-card:nth-child(4){transition-delay:.3s}
.little.in .little-card:nth-child(5){transition-delay:.4s}
.little.in .little-card:nth-child(6){transition-delay:.5s}
.little.in .little-card:nth-child(7){transition-delay:.6s}
.little.in .little-card:nth-child(8){transition-delay:.7s}
.little-icon{display:block; width:24px; height:24px; color:var(--hot)}
.little-icon svg{width:100%; height:100%; display:block}
.little-card p{margin-top:9px; font-size:13.5px; font-weight:400; line-height:1.65; color:#5d3a4a}

/* — Chương tiếp theo — */
.next-chapter{max-width:520px; margin:30px auto 0; background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,245,248,.72));
  -webkit-backdrop-filter:blur(14px) saturate(1.35); backdrop-filter:blur(14px) saturate(1.35);
  border:2px dashed var(--pink2); border-radius:20px; padding:22px 24px; text-align:left; box-shadow:var(--glass-sh)}
.next-title{font-family:var(--head); font-weight:800; font-size:15.5px; color:var(--deep); text-align:center}
.next-chapter ul{list-style:none; margin-top:13px; display:grid; gap:10px}
.next-chapter li{font-size:14px; font-weight:400; line-height:1.65; color:#5d3a4a; padding-left:26px; position:relative}
.next-chapter li::before{content:""; position:absolute; left:0; top:4px; width:13px; height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e75480' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat}

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