/* KHANH CHI — cinematic one-screen birthday card */
:root{--ivory:#f8f3eb;--cream:#ede1d0;--navy:#17172c;--navy2:#20263d;--burgundy:#783c4a;--rose:#d7a6aa;--gold:#e3c98f;--white:#fffdf8;--text:#332c31;--ease:cubic-bezier(.2,.75,.2,1);--serif:"Playfair Display","Cormorant Garamond",Georgia,serif;--sans:"Be Vietnam Pro","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--script:"Charm","Great Vibes","Alex Brush","Segoe Script",cursive;--calligraphy:"Great Vibes","Charm",cursive}
*{box-sizing:border-box}html,body{width:100%;height:100%;height:100dvh;margin:0;overflow:hidden!important;overscroll-behavior:none;-webkit-touch-callout:none}body{background:var(--navy);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}button{font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button,.candle,.envelope-wrap,.photo-card,.final-gift,.scene-dot{touch-action:manipulation}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#2a2c48 0%,var(--navy) 68%);z-index:0;transition:background .6s ease}
.ambient-music-aurora{position:absolute;inset:-15%;background:radial-gradient(ellipse 65% 55% at 50% 42%,rgba(247,217,148,.12) 0%,rgba(244,114,182,.08) 45%,transparent 72%);filter:blur(50px);pointer-events:none;mix-blend-mode:screen;transform:scale(var(--music-scale,1));opacity:calc(.35 + var(--music-glow,0)*.45);transition:opacity .2s ease-out,transform .2s ease-out;animation:auroraAmbientDrift 16s ease-in-out infinite alternate}
@keyframes auroraAmbientDrift{0%{transform:scale(var(--music-scale,1)) translate3d(-2%,-2%,0)}50%{transform:scale(var(--music-scale,1)) translate3d(2%,3%,0)}100%{transform:scale(var(--music-scale,1)) translate3d(-1%,2%,0)}}
.glow{position:absolute;width:42vw;height:42vw;border-radius:50%;filter:blur(75px);opacity:calc(.18 + var(--music-glow,0)*.16);transform:scale(var(--music-scale,1));transition:opacity .15s ease-out,transform .15s ease-out;animation:glowDrift 13s ease-in-out infinite alternate}
.glow-one{background:radial-gradient(circle,#d96d92 0%,#b85d7b 55%,transparent 75%);top:-15%;left:-10%}
.glow-two{background:radial-gradient(circle,#f0c982 0%,#c7a66c 55%,transparent 75%);right:-15%;bottom:-25%;animation-delay:-5s}
.grain{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' 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='.35'/%3E%3C/svg%3E")}.star-field{position:absolute;inset:0}
#particleCanvas{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;pointer-events:none!important;z-index:12!important;opacity:.95}
.star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff0c7;opacity:.25;animation:twinkle var(--dur,4s) ease-in-out infinite alternate;box-shadow:0 0 7px #ffe8b4}.topbar{position:fixed;z-index:20;top:0;left:0;right:0;height:68px;padding:0 4.2vw;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.monogram{font:600 28px var(--serif);color:var(--gold);pointer-events:auto}.monogram span{color:var(--rose)}.topbar-label{font-size:9px;letter-spacing:.25em;color:#d4cbd0;opacity:.72}.sound-toggle{pointer-events:auto;display:flex;align-items:center;gap:8px;color:#ded5d7;border:0;background:transparent;font-size:9px;letter-spacing:.15em;cursor:pointer;padding:10px}.sound-icon{color:var(--gold);font-size:18px}
#experience{position:fixed;inset:0;overflow:hidden;z-index:1;perspective:1200px}.scene{position:absolute;inset:0;display:none;place-items:center;padding:76px 6vw 78px;opacity:0;overflow:hidden;pointer-events:none;will-change:opacity,transform,filter}.scene.active{display:grid;opacity:1;pointer-events:auto;z-index:2}.scene.leaving{display:grid;pointer-events:none;z-index:1}.scene-inner{width:min(100%,1050px);max-height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
@keyframes contentArrive{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes glowDrift{from{transform:translate3d(-2%,0,0) scale(.95)}to{transform:translate3d(4%,5%,0) scale(1.08)}}@keyframes twinkle{0%{opacity:.12;transform:scale(.7) rotate(0)}100%{opacity:.95;transform:scale(1.4) rotate(25deg)}}@keyframes hoverBob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.eyebrow{margin:0 0 14px;color:var(--gold);font-size:8.5px;letter-spacing:.26em;font-weight:600;line-height:1.6}.scene-copy{font-size:clamp(12px,1.1vw,14px);line-height:1.95;letter-spacing:.02em;color:#d3ced6;margin:14px 0 22px}.pill-button{border:1px solid #e3c98f88;border-radius:100px;min-height:46px;padding:0 23px;display:inline-flex;align-items:center;justify-content:center;gap:20px;cursor:pointer;font-size:11px;letter-spacing:.035em;transition:transform .32s var(--ease),background .32s ease,box-shadow .32s ease,border-color .32s ease;position:relative;z-index:3;overflow:hidden}.pill-button:before{content:"";position:absolute;top:-80%;left:-40%;width:25%;height:260%;background:#ffffff22;transform:rotate(25deg) translateX(-180%);transition:transform .65s var(--ease)}.pill-button:hover:before{transform:rotate(25deg) translateX(700%)}.pill-button span{font-size:17px;line-height:1;transition:transform .3s var(--ease)}.pill-button:hover{transform:translateY(-3px);box-shadow:0 9px 28px #0003;border-color:#f2d9a4}.pill-button:hover span{transform:translateX(4px)}.pill-button:active{transform:scale(.97)}.pill-button.primary{background:linear-gradient(120deg,#874757,#6f3443);color:#fff9f3;border-color:#b07b80}.pill-button.light{background:#ffffff08;color:#f9f1e9;backdrop-filter:blur(5px)}.text-button{border:0;background:transparent;color:#8b6268;font-size:11px;margin-top:12px;cursor:pointer;transition:opacity .2s}.text-button:hover{opacity:.65}.hidden{display:none!important}.micro-hint{font:italic 12px var(--serif);color:#806e6b;margin:17px 0 0;opacity:.7}
/* Cover */
.scene-envelope{background:radial-gradient(ellipse at 50% 45%,#fff9ee 0%,#f7ebd9 45%,#e8d6c0 75%,#d5beaa 100%) !important;color:var(--text)}.scene-envelope .eyebrow{color:#8c6268}.envelope-layout{gap:0}.envelope-wrap{width:min(330px,44vh,65vw);aspect-ratio:1.34;position:relative;margin:3px 0 10px;cursor:pointer;perspective:900px;transition:transform .4s var(--ease);z-index:1}.envelope-wrap:hover{transform:translateY(-5px) rotate(-1deg)}.envelope-halo{position:absolute;inset:-28% -15%;background:radial-gradient(ellipse,#fff8e8c9,transparent 68%);filter:blur(12px);animation:haloPulse 4s ease-in-out infinite}.envelope{position:absolute;inset:10% 0 0;filter:drop-shadow(0 22px 20px #74584925)}.envelope-back{position:absolute;inset:0;border-radius:5px;background:#d7bda5}.letter-peek{position:absolute;left:9%;right:9%;top:3%;height:91%;background:#fffaf1;color:#8c5b63;display:flex;align-items:flex-start;justify-content:center;padding-top:22px;font:700 clamp(22px,3.4vh,32px)/1.2 var(--script);letter-spacing:.02em;box-shadow:0 0 0 1px #d9c5ac;transition:transform .95s var(--ease)}.letter-peek i{position:absolute;bottom:18%;font-style:normal;color:var(--gold);font-size:18px}.envelope-front{position:absolute;inset:0;background:linear-gradient(145deg,#f5e7d5,#e4cbb3);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);border-radius:4px}.envelope-flap{position:absolute;inset:0 0 auto;height:66%;background:linear-gradient(160deg,#f9ead8,#e7cfb8);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .85s var(--ease);z-index:3;backface-visibility:hidden}.wax-seal{position:absolute;z-index:4;left:50%;top:45%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#a75f6b,#783c4a 70%);box-shadow:inset 0 0 0 2px #b77b7c,inset 0 0 0 5px #783c4a,0 5px 12px #60313b40;display:grid;place-items:center;color:#e9c9a1;font:24px var(--serif);transition:opacity .3s,transform .5s}.envelope-wrap.opening .envelope-flap{transform:rotateX(180deg);z-index:0}.envelope-wrap.opening .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(1.5)}.envelope-wrap.opening .letter-peek{transform:translateY(-50%)}.envelope-shadow{position:absolute;height:18px;bottom:-4%;left:12%;right:12%;border-radius:50%;background:#8d6e5840;filter:blur(12px)}.envelope-orbit{position:absolute;color:#9b6a72;opacity:0;pointer-events:none}.orbit-heart{right:-8%;top:4%;font-size:27px}.orbit-spark{left:-7%;bottom:12%;font-size:19px}.envelope-wrap:hover .envelope-orbit{opacity:.85;animation:orbitPop .7s var(--ease) both}@keyframes orbitPop{from{transform:scale(.3) rotate(-35deg)}to{transform:scale(1) rotate(0)}}.opening-title{font:400 clamp(26px,3.8vh,36px)/1.32 var(--serif);margin:8px 0 0;color:#35282d;letter-spacing:-.015em}.opening-title em{color:var(--burgundy);font-style:italic;font-weight:600}.opening-subtitle{font-size:clamp(12px,1.15vw,13px);line-height:1.75;color:#786b6b;margin:8px 0 18px}.scene-envelope .pill-button{min-height:42px}.scene-envelope .micro-hint{color:#806e6b}
/* Greeting */
.scene-greeting{background:radial-gradient(ellipse at 50% 36%,#3a254c 0%,#241a39 46%,#161229 76%,#0c0918 100%) !important}.greeting-layout{min-height:min(600px,72vh);position:relative;z-index:4}.greeting-title{position:relative;z-index:1}.script-word{display:block;font:700 clamp(28px,4.5vh,46px)/1.32 var(--script);color:#f7d5cc;text-shadow:0 0 22px rgba(235,190,185,.45),0 4px 10px rgba(0,0,0,.25);transform:rotate(-2deg);margin-bottom:2px}.greeting-title h2{font:600 clamp(38px,6.5vh,64px)/1.22 var(--serif);letter-spacing:-.025em;margin:8px 0 0}.gold-dot{color:var(--gold)}.orbit{position:absolute;border:1px solid #d8be8b20;border-radius:50%;width:min(48vw,440px);aspect-ratio:1;top:48%;left:50%;transform:translate(-50%,-50%) rotate(-25deg);animation:orbitDrift 18s linear infinite}.orbit-b{width:min(60vw,550px);transform:translate(-50%,-50%) rotate(35deg);border-color:#d7a6aa18;animation-direction:reverse}.tiny-flower{position:absolute;color:var(--gold);opacity:.7;font-size:22px;animation:twinkle 4s infinite alternate}.flower-a{top:16%;left:22%}.flower-b{right:20%;bottom:17%;font-size:27px}@keyframes orbitDrift{to{rotate:360deg}}

/* Romantic Birthday Balloons & Hanging Garlands */
.greeting-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.hanging-garland{position:absolute;top:clamp(48px,6.5vh,65px);left:3%;right:3%;height:90px;pointer-events:none;z-index:3}
.garland-rope{position:absolute;top:0;left:0;width:100%;height:55px;filter:drop-shadow(0 2px 6px rgba(227,201,143,.3))}
.hanging-items{position:absolute;inset:0;display:flex;justify-content:space-around;align-items:flex-start;padding:0 4%}
.garland-flag{position:relative;width:34px;height:var(--hang-len,55px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transform-origin:top center;animation:garlandSway 4.8s ease-in-out infinite alternate;animation-delay:var(--sway-delay,0s);will-change:transform}
.garland-flag::before{content:"";position:absolute;top:0;left:50%;width:1px;height:calc(100% - 24px);background:linear-gradient(180deg,rgba(227,201,143,.7),rgba(215,166,170,.4));box-shadow:0 0 4px rgba(227,201,143,.4)}
.garland-flag span{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,rgba(37,34,58,.9),rgba(64,40,56,.95));border:1px solid rgba(227,201,143,.55);box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 12px rgba(227,201,143,.25);display:grid;place-items:center;color:#f7e0a8;font:600 11.5px var(--serif);text-shadow:0 0 8px rgba(240,211,153,.85);backdrop-filter:blur(4px);transition:transform .3s var(--spring-ease)}
@keyframes garlandSway{0%{transform:rotate(-5deg)}50%{transform:rotate(3.5deg)}100%{transform:rotate(-4.5deg)}}

.hanging-pendant{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;transform-origin:top center;animation:garlandSway 5.6s ease-in-out infinite alternate;z-index:2;pointer-events:none}
.pendant-wire{width:1px;background:linear-gradient(180deg,transparent,rgba(227,201,143,.6));box-shadow:0 0 3px rgba(227,201,143,.3)}
.pendant-charm{font-size:16px;color:#f5dc9f;text-shadow:0 0 10px #f5dc9f,0 0 20px rgba(247,217,148,.7);animation:gentleBreathe 3s infinite alternate}
.pendant-l1{left:8%;animation-delay:-1.2s}.pendant-l1 .pendant-wire{height:110px}
.pendant-l2{left:18%;animation-delay:-2.8s}.pendant-l2 .pendant-wire{height:75px}
.pendant-r1{right:9%;animation-delay:-.6s}.pendant-r1 .pendant-wire{height:118px}
.pendant-r2{right:19%;animation-delay:-3.4s}.pendant-r2 .pendant-wire{height:80px}

.balloon-cluster{position:absolute;top:clamp(65px,12vh,105px);width:220px;height:330px;pointer-events:none;z-index:2}
.balloon-cluster-left{left:max(2vw,15px)}
.balloon-cluster-right{right:max(2vw,15px)}
.balloon-item{position:absolute;display:flex;flex-direction:column;align-items:center;pointer-events:auto;cursor:pointer;transition:transform .4s var(--spring-ease),filter .35s ease;will-change:transform}
.balloon-item:hover{transform:scale(1.1) translateY(-8px)!important;filter:drop-shadow(0 18px 36px rgba(227,201,143,.55))}
.balloon-item:active{transform:scale(.94)!important}

.b-rose-heart{top:0;left:20px;animation:balloonBobA 5.6s ease-in-out infinite alternate}
.b-gold-round{top:65px;left:95px;animation:balloonBobB 6.4s -2.2s ease-in-out infinite alternate}
.b-pearl-blush{top:155px;left:15px;animation:balloonBobC 5.2s -1.1s ease-in-out infinite alternate}
.b-lavender-round{top:10px;right:18px;animation:balloonBobB 6.1s -.8s ease-in-out infinite alternate}
.b-gold-heart{top:70px;right:90px;animation:balloonBobA 5.8s -2.7s ease-in-out infinite alternate}
.b-champagne-round{top:160px;right:12px;animation:balloonBobC 5.5s -1.9s ease-in-out infinite alternate}

@keyframes balloonBobA{0%{transform:translate3d(0,0,0) rotate(-3deg)}50%{transform:translate3d(5px,-15px,0) rotate(2deg)}100%{transform:translate3d(-4px,-26px,0) rotate(-4deg)}}
@keyframes balloonBobB{0%{transform:translate3d(0,0,0) rotate(4deg)}50%{transform:translate3d(-6px,-18px,0) rotate(-2deg)}100%{transform:translate3d(4px,-30px,0) rotate(5deg)}}
@keyframes balloonBobC{0%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(6px,-12px,0) rotate(3deg)}100%{transform:translate3d(-5px,-22px,0) rotate(-1deg)}}

.balloon-svg{display:block;overflow:visible;filter:drop-shadow(0 14px 32px rgba(10,14,28,.45));transition:transform .35s var(--spring-ease)}
.balloon-ribbon-path{transform-origin:50px 100px;animation:ribbonSway 4.8s ease-in-out infinite alternate}
@keyframes ribbonSway{0%{transform:rotate(-6deg)}50%{transform:rotate(5deg)}100%{transform:rotate(-7deg)}}

.balloon-drift{position:absolute;border-radius:50% 50% 50% 50% / 44% 44% 56% 56%;filter:blur(5px);opacity:.25;pointer-events:none;animation:driftFloat 20s linear infinite;z-index:0}
.drift-1{width:100px;height:122px;left:12%;bottom:-80px;background:radial-gradient(circle at 35% 30%,#ffd6e0,#a84b65)}
.drift-2{width:125px;height:148px;right:11%;bottom:-110px;background:radial-gradient(circle at 35% 30%,#fff1d0,#b58a45);animation-delay:-10s;animation-duration:24s}
@keyframes driftFloat{0%{transform:translateY(0) rotate(0deg);opacity:0}15%{opacity:.28}85%{opacity:.22}100%{transform:translateY(-120vh) rotate(15deg);opacity:0}}

/* Developer + pharmacist */
.worlds-layout{gap:0}.worlds-art{width:min(620px,78vw);height:clamp(150px,27vh,235px);display:flex;align-items:center;justify-content:center;position:relative;margin:0 0 16px}.world-code{width:58%;min-width:0;border:1px solid #9c9dbb55;border-radius:9px;background:linear-gradient(140deg,#242a40f5,#1b2033f5);box-shadow:0 18px 60px #070a1445;text-align:left;overflow:hidden;transform:rotate(-3deg);z-index:2;transition:transform .45s var(--ease),box-shadow .45s}.world-code:hover{transform:rotate(0) translateY(-8px) scale(1.025);box-shadow:0 25px 65px #070a1470}.window-dots{height:25px;border-bottom:1px solid #ffffff0e;display:flex;align-items:center;gap:4px;padding:0 10px;color:#9798ae;font-size:8px}.window-dots i{width:5px;height:5px;border-radius:50%;background:#b87c83}.window-dots i:nth-child(2){background:#c5a66e}.window-dots i:nth-child(3){background:#8ba58d}.window-dots span{margin-left:8px}.code-lines{padding:12px 10px 14px;font:clamp(7px,1.15vh,10px)/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;color:#c5c8d9;white-space:nowrap}.code-lines p{margin:0}.code-lines b{color:#d6a5bd;font-weight:500}.code-lines span{color:#a9c9d0}.code-lines em{color:#d9c18b;font-style:normal}.code-lines i{color:#b4c7a6;font-style:normal}.code-gap{margin-top:5px!important}.indent{padding-left:14px}.world-connector{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#d8be8b45,#d8be8b00 72%);color:#f2dcae;font-size:26px;z-index:4;text-shadow:0 0 20px #f0d7a6;animation:connectorPulse 3s infinite}.world-pharmacy{width:42%;height:90%;position:relative;display:grid;place-items:center;transition:transform .45s var(--ease)}.world-pharmacy:hover{transform:translateY(-8px) rotate(2deg)}.glass-bottle{position:relative;width:64px;height:94px;filter:drop-shadow(0 10px 16px #080b1645);z-index:2}.bottle-cap{position:absolute;top:0;left:23px;width:18px;height:14px;border-radius:3px 3px 1px 1px;background:linear-gradient(90deg,#ad8f65,#e1cb9b,#9e805b)}.bottle-neck{position:absolute;top:12px;left:19px;width:26px;height:13px;border:1px solid #d9c9b67a;background:#f3e6d51c}.bottle-body{position:absolute;top:23px;left:3px;width:58px;height:68px;border:1px solid #eadbc16e;border-radius:10px 10px 14px 14px;background:linear-gradient(100deg,#ffffff10,#f4e6d51b 50%,#ffffff05);box-shadow:inset 4px 0 12px #ffffff08;display:grid;place-items:center;color:#e7c8c3;font-size:22px}.molecule{position:absolute;width:55px;height:55px;border:1px solid #d8be8b52;border-radius:50%}.molecule i{position:absolute;width:8px;height:8px;border:1px solid #d8be8b;border-radius:50%;background:#252b41}.molecule i:nth-child(1){top:-4px;left:22px}.molecule i:nth-child(2){top:22px;right:-4px}.molecule i:nth-child(3){bottom:-4px;left:22px}.molecule i:nth-child(4){top:22px;left:-4px}.molecule b{position:absolute;width:7px;height:7px;border-radius:50%;background:#d8be8b;top:22px;left:22px}.molecule-one{top:8%;right:6%;transform:scale(.7)}.molecule-two{bottom:2%;left:4%;transform:scale(.5)}.code-spark{position:absolute;color:var(--gold);right:10px;top:20px;animation:twinkle 3s infinite alternate}.worlds-title{font:400 clamp(24px,3.6vh,36px)/1.32 var(--serif);margin:6px 0 0}.worlds-title em{color:#f3cbd0;font-style:italic;font-weight:600}.worlds-layout .scene-copy{margin:12px 0 18px;line-height:1.9;font-size:clamp(12px,1.1vw,13.5px)}@keyframes connectorPulse{0%,100%{scale:1;opacity:.8}50%{scale:1.15;opacity:1}}
/* Gallery */
/* Gallery - Direct 4-Photo Showcase */
.scene-gallery {
  background: radial-gradient(ellipse at 50% 34%, #3a1a36 0%, #25122c 44%, #161023 74%, #0c0815 100%) !important;
}
.gallery-layout {
  gap: 0;
  width: 100%;
  max-width: min(1080px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery-heading {
  text-align: center;
  margin-bottom: clamp(24px, 4.2vh, 42px) !important;
}
.gallery-heading .eyebrow {
  margin-bottom: 4px;
}
.gallery-heading h2 {
  font: 400 clamp(24px, 3.6vh, 36px)/1.28 var(--serif);
  margin: 0;
}
.gallery-heading h2 em {
  color: #f3cbd0;
  font-style: italic;
  font-weight: 600;
}
.gallery-intro {
  font-size: clamp(11.5px, 1.2vh, 13px);
  color: #c9c4d1;
  margin: 8px 0 0;
  line-height: 1.8;
}
.gallery-heart-quote {
  font: italic clamp(11.5px, 1.3vh, 13px)/1.6 var(--serif);
  color: #fce7f3;
  margin: 12px auto 0;
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px rgba(244, 114, 182, 0.55), 0 0 8px rgba(227, 201, 143, 0.4);
  animation: gentleBreathe 4s infinite alternate;
  display: inline-block;
  padding: 5px 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(244, 114, 182, 0.28);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  perspective: 1000px;
}

/* Dynamic Floating Sway & Micro-interaction on Cards */
.photo-card-direct {
  position: relative;
  background: linear-gradient(145deg, #fffcf7, #f6ede0);
  border-radius: 10px;
  padding: 8px 8px 10px;
  box-shadow: 0 14px 38px rgba(7, 10, 24, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform 0.45s var(--spring-ease), box-shadow 0.4s ease, filter 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
  display: flex;
  flex-direction: column;
  border: 0;
  text-align: inherit;
  box-sizing: border-box;
}

/* Organic Floating Sway Animations */
.photo-card-direct.item-1 {
  animation: photoFloatSway1 6.2s ease-in-out infinite alternate;
}
.photo-card-direct.item-2 {
  animation: photoFloatSway2 7.1s -2s ease-in-out infinite alternate;
}
.photo-card-direct.item-3 {
  animation: photoFloatSway3 6.5s -3.8s ease-in-out infinite alternate;
}
.photo-card-direct.item-4 {
  animation: photoFloatSway4 7.5s -5.2s ease-in-out infinite alternate;
}

@keyframes photoFloatSway1 {
  0% { transform: translateY(0px) rotate(-2.8deg); }
  50% { transform: translateY(-7px) rotate(-1deg); }
  100% { transform: translateY(2px) rotate(-3.5deg); }
}
@keyframes photoFloatSway2 {
  0% { transform: translateY(-4px) rotate(1.5deg); }
  50% { transform: translateY(5px) rotate(3deg); }
  100% { transform: translateY(-2px) rotate(0.8deg); }
}
@keyframes photoFloatSway3 {
  0% { transform: translateY(3px) rotate(-1.5deg); }
  50% { transform: translateY(-6px) rotate(-3.2deg); }
  100% { transform: translateY(1px) rotate(-0.5deg); }
}
@keyframes photoFloatSway4 {
  0% { transform: translateY(0px) rotate(2.8deg); }
  50% { transform: translateY(-8px) rotate(1.2deg); }
  100% { transform: translateY(3px) rotate(3.6deg); }
}

.photo-card-direct:hover,
.photo-card-direct:focus-visible {
  animation-play-state: paused !important;
  transform: translateY(-12px) rotate(0deg) scale(1.06) !important;
  z-index: 20;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.65), 0 0 28px rgba(244, 114, 182, 0.45), 0 0 14px rgba(227, 201, 143, 0.5) !important;
  outline: none;
}

.photo-pin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fdf8ea, #d4a757);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 8px rgba(227, 201, 143, 0.6);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #5c3b17;
  z-index: 4;
  animation: pinSparkle 3s ease-in-out infinite alternate;
}
@keyframes pinSparkle {
  0% { filter: drop-shadow(0 0 2px rgba(227, 201, 143, 0.4)); }
  100% { filter: drop-shadow(0 0 8px rgba(227, 201, 143, 0.9)) drop-shadow(0 0 12px #fde047); }
}

/* Sharp & Crisp Photo Display with Ambient Shimmer Sweep */
.photo-surface {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  max-height: clamp(165px, 26vh, 230px);
  border-radius: 6px;
  overflow: hidden;
  background: #1b1722;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.photo-surface img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
  filter: contrast(1.04) saturate(1.06) brightness(1.02);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.65s var(--ease), filter 0.4s ease;
}
.photo-card-direct:hover .photo-surface img {
  transform: scale(1.08);
  filter: contrast(1.05) saturate(1.1) brightness(1.04);
}

/* Ambient Shimmer Sweep Light Beam */
.photo-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.35) 50%, transparent 62%);
  transform: translateX(-160%);
  pointer-events: none;
  animation: photoShimmer 8s ease-in-out infinite;
}
.item-1 .photo-surface::after { animation-delay: 1.2s; }
.item-2 .photo-surface::after { animation-delay: 3.2s; }
.item-3 .photo-surface::after { animation-delay: 5.2s; }
.item-4 .photo-surface::after { animation-delay: 7.2s; }
@keyframes photoShimmer {
  0%, 80% { transform: translateX(-160%); }
  100% { transform: translateX(160%); }
}

.photo-tag {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(23, 23, 44, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #f7dfa5;
  font: 600 8.5px ui-monospace, monospace;
  letter-spacing: 0.12em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.photo-caption-bar {
  padding: 6px 3px 0;
  text-align: center;
}
.photo-title {
  font: 600 clamp(11px, 1.2vh, 12.5px)/1.38 var(--sans);
  color: #3b2b31;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-subtitle {
  font: italic clamp(9px, 0.95vh, 10.5px)/1.42 var(--serif);
  color: #8c6b73;
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-footer {
  width: 100%;
  max-width: 980px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 0 4px;
}
.gallery-counter-label {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: #d6cfd7;
  white-space: nowrap;
}
.gallery-counter-label i {
  color: var(--gold);
  font-style: normal;
  padding: 0 4px;
}
.gallery-footer .pill-button {
  min-height: 38px;
  padding: 0 18px;
  font-size: 10.5px;
  white-space: nowrap;
}
/* Letter */
/* Letter 3D Tri-Fold Origami Engine */
.scene-letter{background:radial-gradient(ellipse at 50% 45%,#33374b 0%,#1b2034 65%,#17172c 100%)}.letter-layout{gap:0;width:100%}.letter-layout>.eyebrow{margin-bottom:8px}.letter-stage{perspective:1400px;perspective-origin:center 45%;width:min(570px,86vw);min-height:min(390px,50vh);display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;margin:0 auto}.letter-paper{width:100%;position:relative;background:linear-gradient(135deg,#fffaf1,#f3e8d8);border-radius:6px;box-shadow:0 25px 70px rgba(8,11,24,.48),inset 0 0 0 1px rgba(255,255,255,.65);transform-style:preserve-3d;transition:box-shadow .6s ease;overflow:visible}.letter-paper:not(.is-folded){overflow-y:auto;max-height:min(440px,54vh);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.letter-paper::-webkit-scrollbar{width:4px}.letter-paper::-webkit-scrollbar-thumb{background:rgba(167,95,107,.35);border-radius:4px}
.letter-fold{position:relative;width:100%;transform-style:preserve-3d;will-change:transform}.fold-top{transform-origin:bottom center;z-index:8;border-radius:6px 6px 0 0}.fold-mid{position:relative;z-index:2}.fold-bot{transform-origin:top center;z-index:5;border-radius:0 0 6px 6px}
.fold-face{width:100%;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden}.fold-front{position:relative;z-index:2;color:#4a3a3b;text-align:left;padding:10px clamp(18px,4vw,36px);background:linear-gradient(135deg,#fffaf1,#f3e8d8)}.fold-top .fold-front{padding-top:clamp(16px,2.8vh,26px);padding-bottom:6px;border-radius:6px 6px 0 0}.fold-mid .fold-front{padding-top:8px;padding-bottom:8px}.fold-bot .fold-front{padding-top:6px;padding-bottom:clamp(16px,2.6vh,24px);border-radius:0 0 6px 6px}
.letter-topline{display:flex;justify-content:space-between;font-size:7.5px;letter-spacing:.22em;color:#a1847a;margin-bottom:6px}.letter-topline span:nth-child(2){color:#bda16c;font-size:11px}.letter-paper h2{font:500 clamp(20px,3.2vh,28px)/1.32 var(--serif);margin:0 0 10px;color:#3a2c30}.letter-paper h2 em{color:var(--burgundy);font-style:italic;font-weight:600}.fold-para,.fold-mid p{font-size:clamp(11.5px,1.35vh,13px);line-height:1.92;color:#554448;letter-spacing:.015em;margin:0 0 .8em}.letter-signoff{border-top:1px solid #c7ad8d7a;padding-top:10px;margin-top:8px;display:flex;justify-content:space-between;align-items:flex-end;color:#8d6068;font:14px/1.5 var(--serif)}.letter-signoff strong{font:700 26px/1.3 var(--script);color:var(--burgundy)}.paper-flower{position:absolute;right:18px;bottom:14px;font-size:22px;color:#cba8a3;opacity:.65}
.crease-line{position:relative;z-index:7;height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(160,120,90,.45) 15%,rgba(160,120,90,.45) 85%,transparent);box-shadow:0 1px 2px rgba(255,255,255,.9),0 -1px 2px rgba(70,45,35,.16);transition:opacity .6s ease}
.fold-back{position:absolute;inset:0;transform:rotateX(180deg);background:linear-gradient(145deg,#f7ede0,#ebd8c2);box-shadow:inset 0 0 25px rgba(120,60,74,.08),0 8px 24px rgba(0,0,0,.22);border:1px solid #d8c2aa;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:4px;z-index:1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fold-back-texture{position:absolute;inset:5px;border:1px dashed rgba(167,95,107,.35);pointer-events:none;border-radius:3px}
.fold-back-mark{display:flex;flex-direction:column;align-items:center;gap:3px;color:#8c5b63}
.mark-icon{font-size:20px;color:#a75f6b}.mark-label{font:600 8.5px var(--sans);letter-spacing:.28em}.mark-date{font:italic 10px var(--serif);color:#9c7f76}.fold-back-stamp{font:600 8.5px var(--sans);letter-spacing:.22em;color:#966b72}
.letter-seal{position:absolute;z-index:25;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .4s var(--spring-ease),opacity .35s ease;touch-action:manipulation}.letter-seal:hover .seal-stamp{transform:scale(1.08);box-shadow:inset 0 0 0 2px #d49596,inset 0 0 0 5px #783c4a,0 10px 24px rgba(120,60,74,.6)}.seal-glow{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(247,217,148,.65) 0%,transparent 70%);filter:blur(6px);animation:haloPulse 3.5s infinite}.seal-stamp{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a75f6b,#783c4a 72%);box-shadow:inset 0 0 0 2px #b77b7c,inset 0 0 0 5px #783c4a,0 8px 22px rgba(96,49,59,.45);display:grid;place-items:center;color:#e9c9a1;font:25px var(--serif);position:relative;z-index:2;transition:transform .3s var(--spring-ease)}.seal-hint{font:italic 11.5px var(--serif);color:#fff1dc;background:rgba(23,23,44,.72);padding:4px 12px;border-radius:20px;backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.28);white-space:nowrap;animation:gentleBreathe 3s infinite alternate}
.letter-paper.is-folded{max-height:165px;box-shadow:0 18px 48px rgba(8,11,24,.55)}.letter-paper.is-folded .fold-mid{max-height:165px;overflow:hidden}.letter-paper.is-folded .fold-bot{transform:rotateX(175deg) translateZ(1px);z-index:5}.letter-paper.is-folded .fold-top{transform:rotateX(-175deg) translateZ(4px);z-index:8}.letter-paper.is-folded .letter-seal{opacity:1!important;pointer-events:auto!important;transform:translate(-50%,-50%) scale(1)}.letter-paper:not(.is-folded) .letter-seal{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(1.4)}
.letter-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;position:relative;z-index:10}.refold-btn{font-size:10px;min-height:38px;padding:0 16px;border-color:rgba(227,201,143,.35);transition:all .3s ease}
/* Birthday cake + candles */
.scene-surprise{background:radial-gradient(ellipse at 50% 42%,#351a2e 0%,#231226 46%,#150d1b 76%,#0b0712 100%) !important;color:#fff9f5}.scene-surprise .eyebrow{color:#f7d5cc;text-shadow:0 0 14px rgba(247,213,204,.45)}.surprise-title{font:600 clamp(26px,4vh,38px)/1.32 var(--serif);margin:8px 0 0}.surprise-layout .scene-copy{color:#e2dbe6;margin:12px 0 16px;max-width:440px;font-size:clamp(12px,1.15vw,13.5px);line-height:1.95;text-shadow:0 1px 4px rgba(0,0,0,.35)}.cake-wrap{width:250px;height:220px;position:relative;margin:-3px 0 0;isolation:isolate}.cake-glow{position:absolute;inset:-20px;background:radial-gradient(ellipse at 50% 55%,rgba(255,224,130,.4) 0%,rgba(251,146,60,.18) 42%,transparent 72%);filter:blur(12px);animation:haloPulse 3.8s ease-in-out infinite}.cake-body{position:absolute;left:50%;bottom:35px;transform:translateX(-50%);width:176px;height:79px;border-radius:13px 13px 18px 18px;background:linear-gradient(100deg,#a65e69,#d99ba0 48%,#a75e6b);box-shadow:inset 0 -8px 0 #8f4c59,0 14px 20px #8b59602a;z-index:2}.cake-top{position:absolute;left:50%;bottom:102px;transform:translateX(-50%);width:176px;height:27px;border-radius:50%;background:linear-gradient(180deg,#fff8e9,#f0d9d1);border:1px solid #d9bcb2;z-index:3}.icing-drip{position:absolute;top:11px;width:17px;background:#f4e2d9;border-radius:0 0 10px 10px}.drip-one{left:27px;height:18px}.drip-two{left:82px;height:12px}.drip-three{right:26px;height:21px}.cake-heart{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#f8dcb1;font:28px var(--serif);text-shadow:0 2px 8px #6b344e55}.cake-plate{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:212px;height:17px;border-radius:50%;background:linear-gradient(#fff9ef,#d4bda8)!important;box-shadow:0 10px 28px rgba(0,0,0,.65)!important;z-index:1}.candles{position:absolute;z-index:4;left:50%;bottom:122px;transform:translateX(-50%);width:124px;height:60px;display:flex;justify-content:space-between;align-items:flex-end}.candle{width:15px;height:44px;position:relative;border:0;border-radius:3px 3px 1px 1px;background:repeating-linear-gradient(135deg,#fff0df 0 5px,#d8a1a5 5px 9px);padding:0;cursor:pointer;transform-origin:50% 100%;transition:opacity .4s,transform .45s;filter:drop-shadow(0 2px 2px #8b59602a)}.candle:hover{transform:translateY(-5px) scale(1.08)}.candle-two{height:51px;background:repeating-linear-gradient(135deg,#fff0df 0 5px,#c6a66d 5px 9px)}.wick{position:absolute;left:6px;top:-5px;width:2px;height:7px;background:#5b4540}.flame{position:absolute;left:2px;top:-25px;width:11px;height:20px;border-radius:70% 30% 60% 40%;transform:rotate(2deg);background:radial-gradient(ellipse at 55% 70%,#fff9c9 0 17%,#ffd477 30%,#ff9b53 64%,#f1745e 100%);box-shadow:0 0 12px #ffcb74,0 0 25px rgba(255,157,81,.85);transform-origin:50% 90%;animation:flameDance .72s ease-in-out infinite alternate}.candle-two .flame{animation-delay:-.25s;animation-duration:.6s}.candle-three .flame{animation-delay:-.4s;animation-duration:.85s}.candle.blown .flame{opacity:0;transform:translateY(-15px) scale(.1);transition:opacity .22s,transform .35s}.candle.blown:after{content:"";position:absolute;left:3px;top:-15px;width:10px;height:10px;border-radius:50%;background:#b7a9a0;filter:blur(5px);animation:smokeRise 1.5s ease-out forwards}.candle.blown{opacity:.65}.cake-sparkle{position:absolute;color:#fce7f3;z-index:5;animation:twinkle 2.5s infinite alternate}.cake-sparkle-a{top:27px;left:26px;font-size:23px}.cake-sparkle-b{top:49px;right:24px;font-size:17px;animation-delay:-1.2s}.candle-progress{display:flex;gap:8px;margin:0 0 12px}.progress-dot{width:6px;height:6px;border-radius:50%;background:#5c4456;transition:background .3s,transform .3s,box-shadow .3s}.progress-dot.done{background:#f472b6;transform:scale(1.25);box-shadow:0 0 10px rgba(244,114,182,.85)}.breath-hint{font-size:8px;color:#cfc2ce;opacity:.85;margin:10px 0 0}.cake-confetti{position:absolute;inset:-40px;pointer-events:none;z-index:8}.confetti-piece{position:absolute;width:5px;height:9px;border-radius:2px;background:var(--confetti-color,#d8be8b);animation:confettiFly 1.3s var(--ease) forwards;left:50%;top:55%}@keyframes flameDance{0%{rotate:-5deg;scale:.93 1.02}100%{rotate:6deg;scale:1.05 .94}}@keyframes smokeRise{0%{opacity:.6;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-27px) scale(1.8)}}@keyframes confettiFly{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1)}}@keyframes haloPulse{0%,100%{opacity:.7;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}}
/* Finale */
.scene-finale{background:radial-gradient(ellipse at 50% 35%,#2a163e 0%,#1a122e 45%,#100d20 75%,#080612 100%) !important}.finale-layout{gap:0;max-height:calc(100vh - 110px);padding:0 12px;display:flex;flex-direction:column;align-items:center}.finale-star{color:var(--gold);font-size:22px;text-shadow:0 0 22px rgba(216,190,139,.8);margin-bottom:8px;animation:twinkle 3s ease-in-out infinite alternate}.finale-layout h2{font:400 clamp(24px,3.8vh,38px)/1.32 var(--serif);margin:4px 0 0;letter-spacing:-.02em}.finale-layout h2 em{color:#f3cbd0;font-style:italic;font-weight:600}.finale-copy{color:#c9c4d1;font-size:clamp(11.5px,1.25vh,13px);line-height:1.92;margin:10px 0 14px}.signature{font:700 clamp(22px,3.2vh,28px)/1.35 var(--script);color:#f7dcd5;margin-bottom:12px;text-shadow:0 0 18px rgba(247,220,213,.4)}.signature span{color:var(--gold);font:15px var(--sans);margin-left:5px}.finale-line{width:42px;height:1px;background:var(--gold);opacity:.65;margin:0 auto 10px}
/* Scene navigation (removed) */
.scene-nav{display:none!important}
/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:#101321f5;display:flex;align-items:center;justify-content:center;padding:50px 58px;opacity:0;visibility:hidden;backdrop-filter:blur(0);transition:opacity .35s ease,visibility .35s,backdrop-filter .35s}.lightbox.open{opacity:1;visibility:visible;backdrop-filter:blur(12px)}.lightbox figure{margin:0;max-width:min(70vw,520px);max-height:80vh;text-align:center;transform:scale(.94) translateY(10px);transition:transform .4s var(--ease)}.lightbox.open figure{transform:scale(1) translateY(0)}.lightbox figure img{display:block;max-width:100%;max-height:70vh;object-fit:contain;box-shadow:0 18px 65px #0005;image-rendering:high-quality;image-rendering:-webkit-optimize-contrast;border-radius:8px;transform:translateZ(0)}.lightbox figcaption{font:italic 17px var(--serif);color:#e0c8c4;margin-top:12px}.lightbox-close,.lightbox-arrow{position:absolute;border:1px solid #ffffff30;background:#ffffff0b;color:#fff7ed;cursor:pointer;border-radius:50%;width:40px;height:40px;font-size:24px;display:grid;place-items:center;transition:background .25s,transform .25s}.lightbox-close:hover,.lightbox-arrow:hover{background:#ffffff1d;transform:scale(1.08)}.lightbox-close{top:22px;right:22px}.lightbox-arrow.prev{left:20px}.lightbox-arrow.next{right:20px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(max-width:859px){
  .gallery-layout{width:100%;max-width:min(480px,96vw);padding:0 6px}
  .gallery-heading{margin-bottom:clamp(18px, 3.2vh, 28px) !important}
  .gallery-heading h2{font-size:clamp(20px,3.4vh,28px);line-height:1.3}
  .gallery-intro{font-size:clamp(10px,1.2vh,11.5px);line-height:1.75;margin:3px 0 0}
  .gallery-heart-quote{font-size:clamp(9.5px, 1.15vh, 11px);line-height:1.6;margin:6px 0 0;padding:2px 10px}
  .gallery-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:12px 10px!important;width:100%!important;max-width:440px!important;margin:0 auto 10px!important;overflow-x:visible!important;padding:0!important}
  .photo-card-direct{flex:none!important;width:100%!important;max-width:none!important;padding:6px 6px 8px!important;box-shadow:0 12px 28px rgba(7,10,24,.4),0 0 0 1px rgba(255,255,255,.6)!important}
  .photo-card-direct.item-1{animation:photoFloatMobile1 5.8s ease-in-out infinite alternate!important}
  .photo-card-direct.item-2{animation:photoFloatMobile2 6.5s -1.8s ease-in-out infinite alternate!important}
  .photo-card-direct.item-3{animation:photoFloatMobile3 6.2s -3.2s ease-in-out infinite alternate!important}
  .photo-card-direct.item-4{animation:photoFloatMobile4 7s -4.5s ease-in-out infinite alternate!important}
  .photo-pin{width:18px;height:18px;font-size:8px;top:-6px}
  .photo-surface{aspect-ratio:auto!important;height:clamp(100px,14.5vh,135px)!important;max-height:none!important;border-radius:5px}
  .photo-tag{top:5px;right:5px;padding:1px 5px;font-size:7px;border-radius:8px}
  .photo-caption-bar{padding:5px 2px 0}
  .photo-title{font-size:clamp(10px,1.2vh,11.5px);line-height:1.35}
  .photo-subtitle{font-size:clamp(8px,.95vh,9px);line-height:1.4;margin-top:2px}
  .gallery-footer{max-width:440px;margin-top:8px;gap:8px}
  .gallery-counter-label{font-size:7.5px;letter-spacing:.12em}
  .gallery-footer .pill-button{min-height:34px;padding:0 14px;font-size:9.5px}
}
@keyframes photoFloatMobile1 {
  0% { transform: translateY(0px) rotate(-1.5deg); }
  50% { transform: translateY(-4px) rotate(-0.5deg); }
  100% { transform: translateY(2px) rotate(-2deg); }
}
@keyframes photoFloatMobile2 {
  0% { transform: translateY(-2px) rotate(1.5deg); }
  50% { transform: translateY(3px) rotate(2.5deg); }
  100% { transform: translateY(-1px) rotate(1deg); }
}
@keyframes photoFloatMobile3 {
  0% { transform: translateY(2px) rotate(1deg); }
  50% { transform: translateY(-3px) rotate(-0.5deg); }
  100% { transform: translateY(1px) rotate(1.8deg); }
}
@keyframes photoFloatMobile4 {
  0% { transform: translateY(0px) rotate(-1.5deg); }
  50% { transform: translateY(-4px) rotate(-0.2deg); }
  100% { transform: translateY(2px) rotate(-2.2deg); }
}
@media(max-width:600px){.topbar{height:52px;padding:0 16px}.monogram{font-size:24px}.topbar-label{font-size:7.5px;letter-spacing:.16em}.sound-toggle{font-size:8.5px;gap:5px;padding:8px}.sound-icon{font-size:16px}.scene{padding:clamp(52px,7.5vh,64px) 16px max(24px,calc(env(safe-area-inset-bottom,0px) + 16px))}.eyebrow{font-size:8px;letter-spacing:.22em;margin-bottom:10px}.envelope-wrap{width:min(280px,36vh,74vw);margin-bottom:6px}.opening-title{font-size:clamp(22px,3.6vh,28px);line-height:1.35}.opening-subtitle{font-size:11.5px;line-height:1.75;margin:6px 0 14px}.script-word{font-size:clamp(24px,4vh,34px);line-height:1.32}.greeting-title h2{font-size:clamp(32px,5.5vh,46px);line-height:1.24}.scene-copy{font-size:11.5px;line-height:1.85;margin:10px 0 16px;max-width:340px}.hanging-garland{top:44px;left:1%;right:1%;height:75px;transform:scale(.86);transform-origin:top center}.garland-flag{width:26px}.garland-flag span{width:22px;height:22px;font-size:9.5px}.balloon-cluster{top:55px;width:130px;height:230px}.balloon-cluster-left{left:-10px;transform:scale(.72);transform-origin:top left;opacity:.88}.balloon-cluster-right{right:-10px;transform:scale(.72);transform-origin:top right;opacity:.88}.greeting-layout{position:relative;z-index:4}.orbit{width:76vw}.orbit-b{width:90vw}.flower-a{left:8%;top:18%}.flower-b{right:8%;bottom:17%}.worlds-art{width:92vw;height:clamp(130px,21vh,175px);margin-bottom:10px}.world-code{width:56%;transform:rotate(-2deg)}.world-pharmacy{width:38%}.code-lines{padding:10px 8px 12px;font-size:8px;line-height:1.75}.worlds-title{font-size:clamp(20px,3.4vh,28px);line-height:1.32;margin-top:2px}.worlds-layout .scene-copy{font-size:11.5px;line-height:1.85;margin:8px 0 14px}.gallery-heading{margin-bottom:clamp(16px, 2.8vh, 24px) !important}.gallery-heading h2{font-size:clamp(20px,3.4vh,28px);line-height:1.3}.gallery-intro{font-size:10px;line-height:1.75;margin:3px 0 0}.gallery-heart-quote{font-size:9px;line-height:1.6;margin:5px 0 0;padding:2px 8px}.gallery-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px 8px!important;width:100%!important;max-width:400px!important;margin:0 auto 8px!important;overflow-x:visible!important;padding:0!important}.photo-card-direct{flex:none!important;width:100%!important;max-width:none!important;padding:5px 5px 7px!important;box-shadow:0 8px 20px rgba(0,0,0,.35)!important}.photo-surface{height:clamp(92px,13.5vh,122px)!important}.photo-title{font-size:clamp(10px,1.2vh,11.5px);line-height:1.35}.photo-subtitle{font-size:clamp(8px,.95vh,9px);line-height:1.4}.gallery-footer{width:100%;max-width:400px;margin-top:4px;gap:6px}.gallery-footer>span{font-size:7px;letter-spacing:.1em;white-space:nowrap}.gallery-footer .pill-button{min-height:33px;padding:0 12px;font-size:9px;white-space:nowrap}.gallery-note{font-size:7.5px;margin:6px 0 0}.letter-stage{width:min(100%,355px);min-height:min(380px,48vh);perspective:1200px}.letter-actions{margin-top:14px}.letter-paper{width:100%}.letter-paper:not(.is-folded){max-height:min(410px,50vh);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.letter-paper::-webkit-scrollbar{width:4px}.letter-paper::-webkit-scrollbar-thumb{background:rgba(167,95,107,.35);border-radius:4px}.fold-front{padding:8px 16px}.fold-top .fold-front{padding-top:14px;padding-bottom:4px}.fold-bot .fold-front{padding-top:4px;padding-bottom:15px}.letter-paper h2{font-size:clamp(18px,2.8vh,24px);line-height:1.32;margin-bottom:6px}.fold-para,.fold-mid p{font-size:10.5px;line-height:1.82;margin-bottom:.5em}.letter-signoff strong{font-size:25px}.letter-actions{margin-top:10px}.letter-actions .pill-button{min-height:40px;font-size:10px;padding:0 15px}.cake-wrap{transform:scale(.82);margin:-16px 0 -8px}.surprise-title{font-size:clamp(22px,3.6vh,30px);line-height:1.32}.surprise-layout .scene-copy{font-size:11.5px;line-height:1.85;margin:6px 0 8px;max-width:330px}.breath-hint{font-size:8px;margin-top:6px}.finale-layout h2{font-size:clamp(22px,3.8vh,32px);line-height:1.32}.finale-copy{margin:8px 0;font-size:11.5px;line-height:1.85}.signature{font-size:22px;line-height:1.35;margin-bottom:10px}.finale-line{margin-bottom:10px}.final-gift-wrap{min-height:92px;margin:12px auto 6px}.final-gift-message.revealed{max-height:180px;margin:4px 0 8px;padding:12px 14px}.final-gift-message p{font-size:18px;line-height:1.4;margin:4px 0}.final-gift-message>span:not(.gift-message-spark){font-size:10.5px;line-height:1.75}.final-gift-message strong{font-size:20px;line-height:1.3;margin-top:4px}.replay-button{margin-bottom:max(8px,env(safe-area-inset-bottom));min-height:42px}.lightbox{padding:50px 20px}.lightbox figure{max-width:92vw}.lightbox-arrow.prev{left:6px}.lightbox-arrow.next{right:6px}}
@media(max-height:700px) and (min-width:601px){.scene{padding-top:60px;padding-bottom:64px}.eyebrow{margin-bottom:10px}.letter-paper{padding-top:14px;padding-bottom:12px}.letter-copy{font-size:10px;line-height:1.45}.letter-paper h2{margin-bottom:8px}.gallery-stage{height:34vh}.cake-wrap{transform:scale(.86);margin:-17px 0 -12px}.surprise-layout .eyebrow{margin-bottom:7px}.surprise-layout .scene-copy{margin:5px 0 7px}}
@media(max-height:640px){.topbar{height:45px}.scene{padding-top:48px;padding-bottom:52px}.envelope-wrap{width:min(235px,37vh,55vw)}.opening-title{font-size:28px}.opening-subtitle{margin:5px 0 10px}.micro-hint{margin-top:8px}.worlds-art{height:120px}.gallery-heading{margin-bottom:12px !important}.gallery-heading h2{font-size:clamp(22px,3.6vh,28px)}.gallery-intro{display:none}.gallery-grid{gap:6px!important;margin-bottom:4px!important}.photo-surface{height:clamp(78px,11.5vh,98px)!important}.gallery-footer{margin-top:2px}.letter-paper{padding:10px 22px}.letter-copy{font-size:9px;line-height:1.4}.letter-paper h2{font-size:24px;margin-bottom:6px}.letter-layout>.eyebrow{margin-bottom:5px}.letter-signoff{padding-top:4px;margin-top:3px}.cake-wrap{transform:scale(.72);margin:-28px 0 -22px}.surprise-layout .eyebrow{margin-bottom:3px}.surprise-layout .scene-copy{margin:2px 0 5px}.breath-hint{display:none}}

/* ========================================================
   CINEMATIC ARTISTIC MOTION & SCENE-SPECIFIC ATMOSPHERES
   ======================================================== */

:root {
  --cinematic-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ambient-a: #b85d7b;
  --ambient-b: #c7a66c;
}

/* Dynamic Ambient Moods per Scene */
body[data-scene="0"] .ambient { background: radial-gradient(ellipse at 50% 48%, #2d2030 0%, #1c1728 58%, #120f1c 100%); }
body[data-scene="0"] .glow-one { background: #d47895; }
body[data-scene="0"] .glow-two { background: #e0b872; }

body[data-scene="1"] .ambient { background: radial-gradient(ellipse at 50% 45%, #2e1d3e 0%, #1a162e 58%, #120d20 100%); }
body[data-scene="1"] .glow-one { background: #b065e8; }
body[data-scene="1"] .glow-two { background: #f472b6; }

body[data-scene="2"] .ambient { background: radial-gradient(ellipse at 35% 42%, #14223d 0%, #18192e 52%, #2c1930 100%); }
body[data-scene="2"] .glow-one { background: #38bdf8; }
body[data-scene="2"] .glow-two { background: #f472b6; }

body[data-scene="3"] .ambient { background: radial-gradient(ellipse at 50% 48%, #361f32 0%, #1e172a 62%, #14101e 100%); }
body[data-scene="3"] .glow-one { background: #fb7185; }
body[data-scene="3"] .glow-two { background: #fcd34d; }

body[data-scene="4"] .ambient { background: radial-gradient(ellipse at 50% 45%, #3d152c 0%, #260e20 62%, #140714 100%); }
body[data-scene="4"] .glow-one { background: #f59e0b; opacity: 0.35; }
body[data-scene="4"] .glow-two { background: #f43f5e; opacity: 0.35; }

body[data-scene="5"] .ambient { background: radial-gradient(ellipse at 50% 48%, #3d1d30 0%, #22162a 62%, #150f1d 100%); }
body[data-scene="5"] .glow-one { background: #f59e0b; }
body[data-scene="5"] .glow-two { background: #f43f5e; }

body[data-scene="6"] .ambient { background: radial-gradient(ellipse at 50% 44%, #28193f 0%, #17122a 58%, #0e0a1c 100%); }
body[data-scene="6"] .glow-one { background: #9333ea; }
body[data-scene="6"] .glow-two { background: #fbbf24; }

.ambient {
  transition: background 1.2s ease;
}
.glow {
  transition: background 1.2s ease, opacity 1.2s ease;
}

/* Dynamic Topbar contrast adaptation for light scenes (Scene 0 & 5) */
body[data-scene="0"] .topbar-label,
body[data-scene="5"] .topbar-label {
  color: #63434b;
  opacity: 0.95;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}
body[data-scene="0"] .sound-toggle,
body[data-scene="5"] .sound-toggle {
  color: #5c3842;
  font-weight: 600;
}
body[data-scene="0"] .sound-icon,
body[data-scene="5"] .sound-icon {
  color: #8c3c4d;
}
body[data-scene="0"] .monogram,
body[data-scene="5"] .monogram {
  color: #8c3c4d;
}
body[data-scene="0"] .monogram span,
body[data-scene="5"] .monogram span {
  color: #c46b7c;
}

/* Scene Transition FX: Cinematic Starlight Bloom */
#sceneTransitionFX {
  position: fixed;
  inset: -15%;
  z-index: 18;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 246, 225, 0.75) 0%, rgba(245, 195, 210, 0.28) 25%, transparent 65%);
  mix-blend-mode: screen;
  filter: blur(15px);
  will-change: transform, opacity;
}
#sceneTransitionFX.play {
  animation: sceneBloom 1.05s var(--cinematic-ease) both;
}
@keyframes sceneBloom {
  0% { opacity: 0; transform: scale(0.85); }
  30% { opacity: 0.85; }
  65% { opacity: 0.3; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.28); }
}

/* Living Floating Physics for Interactive Elements */
.envelope-wrap {
  animation: livingFloat 6s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
.world-code {
  animation: livingFloat 6.5s ease-in-out infinite;
  will-change: transform;
}
.world-pharmacy {
  animation: livingFloat 6.2s -2s ease-in-out infinite;
  will-change: transform;
}
.world-connector {
  animation: livingFloat 5.2s -3s ease-in-out infinite;
}
.photo-card-left {
  animation: livingFloat 6.8s -1.5s ease-in-out infinite;
}
.photo-card-main {
  animation: livingFloat 6s ease-in-out infinite;
}
.photo-card-right {
  animation: livingFloat 6.4s -2.5s ease-in-out infinite;
}
.letter-paper {
  animation: livingFloat 7s ease-in-out infinite;
  will-change: transform;
}
.cake-wrap {
  animation: livingFloat 6.2s ease-in-out infinite;
  will-change: transform;
}
.final-gift-wrap {
  animation: livingFloat 5.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes livingFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

/* Gentle Breathing Glow on Headlines & Badges */
.eyebrow, .script-word, .age-ribbon, .finale-star {
  animation: gentleBreathe 4.5s ease-in-out infinite alternate;
}
@keyframes gentleBreathe {
  from { filter: drop-shadow(0 0 2px rgba(227, 201, 143, 0.2)); }
  to { filter: drop-shadow(0 0 12px rgba(227, 201, 143, 0.7)); }
}

/* Tactile Interactive Buttons */
.pill-button {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--cinematic-ease), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}
.pill-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(215, 166, 170, 0.28), 0 0 20px rgba(227, 201, 143, 0.25);
  border-color: #f7e0b5;
}
.pill-button:active {
  transform: translateY(1px) scale(0.96);
}
.pill-button span {
  display: inline-block;
  transition: transform 0.3s var(--spring-ease);
}
.pill-button:hover span {
  transform: translateX(4px);
}

/* Interactive Cursor Sparkle Trail */
.pointer-spark {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  color: var(--spark-color, #f0d399);
  font-size: var(--spark-size, 14px);
  text-shadow: 0 0 10px currentColor, 0 0 20px rgba(255, 255, 255, 0.8);
  animation: sparkFadeOut 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}
@keyframes sparkFadeOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
  40% { opacity: 1; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1.2) rotate(45deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx) * 1.6), calc(-50% + var(--sy) * 1.6)) scale(0.4) rotate(90deg); }
}

/* Ripple effect on clicked buttons */
.button-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(227, 201, 143, 0.3) 50%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: rippleExpand 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  z-index: 10;
}
@keyframes rippleExpand {
  to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* Age Milestone Badges */
.age-ribbon {
  margin: 9px 0 0;
  color: #e4c991;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(228, 201, 145, 0.6);
}
.age-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #9b6b77;
  letter-spacing: 0.2em;
  font-size: 9px;
  line-height: 1.5;
  animation: badgeHover 4s ease-in-out infinite;
}
.age-badge strong {
  font: 500 28px/1.15 var(--serif);
  letter-spacing: -0.03em;
  color: #a45b6b;
  text-shadow: 0 4px 18px rgba(183, 122, 124, 0.45);
}
@keyframes badgeHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Envelope 3D Realistic Features */
.envelope-wrap:hover .wax-seal {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: inset 0 0 0 2px #d49596, inset 0 0 0 5px #783c4a, 0 8px 22px rgba(120, 60, 74, 0.55);
}
.wax-seal {
  will-change: transform, opacity;
  transition: transform 0.4s var(--spring-ease), opacity 0.35s ease, box-shadow 0.4s ease;
}

/* Gallery Photo Cards: Romantic Styling & Interactive Parallax */
.photo-card {
  border-radius: 4px;
  box-shadow: 0 20px 45px rgba(8, 11, 24, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: transform 0.5s var(--cinematic-ease), box-shadow 0.5s ease, filter 0.5s ease;
  will-change: transform;
}
.photo-card:hover {
  z-index: 10 !important;
  box-shadow: 0 30px 65px rgba(8, 11, 24, 0.65), 0 0 25px rgba(244, 214, 223, 0.4);
  filter: brightness(1.03);
}
.photo-placeholder {
  display: flex !important;
  position: absolute;
  inset: 8px 8px 25px;
  background: linear-gradient(135deg, #f7eae1 0%, #ebd3d2 50%, #dfbfbe 100%);
  color: #6d4a52;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  font: 700 20px/1.2 var(--script);
  border: 1px dashed rgba(167, 95, 107, 0.35);
  border-radius: 2px;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.6);
}
.photo-placeholder::after {
  content: "♡";
  font-size: 14px;
  color: #a75f6b;
  opacity: 0.8;
}

/* Two Worlds: Interactive Code & Medicine */
.world-code:hover {
  box-shadow: 0 25px 65px rgba(7, 10, 20, 0.75), 0 0 28px rgba(56, 189, 248, 0.25);
}
.world-pharmacy:hover {
  filter: drop-shadow(0 0 22px rgba(244, 114, 182, 0.35));
}
.world-connector span {
  display: inline-block;
  animation: spinTwinkle 8s linear infinite;
}
@keyframes spinTwinkle {
  0% { transform: rotate(0deg) scale(0.9); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(0.9); }
}

/* Cake & Candle Enhancements */
.cake-wrap:after {
  content: "";
  position: absolute;
  inset: 10% 4%;
  border-radius: 50%;
  border: 1px solid rgba(255, 249, 237, 0.45);
  animation: cakeHaloPulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cakeHaloPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.2; }
  50% { transform: scale(1.08); opacity: 0.55; }
}
.candle:hover {
  transform: translateY(-6px) scale(1.08);
}
.candle.blown {
  pointer-events: none;
  opacity: 0.45;
  filter: grayscale(0.5);
  transition: opacity 0.5s ease, filter 0.5s ease;
}

/* Finale Gift Box & Romantic Secret Message */
.final-gift-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 18px auto 10px;
  min-height: 110px;
}
.final-gift {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #f1d9c5;
  cursor: pointer;
  padding: 4px 16px;
  isolation: isolate;
  transition: transform 0.4s var(--spring-ease);
}
.final-gift:hover {
  transform: translateY(-4px) scale(1.04);
}
.gift-aura {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 110px;
  height: 85px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(245, 216, 169, 0.55) 0%, transparent 72%);
  filter: blur(8px);
  animation: giftAuraBreath 3.2s ease-in-out infinite;
  z-index: -1;
}
@keyframes giftAuraBreath {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(0.85); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.25); }
}
.gift-box {
  position: relative;
  display: block;
  width: 70px;
  height: 46px;
  margin-top: 20px;
  border-radius: 5px 5px 8px 8px;
  background: linear-gradient(135deg, #d8a4ad, #98586e 75%);
  box-shadow: 0 10px 26px rgba(7, 8, 23, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  transition: transform 0.6s var(--cinematic-ease), filter 0.6s ease;
}
.gift-box:after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: -7px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(100deg, #e9c5c2, #b87689);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.gift-ribbon-v {
  position: absolute;
  z-index: 2;
  left: 30px;
  top: -7px;
  width: 11px;
  height: 53px;
  background: linear-gradient(90deg, #f8e7bc, #c69c61, #f8e7bc);
}
.gift-ribbon-h {
  position: absolute;
  z-index: 2;
  left: -5px;
  right: -5px;
  top: 15px;
  height: 8px;
  background: linear-gradient(#f8e7bc, #c69c61, #f8e7bc);
}
.gift-lid {
  position: absolute;
  z-index: 3;
  left: -5px;
  top: -14px;
  width: 80px;
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(110deg, #f0d4c9, #b87587);
  transform-origin: 10% 90%;
  transition: transform 0.85s var(--cinematic-ease);
}
.gift-bow {
  position: absolute;
  z-index: 4;
  left: 27px;
  top: -24px;
  width: 16px;
  height: 14px;
  border: 4px solid #e8c78b;
  border-radius: 80% 20% 70% 30%;
  transform: rotate(25deg);
  transition: transform 0.8s var(--cinematic-ease);
}
.gift-bow:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 14px;
  left: 6px;
  top: -4px;
  border: 4px solid #e8c78b;
  border-radius: 20% 80% 30% 70%;
  transform: rotate(30deg);
}
.gift-caption {
  font: italic 14px var(--serif);
  letter-spacing: 0.03em;
  color: #e5d3d8;
  opacity: 0.9;
  transition: color 0.35s, letter-spacing 0.35s;
}
.final-gift:hover .gift-caption {
  color: #ffe5b4;
  letter-spacing: 0.06em;
}
.final-gift.opened .gift-lid {
  transform: translate(-14px, -12px) rotate(-28deg);
}
.final-gift.opened .gift-bow {
  transform: translateY(-12px) rotate(42deg);
  opacity: 0.75;
}
.final-gift.opened .gift-box {
  filter: drop-shadow(0 0 25px rgba(244, 214, 165, 0.8));
  transform: translateY(2px) scale(0.96);
}
.final-gift-message {
  display: block;
  max-width: min(460px, 88vw);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: max-height 0.85s var(--cinematic-ease), opacity 0.75s ease, transform 0.8s var(--cinematic-ease), margin 0.6s ease;
  padding: 0 16px;
  text-align: center;
  color: #eadde2;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(227, 201, 143, 0.25);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}
.final-gift-message.revealed {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0) scale(1);
  margin: 12px 0 14px;
  padding: 16px 20px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3), 0 0 24px rgba(227, 201, 143, 0.2);
}
.gift-message-spark {
  color: #f0d39b;
  font-size: 15px;
  letter-spacing: 0.3em;
}
.final-gift-message p {
  font: italic 20px/1.4 var(--serif);
  color: #f5dbcf;
  margin: 6px 0 8px;
}
.final-gift-message > span:not(.gift-message-spark) {
  font-size: 11.5px;
  line-height: 1.8;
  color: #d6cbd7;
  display: block;
}
.final-gift-message strong {
  font: 700 24px/1.35 var(--script);
  color: #f2c9d3;
}

/* ========================================================
   ARTISTIC SCENE BACKDROP DECORATIONS (ANTI-FLAT SYSTEM)
   ======================================================== */

.scene-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Ensure scene content sits comfortably in front of background decor */
.scene-inner {
  position: relative;
  z-index: 3;
}

/* --- SCENE 0: VINTAGE LETTERPRESS & BOTANICAL (COVER) --- */
.decor-envelope {
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 250, 240, 0.6) 0%, rgba(247, 230, 214, 0.3) 50%, rgba(206, 175, 154, 0.45) 100%);
}

.decor-vintage-border {
  position: absolute;
  inset: clamp(12px, 2.5vw, 24px);
  border: 1px solid rgba(167, 95, 107, 0.22);
  border-radius: 12px;
  pointer-events: none;
}
.decor-vintage-border::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(227, 201, 143, 0.35);
  border-radius: 9px;
}
.decor-vintage-border::after {
  content: "✦";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #fbf5eb;
  padding: 0 10px;
  color: #c7a66c;
  font-size: 13px;
}

.decor-light-leak {
  position: absolute;
  border-radius: 50%;
  filter: blur(65px);
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  animation: leakSway 9s ease-in-out infinite alternate;
}
.leak-amber {
  width: 55vw;
  height: 55vw;
  top: -20%;
  left: -15%;
  background: radial-gradient(circle, rgba(255, 224, 163, 0.8) 0%, rgba(230, 160, 80, 0.3) 60%, transparent 80%);
}
.leak-rose {
  width: 60vw;
  height: 60vw;
  bottom: -25%;
  right: -15%;
  background: radial-gradient(circle, rgba(251, 182, 206, 0.75) 0%, rgba(219, 39, 119, 0.25) 55%, transparent 75%);
  animation-delay: -4.5s;
}
@keyframes leakSway {
  0% { transform: translate3d(0, 0, 0) scale(0.95); }
  50% { transform: translate3d(3%, 4%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

.decor-botanical {
  position: absolute;
  pointer-events: none;
  opacity: 0.65;
  transition: transform 0.6s ease;
}
.botanical-tl {
  top: clamp(18px, 3.5vw, 36px);
  left: clamp(18px, 3.5vw, 36px);
  animation: botanicalFloatA 12s ease-in-out infinite alternate;
}
.botanical-br {
  bottom: clamp(18px, 3.5vw, 36px);
  right: clamp(18px, 3.5vw, 36px);
  animation: botanicalFloatB 14s ease-in-out infinite alternate;
}
@keyframes botanicalFloatA {
  0% { transform: rotate(0deg) translate3d(0, 0, 0); }
  50% { transform: rotate(3deg) translate3d(4px, 6px, 0); }
  100% { transform: rotate(-2deg) translate3d(-3px, 2px, 0); }
}
@keyframes botanicalFloatB {
  0% { transform: rotate(0deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-3.5deg) translate3d(-5px, -6px, 0); }
  100% { transform: rotate(2deg) translate3d(2px, -3px, 0); }
}

.decor-celestial-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vw, 560px);
  height: min(78vw, 560px);
  border-radius: 50%;
  border: 1px dashed rgba(167, 95, 107, 0.16);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: celestialRingSpin 160s linear infinite;
}
.decor-celestial-ring::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px solid rgba(227, 201, 143, 0.2);
}
@keyframes celestialRingSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.decor-bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.45;
  background: radial-gradient(circle, #fff6dd 0%, rgba(246, 202, 175, 0.6) 50%, transparent 80%);
  animation: bokehPulse 7s ease-in-out infinite alternate;
}
.bokeh-c1 {
  width: 130px;
  height: 130px;
  top: 25%;
  left: 15%;
}
.bokeh-c2 {
  width: 170px;
  height: 170px;
  bottom: 22%;
  right: 14%;
  animation-delay: -3.5s;
}
@keyframes bokehPulse {
  0% { transform: scale(0.85); opacity: 0.3; }
  100% { transform: scale(1.15); opacity: 0.55; }
}

/* --- SCENE 1: ROMANTIC AURORA & STARRY NIGHT ENHANCEMENTS --- */
.scene-greeting {
  background: radial-gradient(ellipse at 50% 40%, #35264b 0%, #1f1b3a 45%, #15162a 75%, #0e0e1a 100%) !important;
}
.scene-greeting::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 25% 30%, rgba(176, 101, 232, 0.18) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 70%, rgba(244, 114, 182, 0.15) 0%, transparent 55%),
              radial-gradient(ellipse at 50% 90%, rgba(227, 201, 143, 0.12) 0%, transparent 50%);
  filter: blur(40px);
  animation: auroraBreath 11s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes auroraBreath {
  0% { opacity: 0.6; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1.05); }
}

/* --- SCENE 2: SPLIT WORLDS (CYBER CIRCUIT + PHARMA BOTANICAL LATTICE) --- */
.scene-worlds,
.scene.scene-worlds,
#experience .scene-worlds {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: 
    radial-gradient(ellipse at 50% 50%, rgba(18, 24, 46, 0.94) 0%, rgba(12, 16, 32, 0.98) 60%, #080b18 100%),
    linear-gradient(90deg, #091325 0%, #0d1a38 25%, #181938 48%, #251433 52%, #2d112b 75%, #180920 100%) !important;
}
.decor-worlds {
  display: block;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Left: Developer Universe (Nam) */
.worlds-bg-code {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 50% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-right: none !important;
  pointer-events: none !important;
}
.code-circuit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.75;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.35));
}
.code-grid-mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at 35% 50%, black 25%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 35% 50%, black 25%, transparent 85%);
  animation: codeGridDrift 28s linear infinite;
}
@keyframes codeGridDrift {
  from { background-position: 0 0; }
  to { background-position: 34px 68px; }
}
.code-ambient-glow {
  position: absolute;
  width: 65vw;
  height: 65vw;
  top: 15%;
  left: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(14, 165, 233, 0.08) 50%, transparent 75%);
  filter: blur(55px);
  animation: glowDrift 16s ease-in-out infinite alternate;
}

/* Glassmorphism Tech Cards */
.tech-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(7, 10, 24, 0.45), 0 0 15px rgba(56, 189, 248, 0.15);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(8.5px, 1.05vw, 11px);
  color: #bae6fd;
  white-space: nowrap;
  pointer-events: none;
  animation: floatSubtle 6s ease-in-out infinite alternate;
}
.tech-card em {
  color: #f472b6;
  font-style: normal;
}
.tech-icon {
  font-size: 11px;
  color: #38bdf8;
  animation: pulseLight 2s infinite;
}
.tech-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  animation: blinkDot 1.6s infinite;
}
.tech-card-1 {
  top: 14%;
  left: 6%;
  animation-duration: 7s;
}
.tech-card-2 {
  top: 72%;
  left: 7%;
  animation-delay: -2.5s;
  animation-duration: 8s;
}
.tech-card-3 {
  bottom: 7%;
  left: 12%;
  border-color: rgba(227, 201, 143, 0.38);
  color: #f7dfa5;
  animation-delay: -4s;
  animation-duration: 9s;
}

.tech-badge-binary {
  position: absolute;
  top: 30%;
  left: 5%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: ui-monospace, monospace;
  pointer-events: none;
  opacity: 0.75;
}
.binary-digits {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(56, 189, 248, 0.85);
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
.binary-label {
  font-size: 7.5px;
  letter-spacing: 0.16em;
  color: rgba(148, 163, 184, 0.85);
}

.cyber-glyph {
  position: absolute;
  font-family: ui-monospace, monospace;
  font-size: clamp(14px, 1.8vw, 22px);
  color: rgba(56, 189, 248, 0.25);
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
  pointer-events: none;
  font-weight: 600;
  animation: glyphFloat 10s ease-in-out infinite alternate;
}
.glyph-1 { top: 24%; left: 38%; animation-delay: -1s; }
.glyph-2 { top: 58%; left: 34%; animation-delay: -3s; }
.glyph-3 { bottom: 22%; left: 4%; animation-delay: -5s; }
.glyph-4 { top: 8%; left: 28%; font-size: 13px; color: rgba(244, 114, 182, 0.38); }
.glyph-5 { bottom: 35%; left: 22%; animation-delay: -4s; }

/* Center Starlight Merging Aura & Nexus (No Dividing Line) */
.worlds-center-aura,
.worlds-center-beam {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 50%, rgba(227, 201, 143, 0.08) 0%, rgba(244, 114, 182, 0.05) 35%, transparent 70%);
}
.beam-line,
.beam-pulse,
.beam-spark {
  display: none !important;
}

.nexus-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 14px;
  border-radius: 20px;
  background: rgba(20, 18, 36, 0.88);
  border: 1px solid rgba(227, 201, 143, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(227, 201, 143, 0.3);
  font-size: 11px;
  margin-bottom: 6px;
  z-index: 4;
}
.nexus-badge .sym-code { color: #38bdf8; font-family: monospace; font-weight: 700; font-size: 10px; }
.nexus-badge .sym-heart { color: #f472b6; font-style: normal; font-size: 12px; }
.nexus-badge .sym-pharma { color: var(--gold); font-family: serif; font-size: 13px; font-weight: 700; }

/* Right: Pharmacist Universe (Khánh Chi) */
.worlds-bg-pharma {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 50% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-left: none !important;
  pointer-events: none !important;
}
.pharma-hex-lattice {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(244, 114, 182, 0.12) 1.5px, transparent 1.5px),
    radial-gradient(circle at 0% 100%, rgba(244, 114, 182, 0.09) 1.5px, transparent 1.5px);
  background-size: 28px 48px, 28px 48px;
  background-position: 0 0, 14px 24px;
  mask-image: radial-gradient(ellipse at 65% 50%, black 25%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 65% 50%, black 25%, transparent 85%);
  animation: latticeDrift 30s linear infinite;
}
@keyframes latticeDrift {
  from { background-position: 0 0, 14px 24px; }
  to { background-position: -28px 48px, -14px 72px; }
}
.pharma-ambient-glow {
  position: absolute;
  width: 65vw;
  height: 65vw;
  top: 15%;
  right: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.22) 0%, rgba(219, 39, 119, 0.08) 50%, transparent 75%);
  filter: blur(55px);
  animation: glowDrift 15s -4s ease-in-out infinite alternate;
}

.pharma-molecule-chart {
  position: absolute;
  top: 22%;
  right: 6%;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(244, 114, 182, 0.35));
  animation: floatSubtle 8s -2s ease-in-out infinite alternate;
}

.pharma-crest {
  position: absolute;
  top: 10%;
  right: 7%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 22px;
  background: rgba(38, 20, 36, 0.82);
  border: 1px solid rgba(244, 114, 182, 0.38);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 16px rgba(244, 114, 182, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: floatSubtle 7s -1s ease-in-out infinite alternate;
}
.rx-symbol {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: #f7dfa5;
  line-height: 1;
  text-shadow: 0 0 10px rgba(247, 223, 165, 0.6);
}
.crest-details {
  display: flex;
  flex-direction: column;
}
.crest-details strong {
  font-size: 11px;
  color: #fdf2f8;
  letter-spacing: 0.06em;
}
.crest-details span {
  font-size: 8px;
  letter-spacing: 0.12em;
  color: #f472b6;
  text-transform: uppercase;
}

.pharma-pill-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 20px;
  background: rgba(38, 20, 36, 0.78);
  border: 1px solid rgba(227, 201, 143, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 14px rgba(227, 201, 143, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: clamp(8.5px, 1.05vw, 11px);
  color: #fde8e9;
  white-space: nowrap;
  pointer-events: none;
  animation: floatSubtle 8s ease-in-out infinite alternate;
}
.pharma-pill-badge.badge-1 {
  top: 72%;
  right: 7%;
  animation-delay: -3s;
}
.pharma-pill-badge.badge-2 {
  bottom: 7%;
  right: 12%;
  animation-delay: -5s;
  border-color: rgba(244, 114, 182, 0.38);
  color: #fce7f3;
}

.pharma-botanical-branch {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.3));
}
.branch-top {
  top: 2%;
  right: 2%;
  opacity: 0.6;
  animation: botanicalFloatA 10s ease-in-out infinite alternate;
}
.branch-bot {
  bottom: 4%;
  right: 3%;
  opacity: 0.7;
  animation: botanicalFloatB 12s ease-in-out infinite alternate;
}

.pharma-petal {
  position: absolute;
  font-size: 16px;
  color: rgba(244, 114, 182, 0.5);
  text-shadow: 0 0 10px rgba(244, 114, 182, 0.4);
  pointer-events: none;
  animation: petalDrift 9s ease-in-out infinite alternate;
}
.petal-1 { top: 20%; right: 38%; animation-delay: -1s; font-size: 18px; }
.petal-2 { top: 60%; right: 34%; animation-delay: -4s; color: rgba(227, 201, 143, 0.55); }
.petal-3 { bottom: 22%; right: 36%; animation-delay: -2s; font-size: 14px; }
.petal-4 { top: 84%; right: 4%; animation-delay: -6s; font-size: 13px; }

/* Animations for background elements */
@keyframes floatSubtle {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(0.8deg); }
  100% { transform: translateY(3px) rotate(-0.5deg); }
}
@keyframes glyphFloat {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
  50% { opacity: 0.45; }
  100% { transform: translateY(-12px) rotate(8deg); opacity: 0.25; }
}
@keyframes petalDrift {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
  50% { transform: translate(6px, -10px) rotate(15deg); opacity: 0.7; }
  100% { transform: translate(-4px, 8px) rotate(-10deg); opacity: 0.35; }
}
@keyframes blinkDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
@keyframes pulseLight {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.15); filter: brightness(1.4); }
}

/* Responsive adjustment for Mobile / Split screens */
@media (max-width: 859px) {
  .tech-card-1 { top: 7%; left: 3%; padding: 4px 8px; font-size: 8.5px; }
  .tech-card-2 { display: none; }
  .tech-card-3 { bottom: 2%; left: 3%; padding: 4px 8px; font-size: 8px; }
  .tech-badge-binary { display: none; }
  .pharma-molecule-chart { display: none; }
  .pharma-crest { top: 7%; right: 3%; padding: 4px 10px; }
  .pharma-pill-badge.badge-1 { display: none; }
  .pharma-pill-badge.badge-2 { bottom: 2%; right: 3%; padding: 4px 10px; font-size: 8px; }
  .cyber-glyph { opacity: 0.12; }
}

/* --- SCENE 3: ROMANTIC FAIRY LIGHT GALLERY --- */
.scene-gallery {
  background: radial-gradient(ellipse at 50% 34%, #3a1a36 0%, #25122c 44%, #161023 74%, #0c0815 100%) !important;
}
.gallery-soft-spotlight {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: min(85vw, 680px);
  height: min(75vh, 520px);
  background: radial-gradient(ellipse at 50% 25%, rgba(255, 237, 213, 0.18) 0%, rgba(244, 114, 182, 0.08) 50%, transparent 75%);
  filter: blur(35px);
  pointer-events: none;
  animation: spotlightSway 10s ease-in-out infinite alternate;
}
@keyframes spotlightSway {
  0% { transform: translateX(-52%) scale(0.96); opacity: 0.7; }
  100% { transform: translateX(-48%) scale(1.04); opacity: 0.95; }
}

.fairy-lights-curtain {
  position: absolute;
  top: 0;
  left: 3%;
  right: 3%;
  height: 160px;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  z-index: 2;
}
.fairy-string {
  position: relative;
  width: 1px;
  height: var(--len, 90px);
  background: linear-gradient(180deg, rgba(227, 201, 143, 0.5) 0%, rgba(227, 201, 143, 0.15) 100%);
  transform-origin: top center;
  animation: fairyStringSway 5.5s ease-in-out infinite alternate;
}
.fairy-string:nth-child(even) {
  animation-delay: -2.3s;
  animation-duration: 6.2s;
}
@keyframes fairyStringSway {
  0% { transform: rotate(-4deg); }
  50% { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}

.fairy-bulb {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 13px;
  border-radius: 50% 50% 45% 45%;
  background: #ffffff;
}
.bulb-amber {
  background: #ffecb3;
  box-shadow: 0 0 10px #ffe082, 0 0 22px #ffca28, 0 0 35px rgba(255, 202, 40, 0.5);
  animation: bulbFlicker 3.2s ease-in-out infinite alternate;
}
.bulb-rose {
  background: #ffd1dc;
  box-shadow: 0 0 10px #f8a5c2, 0 0 22px #f78fb3, 0 0 35px rgba(247, 143, 179, 0.5);
  animation: bulbFlicker 4s -1.2s ease-in-out infinite alternate;
}
.bulb-gold {
  background: #fff8e1;
  box-shadow: 0 0 10px #ffe57f, 0 0 24px #ffd740, 0 0 38px rgba(255, 215, 64, 0.55);
  animation: bulbFlicker 3.6s -2.1s ease-in-out infinite alternate;
}
@keyframes bulbFlicker {
  0%, 100% { opacity: 0.85; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.25); }
}

.gallery-polaroid-faint {
  position: absolute;
  width: min(150px, 20vw);
  height: min(180px, 24vw);
  border: 1px dashed rgba(227, 201, 143, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
  filter: blur(2px);
  pointer-events: none;
}
.faint-left {
  top: 25%;
  left: 4%;
  transform: rotate(-14deg);
}
.faint-right {
  bottom: 22%;
  right: 5%;
  transform: rotate(12deg);
}

/* --- SCENE 3 ROMANTIC MEMORY AURORA & ATMOSPHERE DECOR --- */
.gallery-memory-aurora {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -20%);
  width: min(92vw, 860px);
  height: min(62vh, 480px);
  background: radial-gradient(ellipse at 50% 50%, rgba(244, 114, 182, 0.14) 0%, rgba(227, 201, 143, 0.09) 40%, rgba(139, 92, 246, 0.05) 70%, transparent 85%);
  filter: blur(45px);
  pointer-events: none;
  animation: auroraPulse 8s ease-in-out infinite alternate;
}
@keyframes auroraPulse {
  0% { transform: translate(-50%, -20%) scale(0.94); opacity: 0.7; }
  100% { transform: translate(-50%, -20%) scale(1.06); opacity: 1; }
}

/* Ambient Memory Bokeh Light Orbs */
.gallery-bokeh-cluster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.gallery-bokeh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.45;
  animation: bokehFloat 7.5s ease-in-out infinite alternate;
}
.g-orb-1 {
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.35), transparent 70%);
  top: 15%; left: 8%;
  animation-duration: 8.5s;
}
.g-orb-2 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(227, 201, 143, 0.3), transparent 70%);
  bottom: 12%; right: 7%;
  animation-duration: 9.5s;
  animation-delay: -2s;
}
.g-orb-3 {
  width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(251, 182, 206, 0.32), transparent 70%);
  top: 38%; right: 12%;
  animation-duration: 7s;
  animation-delay: -4s;
}
.g-orb-4 {
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.25), transparent 70%);
  bottom: 25%; left: 14%;
  animation-duration: 8s;
  animation-delay: -1.5s;
}
.g-orb-5 {
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.28), transparent 70%);
  top: 12%; right: 28%;
  animation-duration: 6.5s;
  animation-delay: -3s;
}
.g-orb-6 {
  width: 90px; height: 90px;
  background: radial-gradient(circle, rgba(227, 201, 143, 0.22), transparent 70%);
  bottom: 8%; left: 45%;
  animation-duration: 9s;
  animation-delay: -5s;
}
@keyframes bokehFloat {
  0% { transform: translate(0, 0) scale(0.95); opacity: 0.35; }
  50% { transform: translate(12px, -15px) scale(1.08); opacity: 0.6; }
  100% { transform: translate(-10px, 8px) scale(0.92); opacity: 0.4; }
}

/* Poetic Watermark: Expressing how these photos and smiles are deeply engraved in mind */
.gallery-memory-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 920px;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}
.watermark-quote-1 {
  font: italic 700 clamp(15px, 2.2vw, 22px)/1.5 var(--serif);
  color: rgba(247, 220, 213, 0.08);
  letter-spacing: 0.08em;
  margin: 0;
  text-shadow: 0 0 25px rgba(244, 114, 182, 0.1);
}
.watermark-quote-2 {
  font: italic 400 clamp(10.5px, 1.2vw, 13px)/1.6 var(--serif);
  color: rgba(227, 201, 143, 0.09);
  letter-spacing: 0.14em;
  margin: 8px 0 0;
}

/* Floating Petals & Star Motes */
.gallery-floating-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.gallery-petal {
  position: absolute;
  font-size: 14px;
  opacity: 0.55;
  filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.5));
  animation: floatPetalGallery 8s ease-in-out infinite;
}
.gp-1 { top: 18%; left: 6%; animation-duration: 7.5s; font-size: 16px; }
.gp-2 { top: 68%; left: 4%; animation-duration: 8.8s; animation-delay: -2s; font-size: 13px; color: #f472b6; }
.gp-3 { top: 22%; right: 8%; animation-duration: 6.8s; animation-delay: -3.5s; font-size: 12px; color: #fde047; }
.gp-4 { bottom: 16%; right: 6%; animation-duration: 9.2s; animation-delay: -1.2s; font-size: 15px; }
.gp-5 { top: 82%; left: 22%; animation-duration: 7.2s; animation-delay: -4.5s; font-size: 11px; color: #fbcfe8; }

@keyframes floatPetalGallery {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-20px) rotate(18deg); opacity: 0.75; }
  100% { transform: translateY(0) rotate(-10deg); opacity: 0.3; }
}

/* Romantic Ambient Archival Badges */
.gallery-bg-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(227, 201, 143, 0.2);
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  animation: badgeGentleGlow 5s ease-in-out infinite alternate;
}
.gallery-bg-badge .badge-icon {
  font-size: 11px;
  color: #f472b6;
}
.gallery-bg-badge .badge-text {
  font: 600 9px var(--sans);
  letter-spacing: 0.15em;
  color: #e2d9cd;
  text-transform: uppercase;
}
.badge-left {
  top: 48%;
  left: 2%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}
.badge-right {
  top: 48%;
  right: 2%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
}
@keyframes badgeGentleGlow {
  0% { border-color: rgba(227, 201, 143, 0.15); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
  100% { border-color: rgba(244, 114, 182, 0.35); box-shadow: 0 4px 22px rgba(244, 114, 182, 0.2); }
}

@media (max-width: 991px) {
  .gallery-bg-badge { display: none; }
  .gallery-memory-watermark {
    top: 22%;
    width: 94%;
    opacity: 0.85;
  }
  .watermark-quote-1 { font-size: clamp(13px, 3.2vw, 19px); letter-spacing: 0.04em; }
  .watermark-quote-2 { font-size: clamp(9px, 2vw, 12px); margin-top: 4px; }
}

/* --- SCENE 4: COZY ROMANTIC CANDLELIT STUDY & VINTAGE POSTAL DESK (LETTER) --- */
.scene-letter,
.scene.scene-letter,
#experience .scene-letter {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(254, 215, 170, 0.22) 0%, rgba(244, 114, 182, 0.16) 35%, transparent 68%),
    radial-gradient(circle at 14% 28%, rgba(251, 191, 36, 0.28) 0%, rgba(244, 63, 94, 0.14) 42%, transparent 72%),
    radial-gradient(circle at 86% 68%, rgba(244, 114, 182, 0.22) 0%, rgba(168, 85, 247, 0.1) 48%, transparent 72%),
    linear-gradient(135deg, #2b0f20 0%, #3e162c 30%, #260f22 65%, #180816 100%) !important;
}

.decor-letter {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Warm Lamplight & Candlelight Halo */
.letter-lamp-aura {
  position: absolute;
  top: -16%;
  left: -12%;
  width: min(88vw, 760px);
  height: min(88vw, 760px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.38) 0%, rgba(245, 158, 11, 0.22) 36%, rgba(244, 114, 182, 0.09) 60%, transparent 78%);
  filter: blur(52px);
  pointer-events: none;
  animation: lampWarmBreathe 7s ease-in-out infinite alternate;
}
@keyframes lampWarmBreathe {
  0% { opacity: 0.82; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.07); }
}

.letter-lamp-warmth-core {
  position: absolute;
  top: -6%;
  left: -6%;
  width: min(52vw, 380px);
  height: min(52vw, 380px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.5) 0%, rgba(251, 191, 36, 0.24) 45%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
  animation: lampPulse 5s ease-in-out infinite alternate;
}
@keyframes lampPulse {
  0% { transform: scale(0.92); opacity: 0.75; }
  100% { transform: scale(1.08); opacity: 1; }
}

/* Ambient Romantic Bokeh Clusters */
.romantic-bokeh-cluster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.bokeh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(16px);
  pointer-events: none;
  animation: bokehFloat 12s ease-in-out infinite alternate;
}
.orb-1 { width: 190px; height: 190px; top: 16%; left: 14%; background: radial-gradient(circle, rgba(254, 215, 170, 0.4), transparent 70%); animation-duration: 11s; }
.orb-2 { width: 250px; height: 250px; top: 32%; right: 10%; background: radial-gradient(circle, rgba(244, 114, 182, 0.35), transparent 70%); animation-delay: -3s; animation-duration: 14s; }
.orb-3 { width: 150px; height: 150px; bottom: 16%; left: 22%; background: radial-gradient(circle, rgba(251, 191, 36, 0.3), transparent 70%); animation-delay: -6s; animation-duration: 10s; }
.orb-4 { width: 170px; height: 170px; top: 6%; right: 28%; background: radial-gradient(circle, rgba(244, 63, 94, 0.25), transparent 70%); animation-delay: -2s; animation-duration: 13s; }
.orb-5 { width: 210px; height: 210px; bottom: 8%; right: 18%; background: radial-gradient(circle, rgba(254, 240, 138, 0.3), transparent 70%); animation-delay: -5s; animation-duration: 15s; }
.orb-6 { width: 130px; height: 130px; top: 58%; left: 7%; background: radial-gradient(circle, rgba(244, 114, 182, 0.3), transparent 70%); animation-delay: -4s; animation-duration: 9s; }

@keyframes bokehFloat {
  0% { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0.7; }
  50% { transform: translate3d(15px, -22px, 0) scale(1.12); opacity: 1; }
  100% { transform: translate3d(-12px, 16px, 0) scale(0.96); opacity: 0.75; }
}

/* Vintage Desk Candle with Flickering Dancing Flame */
.desk-candle-fixture {
  position: absolute;
  top: clamp(75px, 13vh, 130px);
  left: clamp(30px, 5.8vw, 110px);
  pointer-events: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.65));
  animation: floatSubtle 7s ease-in-out infinite alternate;
}
.candle-halo {
  position: absolute;
  top: -30px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.65) 0%, rgba(251, 191, 36, 0.3) 45%, transparent 75%);
  filter: blur(14px);
  animation: candleHaloPulse 3s ease-in-out infinite alternate;
}
@keyframes candleHaloPulse {
  0% { transform: scale(0.92); opacity: 0.78; }
  100% { transform: scale(1.15); opacity: 1; }
}
.candle-flame-wrap {
  position: relative;
  width: 14px;
  height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2px;
}
.candle-wick {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 8px;
  background: #451a03;
  border-radius: 1px;
}
.candle-flame {
  position: absolute;
  top: 0;
  width: 12px;
  height: 22px;
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 75%, #ffffff 0%, #fef08a 25%, #f59e0b 60%, #ef4444 95%);
  box-shadow: 0 0 14px #fde047, 0 0 28px rgba(245, 158, 11, 0.85);
  transform-origin: 50% 90%;
  animation: candleFlameDance 1.2s ease-in-out infinite alternate;
}
@keyframes candleFlameDance {
  0% { transform: rotate(-4deg) scale(0.96, 1.02); }
  50% { transform: rotate(5deg) scale(1.05, 0.95); }
  100% { transform: rotate(-2deg) scale(0.98, 1.04); }
}
.candle-wax-body {
  width: 16px;
  height: 60px;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(90deg, #fef3c7 0%, #fffbeb 40%, #fde68a 100%);
  box-shadow: inset -2px 0 4px rgba(180, 83, 9, 0.25), inset 2px 0 4px rgba(255, 255, 255, 0.6);
  position: relative;
}
.candle-brass-stand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brass-cup {
  width: 24px;
  height: 8px;
  background: linear-gradient(90deg, #92400e, #d97706 45%, #fef08a 55%, #78350f 100%);
  border-radius: 2px 2px 4px 4px;
}
.brass-stem {
  width: 8px;
  height: 18px;
  background: linear-gradient(90deg, #78350f, #d97706, #fef08a, #78350f);
}
.brass-base {
  width: 36px;
  height: 10px;
  background: linear-gradient(90deg, #78350f, #d97706 40%, #fef08a 52%, #78350f 100%);
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

/* Right Flank: Mini Romantic Polaroid of Khánh Chi */
.desk-polaroid-memory {
  position: absolute;
  top: clamp(235px, 33vh, 290px);
  right: clamp(35px, 5.5vw, 105px);
  pointer-events: none;
  z-index: 2;
  transform: rotate(5.5deg);
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 18px rgba(244, 114, 182, 0.3));
  animation: floatSubtle 8s -1.5s ease-in-out infinite alternate;
}
.polaroid-pin {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8eb, #e8c78b 65%, #b58d4a 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 8px rgba(232, 199, 139, 0.65);
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #783c4a;
  z-index: 3;
}
.polaroid-frame {
  background: linear-gradient(145deg, #fffcf7, #f7eee2);
  border: 1px solid rgba(227, 201, 143, 0.38);
  border-radius: 5px;
  padding: 8px 8px 10px;
  width: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.polaroid-photo-box {
  width: 100%;
  height: 120px;
  border-radius: 3px;
  overflow: hidden;
  background: #1b1722;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.polaroid-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.polaroid-caption {
  margin-top: 6px;
  font-family: var(--script);
  font-size: 13.5px;
  font-weight: 700;
  color: #8c4c59;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(244, 114, 182, 0.25);
}

/* Scattered Velvet Rose Petals on Desk */
.desk-scattered-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.desk-petal {
  position: absolute;
  width: 25px;
  height: 18px;
  border-radius: 65% 35% 65% 35% / 60% 40% 60% 40%;
  background: radial-gradient(circle at 35% 30%, #fb7185 0%, #e11d48 55%, #881337 100%);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
  opacity: 0.92;
  animation: petalHoverSway 6s ease-in-out infinite alternate;
}
.desk-petal::after {
  content: "";
  position: absolute;
  inset: 2px 4px 5px 2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, transparent 60%);
  pointer-events: none;
}
.petal-l1 { top: 46%; left: 18%; transform: rotate(-25deg); animation-delay: -1s; }
.petal-l2 { top: 64%; left: 21%; width: 20px; height: 14px; background: radial-gradient(circle at 35% 30%, #fda4af, #be123c 60%, #4c0519 100%); transform: rotate(35deg); animation-delay: -3s; }
.petal-l3 { top: 78%; left: 14%; width: 26px; height: 19px; transform: rotate(-55deg); animation-delay: -2s; }
.petal-r1 { top: 48%; right: 18%; transform: rotate(45deg); animation-delay: -2.5s; }
.petal-r2 { top: 66%; right: 15%; width: 22px; height: 15px; background: radial-gradient(circle at 35% 30%, #fda4af, #e11d48 60%, #4c0519 100%); transform: rotate(-15deg); animation-delay: -4s; }
.petal-r3 { top: 80%; right: 21%; width: 25px; height: 18px; transform: rotate(60deg); animation-delay: -1.5s; }
.petal-b1 { bottom: 12%; left: 32%; width: 20px; height: 14px; transform: rotate(15deg); animation-delay: -3.5s; opacity: 0.85; }
.petal-b2 { bottom: 14%; right: 30%; width: 22px; height: 15px; transform: rotate(-40deg); animation-delay: -5s; opacity: 0.85; }

@keyframes petalHoverSway {
  0% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  100% { transform: translateY(-5px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}

.letter-desk-texture {
  position: absolute;
  inset: 0;
  opacity: 0.055;
  background-image:
    repeating-linear-gradient(45deg, rgba(227, 201, 143, 0.14) 0, rgba(227, 201, 143, 0.14) 1px, transparent 0, transparent 15px),
    repeating-linear-gradient(-45deg, rgba(244, 114, 182, 0.1) 0, rgba(244, 114, 182, 0.1) 1px, transparent 0, transparent 22px);
  pointer-events: none;
}

/* Floating Fairy Motes / Lamplight Dust Particles */
.letter-motes-cluster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.letter-mote {
  position: absolute;
  color: #fef08a;
  text-shadow: 0 0 10px rgba(254, 240, 138, 0.8), 0 0 20px rgba(245, 158, 11, 0.4);
  pointer-events: none;
  animation: moteDrift 8s ease-in-out infinite alternate;
}
.mote-1 { top: 12%; left: 14%; font-size: 13px; opacity: 0.7; animation-duration: 7s; }
.mote-2 { top: 25%; left: 8%; font-size: 11px; opacity: 0.55; animation-delay: -2s; animation-duration: 9s; }
.mote-3 { top: 38%; left: 18%; font-size: 15px; opacity: 0.65; animation-delay: -4s; animation-duration: 8.5s; }
.mote-4 { top: 18%; left: 26%; font-size: 10px; opacity: 0.6; animation-delay: -1.5s; }
.mote-5 { top: 32%; left: 22%; font-size: 12px; opacity: 0.75; animation-delay: -3.5s; animation-duration: 6.5s; }
@keyframes moteDrift {
  0% { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0.4; }
  50% { transform: translate3d(6px, -12px, 0) scale(1.15); opacity: 0.85; }
  100% { transform: translate3d(-5px, 8px, 0) scale(0.9); opacity: 0.5; }
}

/* Faint Atmospheric Calligraphy Watermark Across Desk */
.letter-calligraphy-watermark {
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 920px);
  text-align: center;
  pointer-events: none;
  opacity: 0.42;
  user-select: none;
  z-index: 1;
}
.watermark-line-1 {
  font: italic 400 clamp(18px, 2.4vw, 28px)/1.5 var(--script);
  color: #fce7f3;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  text-shadow: 0 0 20px rgba(244, 114, 182, 0.45), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.watermark-line-2 {
  font: 300 clamp(10px, 1.1vw, 12.5px)/1.6 var(--serif);
  color: #fbcfe8;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 15px rgba(227, 201, 143, 0.35);
}

/* Top-Right: Vintage Postage Stamp & Postmark Ephemera */
.letter-postal-cluster {
  position: absolute;
  top: clamp(75px, 9.5vh, 95px);
  right: clamp(24px, 3.8vw, 55px);
  pointer-events: none;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.letter-airmail-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(30, 20, 28, 0.75);
  border: 1px solid rgba(227, 201, 143, 0.28);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.airmail-stripes {
  width: 22px;
  height: 9px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    -45deg,
    #991b1b 0,
    #991b1b 5px,
    #fef08a 5px,
    #fef08a 10px,
    #1e3a8a 10px,
    #1e3a8a 15px,
    #fef08a 15px,
    #fef08a 20px
  );
}
.airmail-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(8px, 1.05vw, 10px);
  letter-spacing: 0.2em;
  color: #f7dfa5;
  font-weight: 600;
}

/* Authentic Scalloped Postage Stamp */
.vintage-postage-stamp {
  position: relative;
  width: 104px;
  background: #fbf5ec;
  border-radius: 3px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 16px rgba(227, 201, 143, 0.2);
  padding: 5px;
  transform: rotate(-3.5deg);
  outline: 2px dashed rgba(167, 95, 107, 0.32);
  outline-offset: -3px;
  transition: transform 0.4s ease;
}
.stamp-inner {
  border: 1px solid rgba(167, 95, 107, 0.4);
  border-radius: 2px;
  padding: 4px 5px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #fffcf7 0%, #f7eee2 100%);
}
.stamp-head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #783c4a;
  border-bottom: 1px solid rgba(167, 95, 107, 0.25);
  padding-bottom: 3px;
  margin-bottom: 3px;
}
.stamp-artwork {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stamp-footer {
  font-family: ui-monospace, monospace;
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #8c3c4d;
  border-top: 1px solid rgba(167, 95, 107, 0.25);
  padding-top: 3px;
  margin-top: 2px;
  text-align: center;
  width: 100%;
}

/* Circular Ink Cancellation Postmark */
.postal-cancellation-seal {
  position: absolute;
  top: 42px;
  left: -48px;
  transform: rotate(10deg);
  opacity: 0.82;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

/* Left Study Flank: Antique Glass Inkwell & Golden Quill Feather */
.letter-inkwell-quill {
  position: absolute;
  top: clamp(285px, 48vh, 460px);
  left: clamp(30px, 5.8vw, 110px);
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  animation: floatSubtle 8s ease-in-out infinite alternate;
}
.vintage-inkwell {
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(244, 114, 182, 0.2));
  transition: transform 0.4s ease;
}
.vintage-quill {
  position: relative;
  transform: rotate(20deg) translateY(-10px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}
.quill-nib-spark {
  position: absolute;
  bottom: -3px;
  left: 18px;
  color: #fde047;
  font-size: 13px;
  text-shadow: 0 0 12px #fde047, 0 0 20px #f59e0b;
  animation: blinkDot 2.2s infinite;
}

/* Right Study Flank: Vintage Pressed Herbarium Specimen Card */
.letter-herbarium-card {
  position: absolute;
  top: clamp(440px, 58vh, 530px);
  right: clamp(35px, 5.5vw, 105px);
  width: 122px;
  background: #fbf5ec;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(227, 201, 143, 0.18);
  padding: 6px;
  transform: rotate(4deg);
  pointer-events: none;
  z-index: 2;
  animation: floatSubtle 8.5s -2s ease-in-out infinite alternate;
}
.herbarium-pin {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  color: #e8c78b;
  font-size: 13px;
  text-shadow: 0 0 10px rgba(232, 199, 139, 0.7);
}
.herbarium-inner {
  border: 1px dashed rgba(167, 95, 107, 0.35);
  border-radius: 2px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #fffdfa 0%, #f7eee2 100%);
}
.herbarium-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid rgba(167, 95, 107, 0.25);
  padding-bottom: 3px;
  margin-bottom: 3px;
}
.herbarium-tag {
  font-family: ui-monospace, monospace;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #783c4a;
}
.herbarium-rx {
  font-family: var(--serif);
  font-size: 9px;
  font-weight: 700;
  color: #c69c61;
}
.herbarium-specimen {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}
.herbarium-meta {
  border-top: 1px solid rgba(167, 95, 107, 0.25);
  padding-top: 3px;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.herbarium-meta strong {
  font-family: var(--serif);
  font-size: 8.5px;
  color: #6d424b;
  letter-spacing: 0.05em;
  font-style: italic;
}
.herbarium-meta span {
  font-family: ui-monospace, monospace;
  font-size: 7px;
  font-weight: 700;
  color: #b87587;
  letter-spacing: 0.08em;
}
.herbarium-meta p {
  font-size: 6.8px;
  color: #8c6d48;
  margin: 0;
}

/* Bottom Left: Desk Wax Seal Medallion */
.desk-wax-seal {
  position: absolute;
  bottom: clamp(22px, 5vh, 55px);
  left: clamp(20px, 4.5vw, 65px);
  pointer-events: none;
  z-index: 2;
  transform: rotate(-7deg);
  animation: floatSubtle 9s -3.5s ease-in-out infinite alternate;
}
.wax-ribbon-tails {
  position: absolute;
  bottom: -10px;
  left: 15px;
  display: flex;
  gap: 6px;
  z-index: 1;
}
.ribbon-tail {
  width: 10px;
  height: 22px;
  background: linear-gradient(180deg, #991b1b, #701a24);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.ribbon-tail-l { transform: rotate(18deg); border-radius: 0 0 2px 2px; }
.ribbon-tail-r { transform: rotate(-18deg); border-radius: 0 0 2px 2px; }

.wax-disc {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b91c1c 0%, #881337 55%, #4c0519 100%);
  border: 2px solid rgba(244, 63, 94, 0.35);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.55),
    inset 0 2px 5px rgba(255, 255, 255, 0.38),
    inset 0 -3px 6px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wax-monogram {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: #fef08a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.05em;
  line-height: 1;
}
.wax-monogram i {
  font-size: 11px;
  color: #fca5a5;
  font-style: normal;
  margin: 0 1px;
}
.wax-date {
  font-family: ui-monospace, monospace;
  font-size: 7.5px;
  color: #fecdd3;
  letter-spacing: 0.08em;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Botanical Branches Framing the Scene */
.letter-botanical-branch {
  position: absolute;
  pointer-events: none;
}
.botanical-lamp-top {
  top: 2%;
  left: 2%;
  opacity: 0.55;
  filter: drop-shadow(0 0 8px rgba(227, 201, 143, 0.3));
  animation: botanicalFloatA 12s ease-in-out infinite alternate;
}
.botanical-rose-bot {
  bottom: 2%;
  right: 2%;
  opacity: 0.65;
  filter: drop-shadow(0 0 10px rgba(244, 114, 182, 0.35));
  animation: botanicalFloatB 11s ease-in-out infinite alternate;
}

/* Drifting Pressed Flower Petals */
.letter-petal-drift {
  position: absolute;
  pointer-events: none;
  animation: petalDrift 9s ease-in-out infinite alternate;
}
.desk-petal-1 {
  top: 24%;
  left: 17%;
  font-size: 20px;
  color: rgba(244, 114, 182, 0.55);
  text-shadow: 0 0 10px rgba(244, 114, 182, 0.35);
  animation-delay: -1.2s;
}
.desk-petal-2 {
  top: 74%;
  left: 14%;
  font-size: 17px;
  color: rgba(227, 201, 143, 0.6);
  animation-delay: -3.8s;
}
.desk-petal-3 {
  top: 20%;
  right: 21%;
  font-size: 16px;
  color: rgba(244, 114, 182, 0.5);
  animation-delay: -2.4s;
}
.desk-petal-4 {
  bottom: 22%;
  right: 17%;
  font-size: 15px;
  color: rgba(254, 240, 138, 0.65);
  text-shadow: 0 0 8px rgba(254, 240, 138, 0.4);
  animation-delay: -5.5s;
}
.desk-petal-5 {
  bottom: 12%;
  left: 36%;
  font-size: 18px;
  color: rgba(244, 114, 182, 0.45);
  animation-delay: -2.8s;
}

/* Responsive Scaling for Letter Scene Background Decor */
@media (max-width: 859px) {
  .desk-candle-fixture {
    top: 68px;
    left: 6px;
    transform: scale(0.46);
    transform-origin: top left;
  }
  .desk-polaroid-memory {
    top: 68px;
    right: 6px;
    transform: scale(0.46);
    transform-origin: top right;
  }
  .letter-postal-cluster {
    display: none;
  }
  .letter-airmail-ribbon {
    display: none;
  }
  .letter-calligraphy-watermark {
    display: none;
  }
  .letter-inkwell-quill,
  .letter-herbarium-card {
    display: none;
  }
  .desk-wax-seal {
    bottom: 8px;
    left: 8px;
    transform: scale(0.58);
    transform-origin: bottom left;
  }
  .desk-scattered-petals {
    opacity: 0.65;
  }
  .botanical-lamp-top {
    width: 75px;
    height: 90px;
    opacity: 0.45;
  }
  .botanical-rose-bot {
    width: 75px;
    height: 95px;
    opacity: 0.5;
  }
}

/* --- SCENE 5: WARM CANDLELIT HEARTH & BOKEH (CAKE SURPRISE) --- */
.scene-surprise {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(254, 215, 170, 0.22) 0%, rgba(244, 114, 182, 0.12) 36%, transparent 68%),
    radial-gradient(circle at 18% 30%, rgba(251, 191, 36, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 82% 70%, rgba(244, 114, 182, 0.18) 0%, transparent 52%),
    linear-gradient(135deg, #2c1428 0%, #3d1b35 30%, #251227 65%, #130a18 100%) !important;
  color: #fff9f5 !important;
}
.scene-surprise .eyebrow {
  color: #f7d5cc !important;
  text-shadow: 0 0 14px rgba(247, 213, 204, 0.45);
}
.scene-surprise .age-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(227, 201, 143, 0.35);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}
.scene-surprise .age-badge span {
  color: #f7dfa5;
}
.scene-surprise .age-badge strong {
  color: #fce7f3;
  text-shadow: 0 0 16px rgba(244, 114, 182, 0.55);
}
.surprise-title {
  color: #ffffff !important;
}
.surprise-title em {
  color: #fce7f3 !important;
  font-style: italic;
  font-weight: 600;
  text-shadow: 0 0 18px rgba(244, 114, 182, 0.55);
}
.surprise-layout .scene-copy {
  color: #e2dbe6 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.surprise-layout .breath-hint {
  color: #cfc2ce !important;
  opacity: 0.85;
}
.scene-surprise .text-button {
  color: #e8c78b !important;
  text-shadow: 0 0 10px rgba(232, 199, 139, 0.4);
}
.scene-surprise .text-button:hover {
  color: #fff3d6 !important;
}
.cake-plate {
  background: linear-gradient(#fff9ef, #d4bda8) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65) !important;
}
.cake-warm-hearth {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 620px);
  height: min(70vh, 480px);
  background: radial-gradient(ellipse at 50% 65%, rgba(254, 215, 170, 0.45) 0%, rgba(251, 146, 60, 0.2) 42%, rgba(244, 114, 182, 0.08) 65%, transparent 80%) !important;
  filter: blur(40px);
  pointer-events: none;
  animation: hearthGlowFlicker 3.8s ease-in-out infinite alternate;
}
@keyframes hearthGlowFlicker {
  0% { transform: translateX(-50%) scale(0.96); opacity: 0.7; }
  50% { transform: translateX(-50%) scale(1.04); opacity: 0.95; }
  100% { transform: translateX(-50%) scale(0.98); opacity: 0.8; }
}

.candle-bokeh-cluster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.candle-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
  opacity: 0.45;
  animation: bokehDrift 9s ease-in-out infinite alternate;
}
.orb-1 {
  width: 75px;
  height: 75px;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.75) 0%, rgba(245, 158, 11, 0.3) 60%, transparent 80%);
  top: 22%;
  left: 14%;
  animation-duration: 10s;
}
.orb-2 {
  width: 95px;
  height: 95px;
  background: radial-gradient(circle, rgba(253, 164, 175, 0.65) 0%, rgba(244, 63, 94, 0.25) 60%, transparent 80%);
  top: 35%;
  right: 12%;
  animation-delay: -3.2s;
  animation-duration: 8.5s;
}
.orb-3 {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(254, 215, 170, 0.8) 0%, transparent 75%);
  bottom: 28%;
  left: 20%;
  animation-delay: -1.5s;
  animation-duration: 11s;
}
.orb-4 {
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(255, 237, 213, 0.65) 0%, rgba(251, 146, 60, 0.2) 60%, transparent 80%);
  bottom: 22%;
  right: 18%;
  animation-delay: -4.8s;
  animation-duration: 9.5s;
}
.orb-5 {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, rgba(254, 202, 202, 0.7) 0%, transparent 75%);
  top: 15%;
  right: 28%;
  animation-delay: -2s;
}
.orb-6 {
  width: 65px;
  height: 65px;
  background: radial-gradient(circle, rgba(254, 243, 199, 0.7) 0%, transparent 75%);
  top: 18%;
  left: 32%;
  animation-delay: -5s;
}
@keyframes bokehDrift {
  0% { transform: translate3d(0, 0, 0) scale(0.9); }
  50% { transform: translate3d(6px, -14px, 0) scale(1.1); }
  100% { transform: translate3d(-5px, 8px, 0) scale(0.95); }
}

.surprise-streamer {
  position: absolute;
  top: 0;
  width: 2px;
  height: clamp(140px, 25vh, 220px);
  pointer-events: none;
}
.streamer-left {
  left: 6%;
  background: linear-gradient(180deg, rgba(227, 201, 143, 0.55) 0%, rgba(244, 114, 182, 0.35) 60%, transparent 100%);
  box-shadow: 0 0 10px rgba(227, 201, 143, 0.6);
  animation: garlandSway 6.5s ease-in-out infinite alternate;
}
.streamer-right {
  right: 6%;
  background: linear-gradient(180deg, rgba(244, 114, 182, 0.55) 0%, rgba(227, 201, 143, 0.35) 60%, transparent 100%);
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.6);
  animation: garlandSway 7s -3s ease-in-out infinite alternate;
}

/* --- SCENE 6: COSMIC NEBULA & CONSTELLATION CHART (FINALE) --- */
.scene-finale {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(244, 114, 182, 0.16) 0%, rgba(147, 51, 234, 0.12) 35%, transparent 68%),
    radial-gradient(circle at 18% 22%, rgba(251, 191, 36, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 82% 75%, rgba(244, 114, 182, 0.2) 0%, rgba(168, 85, 247, 0.12) 48%, transparent 70%),
    linear-gradient(135deg, #1d0f28 0%, #2a153c 32%, #1b112d 68%, #0d0918 100%) !important;
}
.finale-cosmic-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: cosmicDrift 20s ease-in-out infinite alternate;
}
.nebula-pink {
  width: 75vw;
  height: 75vw;
  top: -15%;
  left: -15%;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.38) 0%, rgba(219, 39, 119, 0.16) 45%, transparent 75%);
}
.nebula-purple {
  width: 80vw;
  height: 80vw;
  bottom: -20%;
  right: -15%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.42) 0%, rgba(126, 34, 206, 0.18) 45%, transparent 75%);
  animation-delay: -6s;
}
.nebula-gold {
  width: 55vw;
  height: 55vw;
  top: 25%;
  left: 22%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.32) 0%, rgba(245, 158, 11, 0.12) 50%, transparent 75%);
  animation-delay: -12s;
}
.nebula-cyan {
  width: 52vw;
  height: 52vw;
  bottom: 5%;
  left: 5%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, rgba(14, 165, 233, 0.08) 45%, transparent 70%);
  animation-delay: -8s;
}
@keyframes cosmicDrift {
  0% { transform: translate3d(0, 0, 0) scale(0.92); }
  50% { transform: translate3d(4%, 5%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.02); }
}

/* Shooting Stars across the Night Sky */
.shooting-star {
  position: absolute;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, #ffffff, rgba(254, 240, 138, 0.8), transparent);
  border-radius: 999px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px #fde047);
  transform: rotate(-35deg) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.star-shoot-1 {
  top: 14%;
  left: 45%;
  animation: shootStar 7.5s 1.2s ease-in-out infinite;
}
.star-shoot-2 {
  top: 24%;
  left: 68%;
  width: 110px;
  animation: shootStar 9.5s 4.5s ease-in-out infinite;
}
.star-shoot-3 {
  top: 8%;
  left: 22%;
  width: 130px;
  animation: shootStar 8.8s 7.2s ease-in-out infinite;
}
@keyframes shootStar {
  0% { transform: translate3d(0, 0, 0) rotate(-35deg) scale(0); opacity: 0; }
  8% { transform: translate3d(-50px, 35px, 0) rotate(-35deg) scale(1); opacity: 1; }
  16% { transform: translate3d(-170px, 120px, 0) rotate(-35deg) scale(0.3); opacity: 0; }
  100% { transform: translate3d(-170px, 120px, 0) rotate(-35deg) scale(0); opacity: 0; }
}

/* Delicate Symmetrical Astrological Constellations */
.constellation-chart {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  width: clamp(140px, 20vw, 240px);
  height: clamp(140px, 20vw, 240px);
  opacity: 0.88;
  transition: opacity 0.5s ease;
}
.chart-left {
  top: clamp(60px, 10vh, 115px);
  left: clamp(10px, 3.2vw, 55px);
  animation: floatSubtle 11s ease-in-out infinite alternate;
}
.chart-right {
  top: clamp(60px, 10vh, 115px);
  right: clamp(10px, 3.2vw, 55px);
  animation: floatSubtle 12s -3s ease-in-out infinite alternate;
}
.constellation-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.28));
}
.constellation-svg circle {
  animation: starPulse 3s ease-in-out infinite alternate;
}
.constellation-svg circle:nth-child(even) {
  animation-delay: -1.5s;
}
@keyframes starPulse {
  0% { transform-origin: center; filter: drop-shadow(0 0 3px #fff); opacity: 0.72; }
  100% { transform-origin: center; filter: drop-shadow(0 0 10px #ffeaa7) drop-shadow(0 0 18px #f59e0b); opacity: 1; }
}

/* Romantic Crescent Moon with Floating Halo & Stardust */
.finale-crescent-moon {
  position: absolute;
  top: clamp(20px, 4.2vh, 45px);
  right: clamp(18px, 3.8vw, 50px);
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gentleBreathe 5s ease-in-out infinite alternate;
}
.crescent-body {
  font-size: clamp(34px, 5.5vh, 48px);
  color: #fffbeb;
  text-shadow: 0 0 18px #fef08a, 0 0 38px rgba(251, 191, 36, 0.72);
  display: block;
}
.crescent-aura {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.5) 0%, transparent 70%);
  filter: blur(10px);
}
.moon-stardust-1, .moon-stardust-2 {
  position: absolute;
  color: #fef08a;
  font-size: 11px;
  text-shadow: 0 0 8px #fef08a;
  animation: starPulse 2.5s infinite alternate;
}
.moon-stardust-1 { top: -4px; left: -10px; }
.moon-stardust-2 { bottom: -2px; right: -8px; animation-delay: -1.2s; }

/* Ambient Floating Cosmic Motes */
.finale-cosmic-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.c-mote {
  position: absolute;
  color: rgba(247, 223, 165, 0.65);
  font-size: 14px;
  animation: motesFloat 9s ease-in-out infinite alternate;
}
.m-1 { top: 22%; left: 16%; animation-duration: 8s; }
.m-2 { top: 38%; right: 18%; color: rgba(244, 114, 182, 0.6); font-size: 12px; animation-delay: -2s; }
.m-3 { bottom: 26%; left: 22%; animation-duration: 11s; animation-delay: -4s; }
.m-4 { bottom: 32%; right: 26%; color: rgba(254, 240, 138, 0.75); animation-duration: 9.5s; }
.m-5 { top: 68%; left: 12%; font-size: 11px; animation-delay: -3s; }
.m-6 { top: 15%; right: 35%; color: rgba(244, 114, 182, 0.5); font-size: 11px; animation-delay: -5s; }
@keyframes motesFloat {
  0% { transform: translateY(0) scale(0.9); opacity: 0.35; }
  50% { transform: translateY(-16px) scale(1.15); opacity: 0.85; }
  100% { transform: translateY(8px) scale(0.95); opacity: 0.4; }
}

/* ========================================================
   FINALE INTERACTIVE CLUSTER & THE KNOCKING DOOR ("CỐC CỐC...")
   ======================================================== */

.finale-interactive-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(16px, 2.8vw, 32px);
  width: min(100%, 780px);
  margin: 10px auto 12px;
  z-index: 3;
  position: relative;
}

.final-gift-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: auto;
}

.secret-door-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.door-interactive-fixture {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: #f1d9c5;
  padding: 4px 12px;
  perspective: 750px;
  transition: transform 0.4s var(--spring-ease);
  user-select: none;
  -webkit-user-select: none;
}
.door-interactive-fixture:hover {
  transform: translateY(-4px) scale(1.05);
}
.door-interactive-fixture:active {
  transform: translateY(1px) scale(0.97);
}

.door-fairy-arch {
  position: absolute;
  top: -14px;
  width: 82px;
  height: 28px;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}
.arch-sparkle {
  font-size: 10px;
  color: #fef08a;
  text-shadow: 0 0 8px #fef08a;
  animation: starPulse 2.2s infinite alternate;
}
.s-2 { animation-delay: -0.6s; color: #f472b6; text-shadow: 0 0 8px #f472b6; }
.s-3 { animation-delay: -1.4s; color: #fbcfe8; }
.s-4 { animation-delay: -1.9s; }

/* The Arch Door Frame */
.door-frame {
  position: relative;
  width: 66px;
  height: 82px;
  border-radius: 33px 33px 6px 6px;
  background: linear-gradient(135deg, #451a03 0%, #290e03 100%);
  border: 2px solid rgba(227, 201, 143, 0.7);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(245, 158, 11, 0.25),
    inset 0 2px 6px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  perspective: 600px;
}
.door-interior-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 65%, #fef08a 0%, #f59e0b 45%, #e11d48 85%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.15;
  transition: opacity 0.8s ease;
}
.interior-heart-beam {
  font-size: 26px;
  color: #ffffff;
  text-shadow: 0 0 15px #fef08a, 0 0 30px #f43f5e;
  animation: gentleBreathe 2s infinite alternate;
}

/* The Hinged Wooden Door Leaf */
.door-leaf {
  position: absolute;
  inset: 0;
  border-radius: 31px 31px 4px 4px;
  background: linear-gradient(145deg, #78350f 0%, #92400e 38%, #451a03 100%);
  border: 1.5px solid rgba(254, 240, 138, 0.5);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.2, 0.85, 0.25, 1), box-shadow 0.85s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 5px 4px 4px;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.25), 0 4px 10px rgba(0, 0, 0, 0.5);
  backface-visibility: hidden;
}
.door-wood-grain {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgba(0, 0, 0, 0.08) 4px 6px);
  opacity: 0.45;
  pointer-events: none;
}
.door-molding-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.door-crown-icon {
  font-size: 11px;
  color: #fef08a;
  text-shadow: 0 0 6px #fef08a;
}
.door-molding-panel {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 38px;
  border: 1px solid rgba(227, 201, 143, 0.45);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.door-knocker-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.door-knocker-base {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef08a 0%, #b45309 85%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.door-knocker-ring {
  transform-origin: top center;
  margin-top: -1px;
  transition: transform 0.2s ease;
}
.knocker-heart {
  font-size: 15px;
  color: #fde047;
  text-shadow: 0 0 6px #fde047, 0 2px 4px rgba(0, 0, 0, 0.6);
  display: block;
  line-height: 1;
}
.door-bottom-plaque {
  position: relative;
  z-index: 2;
  font-family: ui-monospace, monospace;
  font-size: 5.5px;
  letter-spacing: 0.12em;
  color: #fef08a;
  background: rgba(0, 0, 0, 0.45);
  padding: 1px 5px;
  border-radius: 2px;
  border: 0.5px solid rgba(227, 201, 143, 0.4);
}

/* Knocking tap animation */
.door-knocker-ring.knocking {
  animation: knockerTap 0.55s ease-in-out;
}
@keyframes knockerTap {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-25deg); }
  35% { transform: rotate(8deg); }
  50% { transform: rotate(-22deg); }
  65% { transform: rotate(6deg); }
  80% { transform: rotate(-18deg); }
  100% { transform: rotate(0deg); }
}

/* Door leaf open state */
.door-leaf.open {
  transform: rotateY(-82deg);
  box-shadow: -8px 0 25px rgba(0, 0, 0, 0.7);
}
.secret-door-wrap.opened .door-interior-glow {
  opacity: 1;
  box-shadow: 0 0 35px #f59e0b, 0 0 70px rgba(244, 63, 94, 0.65);
}

/* Knock waves ripple */
.door-knock-ripples {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  overflow: visible;
}
.knock-ripple-ring {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fef08a;
  box-shadow: 0 0 10px #f59e0b, inset 0 0 8px #f43f5e;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 1;
  animation: knockWave 0.75s ease-out forwards;
}
@keyframes knockWave {
  to { transform: translate(-50%, -50%) scale(5.5); opacity: 0; }
}

.door-caption {
  font-size: clamp(10px, 1.05vw, 11.5px);
  line-height: 1.5;
  color: #f7e0a8;
  letter-spacing: 0.04em;
  margin-top: 6px;
  text-shadow: 0 0 10px rgba(247, 224, 168, 0.4);
}

/* Secret Door Card (Tactful Confession) */
.secret-door-card {
  display: block;
  width: min(480px, 92vw);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: max-height 0.85s var(--cinematic-ease), opacity 0.75s ease, transform 0.8s var(--cinematic-ease), margin 0.6s ease;
  padding: 0 18px;
  text-align: center;
  background: rgba(30, 16, 36, 0.78);
  border: 1px solid rgba(244, 114, 182, 0.35);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 26px rgba(244, 114, 182, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.secret-door-card.revealed {
  max-height: 480px;
  opacity: 1;
  transform: translateY(0) scale(1);
  margin: 12px 0 14px;
  padding: 18px 22px 20px;
}
.door-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.door-card-spark {
  color: #fef08a;
  font-size: 11px;
  text-shadow: 0 0 6px #fef08a;
}
.door-card-tag {
  font-family: ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: #fbcfe8;
  font-weight: 700;
}
.door-card-title {
  font: italic 700 clamp(18px, 2.4vw, 24px)/1.35 var(--serif);
  color: #fef08a;
  margin: 4px 0 10px;
  text-shadow: 0 0 16px rgba(254, 240, 138, 0.5), 0 2px 6px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
}
.door-card-lead {
  font-size: clamp(11.5px, 1.15vw, 13px);
  line-height: 1.85;
  color: #fdf2f8;
  font-weight: 500;
  margin: 0 0 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.door-card-body {
  font-size: clamp(11px, 1.05vw, 12px);
  line-height: 1.9;
  color: #e9d5ff;
  margin: 0 0 12px;
}
.door-card-sub {
  font: italic 10.5px/1.75 var(--serif);
  color: #f472b6;
  margin-bottom: 14px;
}
.door-card-sign {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  border-top: 1px dashed rgba(244, 114, 182, 0.3);
  padding-top: 10px;
  margin-bottom: 12px;
}
.door-card-sign span {
  font-size: 10px;
  color: #d8b4fe;
  letter-spacing: 0.08em;
}
.door-card-sign strong {
  font: 700 24px var(--script);
  color: #fbcfe8;
  text-shadow: 0 0 8px rgba(244, 114, 182, 0.5);
}
.door-card-sign strong i {
  font-style: normal;
  color: #f43f5e;
}
.door-reknock-btn {
  border: 1px solid rgba(227, 201, 143, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: #fef08a;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.door-reknock-btn:hover {
  background: rgba(254, 240, 138, 0.2);
  transform: scale(1.05);
}

/* Mobile responsive adjustments for backdrop decor */
@media (max-width: 600px) {
  .decor-vintage-border {
    inset: 10px;
  }
  .decor-botanical svg {
    width: 90px;
    height: 90px;
  }
  .fairy-lights-curtain {
    height: 105px;
  }
  .fairy-string {
    height: calc(var(--len, 90px) * 0.72);
  }
  .constellation-chart {
    width: 130px;
    height: 130px;
    opacity: 0.65;
  }
  .chart-left {
    top: 52px;
    left: 4px;
  }
  .chart-right {
    top: 52px;
    right: 4px;
  }
  .finale-crescent-moon {
    top: 16px;
    right: 14px;
  }
  .finale-interactive-grid {
    gap: 12px;
    margin: 8px auto 10px;
  }
  .door-frame {
    width: 58px;
    height: 72px;
  }
  .door-molding-panel {
    width: 42px;
    height: 32px;
  }
  .secret-door-card.revealed {
    padding: 14px 16px 16px;
    margin: 8px 0 10px;
  }
}

/* Safe reduced-motion handling */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================
   AUDIO-REACTIVE LIVING BACKGROUND HARMONY SYSTEM
   Synchronizes all scene backgrounds with musical rhythm
   ======================================================== */

/* Scene 0 - Envelope & Cover */
.scene-envelope .decor-light-leak {
  transform: scale(var(--music-scale, 1)) !important;
  opacity: calc(0.5 + var(--music-glow, 0) * 0.28) !important;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.scene-envelope .decor-bokeh {
  transform: scale(var(--music-scale, 1)) !important;
  opacity: calc(0.42 + var(--music-glow, 0) * 0.3) !important;
}
.scene-envelope .envelope-halo {
  opacity: calc(0.65 + var(--music-glow, 0) * 0.35) !important;
}

/* Scene 1 - Greeting Aurora & Festive Hangings */
.scene-greeting::before {
  opacity: calc(0.65 + var(--music-glow, 0) * 0.35) !important;
  transform: scale(var(--music-scale, 1)) !important;
}
.scene-greeting .pendant-charm {
  text-shadow: 0 0 10px #f5dc9f, 0 0 calc(16px + var(--music-glow, 0) * 18px) rgba(247, 217, 148, 0.85) !important;
}
.scene-greeting .garland-flag span {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 calc(10px + var(--music-glow, 0) * 14px) rgba(227, 201, 143, 0.45) !important;
}

/* Scene 2 - Two Worlds Harmony (Developer & Pharmacist) */
.world-connector {
  scale: calc(1 + var(--music-glow, 0) * 0.15) !important;
  text-shadow: 0 0 calc(16px + var(--music-glow, 0) * 22px) #f0d7a6 !important;
}
.code-ambient-glow,
.pharma-ambient-glow {
  transform: scale(var(--music-scale, 1)) !important;
  opacity: calc(0.65 + var(--music-glow, 0) * 0.35) !important;
}

/* Scene 3 - Romantic Photo Gallery Atmosphere */
.gallery-soft-spotlight {
  transform: translateX(-50%) scale(var(--music-scale, 1)) !important;
  opacity: calc(0.72 + var(--music-glow, 0) * 0.28) !important;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.gallery-memory-aurora {
  transform: translate(-50%, -20%) scale(var(--music-scale, 1)) !important;
  opacity: calc(0.7 + var(--music-glow, 0) * 0.3) !important;
}
.gallery-bokeh-orb {
  opacity: calc(0.38 + var(--music-glow, 0) * 0.35) !important;
  transform: scale(var(--music-scale, 1)) !important;
}
.fairy-bulb {
  filter: brightness(calc(1 + var(--music-glow, 0) * 0.4)) !important;
}

/* Scene 4 - Candlelit Study & Letter */
.letter-lamp-aura {
  opacity: calc(0.78 + var(--music-glow, 0) * 0.25) !important;
  transform: scale(var(--music-scale, 1)) !important;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.letter-lamp-warmth-core {
  opacity: calc(0.75 + var(--music-glow, 0) * 0.25) !important;
  transform: scale(var(--music-scale, 1)) !important;
}
.desk-candle-fixture .candle-halo {
  opacity: calc(0.6 + var(--music-glow, 0) * 0.4) !important;
  transform: scale(var(--music-scale, 1)) !important;
}

/* Scene 5 - Birthday Cake & Hearth Glow */
.cake-warm-hearth {
  transform: translateX(-50%) scale(var(--music-scale, 1)) !important;
  opacity: calc(0.7 + var(--music-glow, 0) * 0.3) !important;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.cake-glow {
  transform: scale(var(--music-scale, 1)) !important;
  opacity: calc(0.7 + var(--music-glow, 0) * 0.3) !important;
}
.candle .flame {
  filter: drop-shadow(0 0 calc(6px + var(--music-glow, 0) * 14px) rgba(255, 170, 70, 0.9)) !important;
}
.candle-orb {
  opacity: calc(0.42 + var(--music-glow, 0) * 0.35) !important;
  transform: scale(var(--music-scale, 1)) !important;
}

/* Scene 6 - Cosmic Finale & Wishing Starlight */
.scene-finale .cosmic-nebula,
.scene-finale .finale-aurora {
  transform: scale(var(--music-scale, 1)) !important;
  opacity: calc(0.68 + var(--music-glow, 0) * 0.32) !important;
}