:root {
  --ink: #39001d;
  --berry: #72043b;
  --pink: #ff4da0;
  --hot: #ff177d;
  --rose: #ff8dc2;
  --blush: #ffd5e9;
  --cream: #fff7fb;
  --white: #fffafd;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "Be Vietnam Pro", sans-serif;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { color: inherit; }
::selection { background: var(--hot); color: #fff; }

.noise {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 100; background: rgba(255,255,255,.15); }
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#fff,#ff7ab9,#ff177d); box-shadow: 0 0 15px #ff4da0; }
#sparkles { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

.nav {
  position: absolute; inset: 0 0 auto; z-index: 20; height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px,5vw,76px); color: white;
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--hot); background: white; font-family: "DM Serif Display"; font-size: 1.35rem; box-shadow: 0 8px 30px rgba(71,0,34,.2); }
.sound-pill { display: flex; align-items: center; gap: 10px; padding: 11px 17px; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; color: white; background: rgba(67,0,34,.18); backdrop-filter: blur(15px); cursor: pointer; transition: .3s var(--ease); }
.sound-pill:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.sound-label { font-size: .73rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sound-bars { height: 14px; display: flex; align-items: center; gap: 2px; }
.sound-bars i { display: block; width: 2px; height: 5px; border-radius: 3px; background: white; }
.sound-pill.active .sound-bars i { animation: bars .7s ease-in-out infinite alternate; }
.sound-pill.active .sound-bars i:nth-child(2) { animation-delay: -.3s; }
.sound-pill.active .sound-bars i:nth-child(3) { animation-delay: -.5s; }
@keyframes bars { to { height: 14px; } }

.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; color: white; background:#480025; isolation: isolate; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg,rgba(62,0,30,.75) 0%,rgba(80,0,36,.34) 43%,rgba(85,0,35,.02) 78%), linear-gradient(0deg,rgba(40,0,24,.28),transparent 45%); }
.hero-bg { position: absolute; inset: -7%; z-index: -2; background: url("assets/pink-moon-kiet.png") center/cover no-repeat; will-change: transform,opacity,filter; }
.hero-copy { width: min(700px,88vw); margin-left: clamp(24px,8vw,128px); padding-top: 55px; position: relative; z-index: 3; }
.eyebrow { margin: 0 0 20px; font-size: .72rem; font-weight: 800; letter-spacing: .2em; }
.eyebrow.pink { color: var(--hot); }
h1,h2 { margin: 0; font-family: "DM Serif Display", serif; font-weight: 400; line-height: .92; letter-spacing: -.035em; }
h1 { font-size: clamp(4.25rem,8.6vw,8.4rem); text-shadow: 0 12px 40px rgba(65,0,32,.22); }
h1 span { color: #ffd1e7; font-style: italic; }
.hero-note { max-width: 580px; margin: 30px 0 0; font-size: clamp(1rem,1.35vw,1.18rem); line-height: 1.8; color: rgba(255,255,255,.86); }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 36px; }
.cta { display: inline-flex; align-items: center; gap: 40px; padding: 15px 18px 15px 22px; border-radius: 99px; color: var(--berry); background: white; text-decoration: none; font-size: .84rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 14px 40px rgba(72,0,38,.2); }
.cta span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; color: white; background: var(--hot); }
.mini-heart { width: 62px; height: 62px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: white; background: rgba(255,255,255,.12); backdrop-filter: blur(12px); font-size: 1.8rem; cursor: pointer; }
.magnetic { transition: transform .22s var(--ease),box-shadow .22s var(--ease); will-change: transform; }
.scroll-cue { position: absolute; right: clamp(24px,5vw,76px); bottom: 34px; z-index: 3; display: flex; align-items: center; gap: 13px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-cue i { width: 1px; height: 52px; background: rgba(255,255,255,.35); overflow: hidden; position: relative; }
.scroll-cue i::after { content:""; position:absolute; inset:-100% 0 auto; height:100%; background:white; animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 50%,100% { transform: translateY(200%); } }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); background: rgba(255,255,255,.15); box-shadow: inset 0 0 35px rgba(255,255,255,.25),0 10px 40px rgba(91,0,43,.18); backdrop-filter: blur(2px); }
.orb-one { width: 70px; height: 70px; left: 45%; top: 18%; }
.orb-two { width: 28px; height: 28px; left: 55%; bottom: 22%; }
.float-tag { position:absolute; z-index:2; padding:10px 15px; border:1px solid rgba(255,255,255,.32); border-radius:99px; background:rgba(82,0,42,.15); backdrop-filter:blur(12px); font-size:.72rem; font-weight:700; letter-spacing:.05em; }
.tag-one { right: 8%; top: 29%; transform: rotate(6deg); }
.tag-two { right: 28%; bottom: 21%; transform: rotate(-5deg); animation-delay:-2s; }
.tag-three { left: 47%; top: 43%; animation-delay:-3.4s; }

