/* Hai cảnh kéo ngang trên cùng nền tím hồng; ảnh và hạt sáng nằm ở các lớp sâu khác nhau. */
[hidden] { display:none!important; }
.atmosphere { background:radial-gradient(ellipse at 28% 27%,#6935a544,transparent 55%),radial-gradient(ellipse at 75% 62%,#a42d7630,transparent 55%),radial-gradient(ellipse at 50% 46%,#51235940,transparent 66%),var(--background); }
.nebula { position:fixed; inset:-20%; pointer-events:none; opacity:.63; filter:blur(60px); }
.nebula i { position:absolute; left:15%; top:18%; width:65%; height:50%; border-radius:50%; background:radial-gradient(ellipse,#ab3b9f4d,transparent 65%); animation:nebula-drift 24s ease-in-out infinite alternate; }
.nebula i:nth-child(2) { left:48%; top:42%; background:radial-gradient(ellipse,#5941b65c,transparent 65%); animation-delay:-12s; animation-duration:31s; }
.nebula i:nth-child(3) { left:-5%; top:55%; background:radial-gradient(ellipse,#ee559b36,transparent 65%); animation-delay:-20s; animation-duration:35s; }
@keyframes nebula-drift { from { transform:translate(-8%,-5%) rotate(-18deg) scale(.8); } to { transform:translate(12%,8%) rotate(12deg) scale(1.35); } }
.grain { opacity:.025; }
.site-header { padding:25px 36px; }
.header-note { font-size:7px; color:#bb8bb9; }
.music-controls { display:flex; align-items:center; gap:12px; }
.track-name { font-family:var(--serif); font-size:10px; color:var(--pink); font-style:italic; }
.sound-button { background:#51203955; }
.music-playing .sound-button { box-shadow:0 0 25px #f477b755; }
.scene-viewport { position:absolute; inset:0; overflow:hidden; touch-action:pan-y; cursor:grab; outline:none; user-select:none; -webkit-user-select:none; }
.scene-track { width:200%; height:100%; display:flex; transform:translate3d(var(--scene-x,0px),0,0); transition:transform .8s cubic-bezier(.2,.75,.2,1); will-change:transform; }
.scene-track.is-dragging { transition:none; cursor:grabbing; user-select:none; }
.scene-panel { position:relative; flex:0 0 50%; width:50%; height:100%; overflow:hidden; isolation:isolate; }
.heart-panel #universe { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.scene-copy { top:19%; width:90%; z-index:2; }
.template-name { display:block; margin-bottom:13px; font-family:var(--serif); font-size:clamp(20px,2.2vw,30px); line-height:1.5; color:#f4d2ed; letter-spacing:-.5px; text-shadow:0 0 26px #df85df55; }
.scene-copy .eyebrow { font-size:7px; letter-spacing:2.5px; color:#c7a2ca; text-shadow:0 0 15px #a45eaf; }
.scene-copy h1,.scene-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.scene-copy p { display:none; }
.heart-touch { position:absolute; left:50%; top:45.5%; width:min(44vw,540px); height:min(45vh,450px); transform:translate(-50%,-50%); background:none; border:0; border-radius:43%; z-index:3; cursor:pointer; touch-action:pan-y; }
.heart-touch:focus-visible { outline:1px dashed #eda3ce77; outline-offset:8px; }
.heart-touch span { position:absolute; bottom:-54px; left:50%; transform:translateX(-50%); display:flex; gap:7px; align-items:center; white-space:nowrap; font-size:10px; color:#e0b3d5; letter-spacing:.4px; }
.heart-touch .icon { width:12px; height:12px; color:#f3a2d1; fill:#f187b955; animation:hint-beat var(--beat-duration,.84s) ease-in-out infinite; }
@keyframes hint-beat { 10%,30% { transform:scale(1.25); } 20%,45%,100% { transform:scale(1); } }
.scene-next,.scene-prev { position:absolute; top:52%; display:flex; align-items:center; gap:12px; padding:8px; border:0; background:none; z-index:5; color:#ecd0eb; font-size:10px; font-weight:300; text-shadow:0 0 15px #d88ed6; }
.scene-next { right:30px; }
.scene-prev { left:30px; }
.scene-arrow { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid #cda0e560; border-radius:50%; background:#7e4f9a24; backdrop-filter:blur(12px); box-shadow:0 0 25px #aa64e52b; transition:background .25s,box-shadow .25s; }
.scene-arrow .icon { width:19px; height:19px; }
.scene-next:hover .scene-arrow,.scene-prev:hover .scene-arrow { background:#bb79bd44; box-shadow:0 0 35px #aa64e544; }
.scene-next .scene-arrow { animation:arrow-right 3.4s ease-in-out infinite; }
.scene-prev .scene-arrow { animation:arrow-left 3.4s ease-in-out infinite; }
.scene-prev .icon { rotate:180deg; }
@keyframes arrow-right { 50% { translate:5px 0; } }
@keyframes arrow-left { 50% { translate:-5px 0; } }
.falling-photos { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.falling-photo { position:absolute; left:var(--lane); top:0; width:clamp(60px,6.8vw,100px); padding:5px 5px 8px; margin-left:-35px; border:1px solid #ffe5fa99; border-radius:2px; background:linear-gradient(135deg,#f9daed,#c6addb); box-shadow:0 7px 24px #0004,0 0 25px #ce82d422; animation:photo-fall var(--fall-duration) linear infinite; animation-delay:var(--fall-delay); will-change:transform; }
.falling-photo img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; filter:saturate(.75); }
.falling-photo span { display:block; text-align:center; font-size:6px; font-weight:400; color:#69516f; line-height:1.6; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.far-photo { filter:blur(.65px); z-index:-1; }
@keyframes photo-fall {
  0% { opacity:0; transform:translate3d(var(--sway-a),-30vh,0) rotate(var(--photo-angle)) scale(var(--photo-scale)); }
  7% { opacity:.62; }
  50% { transform:translate3d(var(--sway-b),45vh,0) rotate(calc(var(--photo-angle) + 13deg)) scale(var(--photo-scale)); }
  90% { opacity:.58; }
  100% { opacity:0; transform:translate3d(var(--sway-a),120vh,0) rotate(calc(var(--photo-angle) - 6deg)) scale(var(--photo-scale)); }
}
.far-photo { --photo-scale:.66; }
.mode-bouquet .heart-panel .falling-photo,.page-hidden * { animation-play-state:paused!important; }
body.motion-paused .falling-photo { animation:none!important; opacity:.4; transform:translateY(var(--static-top)) rotate(var(--photo-angle)) scale(var(--photo-scale)); }
.gift-toolbar { background:#301932a8; border-color:#b577ad55; box-shadow:0 7px 30px #08040c55,0 0 30px #b66bc112; }
.toolbar-button:hover { background:#c975be22; }
.toolbar-button .icon { color:#eec1e4; }
.scene-signature { color:#a97ba5; }
.explore-hint { color:#b88daf; font-size:7px; }
.side-note { display:none; }
.invitation-copy { padding-top:150px; }
.invitation h1 { font-size:clamp(34px,3.5vw,54px); }
.open-gift { background:linear-gradient(120deg,#98466e77,#70305077); }
body.ready .invitation { display:none; }
.letter-dialog { background:#29132f; color:#f4dbe9; border:1px solid #bd6a9a55; box-shadow:0 0 70px #df4c9626; }
.letter-paper { background:radial-gradient(ellipse at top,#ae5cd71c,transparent 60%); }
.letter-overline { color:#b08da7; }
.letter-dialog .close-dialog { color:#efc3dd; border-color:#c48da633; }
.letter-paper h2 { color:#f5b4e0; }
.letter-body { color:#d7bed3; }
.letter-signature,.paper-footer { color:#b38ca9; }
.letter-signature strong,.letter-signature .icon { color:#efa0ca; }
.letter-dialog[open] .letter-body p { animation:letter-reveal .6s ease both; }
.letter-dialog[open] .letter-body p:nth-child(2) { animation-delay:.18s; }
.letter-dialog[open] .letter-body p:nth-child(3) { animation-delay:.36s; }
.letter-dialog[open] .letter-body p:nth-child(4) { animation-delay:.54s; }
body.motion-paused .letter-dialog .letter-body p { animation:none!important; opacity:1; transform:none; }
@keyframes letter-reveal { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
.dark-dialog { background:#29142f; border-color:#b36c9855; }
.album-note,.memory-detail p { color:#d4b8ce; }
.bouquet-panel { background:radial-gradient(ellipse at 50% 40%,#8b4c8f45,transparent 55%),radial-gradient(ellipse at 20% 70%,#7555ac26,transparent 55%),linear-gradient(135deg,#21102bea,#2c1534f2 65%,#28152f); }
.bouquet-panel::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 14% 22%,#f4c1ff 0 1px,transparent 2px),radial-gradient(circle at 80% 31%,#e1beff 0 1px,transparent 2px),radial-gradient(circle at 25% 64%,#c1b4fd 0 1px,transparent 2px),radial-gradient(circle at 85% 75%,#f4b9dc 0 1px,transparent 2px),radial-gradient(circle at 64% 14%,#efcaff 0 1px,transparent 2px); opacity:.65; }
.bouquet-scene { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; padding:120px 16px 140px; text-align:center; z-index:2; }
.bouquet-scene>.eyebrow { font-size:7px; letter-spacing:2px; color:#cb9cc5; }
.bouquet-scene h2 { font-family:var(--serif); font-size:33px; line-height:1.6; color:#f9d9f0; font-weight:400; text-shadow:0 0 30px #f289bf30; }
.bouquet-scene h2 em { color:#f4a5d3; }
.bouquet-scene>p { color:#c59aba; font-size:9px; line-height:1.8; }
.bouquet-button { display:block; flex-shrink:1; width:min(38vw,390px); height:min(48vh,450px); min-height:0; padding:0; background:none; border:0; filter:drop-shadow(0 0 35px #f28ac633) drop-shadow(0 10px 15px #14091d66); touch-action:pan-y; cursor:pointer; }
.bouquet-button svg { width:100%; height:100%; overflow:visible; }
.flower-stem { stroke-dasharray:400; stroke-dashoffset:0; }
.flower-head { transform-box:fill-box; transform-origin:50% 100%; transform:scale(.05,.2); opacity:0; }
.mode-bouquet .flower-stem { animation:stem-grow 1.5s ease both; animation-delay:var(--delay); }
.mode-bouquet .flower-head { animation:tulip-bloom 1.7s cubic-bezier(.16,.8,.25,1) both; animation-delay:calc(var(--delay) + .4s); }
.bouquet-leaf { transform-box:fill-box; transform-origin:50% 100%; animation:leaf-sway 6s ease-in-out infinite; }
body.motion-paused .flower-head,body.motion-paused .flower-stem { animation:none!important; opacity:1; transform:none; stroke-dashoffset:0; }
@keyframes stem-grow { from { stroke-dashoffset:400; } to { stroke-dashoffset:0; } }
@keyframes tulip-bloom { from { transform:scale(.05,.2) rotate(-10deg); opacity:0; } 30% { opacity:1; } to { transform:scale(1) rotate(0); opacity:1; } }
@keyframes leaf-sway { 50% { transform:rotate(3deg); } }
@media (max-width:1000px) { .site-header { padding:23px 26px; } .scene-next { right:17px; } .scene-prev { left:17px; } .scene-next,.scene-prev { font-size:9px; gap:9px; } }
@media (max-width:600px) {
 .site-header { padding:calc(16px + env(safe-area-inset-top)) 18px 16px; }
 .header-note { display:none; } .track-name { font-size:8px; }
 .scene-copy { top:17%; } .scene-copy .eyebrow { font-size:5px; letter-spacing:1.8px; }
 .template-name { font-size:20px; margin-bottom:9px; }
 .heart-touch { width:78vw; height:38vh; }
 .heart-touch span { bottom:-25px; font-size:8px; gap:6px; }
 .heart-touch .icon { width:10px; height:10px; }
 .scene-next,.scene-prev { top:auto; bottom:calc(144px + env(safe-area-inset-bottom)); padding:7px 9px; font-size:9px; gap:11px; background:#4c28502b; border-radius:40px; backdrop-filter:blur(10px); }
 .scene-next { right:19px; } .scene-prev { left:19px; }
 .scene-arrow { width:36px; height:36px; }
 .scene-arrow .icon { width:17px; height:17px; }
 .scene-bottom { bottom:calc(23px + env(safe-area-inset-bottom)); }
 .explore-hint { font-size:6px; margin-bottom:14px; }
 .toolbar-button { font-size:9px; padding:0 12px; gap:8px; }
 .invitation-copy { padding:110px 15px 0; }
 .invitation h1 { font-size:30px; }
 .falling-photo { width:64px; padding:4px 4px 7px; margin-left:-30px; }
 .falling-photo span { font-size:5px; margin-top:4px; }
 .bouquet-scene { gap:10px; padding:125px 14px 205px; }
 .bouquet-scene>.eyebrow { font-size:5px; letter-spacing:1.4px; }
 .bouquet-scene h2 { font-size:25px; }
 .bouquet-button { width:min(84vw,340px); height:39vh; }
 .bouquet-scene>p { font-size:7px; }
}
@media (max-width:360px) { .toolbar-button { font-size:8px; padding:0 10px; gap:7px; } }
@media (max-height:650px) {
 .scene-copy { top:18%; }
 .template-name { font-size:18px; margin-bottom:5px; }
 .heart-touch span { bottom:-24px; }
 .scene-signature { display:none; }
 .bouquet-scene { padding:95px 12px 175px; gap:5px; }
 .bouquet-scene h2 { font-size:22px; }
 .bouquet-button { height:39vh; }
 .bouquet-scene>.eyebrow { display:none; }
 .scene-next,.scene-prev { bottom:118px; }
}
@media (max-height:650px) and (min-width:601px) { .heart-touch span { bottom:-50px; } }
@media (prefers-reduced-motion:reduce) { .flower-head { opacity:1; transform:none; } }