@font-face { font-family:'Great Vibes'; src:url('/assets/GreatVibes-Regular.ttf') format('truetype'); font-display:swap; }
:root { color-scheme:light; --paper:#fbf7ef; --wine:#742c3b; --ink:#28221f; --gold:#9b704a; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body { margin:0; min-width:280px; background:var(--paper); color:var(--ink); font-family:Georgia,'Times New Roman',serif; }
.screen[hidden] { display:none !important; }
.screen { min-height:100svh; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; padding:24px 16px; }
.screen:not([hidden]) { animation:screen-reveal .45s ease-out both; }
.screen:focus { outline:none; }
.cover-screen { justify-content:flex-start; padding-top:clamp(75px,15vh,126px); }
.cover-greeting { margin:0 0 clamp(4px,1vh,8px); text-align:center; font:400 clamp(58px,10vw,100px)/1.15 'Great Vibes',cursive; overflow-wrap:anywhere; }
.envelope { position:relative; flex:none; }
.envelope--closed { width:min(92vw,576px); aspect-ratio:1.315; }
.envelope--closed .envelope__image { height:100%; object-fit:fill; }
.envelope__image { display:block; width:100%; height:auto; }
.seal { position:absolute; left:50%; display:grid; place-items:center; color:#222; text-align:center; text-decoration:underline; border-radius:50%; cursor:pointer; }
.seal img { display:block; width:100%; height:100%; }
.seal:hover img { transform:scale(1.04); }
.seal:focus-visible { outline:3px solid #6e3546; outline-offset:5px; }
.seal__label { position:absolute; inset:0; display:grid; place-content:center; line-height:1.25; }
.seal--cover { top:62%; width:clamp(96px,21vw,152px); aspect-ratio:1; transform:translate(-50%,-50%); }
.seal__label--cover { font:700 clamp(11px,2.4vw,15px)/1.3 Georgia,serif; }
.open-screen { padding:20px 16px; }
.envelope--open { width:min(76vw,510px,60svh); }
.seal--open { bottom:5%; width:clamp(95px,19vw,150px); aspect-ratio:1; transform:translateX(-50%); }
.seal__label--next { font:400 clamp(17px,3.4vw,24px)/1.2 Arial,sans-serif; }
.petal-field { position:absolute; inset:17% 15% 27%; overflow:hidden; pointer-events:none; }
.petal { position:absolute; top:-20%; width:12%; opacity:0; animation:petal-fall 7s linear infinite; }
.petal--1 { left:8%; animation-delay:-1s; }.petal--2 { left:24%; animation-delay:-4s; width:9%; }
.petal--3 { left:41%; animation-delay:-6s; width:14%; }.petal--4 { left:63%; animation-delay:-2.4s; width:10%; }
.petal--5 { left:78%; animation-delay:-5.2s; width:13%; }.petal--6 { left:50%; animation-delay:-.3s; width:8%; }
.petal--7 { left:15%; animation-delay:-3s; width:7%; }.petal--8 { left:70%; animation-delay:-6.6s; width:8%; }
.bloom { position:absolute; width:13%; aspect-ratio:1; pointer-events:none; opacity:.72; }
.bloom--one { left:27%; top:38%; }.bloom--two { right:23%; top:43%; }.bloom--two .bloom__petal { animation-delay:-1.5s; }
.bloom__petal { position:absolute; top:0; left:32%; width:36%; height:58%; transform-origin:50% 88%; animation:bloom-petal 3.5s ease-in-out infinite alternate; }
.bloom__petal--1 { --closed:-15deg; --open:-72deg; }.bloom__petal--2 { --closed:-7deg; --open:-36deg; }
.bloom__petal--3 { --closed:0deg; --open:0deg; }.bloom__petal--4 { --closed:7deg; --open:36deg; }.bloom__petal--5 { --closed:15deg; --open:72deg; }
.bloom__center { position:absolute; left:43%; top:48%; width:14%; aspect-ratio:1; border-radius:50%; background:#c99862; }
.letter-screen,.proposal-screen { justify-content:flex-start; overflow:visible; padding:0 12px; }
.letter-frame { position:relative; width:min(100%,520px); min-height:100svh; display:flex; justify-content:center; align-items:flex-start; isolation:isolate; }
.flowers { position:absolute; top:0; left:50%; width:min(60%,260px); transform:translateX(-50%); display:flex; justify-content:space-between; pointer-events:none; }
.flower { width:30%; opacity:.22; transform-origin:50% 90%; }
.flower--right { transform:scaleX(-1); }
.flower img { display:block; width:100%; height:auto; transform-origin:50% 90%; animation:flower-bloom 4.5s ease-in-out infinite alternate; }
.flower--right img { animation-delay:-1.4s; }
.janur { position:absolute; z-index:-1; top:42%; width:29%; max-width:145px; opacity:.15; pointer-events:none; }
.janur--left { left:3%; }.janur--right { right:3%; transform:scaleX(-1); }
.couple { position:absolute; z-index:-1; left:50%; transform:translateX(-50%); width:clamp(125px,31vw,185px); opacity:.17; pointer-events:none; }
.couple--letter { bottom:35px; }.couple--proposal { bottom:16px; }
.letter-content { width:min(100%,350px); position:relative; padding:clamp(150px,37svh,315px) 5px 30px; text-align:center; font-size:clamp(15px,3.8vw,17px); line-height:1.33; }
.letter-content h2 { margin:0 0 1px; font:400 1em/1.3 Georgia,serif; }
.letter-content p { margin:0; }
.date { display:flex; align-items:center; justify-content:center; gap:8px; margin:20px auto 0; color:#7d422e; font-family:Arial,sans-serif; font-weight:700; }
.date span { min-width:65px; padding:5px 4px; border-top:1px solid #9d6957; border-bottom:1px solid #9d6957; font-size:12px; }
.date strong { font-size:28px; line-height:1; }
.signature { position:relative; display:flex; flex-direction:column; align-items:center; margin-top:38px; color:#7f2020; }
.signature span { font:700 12px/1.2 Arial,sans-serif; }
.signature strong { font:400 31px/1.2 'Great Vibes',cursive; }
.letter-next { display:inline-block; margin-top:16px; padding:10px 32px; border-radius:50%; background:#e9aaaa; color:#6a1e2f; font:400 20px/1.2 Arial,sans-serif; text-decoration:none; }
.letter-next:focus-visible { outline:3px solid #6e3546; outline-offset:5px; }
.proposal-frame { min-height:100svh; }
.proposal-frame .janur { top:49%; }
.proposal-content { position:relative; width:min(100%,350px); padding:clamp(210px,52svh,440px) 5px 28px; text-align:center; color:#800e10; }
.proposal-content p { margin:0; font:400 clamp(20px,5vw,24px)/1.45 Arial,sans-serif; }
.proposal-content h2 { margin:24px 0 0; font:400 clamp(50px,12vw,66px)/1.1 'Great Vibes',cursive; text-shadow:1px 2px 4px #80504455; }
.proposal-content .signature { margin-top:150px; }
@keyframes petal-fall { 0% { opacity:0; transform:translate3d(0,-10%,0) rotate(-20deg); } 12% { opacity:.78; } 85% { opacity:.68; } 100% { opacity:0; transform:translate3d(20%,550%,0) rotate(150deg); } }
@keyframes bloom-petal { 0%,20% { transform:rotate(var(--closed)) scale(.55); } 75%,100% { transform:rotate(var(--open)) scale(1); } }
@keyframes flower-bloom { 0% { transform:scale(.9) rotate(-3deg); } 100% { transform:scale(1.03) rotate(3deg); } }
@keyframes screen-reveal { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:380px) { .letter-content { font-size:14.4px; } .signature { margin-top:30px; } }
@media (max-height:620px) and (min-width:600px) { .cover-screen { padding-top:28px; } .cover-greeting { margin-bottom:12px; font-size:78px; } .envelope--closed { width:min(65vh,576px); } .letter-screen,.proposal-screen { justify-content:flex-start; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .petal { opacity:0 !important; } .bloom__petal { transform:rotate(var(--open)) scale(1) !important; } }