:root{--cream:#f7e9e4;--dim:#b68d90;--rose:#d50a3a;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html,body{min-height:100%;background:#080405}body{margin:0;overflow:hidden;color:var(--cream);font-family:"Tajawal",sans-serif;background:radial-gradient(ellipse at 50% 45%,#27060d 0%,#100307 43%,#060405 74%)}main{position:relative;min-height:100svh}.start-card,.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.start-card{width:min(80vw,350px);height:270px;margin:auto;padding:26px 26px 24px;border:1px solid #e83d6038;border-radius:22px;background:linear-gradient(145deg,#26070e,#110608);box-shadow:0 0 50px #b90d3633,inset 0 1px #ffffff0a;text-align:center;transition:opacity .65s ease,transform .75s var(--ease),visibility .65s}.start-card::before{content:"";position:absolute;inset:-40px;border-radius:50%;background:#d8083b20;filter:blur(33px);z-index:-1}.tiny-rose{font-size:2rem;line-height:1;color:#ee274c;text-shadow:0 0 16px #ee274c99}.start-card h1{font-family:"Aref Ruqaa",serif;font-weight:400;font-size:2rem;margin:8px 0 10px}.line{width:100%;height:5px;border-radius:9px;background:#4b1020;overflow:hidden}.line i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff1350,#cb0436);box-shadow:0 0 12px #ff1350;transition:width .4s ease}.start-card p{height:19px;margin:10px 0 16px;color:#b89194;font-size:.71rem}.start-card button{width:100%;border:0;border-radius:10px;padding:13px 12px;background:linear-gradient(135deg,#ff2055,#be0533);box-shadow:0 8px 22px #e5093d55;color:#fff;font:700 .83rem "Tajawal";cursor:pointer;transition:transform .25s,filter .25s,opacity .25s}.start-card button:disabled{cursor:wait;opacity:.35;filter:grayscale(.25);box-shadow:none}.start-card button:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.12)}.start-card button span{color:#ffd2dc;margin-right:4px}.start-card button:focus-visible,.message button:focus-visible{outline:2px solid #ff7a9b;outline-offset:4px}.start-card.is-hidden{opacity:0;transform:scale(.93);visibility:hidden;pointer-events:none}
.scene{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s;justify-content:center;text-align:center;overflow:hidden}.scene.is-visible{opacity:1;visibility:visible}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 37%,#6d051d55 0%,transparent 32%),radial-gradient(ellipse at 50% 50%,transparent 34%,#0201028c 86%);pointer-events:none}.flowers{position:relative;width:min(92vw,480px);height:min(61svh,540px);min-height:420px;margin-top:-54px}.plant{--x:50%;--h:300px;--delay:0s;--tilt:0deg;position:absolute;left:var(--x);bottom:11%;width:104px;height:var(--h);z-index:2;transform:translateX(-50%) rotate(var(--tilt));transform-origin:center bottom}.stem{position:absolute;bottom:0;left:49px;width:7px;height:100%;border-radius:20px;background:linear-gradient(90deg,#1a5937,#4ca060 48%,#134329);box-shadow:inset 1px 0 #c1e1a455;transform:scaleY(0);transform-origin:bottom}.scene.is-visible .stem{animation:stem-rise .72s var(--delay) var(--ease) forwards}.stem i{position:absolute;width:43px;height:20px;opacity:0;border-radius:90% 0 90% 0;background:linear-gradient(140deg,#4e9d55,#175333);box-shadow:inset 4px 2px 7px #d6ffb633;transform-origin:left center}.stem i:first-child{left:-2px;bottom:37%;transform:rotate(-35deg) scale(0)}.stem i:last-child{right:-2px;bottom:57%;transform:scaleX(-1) rotate(-31deg) scale(0)}.scene.is-visible .stem i:first-child{animation:leaf .32s calc(var(--delay) + .48s) var(--ease) forwards}.scene.is-visible .stem i:last-child{animation:leaf-mirror .32s calc(var(--delay) + .58s) var(--ease) forwards}.bud{position:absolute;top:-3px;left:38px;width:30px;height:34px;opacity:0;border-radius:55% 55% 48% 48%;background:linear-gradient(150deg,#ea1d4e,#85001e);transform:scale(.15);transform-origin:center bottom;box-shadow:inset 4px 4px 6px #ff91a533}.scene.is-visible .bud{animation:bud-open .42s calc(var(--delay) + .66s) var(--ease) forwards}.flower{position:absolute;top:-46px;left:-4px;width:104px;height:104px;opacity:0;transform:scale(.06);transform-origin:center 88%;filter:drop-shadow(0 7px 7px #000a)}.scene.is-visible .flower{animation:flower-open .86s calc(var(--delay) + 1.0s) var(--ease) forwards}.petal{position:absolute;left:34px;top:39px;width:36px;height:55px;border-radius:55% 55% 43% 43%;transform-origin:18px 44px;transform:rotate(var(--angle)) translateY(-28px) scale(var(--size));background:linear-gradient(145deg,#f01b4c 0%,#c50034 49%,#710016 100%);box-shadow:inset 4px 5px 9px #ff9bab44,inset -5px -6px 9px #50001066}.petal.layer-2{background:linear-gradient(145deg,#e4093c,#a5002d 54%,#620014);filter:brightness(.92)}.petal.layer-3{background:linear-gradient(145deg,#fa315b,#bf0032 54%,#6f0017);filter:brightness(1.05)}.flower::after{content:"";position:absolute;left:43px;top:43px;width:20px;height:20px;border-radius:50%;z-index:5;background:radial-gradient(circle at 35% 30%,#ff8ca4,#ba002f 60%,#5b0013);box-shadow:0 0 15px #e10d3c66}.wrap-paper{position:absolute;bottom:6%;z-index:4;width:44%;height:38%;opacity:0;filter:drop-shadow(0 8px 12px #0008);transition:opacity .6s 6.6s ease}.wrap-paper.left{left:8%;background:linear-gradient(135deg,#4c101b,#1b070b);clip-path:polygon(0 20%,88% 0,100% 100%,19% 82%)}.wrap-paper.right{right:8%;background:linear-gradient(225deg,#5a1724,#1c070b);clip-path:polygon(0 0,100% 20%,81% 82%,0 100%)}.ribbon{position:absolute;bottom:14%;left:50%;z-index:5;width:74px;height:20px;opacity:0;border-radius:50%;background:linear-gradient(90deg,#75001a,#f1395d,#7b001c);transform:translateX(-50%) scale(.2);box-shadow:0 4px 9px #0008;transition:opacity .5s 7s,transform .6s 7s var(--ease)}.ribbon::before,.ribbon::after{content:"";position:absolute;top:10px;width:40px;height:51px;background:linear-gradient(#d51845,#690014);clip-path:polygon(0 0,100% 8%,65% 100%,42% 68%,0 100%)}.ribbon::before{left:7px;transform:rotate(9deg)}.ribbon::after{right:7px;transform:scaleX(-1) rotate(9deg)}.scene.is-visible .wrap-paper{opacity:.92}.scene.is-visible .ribbon{opacity:1;transform:translateX(-50%) scale(1)}.heart-rain{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}.heart{position:absolute;top:-35px;color:#e92451;filter:drop-shadow(0 2px 4px #0008);animation:fall linear forwards}.message{position:relative;z-index:6;margin-top:-70px;opacity:0;transform:translateY(14px);transition:opacity .7s 7.45s ease,transform .7s 7.45s var(--ease)}.scene.is-visible .message{opacity:1;transform:none}.message h2{font-family:"Aref Ruqaa",serif;margin:0;font-weight:400;color:#f3d7db;font-size:clamp(2.1rem,8vw,3rem)}.message p{margin:1px 0 5px;color:#c59ca2;font-size:.86rem}.message small{display:block;color:#9d6872;font-size:.67rem;letter-spacing:.06em}.message button{border:0;background:none;color:#a77b83;padding:7px;border-bottom:1px solid #6b2938;font:400 .75rem "Tajawal";cursor:pointer}.message button span{display:inline-block;margin-right:5px;transition:transform .4s}.message button:hover span{transform:rotate(-180deg)}
@keyframes stem-rise{to{transform:scaleY(1)}}@keyframes leaf{to{opacity:1;transform:rotate(-35deg) scale(1)}}@keyframes leaf-mirror{to{opacity:1;transform:scaleX(-1) rotate(-31deg) scale(1)}}@keyframes bud-open{0%{opacity:0;transform:scale(.15)}100%{opacity:1;transform:scale(1)}}@keyframes flower-open{0%{opacity:0;transform:scale(.06)}58%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}@keyframes fall{to{transform:translate3d(var(--drift),108svh,0) rotate(530deg);opacity:.05}}
@media(max-width:500px){.start-card{height:255px;width:min(84vw,350px)}.flowers{width:100vw;height:61svh;min-height:425px;margin-top:-63px}.plant{width:78px}.stem{left:36px;width:6px}.stem i{width:34px;height:17px}.bud{left:27px;scale:.85}.flower{left:-13px;scale:.78}.message{margin-top:-81px}.wrap-paper{height:34%;bottom:8%}.ribbon{bottom:15.5%}}@media(max-height:700px) and (max-width:500px){.flowers{height:58svh;min-height:380px;scale:.88;margin-top:-76px}.message{margin-top:-102px}.message h2{font-size:1.9rem}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.flower.pinkish .petal{background:linear-gradient(145deg,#ff6581,#d70c42 51%,#87001d)}.flower.velvet .petal{background:linear-gradient(145deg,#d90535,#8b001d 53%,#4f000d);filter:brightness(.84)}
.message{margin-top:-20px}@media(max-width:500px){.message{margin-top:-20px}}@media(max-height:700px) and (max-width:500px){.message{margin-top:-45px}}
.start-card p{transition:opacity .16s ease,transform .16s ease}.start-card p.is-changing{opacity:0;transform:translateY(-4px)}.line i{transition:width .85s cubic-bezier(.22,1,.36,1)}
.plant{left:50%;transform:translateX(-50%) rotate(var(--tilt))}.stem{left:calc(50% - 4px);width:20px;background:none;border-left:7px solid #3f8850;border-radius:70% 0 0 0;transform:scaleY(0) skewX(var(--curve));transform-origin:bottom}.scene.is-visible .stem{animation:stem-sway .72s var(--delay) var(--ease) forwards}.stem i:first-child{left:0}.stem i:last-child{right:-22px}.wrap-paper{z-index:13}.ribbon{z-index:14}.message{z-index:15}.flower.cream .petal{background:linear-gradient(145deg,#fff5e8,#e9bbc1 52%,#a86877)}.flower.cream::after{background:radial-gradient(circle at 35% 30%,#fffbe8,#d69a82 60%,#8c4a58)}.flower.blush .petal{background:linear-gradient(145deg,#ff9caf,#e03b62 52%,#940020)}.flower.velvet .petal{background:linear-gradient(145deg,#b5002c,#780018 55%,#3f000b)}.flower.tulip .petal{width:38px;height:62px;border-radius:58% 58% 40% 40%;transform-origin:19px 53px}.flower.tulip .flower::after{top:48px}.flower.peony .petal{width:40px;height:48px;border-radius:65% 65% 43% 43%;transform-origin:20px 40px;transform:rotate(var(--angle)) translateY(-27px) scale(var(--size))}.flower.peony .layer-3{filter:brightness(1.16)}.flower.daisy .petal{width:25px;height:60px;border-radius:60% 60% 43% 43%;transform-origin:12px 50px;transform:rotate(var(--angle)) translateY(-30px) scale(var(--size))}.flower.daisy::after{background:radial-gradient(circle at 35% 30%,#ffd978,#dc7f1e 62%,#94420d)}@keyframes stem-sway{to{transform:scaleY(1) skewX(var(--curve))}}
.wrap-paper,.ribbon{display:none!important}.bouquet-tie{position:absolute;left:50%;bottom:16%;z-index:14;width:92px;height:22px;opacity:0;transform:translateX(-50%) scaleX(.15);transform-origin:center;transition:opacity .4s 6.55s,transform .6s 6.55s var(--ease)}.bouquet-tie::before{content:"";position:absolute;inset:2px 0;border-radius:50%;background:linear-gradient(90deg,#5f0016,#ed3156 48%,#750018);box-shadow:0 4px 9px #000a,inset 0 1px #ffb0be66}.bouquet-tie i,.bouquet-tie i::before{position:absolute;content:"";top:-14px;width:44px;height:34px;border:7px solid #cf153e;border-radius:72% 18% 72% 18%;filter:drop-shadow(0 3px 3px #0008)}.bouquet-tie i{left:4px;transform:rotate(23deg)}.bouquet-tie i::before{top:-8px;left:35px;transform:rotate(116deg)}.bouquet-tie b,.bouquet-tie b::before{position:absolute;content:"";top:15px;width:20px;height:39px;background:linear-gradient(#ce173d,#690014);clip-path:polygon(0 0,100% 8%,67% 100%,42% 68%,0 100%);filter:drop-shadow(0 3px 3px #0008)}.bouquet-tie b{left:31px;transform:rotate(10deg)}.bouquet-tie b::before{left:19px;top:-1px;transform:scaleX(-1) rotate(-15deg)}.scene.is-visible .bouquet-tie{opacity:1;transform:translateX(-50%) scaleX(1)}
.bouquet-tie{width:84px;height:18px;bottom:15.5%}.bouquet-tie::before{inset:0;border-radius:5px;background:linear-gradient(90deg,#710016,#e63a5b 45%,#8a001c);box-shadow:0 4px 8px #000a,inset 0 1px #ffc0ca66}.bouquet-tie::after{content:"";position:absolute;left:50%;top:-5px;width:21px;height:28px;border-radius:7px;transform:translateX(-50%);background:linear-gradient(90deg,#85001d,#ef4a67,#7e001a);box-shadow:0 2px 5px #0008;z-index:2}.bouquet-tie i{display:none}.bouquet-tie b,.bouquet-tie b::before{top:14px;width:14px;height:29px;background:linear-gradient(#db2046,#720016);z-index:1}.bouquet-tie b{left:30px;transform:rotate(8deg)}.bouquet-tie b::before{left:10px;top:-1px;transform:scaleX(-1) rotate(-15deg)}
.bouquet-tie{width:64px;height:15px;bottom:15.8%}.bouquet-tie::before{border-radius:4px;box-shadow:0 3px 7px #000a,inset 0 1px #ffc0ca66}.bouquet-tie::after{top:-4px;width:17px;height:22px;border-radius:6px}.bouquet-tie b,.bouquet-tie b::before{top:12px;width:10px;height:21px}.bouquet-tie b{left:23px}.bouquet-tie b::before{left:8px}
.bouquet-tie{width:52px;height:13px;bottom:15.9%}.bouquet-tie::before{border-radius:4px}.bouquet-tie::after{top:-3px;width:15px;height:18px;border-radius:5px}.bouquet-tie b,.bouquet-tie b::before{top:10px;width:8px;height:16px}.bouquet-tie b{left:18px}.bouquet-tie b::before{left:7px}
.bouquet-tie{width:68px;height:12px;bottom:16.2%;z-index:13;opacity:0;transform:translateX(-50%) scaleX(.3);transition:opacity .35s ease,transform .45s var(--ease)}.bouquet-tie::before{inset:0;border-radius:4px;background:linear-gradient(90deg,#5d0b1b,#9b2238 45%,#610b1b);box-shadow:0 3px 6px #0009,inset 0 1px #ef9aa866}.bouquet-tie::after{top:8px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fb6a82,#a20b29);box-shadow:0 2px 4px #0008;z-index:3}.bouquet-tie i{display:none}.bouquet-tie b,.bouquet-tie b::before{top:14px;width:8px;height:16px;background:linear-gradient(#bf1739,#650012);clip-path:polygon(0 0,100% 8%,65% 100%,42% 68%,0 100%);z-index:2}.bouquet-tie b{left:27px;transform:rotate(8deg)}.bouquet-tie b::before{left:7px;top:-1px;transform:scaleX(-1) rotate(-14deg)}.scene.is-visible .bouquet-tie{opacity:0;transform:translateX(-50%) scaleX(.3)}.scene.is-visible .flowers.is-tied .bouquet-tie{opacity:1;transform:translateX(-50%) scaleX(1)}
.bouquet-tie{width:48px;height:9px;bottom:16.1%}.bouquet-tie::before{border-radius:3px;background:linear-gradient(90deg,#641022,#991832,#641022)}.bouquet-tie::after{top:-3px;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7991,#a30b2b);box-shadow:0 2px 5px #0009}.bouquet-tie i{display:block;position:absolute;left:-23px;top:-15px;width:35px;height:28px;background:linear-gradient(135deg,#f13e63,#a8002c);clip-path:polygon(0 48%,58% 0,100% 18%,96% 82%,58% 100%);filter:drop-shadow(0 3px 4px #0008);z-index:1;transform:rotate(-9deg)}.bouquet-tie i::before{content:"";position:absolute;left:38px;top:1px;width:35px;height:28px;background:linear-gradient(225deg,#f13e63,#a8002c);clip-path:polygon(0 18%,42% 0,100% 48%,42% 100%,4% 82%);filter:drop-shadow(0 3px 4px #0008);transform:rotate(18deg)}.bouquet-tie b,.bouquet-tie b::before{top:8px;width:11px;height:23px;background:linear-gradient(#d71e45,#700016);z-index:1}.bouquet-tie b{left:18px;transform:rotate(9deg)}.bouquet-tie b::before{left:9px;top:-1px;transform:scaleX(-1) rotate(-17deg)}
.bouquet-tie{width:46px;height:9px;bottom:16.1%}.bouquet-tie::before{background:linear-gradient(90deg,#5f0a1a,#8f1630,#5f0a1a)}.bouquet-tie::after{top:-9px;width:18px;height:18px;z-index:4;background:radial-gradient(circle at 35% 30%,#ff8ca0,#ad092a 62%,#710015)}.bouquet-tie i{left:-21px;top:-20px;width:31px;height:27px;clip-path:none;border-radius:72% 35% 68% 32%;background:linear-gradient(135deg,#ff5b7b,#ab002c);box-shadow:inset 3px 3px 6px #ffb4c033,inset -4px -4px 7px #65001366;transform:rotate(-15deg);z-index:2}.bouquet-tie i::before{display:none}.bouquet-tie b{left:36px;top:-20px;width:31px;height:27px;clip-path:none;border-radius:35% 72% 32% 68%;background:linear-gradient(225deg,#ff5b7b,#ab002c);box-shadow:inset -3px 3px 6px #ffb4c033,inset 4px -4px 7px #65001366;transform:rotate(15deg);z-index:2}.bouquet-tie b::before{display:none}
.bouquet-tie{width:46px;height:8px;bottom:16.1%}.bouquet-tie::before{border-radius:3px;background:linear-gradient(90deg,#560815,#9a1b36 48%,#560815);box-shadow:0 3px 7px #000a,inset 0 1px #ffb7c455}.bouquet-tie::after{top:-10px;width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffb0be 0%,#e32950 31%,#9f0628 68%,#620012 100%);box-shadow:0 3px 7px #000a;z-index:5}.bouquet-tie i,.bouquet-tie b{top:-22px;width:38px;height:32px;filter:drop-shadow(0 3px 4px #0009);z-index:3}.bouquet-tie i{left:-27px;border-radius:52% 22% 55% 30%;clip-path:polygon(0 50%,14% 14%,63% 0,100% 20%,84% 50%,100% 80%,63% 100%,14% 86%);background:linear-gradient(138deg,#ff7390 0%,#e31749 43%,#930020 100%);box-shadow:inset 4px 4px 8px #ffd3da44,inset -5px -5px 9px #59001077;transform:none}.bouquet-tie b{left:35px;border-radius:22% 52% 30% 55%;clip-path:polygon(0 20%,37% 0,86% 14%,100% 50%,86% 86%,37% 100%,0 80%,16% 50%);background:linear-gradient(222deg,#ff7390 0%,#e31749 43%,#930020 100%);box-shadow:inset -4px 4px 8px #ffd3da44,inset 5px -5px 9px #59001077;transform:none}.bouquet-tie i::before,.bouquet-tie b::before{display:block;top:7px;width:4px;height:19px;border-radius:50%;background:#71001766;filter:none}.bouquet-tie i::before{left:29px;transform:rotate(16deg)}.bouquet-tie b::before{left:5px;transform:rotate(-16deg)}