:root{--night:#17101a;--wine:#74323e;--rose:#b95a68;--gold:#c8a26a;--paper:#f2e8db;--ink:#4d3533}html{scroll-behavior:smooth}body{color:#f4eade;background:var(--night);font-family:"Noto Serif SC","Songti SC",STSong,Georgia,serif}.creative-gift{min-height:100svh;background:radial-gradient(circle at 50% 15%,rgba(127,73,85,.28),transparent 34%),linear-gradient(160deg,#21131e,#100c17 68%,#17101a)}.ambient-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.velvet-light{position:fixed;z-index:0;inset:-20%;background:conic-gradient(from 80deg at 50% 50%,transparent,rgba(179,102,105,.08),transparent 22%,rgba(203,163,104,.07),transparent 52%);filter:blur(50px);animation:velvet 20s ease-in-out infinite alternate;pointer-events:none}.gift-tool{color:#f5e9dc;background:rgba(23,16,26,.56);border-color:rgba(244,234,222,.16)}
.opening-scene{position:relative;z-index:5;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:clamp(84px,12svh,120px) var(--safe-right) calc(var(--safe-bottom) + 32px)}.opening-copy{text-align:center}.opening-copy p{margin:0 0 14px;color:var(--gold);font:600 9px/1.4 system-ui,sans-serif;letter-spacing:.3em}.opening-copy h1{margin:0;font-size:clamp(28px,8vw,48px);font-weight:400;line-height:1.36;letter-spacing:.12em}.envelope-button{position:relative;align-self:center;width:min(78vw,380px);aspect-ratio:1.52;border:0;background:transparent;cursor:pointer;perspective:900px}.envelope-button span{position:absolute;display:block}.envelope-shadow{inset:20% 6% -3%;border-radius:50%;background:rgba(0,0,0,.42);filter:blur(25px);transform:translateY(35px)}.envelope-body{z-index:3;inset:14% 0 0;border-radius:5px;background:linear-gradient(145deg,#e9dac7,#cdb79d);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);box-shadow:0 24px 60px rgba(0,0,0,.32)}.envelope-liner{z-index:2;inset:14% 0 0;background:linear-gradient(155deg,#cab08f,#f2e5d4);clip-path:polygon(0 0,50% 60%,100% 0)}.envelope-flap{z-index:5;inset:13% 0 35%;background:linear-gradient(170deg,#eadcc9,#c7ad8f);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform 1.15s var(--ease-cinematic),z-index 0s .5s}.envelope-card{z-index:1;left:8%;right:8%;bottom:8%;height:72%;padding-top:20%;display:grid!important;align-content:start;gap:7px;color:var(--ink);background:linear-gradient(100deg,rgba(255,255,255,.55),transparent),var(--paper);box-shadow:0 8px 26px rgba(60,41,33,.18);transition:transform 1.25s var(--ease-cinematic) .45s}.envelope-card small{font:600 8px/1 system-ui,sans-serif;letter-spacing:.28em}.envelope-card b{font-size:clamp(24px,7vw,40px);font-weight:400;letter-spacing:.12em}.wax-seal{z-index:6;top:45%;left:50%;width:58px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#b45560,#762e3b 70%);box-shadow:0 5px 12px rgba(82,32,42,.35),inset 0 0 0 4px rgba(255,255,255,.06);transition:opacity .35s ease,transform .5s ease}.wax-seal i{inset:50% auto auto 50%;transform:translate(-50%,-50%);font-style:normal;font-size:14px;letter-spacing:.08em}.envelope-button.is-opening .envelope-flap{z-index:0;transform:rotateX(178deg)}.envelope-button.is-opening .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(.5)}.envelope-button.is-opening .envelope-card{z-index:4;transform:translateY(-68%)}.tap-hint{display:flex;align-items:center;gap:10px;margin:0;color:rgba(244,234,222,.68);font:500 11px/1.4 system-ui,sans-serif;letter-spacing:.15em}.tap-hint span{width:24px;height:1px;background:var(--gold);animation:hint 1.7s ease-in-out infinite}.opening-scene.is-leaving{animation:opening-leave .85s var(--ease-cinematic) forwards}
.letter-experience{position:relative;z-index:4}.letter-hero,.letter-paper,.memory-gallery,.heart-chapter,.final-blessing{position:relative;min-height:100svh;padding:clamp(88px,12svh,124px) clamp(26px,9vw,72px) clamp(72px,10svh,104px)}.folio{margin:0;color:var(--gold);font:600 9px/1.4 system-ui,sans-serif;letter-spacing:.28em}.letter-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 42%,rgba(151,73,87,.2),transparent 35%)}.letter-monogram{width:84px;aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(203,162,106,.45);border-radius:50%;font:24px/1 Georgia,serif;letter-spacing:.1em}.letter-monogram span{position:absolute;color:var(--rose);font-size:10px}.letter-kicker{margin:40px 0 12px;color:rgba(244,234,222,.52);font:600 9px/1.5 system-ui,sans-serif;letter-spacing:.25em}.letter-hero h2{margin:0;font-size:clamp(29px,8vw,52px);font-weight:400;letter-spacing:.1em}.creative-names{display:flex;align-items:center;justify-content:center;gap:clamp(12px,5vw,34px);width:100%;margin-top:28px}.creative-names span{max-width:42%;overflow-wrap:anywhere;font-size:clamp(23px,7vw,42px);letter-spacing:.13em}.creative-names i{color:var(--gold);font-size:12px;font-style:normal}.scroll-cue{position:absolute;bottom:calc(var(--safe-bottom) + 20px);font:500 10px/1.4 system-ui,sans-serif;letter-spacing:.15em;opacity:.55}.scroll-cue span{display:block;margin-top:6px;animation:scroll-cue 1.8s infinite}
.letter-paper{width:min(100%,760px);min-height:auto;margin:0 auto;color:var(--ink);background:linear-gradient(100deg,rgba(255,255,255,.45),transparent 20%),repeating-linear-gradient(0deg,rgba(87,61,55,.025) 0 1px,transparent 1px 6px),var(--paper);box-shadow:0 30px 90px rgba(0,0,0,.24)}.letter-paper::before{content:"";position:absolute;inset:18px;border:1px solid rgba(117,78,66,.11);pointer-events:none}.letter-content{display:grid;gap:clamp(22px,4svh,36px);margin:clamp(55px,9svh,92px) 0;font-size:clamp(16px,4.2vw,21px);line-height:2;letter-spacing:.07em}.letter-content .message-line{display:block;padding-left:1em;text-indent:-1em}.letter-content .message-line::first-letter{color:var(--wine);font-size:1.3em}.letter-sign{text-align:right;color:var(--wine);font-size:13px;letter-spacing:.12em}
.memory-gallery{display:grid;align-content:center;background:linear-gradient(180deg,#17101a,#21131d)}.section-heading{max-width:540px;margin:0 auto 46px;text-align:center}.section-heading h2{margin:16px 0 10px;font-size:clamp(26px,7vw,42px);font-weight:400;letter-spacing:.09em}.section-heading>p:last-child{margin:0;color:rgba(244,234,222,.55);font-size:12px;line-height:1.7}.photo-stack{position:relative;width:min(82vw,470px);height:min(55svh,460px);margin:auto}.photo-card{position:absolute;width:70%;height:72%;padding:10px 10px 48px;background:#e9dfd1;box-shadow:0 24px 60px rgba(0,0,0,.32);transform:rotate(var(--rotate)) translate(var(--x),var(--y))}.photo-card:nth-child(1){--rotate:-7deg;--x:-13%;--y:8%;left:0}.photo-card:nth-child(2){--rotate:5deg;--x:10%;--y:-3%;right:0}.photo-card:nth-child(3){--rotate:-1deg;--x:0;--y:18%;left:15%}.photo-card img,.photo-placeholder{width:100%;height:100%;object-fit:cover}.photo-placeholder{display:grid;place-items:center;color:#7c6862;background:linear-gradient(135deg,#d9c5b6,#f1e8dc);font:600 10px/1.6 system-ui,sans-serif;letter-spacing:.16em;text-align:center}.photo-card small{position:absolute;bottom:17px;left:0;width:100%;color:#685853;font:10px/1 system-ui,sans-serif;letter-spacing:.1em;text-align:center}
.heart-chapter{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 50%,rgba(147,56,72,.24),transparent 32%)}.pulse-heart{width:min(80vw,430px)}.pulse-heart svg{width:100%;overflow:visible}.heartbeat-line{fill:none;stroke:url(#creativeLine);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:url(#creativeGlow)}.heart-chapter.is-visible .heartbeat-line{animation:heartbeat-draw 4.2s var(--ease-cinematic) forwards}.heart-chapter h2{margin:16px 0 0;font-size:clamp(27px,8vw,50px);font-weight:400;line-height:1.5;letter-spacing:.1em}
.final-blessing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#17101a,#25151d)}.final-label{margin-top:clamp(70px,12svh,120px);color:var(--gold);font:600 9px/1.3 system-ui,sans-serif;letter-spacing:.3em}.final-blessing time{margin-top:13px;font:clamp(27px,8vw,52px)/1.2 Georgia,serif;letter-spacing:.16em}.final-blessing>p:not(.folio){margin:26px 0 0;font-size:clamp(17px,4.8vw,24px);letter-spacing:.12em}.final-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:52px}.final-actions .gift-action{color:#1d1218;background:linear-gradient(90deg,#e6c9a1,#f1ddc2);font:600 11px/1 system-ui,sans-serif;letter-spacing:.1em}.final-actions .secondary{color:#f1e3d4;background:transparent;border:1px solid rgba(241,227,212,.3)}.section-reveal{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease-cinematic),transform 1s var(--ease-cinematic)}.section-reveal.is-visible{opacity:1;transform:none}
@keyframes velvet{to{transform:rotate(12deg) scale(1.08)}}@keyframes hint{0%,100%{transform:scaleX(.45);transform-origin:left;opacity:.5}50%{transform:scaleX(1);opacity:1}}@keyframes opening-leave{to{opacity:0;transform:scale(1.04);filter:blur(8px)}}@keyframes scroll-cue{50%{transform:translateY(6px)}}@keyframes heartbeat-draw{to{stroke-dashoffset:0}}
@media(max-height:720px){.opening-scene{padding-top:70px}.opening-copy h1{font-size:28px}.envelope-button{width:min(65vw,300px)}.letter-hero,.memory-gallery,.heart-chapter,.final-blessing{min-height:100svh}.letter-kicker{margin-top:24px}.creative-names{margin-top:18px}.final-label{margin-top:46px}}
@media(max-width:390px){.gift-toolbar{top:12px;right:12px}.opening-copy h1{letter-spacing:.08em}.letter-paper{padding-inline:30px}.photo-stack{width:90vw;height:430px}.creative-names{gap:9px}}