/* Reusable cinematic scene: one 7.4s shot, composed only with GPU-friendly properties. */
.cinematic-scene {
  --scene-duration: 7.4s;
  --scene-ease: cubic-bezier(.45,0,.2,1);
}
.cinematic-backdrop,
.cinematic-main,
.cinematic-text,
.cinematic-support { animation-play-state: paused !important; }
.cinematic-scene.is-playing .cinematic-backdrop,
.cinematic-scene.is-playing .cinematic-main,
.cinematic-scene.is-playing .cinematic-text,
.cinematic-scene.is-playing .cinematic-support { animation-play-state: running !important; }
.cinematic-backdrop {
  --parallax-y: 0px;
  opacity:0;
  animation: cinematicBackdrop var(--scene-duration) var(--scene-ease) infinite both;
}
.cinematic-main {
  opacity:0;
  transform:translate3d(0,42px,0) scale(.95);
  filter:blur(12px);
  transform-origin:40% 70%;
  will-change:transform,opacity,filter;
  animation: cinematicMain var(--scene-duration) var(--scene-ease) infinite both;
}
.cinematic-text {
  opacity:0;
  transform:translate3d(0,22px,0);
  filter:blur(7px);
  will-change:transform,opacity,filter;
  animation: cinematicText var(--scene-duration) var(--scene-ease) infinite both;
  animation-delay:calc(var(--text-index, 0) * 140ms);
}
.cinematic-support {
  opacity:0;
  will-change:transform,opacity,filter;
  animation: cinematicSupport var(--scene-duration) var(--scene-ease) infinite both;
  animation-delay:calc(var(--support-index, 0) * 90ms);
}
@keyframes cinematicBackdrop {
  0%,3% { opacity:0;transform:translate3d(0,var(--parallax-y),0) scale(1.09);filter:blur(12px) saturate(.75); }
  12% { opacity:1;filter:blur(0) saturate(.95); }
  28% { transform:translate3d(0,var(--parallax-y),0) scale(1.055); }
  78% { opacity:1;transform:translate3d(0,calc(var(--parallax-y) - 8px),0) scale(1.025);filter:blur(0) saturate(1.06); }
  94%,100% { opacity:0;transform:translate3d(0,calc(var(--parallax-y) - 10px),0) scale(1.015);filter:blur(8px) saturate(.85); }
}
@keyframes cinematicMain {
  0%,7% { opacity:0;transform:translate3d(0,42px,0) scale(.95);filter:blur(12px); }
  18% { opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0); }
  72% { opacity:1;transform:translate3d(0,-5px,0) scale(1.004);filter:blur(0); }
  89% { opacity:1;transform:translate3d(0,-7px,0) scale(1.006);filter:blur(0); }
  98%,100% { opacity:0;transform:translate3d(0,-19px,0) scale(.992);filter:blur(10px); }
}
@keyframes cinematicText {
  0%,11% { opacity:0;transform:translate3d(0,22px,0);filter:blur(7px); }
  21% { opacity:1;transform:translate3d(0,0,0);filter:blur(0); }
  82% { opacity:1;transform:translate3d(0,-2px,0);filter:blur(0); }
  94%,100% { opacity:0;transform:translate3d(0,-13px,0);filter:blur(6px); }
}
@keyframes cinematicSupport {
  0%,27% { opacity:0;transform:translate3d(0,16px,0) scale(.92);filter:blur(8px); }
  38% { opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0); }
  57% { opacity:1;transform:translate3d(5px,-8px,0) scale(1.015);filter:blur(0); }
  78% { opacity:1;transform:translate3d(-2px,-14px,0) scale(1);filter:blur(0); }
  94%,100% { opacity:0;transform:translate3d(0,-22px,0) scale(.96);filter:blur(7px); }
}

