/* =========================================================================
   HÀ TRANG · 20.10 — Cinematic romantic experience
   Palette: đỏ rượu · dusty rose · kem ngọc trai · vàng champagne
   Fonts : Playfair Display (serif) · Be Vietnam Pro (sans) · Dancing Script
   ========================================================================= */

:root{
  --wine:#5b1226;
  --wine-2:#7a1f38;
  --plum:#6d1b32;
  --rose:#c0496b;
  --rose-soft:#e58aa6;
  --blush:#f7d6e0;
  --cream:#fffbf4;
  --paper:#fffcf6;
  --champagne:#e8c386;
  --gold:#c99a4e;
  --gold-deep:#a97b33;
  --ink:#4b2030;
  --ink-soft:#7d4458;

  --serif:'Playfair Display','Times New Roman',Georgia,serif;
  --sans:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --script:'Dancing Script','Segoe Script',cursive;

  --shadow-1:0 12px 30px rgba(110,30,60,.14);
  --shadow-2:0 28px 64px rgba(90,25,55,.24);
  --ease-out:cubic-bezier(.2,.85,.25,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:#fff8f3;
  overflow-x:clip;
  line-height:1.6;
}
body.locked,body.no-scroll{overflow:hidden}
img,svg{display:block;max-width:100%}
figure{margin:0}
button{font-family:inherit;color:inherit}
b{font-weight:600}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:where(.btn,.sound-btn,.intro-skip,.paper-close,[role=button]):focus-visible{
  outline:3px solid #d14f74;outline-offset:3px;border-radius:12px;
}
.sound-btn:focus-visible,.btn:focus-visible,.intro-skip:focus-visible{border-radius:999px}

/* ---------- Nền cinematic (multi-layer) ---------- */
.page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130vmax 90vmax at 50% 122%, rgba(91,18,38,.55) 0%, rgba(91,18,38,0) 58%),
    radial-gradient(940px 640px at 6% 4%, #fff2e7 0%, rgba(255,242,231,0) 62%),
    radial-gradient(860px 640px at 94% 12%, #ffe4ee 0%, rgba(255,228,238,0) 58%),
    radial-gradient(760px 560px at 82% 58%, rgba(255,214,170,.55) 0%, rgba(255,214,170,0) 64%),
    radial-gradient(700px 520px at 12% 74%, rgba(247,196,214,.5) 0%, rgba(247,196,214,0) 66%),
    linear-gradient(180deg,#fff8f3 0%,#fdeef2 32%,#f9dde7 66%,#f2c9db 100%);
}
.orb{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5}
.orb-1{width:46vmax;height:46vmax;left:-16vmax;top:-10vmax;background:radial-gradient(circle,#ffc6dc,rgba(255,198,220,0));animation:drift1 27s ease-in-out infinite}
.orb-2{width:40vmax;height:40vmax;right:-14vmax;top:26vh;background:radial-gradient(circle,#ffe1bd,rgba(255,225,189,0));animation:drift2 33s ease-in-out infinite}
.orb-3{width:36vmax;height:36vmax;left:26vw;bottom:-16vmax;background:radial-gradient(circle,#e9c9dd,rgba(233,201,221,0));animation:drift3 31s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(9vmax,6vmax) scale(1.1)}}
@keyframes drift2{50%{transform:translate(-7vmax,8vmax) scale(1.08)}}
@keyframes drift3{50%{transform:translate(5vmax,-7vmax) scale(1.14)}}

#fx{position:fixed;inset:0;z-index:2;pointer-events:none}
.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background-image:url('../assets/img/grain.png');
  background-size:160px 160px;
  opacity:.3;mix-blend-mode:soft-light;
}
.vignette{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(132% 102% at 50% 42%, rgba(0,0,0,0) 56%, rgba(91,18,38,.2) 100%);
}
main{position:relative;z-index:4}

/* ---------- Scene chung ---------- */
.scene{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(76px,10vh,120px) clamp(16px,4vw,32px);
  position:relative;
}
.scene>*{max-width:100%}

/* ---------- Nút âm thanh ---------- */
.sound-btn{
  position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;z-index:70;
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(255,250,244,.68);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--wine-2);font-weight:600;font-size:.9rem;
  box-shadow:0 10px 26px rgba(120,40,70,.18);
  transition:transform .25s, background .3s, color .3s, box-shadow .3s;
}
.sound-btn:hover{transform:translateY(-2px)}
.sound-btn .ico{width:17px;height:17px;flex:none}
.sound-btn .ico-on{display:none}
.sound-btn[aria-pressed="true"]{
  background:linear-gradient(120deg,#8e2342,#c0496b);
  color:#fff6ef;border-color:rgba(255,255,255,.5);
  box-shadow:0 12px 30px rgba(140,40,75,.4);
}
.sound-btn[aria-pressed="true"] .ico-on{display:block}
.sound-btn[aria-pressed="true"] .ico-off{display:none}
.sound-btn[aria-pressed="true"] .ico-on{animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* ---------- Nút ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;border-radius:999px;font-weight:600;letter-spacing:.01em;
  transition:transform .25s, box-shadow .3s, background .3s, filter .3s;
}
.btn-primary{
  border:0;color:#fff9f3;
  padding:16px 30px;font-size:clamp(.98rem,2.6vw,1.1rem);
  background:linear-gradient(120deg,#8e2342 0%,#c0496b 46%,#d9a441 132%);
  box-shadow:0 16px 34px rgba(140,40,75,.34), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(140,40,75,.44), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:active{transform:translateY(-1px) scale(.985)}
.btn-ghost{
  border:1.5px solid rgba(201,154,78,.75);
  background:rgba(255,251,244,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--plum);padding:14px 26px;font-size:1rem;
}
.btn-ghost:hover{transform:translateY(-3px);background:rgba(255,252,247,.9);box-shadow:0 14px 30px rgba(120,40,70,.18)}

/* =========================================================================
   MÀN MỞ ĐẦU (INTRO CINEMATIC)
   ========================================================================= */
.intro{
  position:fixed;inset:0;z-index:90;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px 20px calc(30px + env(safe-area-inset-bottom));
  transition:opacity .55s ease .6s, visibility .55s ease .6s;
}
.intro.leaving{opacity:0;visibility:hidden}
.intro.leaving.fast{transition-duration:.3s;transition-delay:.12s}
.intro.gone{display:none}

.intro-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(1000px 720px at 50% 118%, rgba(64,8,28,.92) 0%, rgba(64,8,28,0) 62%),
    radial-gradient(760px 560px at 14% 16%, rgba(255,214,168,.55) 0%, rgba(255,214,168,0) 62%),
    radial-gradient(720px 540px at 88% 24%, rgba(255,176,200,.5) 0%, rgba(255,176,200,0) 60%),
    linear-gradient(168deg,#f9d7e0 0%,#eeb2c6 26%,#b9587a 56%,#6d1b32 82%,#45101f 100%);
  transition:transform 1.1s ease;
}
.intro-bg::after{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(closest-side, rgba(255,236,208,.4), rgba(255,236,208,0) 70%);
  animation:bgBreath 9s ease-in-out infinite alternate;
}
@keyframes bgBreath{from{transform:translate3d(-6%,-4%,0) scale(1)}to{transform:translate3d(7%,5%,0) scale(1.12)}}
.intro.leaving .intro-bg{transform:scale(1.07)}

.intro-bokeh,.intro-petals{position:absolute;inset:0;pointer-events:none}
.intro-bokeh span{
  position:absolute;border-radius:50%;filter:blur(26px);
  animation:bokehDrift var(--dur,16s) ease-in-out var(--del,0s) infinite alternate;
  will-change:transform;
}
@keyframes bokehDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(var(--bx,30px),var(--by,-40px),0) scale(1.18)}
}
.intro-petals span{
  position:absolute;top:0;left:var(--x,10%);
  width:var(--w,42px);aspect-ratio:1;
  background:url('../assets/img/petal-rose.webp') center/contain no-repeat;
  opacity:var(--o,.7);
  animation:introFall var(--dur,16s) linear var(--del,0s) infinite;
  will-change:transform;
}
@keyframes introFall{
  from{transform:translate3d(0,-16vh,0) rotate(0deg)}
  to{transform:translate3d(var(--dx,60px),124vh,0) rotate(var(--rot,340deg))}
}

.intro-sweep{
  position:absolute;top:-30%;left:-45%;width:55%;height:170%;
  transform:rotate(16deg);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,236,200,0) 0%,rgba(255,236,200,.32) 40%,rgba(255,255,255,.5) 50%,rgba(255,236,200,.32) 60%,rgba(255,236,200,0) 100%);
  filter:blur(7px);mix-blend-mode:screen;
  animation:sweepGo 8s ease-in-out 1.4s infinite;
}
@keyframes sweepGo{
  0%{transform:translateX(0) rotate(16deg);opacity:0}
  12%{opacity:.85}
  55%{opacity:.55}
  70%,100%{transform:translateX(300%) rotate(16deg);opacity:0}
}

.intro-content{position:relative;z-index:3;max-width:min(760px,94vw)}
.intro-line{margin:0}

.l1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,4.6vw,2.1rem);
  color:#fff6ee;letter-spacing:.015em;
  text-shadow:0 2px 22px rgba(60,8,26,.55);
  min-height:1.5em;
}
.caret{
  display:inline-block;width:.5ch;height:1em;
  vertical-align:-.12em;margin-left:.12em;
  background:rgba(255,240,220,.85);
  opacity:0;
}
.caret.typing{animation:caretBlink .85s steps(1) infinite}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

.l2{
  margin-top:.75em;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1.05rem,3.8vw,1.6rem);
  color:#ffe6d6;letter-spacing:.05em;
}
.l3{margin-top:clamp(20px,4vh,34px)}
.l3-lead{
  display:block;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(.95rem,3vw,1.3rem);
  color:#ffdac6;letter-spacing:.16em;
}
.l3-name{
  display:block;font-family:var(--script);font-weight:700;
  font-size:clamp(3.2rem,14vw,6.8rem);line-height:1.12;
  background:linear-gradient(100deg,#ffffff 0%,#ffe9c9 38%,#ffcddd 72%,#ffffff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:nameShimmer 7s ease-in-out infinite;
  text-shadow:0 6px 40px rgba(255,220,190,.25);
}
@keyframes nameShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Emoji nằm trong vùng gradient-clip:text → tách màu về riêng */
.emoji-heart{
  display:inline-block;font-size:.62em;vertical-align:.2em;
  color:#ff9dbd;background:none;-webkit-text-fill-color:#ff9dbd;
}

.js .l2{opacity:0;filter:blur(12px);transform:translateY(16px);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.1s var(--ease-out)}
.js .l2.in{opacity:1;filter:blur(0);transform:none}
.js .l3{opacity:0;filter:blur(18px);transform:scale(1.05);transition:opacity 1.3s ease,filter 1.3s ease,transform 1.3s var(--ease-out)}
.js .l3.in{opacity:1;filter:blur(0);transform:none}

.intro-actions{margin-top:clamp(26px,5vh,46px)}
.js .intro-actions{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s var(--ease-out)}
.js .intro-actions.in{opacity:1;transform:none}
.intro .btn-primary{
  padding:17px 34px;font-size:clamp(.98rem,3vw,1.12rem);
  letter-spacing:.06em;
  box-shadow:0 18px 44px rgba(40,4,18,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.intro .btn-primary:hover{box-shadow:0 24px 56px rgba(40,4,18,.58), inset 0 1px 0 rgba(255,255,255,.4)}

.intro-skip{
  margin-top:20px;padding:9px 20px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,235,215,.5);
  background:rgba(255,255,255,.1);
  color:rgba(255,242,230,.92);
  font-size:.9rem;font-weight:500;letter-spacing:.04em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .3s,transform .25s,opacity .8s ease,filter .8s ease;
}
.intro-skip:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.js .intro-skip{opacity:0;filter:blur(6px);transform:translateY(10px)}
.js .intro-skip.in{opacity:1;filter:blur(0);transform:none}
.js .intro-skip.in:hover{transform:translateY(-2px)}

.intro-flash{
  position:absolute;left:50%;top:56%;
  width:56vmax;height:56vmax;margin:-28vmax 0 0 -28vmax;
  border-radius:50%;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#ffffff 0%,#fff4e2 34%,rgba(255,238,210,0) 72%);
}
.intro.leaving .intro-flash{animation:flashPop 1.05s cubic-bezier(.3,.65,.3,1) forwards}
@keyframes flashPop{0%{opacity:0;transform:scale(.12)}32%{opacity:1}100%{opacity:0;transform:scale(4.6)}}
.intro.leaving .intro-content{animation:contentOut .7s ease forwards}
@keyframes contentOut{to{opacity:0;transform:scale(1.07);filter:blur(10px)}}
/* Chuyển cảnh: cánh hoa bung ra từ tâm khi mở món quà */
.intro.leaving .intro-petals span{animation:introBurst .95s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes introBurst{
  from{opacity:var(--o,.7);transform:translate3d(0,0,0) rotate(0deg) scale(.7)}
  to{opacity:0;transform:translate3d(var(--bx2,0px),var(--by2,-40vh),0) rotate(var(--rot,180deg)) scale(1.5)}
}

/* =========================================================================
   MÀN 1 — BÓ HOA
   ========================================================================= */
.hero{justify-content:center;padding-top:clamp(72px,9vh,110px)}

.hero-kicker{
  margin:0 0 clamp(4px,1.4vh,14px);
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1rem,3vw,1.3rem);
  letter-spacing:.55em;text-indent:.55em;
  color:var(--rose);opacity:.9;
}
.hero-kicker .k-dot{color:var(--gold)}

.bouquet{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  margin:0 auto clamp(6px,2vh,18px);
}
.bouquet-glow{
  position:absolute;left:50%;top:44%;
  width:min(135%,620px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,226,182,.8) 0%, rgba(255,196,212,.5) 36%, rgba(255,196,212,0) 68%);
  filter:blur(14px);pointer-events:none;opacity:0;
  transition:opacity 1.8s ease .45s;
}
.js body.ready .bouquet-glow{opacity:.9}
.bouquet-tilt{will-change:transform}
.bouquet-frame{position:relative;line-height:0}

.js .bouquet-frame{opacity:0;transform:scale(.84) translateY(26px);filter:blur(8px)}
.js body.ready .bouquet-frame{animation:bouquetIn 1.8s cubic-bezier(.16,.84,.3,1) .12s both}
@keyframes bouquetIn{
  0%{opacity:0;transform:scale(.84) translateY(26px);filter:blur(8px)}
  55%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}

.bouquet-sway{position:relative;display:inline-block;transform-origin:50% 88%;animation:sway 7.5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}

.bouquet-frame img{
  display:block;width:auto;height:auto;
  max-height:min(64vh,600px);
  max-width:min(94vw,560px);
  object-fit:contain;
  filter:drop-shadow(0 26px 38px rgba(90,25,55,.3));
}
.bouquet.has-error .bouquet-frame img{display:none}
.bouquet.has-error .bouquet-sheen{display:none}
.bouquet-fallback{display:none}
.bouquet.has-error .bouquet-fallback{display:block}
.bouquet-fallback svg{
  width:min(94vw,470px);height:auto;
  filter:drop-shadow(0 22px 34px rgba(90,25,55,.26));
}

.bouquet-sheen{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  opacity:0;
  background:linear-gradient(104deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.6) 46%,rgba(255,240,210,.75) 52%,rgba(255,255,255,0) 64%);
  background-size:280% 100%;background-position:130% 0;
  mix-blend-mode:screen;
}
@supports ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .bouquet-sheen{
    -webkit-mask-image:url('../assets/img/bouquet.webp');
    mask-image:url('../assets/img/bouquet.webp');
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
}
.js body.ready .bouquet-sheen{animation:sheenGo 1.7s ease 1.05s both}
@keyframes sheenGo{
  0%{background-position:130% 0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{background-position:-60% 0;opacity:0}
}

.bouquet-cap{
  margin-top:clamp(4px,1.2vh,10px);
  font-family:var(--script);font-weight:500;
  font-size:clamp(1.05rem,3.2vw,1.35rem);
  color:var(--wine-2);opacity:.9;
}

/* Cánh hoa tiền cảnh (trên nội dung, không chặn click) */
.front-petals{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}
.front-petals span{
  position:absolute;top:0;left:var(--x,12%);
  width:var(--w,34px);aspect-ratio:1;
  background:url('../assets/img/petal-blush.webp') center/contain no-repeat;
  opacity:var(--o,.75);
  filter:drop-shadow(0 8px 10px rgba(90,25,55,.22));
  animation:frontFall var(--dur,17s) linear var(--del,0s) infinite;
  will-change:transform;
}
@keyframes frontFall{
  from{transform:translate3d(0,-16vh,0) rotate(0deg)}
  to{transform:translate3d(var(--dx,70px),126vh,0) rotate(var(--rot,400deg))}
}

/* Chữ tiêu đề */
.hero-title{
  margin:.1em 0 .15em;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2rem,7vw,3.5rem);
  line-height:1.16;letter-spacing:.005em;
  background:linear-gradient(102deg,#9c1f42 0%,#c94f6b 36%,#b0762f 76%,#9c1f42 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:titleShimmer 10s ease-in-out infinite;
  max-width:min(16em,100%);
}
@keyframes titleShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-title .emoji-heart{-webkit-text-fill-color:#e4638b;color:#e4638b;font-size:.55em}

.hero-sub{
  margin:.1em 0 .55em;
  font-family:var(--script);font-weight:500;
  font-size:clamp(1.3rem,4.4vw,2rem);
  color:var(--wine-2);letter-spacing:.02em;
}
.hero-note{
  margin:0 0 clamp(18px,3.2vh,30px);
  max-width:34em;
  font-size:clamp(.95rem,2.7vw,1.06rem);
  color:var(--ink-soft);line-height:1.75;
}
.hero-cta{display:flex;justify-content:center}
.music-hint{
  margin:clamp(16px,2.6vh,24px) 0 0;
  font-size:.87rem;color:#96566f;
}
.music-hint b{color:var(--rose)}
.scroll-hint{
  position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);
  margin:0;font-size:.76rem;letter-spacing:.22em;color:#96566f;
}
.scroll-hint .arrow{display:block;font-size:1.05rem;margin-top:2px;animation:bounce 1.9s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- Reveal hệ thống ---------- */
.js .hrv{
  opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .95s ease var(--d,0s), transform .95s var(--ease-out) var(--d,0s), filter .95s ease var(--d,0s);
}
.js body.ready .hrv{opacity:1;transform:none;filter:blur(0)}
.js .rv{
  opacity:0;transform:translateY(28px);filter:blur(5px);
  transition:opacity 1s ease var(--d,0s), transform 1s var(--ease-out) var(--d,0s), filter 1s ease var(--d,0s);
}
.js .rv.in{opacity:1;transform:none;filter:blur(0)}
/* scroll-hint dùng transform căn giữa sẵn → giữ translateX */
.js .scroll-hint.hrv{transform:translateX(-50%) translateY(22px)}
.js body.ready .scroll-hint.hrv{transform:translateX(-50%)}

/* =========================================================================
   MÀN 2 — PHONG BÌ 3D (kem + hồng champagne, viền ánh vàng)
   ========================================================================= */
.letter-scene{padding-top:clamp(84px,11vh,124px)}
.env-title{
  margin:0 0 clamp(20px,3.4vh,34px);
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,4.6vw,2.3rem);
  color:var(--plum);letter-spacing:.01em;
  transition:opacity .7s ease,transform .7s ease;
}
#letterScene.opened .env-title{opacity:0;transform:translateY(-18px)}

.env-stage{perspective:1100px;display:flex;flex-direction:column;align-items:center}
.env-holder{position:relative;display:inline-block}
.env-glow{
  position:absolute;inset:-24%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle, rgba(255,231,178,.9) 0%, rgba(255,196,206,.55) 38%, rgba(255,196,206,0) 70%);
  opacity:0;transform:scale(.6);
  transition:opacity 1s ease .35s, transform 1.4s ease .35s;
}
.env-rays{
  position:absolute;left:50%;top:50%;width:min(760px,150vw);aspect-ratio:1;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(.5);
  background:repeating-conic-gradient(from 0deg, rgba(255,226,166,.55) 0deg 5deg, rgba(255,226,166,0) 5deg 13deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 12%, #000 34%, transparent 70%);
  mask-image:radial-gradient(closest-side, transparent 12%, #000 34%, transparent 70%);
  opacity:0;
  transition:opacity 1.2s ease .4s, transform 1.6s ease .4s;
  animation:spin 64s linear infinite;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.env-holder.lit .env-glow{opacity:1;transform:scale(1)}
.env-holder.lit .env-rays{opacity:.8;transform:translate(-50%,-50%) scale(1)}

.envelope{
  position:relative;width:min(400px,86vw);aspect-ratio:1.55;z-index:2;
  transform-style:preserve-3d;cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.9,.3,1), filter .4s;
  filter:drop-shadow(0 24px 36px rgba(150,50,100,.3));
}
.envelope:hover{transform:translateY(-6px)}
.env-back{
  position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(160deg,#fff8ef 0%,#fae7d8 48%,#f1cdb9 100%);
  border:1px solid rgba(201,154,78,.5);
}
.letter-mini{
  position:absolute;left:7%;width:86%;bottom:4%;height:76%;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:
    repeating-linear-gradient(0deg, rgba(196,150,90,.06) 0 1px, rgba(196,150,90,0) 1px 26px),
    linear-gradient(180deg,#fffdf7,#fdefdd);
  border:1px solid #e9cf96;border-radius:8px;
  box-shadow:0 8px 18px rgba(150,60,100,.2);
  transition:transform 1.15s cubic-bezier(.2,.9,.28,1) .5s, box-shadow .6s;
}
.letter-mini .mini-to{
  font-family:var(--script);font-weight:700;
  font-size:clamp(1.05rem,3.4vw,1.3rem);color:#a5663c;
}
.mini-seal,.env-seal{
  display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #e889a2, #b32e56 62%, #85183c);
  color:#ffe9c9;
  font:700 .82rem/1 var(--serif);letter-spacing:.06em;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.4), 0 5px 12px rgba(140,30,70,.4);
  border:2px solid rgba(255,224,170,.75);
}
.mini-seal{width:44px;height:44px;margin-top:6px}
.env-pockets{
  position:absolute;inset:0;z-index:4;border-radius:12px;
  clip-path:polygon(0 0, 50% 47%, 100% 0, 100% 100%, 0 100%);
  background:linear-gradient(200deg,#fdf0e1 0%,#f6dcc6 52%,#eec3ab 100%);
}
.env-pockets::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,248,232,.5) 50%, rgba(255,255,255,0) 62%);
}
.env-flap{
  position:absolute;left:0;top:0;width:100%;height:62%;z-index:5;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(180deg,#fff9f1 0%,#f7e3d1 68%,#efcdb9 100%);
  transform-origin:top center;transform:rotateX(0deg);backface-visibility:visible;
  transition:transform 1s cubic-bezier(.45,0,.25,1), z-index 0s .5s;
  overflow:hidden;
}
.env-flap::after{
  content:"";position:absolute;inset:-40%;
  background:linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,244,214,.8) 45%, rgba(255,255,255,0) 58%);
  animation:sheen 5s linear infinite;
}
@keyframes sheen{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.env-seal{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:48px;height:48px;font-size:.92rem;
}
.env-rim{
  position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:12px;
  border:2px solid rgba(201,154,78,.72);
  box-shadow:inset 0 0 24px rgba(255,255,255,.4);
}
.envelope.open{pointer-events:none}
.envelope.open .env-flap{transform:rotateX(-180deg);z-index:0;transition:transform 1s cubic-bezier(.45,0,.25,1), z-index 0s .5s}
.envelope.open .letter-mini{pointer-events:auto;cursor:pointer;z-index:9;transform:translateY(-62%) rotate(-1.5deg)}
.env-hint{
  margin:clamp(20px,3.4vh,30px) 0 0;min-height:1.7em;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:clamp(.95rem,2.8vw,1.08rem);color:#8a4468;font-weight:600;
}
.env-hint .hint-chevron{width:22px;height:22px;color:var(--rose);animation:bounce 1.8s ease-in-out infinite}
#letterScene.opened .hint-chevron{display:none}

/* =========================================================================
   LÁ THƯ (modal)
   ========================================================================= */
.letter-modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:16px;opacity:0;visibility:hidden;
  transition:opacity .5s ease, visibility .5s;
}
.letter-modal.show{opacity:1;visibility:visible}
.modal-backdrop{
  position:absolute;inset:0;cursor:pointer;
  background:radial-gradient(88% 66% at 50% 24%, rgba(255,206,224,.55), rgba(96,24,54,.82));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.paper{
  position:relative;width:min(700px,95vw);
  max-height:86vh;max-height:86svh;overflow:auto;
  background:
    repeating-linear-gradient(0deg, rgba(196,150,90,.07) 0 1px, rgba(196,150,90,0) 1px 30px),
    linear-gradient(180deg,#fffcf5 0%,#fff4e4 100%);
  border:1px solid #ead09a;border-radius:20px;
  box-shadow:0 44px 96px rgba(70,12,42,.55), inset 0 0 74px rgba(255,220,170,.35);
  padding:clamp(28px,5vw,54px);
  transform:translateY(30px) scale(.96);
  transition:transform .6s var(--ease-out);
}
.letter-modal.show .paper{transform:none}
.paper:focus{outline:none}
.paper::-webkit-scrollbar{width:9px}
.paper::-webkit-scrollbar-thumb{background:#e6c792;border-radius:9px}
.corner{position:absolute;width:30px;height:30px;border:2px solid rgba(206,157,74,.75);pointer-events:none}
.corner.tl{top:12px;left:12px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.corner.tr{top:12px;right:12px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.corner.bl{bottom:12px;left:12px;border-right:0;border-top:0;border-radius:0 0 0 10px}
.corner.br{bottom:12px;right:12px;border-left:0;border-top:0;border-radius:0 0 10px 0}

.paper-close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  border:1.5px solid rgba(201,154,78,.6);
  background:rgba(255,252,244,.85);
  color:var(--wine-2);
  transition:transform .25s, background .3s;
}
.paper-close svg{width:16px;height:16px}
.paper-close:hover{transform:rotate(90deg);background:#fff}

.line{
  margin:0 0 1.05em;font-family:var(--serif);
  font-size:clamp(1.02rem,2.7vw,1.18rem);line-height:1.85;color:#5b3a2a;
}
.js .letter-modal .line{opacity:0;filter:blur(6px);transform:translateY(14px)}
.js .letter-modal.show .line{animation:lineIn .95s ease forwards;animation-delay:var(--d,0s)}
@keyframes lineIn{to{opacity:1;filter:blur(0);transform:none}}
.salutation{font-size:clamp(1.22rem,3.6vw,1.5rem);font-weight:700;font-style:italic;color:#96304f}
.sign-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:1.4em}
.sign{font-style:italic;color:#a5663c;text-align:center;margin-bottom:0}
.wax-seal{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  color:#ffe9c9;font:700 1.3rem/1 var(--serif);letter-spacing:.06em;
  background:radial-gradient(circle at 34% 30%, #e889a2, #b32e56 62%, #85183c);
  box-shadow:0 12px 26px rgba(140,30,70,.42), inset 0 2px 7px rgba(255,255,255,.4);
  border:2px solid rgba(255,226,178,.6);
}
.js .letter-modal .wax-seal{opacity:0}
.js .letter-modal.show .wax-seal{animation:lineIn .8s ease 2.15s forwards}
.gift-cta-wrap{margin-top:clamp(24px,4vh,36px);text-align:center}
.js .letter-modal .gift-cta-wrap{opacity:0}
.js .letter-modal.show .gift-cta-wrap{animation:lineIn .9s ease 2.5s forwards}
.gift-sub{margin:.9em 0 0;font-size:.88rem;color:#a4607f}

/* =========================================================================
   MÀN 3 — QUÀ BẤT NGỜ
   ========================================================================= */
.gift-hint{
  margin:0 0 18px;padding:12px 24px;border-radius:999px;
  background:rgba(255,252,246,.7);border:1px dashed rgba(201,154,78,.75);
  color:#8a4468;font-weight:600;font-size:.95rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.gift-scene.open .gift-hint{display:none}
.bloom-stage{position:relative;width:min(470px,90vw);margin:0 auto}
.bloom-photo{
  position:relative;z-index:1;margin:0;
  background:linear-gradient(180deg,#fffcf6,#fff3e4);
  border:1px solid rgba(201,154,78,.55);
  border-radius:22px;overflow:hidden;
  box-shadow:0 34px 72px rgba(110,35,75,.34), 0 4px 14px rgba(110,35,75,.14);
  transition:opacity .95s ease .2s, transform 1.1s var(--ease-out) .2s, filter .95s ease .2s;
}
.js .bloom-photo{opacity:0;transform:scale(.9) translateY(16px);filter:blur(6px)}
.gift-scene.open .bloom-photo{opacity:1;transform:none;filter:none}
.bloom-photo img{display:block;width:100%;height:auto}
.bloom-fallback{display:none;padding:clamp(40px,8vh,72px) 24px;text-align:center}
.bloom-photo.img-error #bloomImg{display:none}
.bloom-photo.img-error .bloom-fallback{display:block}
.bloom-fallback .bf-ico{display:block;font-size:2.6rem;line-height:1;color:#c0496b;margin-bottom:12px}
.bloom-fallback p{margin:0;font-family:var(--script);font-weight:700;font-size:1.4rem;color:#a5663c}
.rays{
  position:absolute;left:50%;top:48%;width:150%;aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%) scale(.4);
  background:repeating-conic-gradient(from 0deg, rgba(255,214,150,.6) 0deg 5deg, rgba(255,214,150,0) 5deg 13deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 10%, #000 32%, transparent 68%);
  mask-image:radial-gradient(closest-side, transparent 10%, #000 32%, transparent 68%);
  opacity:0;
  transition:opacity 1.3s ease .3s, transform 1.7s ease .3s;
  animation:spin2 72s linear infinite;
  z-index:0;
}
@keyframes spin2{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.gift-scene.open .rays{opacity:.85;transform:translate(-50%,-50%) scale(1)}

.secret-card{
  width:min(640px,94vw);margin:clamp(28px,5vh,46px) auto 0;
  background:linear-gradient(180deg,#fffcf5,#fff3e2);
  border:1px solid #ead09a;border-radius:18px;
  box-shadow:0 28px 64px rgba(110,35,75,.3), inset 0 0 48px rgba(255,220,170,.34);
  padding:clamp(22px,4.5vw,40px);
  text-align:left;
}
.secret-card h3{
  margin:0 0 .7em;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.2rem,3.6vw,1.55rem);color:#96304f;
}
.secret-card h3 .emoji-heart{-webkit-text-fill-color:#e4638b;color:#e4638b;font-size:.85em}
.secret-card p{
  margin:0 0 1em;font-family:var(--serif);line-height:1.85;color:#5b3a2a;
  font-size:clamp(1rem,2.6vw,1.1rem);
}
.secret-sign{font-style:italic;color:#a5663c;margin-bottom:0 !important}
.final-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(22px,4vh,34px)}

footer{
  position:relative;z-index:4;text-align:center;
  padding:30px 18px calc(34px + env(safe-area-inset-bottom));
  font-size:.85rem;color:#7a3450;letter-spacing:.04em;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%,22px);
  z-index:96;max-width:92vw;padding:13px 24px;border-radius:999px;
  background:rgba(91,18,38,.93);color:#ffeef4;
  font-size:.94rem;font-weight:500;letter-spacing:.01em;
  box-shadow:0 18px 44px rgba(70,12,42,.45);
  opacity:0;visibility:hidden;
  transition:opacity .45s ease, visibility .45s, transform .45s var(--ease-out);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  text-align:center;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* =========================================================================
   MÀN 2.5 — ẢNH KỶ NIỆM (khung ảnh in vintage)
   ========================================================================= */
.memory-scene{padding-top:clamp(84px,11vh,124px)}
.memory-card{
  position:relative;width:min(430px,88vw);margin:0 auto;
  background:#fffdf8;padding:14px 14px 6px;border-radius:18px;
  border:1px solid rgba(201,154,78,.4);
  box-shadow:0 30px 64px rgba(110,35,75,.3), 0 6px 16px rgba(110,35,75,.14);
  transform:rotate(-.5deg); /* in nghiêng nhẹ kiểu ảnh vintage */
}
.memory-card img{
  display:block;width:100%;height:auto;border-radius:10px;background:#f3e9df;
  filter:sepia(.15) saturate(.93) contrast(.98) brightness(1.02); /* tông vintage nhẹ — không đổi nội dung ảnh */
}
.memory-cap{
  margin:12px 0 8px;text-align:center;
  font-family:var(--script);font-weight:700;
  font-size:clamp(1.15rem,2.6vw,1.4rem);color:#a5663c;
}
.memory-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(20px,3.5vh,30px)}
/* fade-in + slide-up ~600ms (yêu cầu 500–700ms) */
.js .memory-scene .rv{transition:opacity .6s ease var(--d,0s), transform .62s var(--ease-out) var(--d,0s), filter .6s ease var(--d,0s)}
.js .memory-scene .memory-card{transform:translateY(28px) rotate(-.5deg)}
.js .memory-scene .memory-card.in{transform:rotate(-.5deg)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:640px){
  .sound-btn{padding:9px 13px;font-size:.84rem;gap:6px}
  .sound-btn .ico{width:15px;height:15px}
  .scene{padding-top:clamp(84px,12vh,116px)}
  .envelope{width:min(340px,88vw)}
  .env-rays{width:170vw}
  .bouquet-frame img{max-height:min(62vh,520px)}
  .intro-actions .btn-primary{padding:16px 26px}
  .final-actions{flex-direction:column;align-items:stretch}
  .final-actions .btn{width:100%}
  .memory-actions{flex-direction:column;align-items:stretch}
  .memory-actions .btn{width:100%}
}
@media (max-width:380px){
  .hero-title{font-size:clamp(1.75rem,8.4vw,2.2rem)}
  .l3-name{font-size:clamp(2.8rem,15vw,3.6rem)}
  .intro-skip{margin-top:16px}
}
@media (min-width:1100px){
  .hero{padding-top:clamp(56px,6.5vh,84px)}
  .bouquet-frame img{max-height:min(54vh,540px);max-width:520px}
  .bloom-stage{width:min(520px,90vw)}
  .secret-card{padding:clamp(28px,3vw,46px)}
}

/* ---------- Tôn trọng prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.15s !important;
    transition-delay:0s !important;
  }
  .js .hrv,.js .rv{opacity:1 !important;transform:none !important;filter:none !important}
  .js .scroll-hint.hrv{transform:translateX(-50%) !important}
  .js .l2,.js .l3,.js .intro-actions,.js .intro-skip{opacity:1 !important;filter:none !important;transform:none !important}
  .bouquet-sheen,.intro-sweep{display:none !important}
  .front-petals,.intro-petals,.intro-bokeh{opacity:.5}
  .js .bouquet-frame{opacity:1 !important;transform:none !important;filter:none !important}
  .js .letter-modal .line,.js .letter-modal .wax-seal,.js .letter-modal .gift-cta-wrap{opacity:1 !important;filter:none !important;transform:none !important}
}