.ticker { overflow:hidden; color:white; background:var(--hot); padding:17px 0; transform:rotate(-1.2deg) scale(1.02); position:relative; z-index:5; box-shadow:0 15px 35px rgba(158,0,74,.22); }
.ticker-track { display:flex; align-items:center; width:max-content; gap:32px; animation:ticker 20s linear infinite; }
.ticker span { font-size:.84rem; font-weight:800; letter-spacing:.13em; }
.ticker b { font-size:1.2rem; color:#ffd2e7; }
@keyframes ticker { to { transform:translateX(-50%); } }

.section-pad { padding: clamp(100px,13vw,180px) clamp(24px,7vw,110px); }
.moments { background:var(--cream); position:relative; overflow:hidden; }
.moments::before { content:"KIỆT"; position:absolute; top:20px; right:-10px; font-family:"DM Serif Display"; font-size:clamp(8rem,24vw,26rem); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,23,125,.09); }
.section-head { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:70px; }
.section-head h2,.letter-intro h2 { font-size:clamp(3.3rem,6vw,6.4rem); }
.cards { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1250px; margin:auto; }
.wish-card { min-height:410px; padding:28px; border:1px solid rgba(113,0,57,.12); border-radius:28px; background:rgba(255,255,255,.75); box-shadow:0 20px 60px rgba(112,0,55,.07); display:flex; flex-direction:column; transform-style:preserve-3d; transition:border-color .3s,box-shadow .3s; }
.wish-card:hover { border-color:rgba(255,23,125,.35); box-shadow:0 30px 70px rgba(170,0,78,.14); }
.wish-card.feature { color:white; background:linear-gradient(145deg,#ff5ba7,#c40862); transform:translateY(-28px); }
.card-no { align-self:flex-end; font-family:"DM Serif Display"; font-style:italic; color:rgba(114,4,59,.4); }
.feature .card-no { color:rgba(255,255,255,.6); }
.card-icon { margin-top:auto; font-family:"DM Serif Display"; font-size:4.2rem; line-height:1; color:var(--hot); transform:translateZ(25px); }
.feature .card-icon { color:white; }
.wish-card h3 { margin:24px 0 10px; font-family:"DM Serif Display"; font-size:2rem; font-weight:400; transform:translateZ(18px); }
.wish-card p { margin:0; font-size:.94rem; line-height:1.7; color:rgba(57,0,29,.68); }
.feature p { color:rgba(255,255,255,.8); }
.card-line { width:42px; height:3px; margin-top:24px; border-radius:4px; background:var(--hot); transition:width .4s var(--ease); }
.feature .card-line { background:white; }
.wish-card:hover .card-line { width:100%; }

.letter-zone { min-height:850px; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:60px; color:white; background:radial-gradient(circle at 80% 40%,#f84a9d 0%,#a70655 38%,#5b0735 100%); overflow:hidden; position:relative; }
.letter-zone::before,.letter-zone::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.13); border-radius:50%; }
.letter-zone::before { width:620px;height:620px;right:-100px;top:80px; }
.letter-zone::after { width:800px;height:800px;right:-190px;top:-10px; }
.letter-intro { position:relative; z-index:2; max-width:520px; }
.letter-intro p:last-child { max-width:410px; margin-top:28px; line-height:1.8; color:rgba(255,255,255,.75); }
.envelope-wrap { position:relative; z-index:3; width:min(570px,95%); height:550px; margin:auto; border:0; background:transparent; cursor:pointer; perspective:1200px; }
.envelope-shadow { position:absolute; left:15%;right:15%;bottom:65px;height:55px;border-radius:50%;background:rgba(44,0,23,.35);filter:blur(20px);transition:.8s var(--ease); }
.envelope { position:absolute; left:50%; top:50%; width:440px; height:290px; transform:translate(-50%,-42%); filter:drop-shadow(0 30px 30px rgba(54,0,28,.28)); }
.envelope-back { position:absolute; inset:0; border-radius:13px; background:#ffd5e8; }
.envelope-front { position:absolute; inset:0; z-index:4; border-radius:13px; overflow:hidden; background:linear-gradient(150deg,#ffc2df,#ff8fc2); clip-path:polygon(0 34%,50% 72%,100% 34%,100% 100%,0 100%); }
.envelope-front::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(145deg,transparent 49.5%,rgba(255,255,255,.2) 50%); }
.envelope-flap { position:absolute; left:0;top:0;z-index:5;width:100%;height:62%;background:linear-gradient(160deg,#ffe5f1,#ffafd2);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s var(--ease),z-index .1s .3s; }
.seal { position:absolute; left:50%;top:46%;z-index:6;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:white;background:var(--hot);font-family:"DM Serif Display";font-size:1.5rem;box-shadow:0 8px 18px rgba(93,0,43,.25);transform:translate(-50%,-50%);transition:.5s var(--ease); }
.letter-paper { position:absolute; left:5%;right:5%;bottom:8%;z-index:2;min-height:270px;padding:34px 38px;text-align:left;color:var(--berry);background:#fffafd;border-radius:10px;box-shadow:0 10px 30px rgba(89,0,43,.14);transition:transform 1s var(--ease); }
.letter-paper small { font-weight:800;letter-spacing:.15em;color:var(--hot); }
.letter-paper strong { display:block;margin:18px 0 16px;font-family:"DM Serif Display";font-size:2rem;line-height:1.08;font-weight:400; }
.letter-paper em { display:block;font-family:"DM Serif Display";font-size:1.05rem;line-height:1.5;color:#7b3757; }
.signature { display:block;margin-top:20px;font-size:.76rem;font-weight:700; }
.tap-hint { position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75); }
.tap-hint i { font-style:normal;margin-left:7px; }
.envelope-wrap.open .envelope-flap { transform:rotateX(180deg);z-index:1; }
.envelope-wrap.open .seal { transform:translate(-50%,-50%) scale(0);opacity:0; }
.envelope-wrap.open .letter-paper { transform:translateY(-190px) rotate(-2deg); }
.envelope-wrap.open .envelope-shadow { transform:scale(.82);opacity:.55; }
.envelope-wrap.open .tap-hint { opacity:0; }

.finale { position:relative;min-height:100svh;display:grid;place-items:center;padding:110px 24px 50px;text-align:center;overflow:hidden;color:var(--berry);background:linear-gradient(#fff5fb,#ffd2e7); }
.finale::before { content:"";position:absolute;inset:0;background-image:radial-gradient(#ff4da0 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(transparent,#000 30%,transparent);opacity:.16; }
.finale-glow { position:absolute;width:min(70vw,850px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0%,#ffd0e5 35%,rgba(255,105,173,.08) 68%,transparent 70%);animation:pulseGlow 4s ease-in-out infinite alternate; }
@keyframes pulseGlow { to { transform:scale(1.07);filter:brightness(1.05); } }
.finale-content { position:relative;z-index:2; }
.finale h2 { font-size:clamp(5rem,11vw,11rem); }
.finale h2 em { color:var(--hot);font-weight:400; }
.finale-content>p:not(.eyebrow):not(.wish-result) { margin:28px auto 30px;max-width:500px;line-height:1.7; }
.wish-button { display:flex;align-items:center;gap:13px;margin:auto;padding:8px 20px 8px 8px;border:0;border-radius:99px;color:white;background:var(--berry);cursor:pointer;box-shadow:0 18px 40px rgba(112,4,59,.25); }
.wish-moon { display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--hot);font-size:1.45rem;transition:.6s var(--ease); }
.wish-text { font-size:.82rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; }
.wish-button.sent .wish-moon { transform:rotate(360deg);background:white;color:var(--hot); }
.wish-result { min-height:26px;margin:20px 0 0;font-family:"DM Serif Display";font-style:italic;font-size:1.15rem;color:var(--hot); }
.footer-note { position:absolute;z-index:2;bottom:26px;margin:0;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; }

.reveal { opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.reveal.in { opacity:1;transform:none; }
.heart-pop { position:fixed;z-index:90;pointer-events:none;color:#ff4da0;font-family:"DM Serif Display";animation:heartPop 1.2s var(--ease) forwards; }
@keyframes heartPop { from { opacity:0;transform:translate(-50%,-40%) scale(.3) rotate(0); } 25%{opacity:1} to { opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% - 150px)) scale(1.4) rotate(var(--r)); } }

@media (max-width:900px) {
  .hero::after { background:linear-gradient(90deg,rgba(61,0,29,.72),rgba(75,0,36,.15)),linear-gradient(0deg,rgba(45,0,26,.4),transparent 50%); }
  .hero-copy { margin-left:24px; }
  .float-tag,.orb { display:none; }
  .cards { grid-template-columns:1fr;max-width:560px; }
  .wish-card { min-height:330px; }
  .wish-card.feature { transform:none; }
  .letter-zone { grid-template-columns:1fr;gap:20px;text-align:center;padding-bottom:80px; }
  .letter-intro { margin:auto; }
  .letter-intro p:last-child { margin-left:auto;margin-right:auto; }
}
@media (max-width:600px) {
  .nav { height:76px; }
  .brand span:last-child,.sound-label { display:none; }
  .sound-pill { width:42px;height:42px;padding:0;justify-content:center; }
  h1 { font-size:clamp(3.75rem,18vw,5rem); }
  .hero-copy { width:calc(100vw - 48px);padding-top:20px; }
  .hero-note { font-size:.96rem;line-height:1.7; }
  .scroll-cue { display:none; }
  .tag-one { display:block;right:5%;top:17%;font-size:.62rem; }
  .section-head { margin-bottom:44px; }
  .envelope-wrap { height:500px;width:100%; }
  .envelope { width:min(88vw,440px);height:58vw;max-height:290px; }
  .letter-paper { padding:28px 24px; }
  .letter-paper strong { font-size:1.55rem; }
  .envelope-wrap.open .letter-paper { transform:translateY(-165px) rotate(-2deg); }
  .letter-zone { min-height:1000px; }
  .finale h2 { font-size:clamp(4.7rem,24vw,7rem); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; }
  .cinematic-backdrop,.cinematic-main,.cinematic-text,.cinematic-support { animation:none!important;opacity:1!important;transform:none!important;filter:none!important; }
}