@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Tajawal:wght@300;400;500;600;700&display=swap');
:root{--rose:#f3dfe3;--rose2:#e9c8d0;--deep:#815965;--wine:#704956;--gold:#b28a58;--ink:#634650;--cream:#fffaf8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);font-family:'Tajawal',sans-serif;background:radial-gradient(ellipse at 18% 12%,#fff8f7 0,transparent 35%),radial-gradient(ellipse at 88% 80%,#f4dfe4 0,transparent 38%),linear-gradient(135deg,#f8eaec,#f0dce1 55%,#f9eff0);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.2;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");z-index:0}
.ambient{position:fixed;width:300px;height:300px;border:1px solid #c9a77d33;border-radius:50%;pointer-events:none}.ambient-one{top:-180px;right:-100px}.ambient-two{bottom:-210px;left:-120px;width:390px;height:390px}
main{position:relative;z-index:1;min-height:100vh}.intro{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:38px 20px 25px;transition:opacity .7s,transform .7s;position:relative}.intro-top{font-size:13px;letter-spacing:2px;color:#9c747d}.tiny-star{color:var(--gold);padding:0 10px}.intro-kicker{font:600 10px 'Cormorant Garamond',serif;letter-spacing:4px;color:#a68170;margin:27px 0 12px}.intro h1{font:500 clamp(38px,7vw,62px)/1.25 'Amiri',serif;color:#805965;margin:0}.intro h1 em,.hero-copy h2 em{font-style:normal;color:#b18a65}.intro-note{font-size:14px;color:#9c7d82;margin:13px 0 20px}
.envelope-button{border:0;background:none;padding:0;cursor:pointer;perspective:1100px;filter:drop-shadow(0 23px 22px #80596526);width:min(82vw,430px);height:min(57vw,285px);min-height:205px;position:relative;outline-offset:8px}
.envelope{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.75,.2,1)}
.env-back{position:absolute;inset:0;background:linear-gradient(145deg,#f8e9e9,#eacfd3);border:1px solid #d7b8b4;border-radius:5px;box-shadow:inset 0 0 0 7px #f8eeee,inset 0 0 0 8px #d9b9b4}
.env-paper{position:absolute;left:8%;right:8%;top:7%;height:82%;background:linear-gradient(#fff9f4,#f5e5e2);border:1px solid #e5cfc7;box-shadow:0 5px 20px #825e5e18;display:flex;align-items:flex-start;justify-content:center;padding-top:28px;color:#b08a77;font:italic 15px 'Cormorant Garamond',serif;letter-spacing:1px;transition:transform 1s .15s}
.paper-sparkle{position:absolute;top:48%;font-size:25px;color:#c5a276}
.env-left,.env-right,.env-bottom,.env-flap{position:absolute;inset:0}
.env-left{background:linear-gradient(120deg,#f7e8e8,#e8cbd0);clip-path:polygon(0 0,52% 52%,0 100%);border-left:1px solid #d8b9b5}
.env-right{background:linear-gradient(240deg,#f5e5e5,#e7c8ce);clip-path:polygon(100% 0,48% 52%,100% 100%)}
.env-bottom{background:linear-gradient(160deg,#f4e2e2,#e8cbd0);clip-path:polygon(0 100%,50% 47%,100% 100%);filter:drop-shadow(0 -1px 0 #d5b4b3)}
.env-flap{background:linear-gradient(160deg,#f9eeee,#ebd1d3);clip-path:polygon(0 0,100% 0,50% 56%);transform-origin:top;transition:transform .85s cubic-bezier(.2,.75,.2,1);backface-visibility:hidden;filter:drop-shadow(0 2px 1px #b98e8b)}
.wax-seal{position:absolute;left:50%;top:52%;width:85px;height:85px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#e9c6bd,#b97e78 58%,#8e5c60);border:4px double #e8c9bb;box-shadow:0 3px 9px #7a4a503d,inset 0 0 0 4px #c9948c;transition:opacity .3s,transform .5s;z-index:5}.wax-seal span{font:42px Georgia;color:#f5dcd3;text-shadow:0 2px 2px #80505266}
.envelope-glint{position:absolute;inset:10px;border:1px solid #fff8;pointer-events:none}
.envelope-button:hover .envelope{transform:translateY(-5px) rotateX(2deg)}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:0}.envelope.open .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(.4)}.envelope.open .env-paper{transform:translateY(-68%)}
.open-hint{margin-top:20px;border:1px solid #c8a78b;background:#fff9f5a8;color:#8e6870;border-radius:30px;padding:10px 22px;font:500 13px 'Tajawal';cursor:pointer;transition:.25s}.open-hint:hover{background:#fff;color:#76505b;box-shadow:0 5px 18px #a7797d22}.open-hint span{color:var(--gold);padding-right:8px}.intro-foot{position:absolute;bottom:25px;display:flex;gap:14px;align-items:center;font:11px 'Cormorant Garamond',serif;letter-spacing:2px;color:#a88883}
.invitation{max-width:900px;margin:auto;padding:32px 24px 25px;opacity:1;transform:none;transition:opacity .7s,transform .7s}.hidden{display:none}.intro.leaving{opacity:0;transform:scale(1.04);pointer-events:none}
.brand-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid #c8a77c55;padding-bottom:18px}.brand-mark{width:43px;height:43px;border:1px solid #bd9b73;border-radius:50%;display:grid;place-items:center;font:600 16px 'Cormorant Garamond';color:#946d73;position:relative}.brand-mark span{position:absolute;top:-5px;right:-3px;color:#b68c5d;font-size:13px}.brand-name{display:flex;flex-direction:column;gap:2px}.brand-name strong{font:600 19px 'Cormorant Garamond';letter-spacing:1px;color:#805965}.brand-name small{font:10px 'Cormorant Garamond';letter-spacing:3px;color:#a98976}.clock-card{margin-right:auto;text-align:left;border-right:1px solid #c7a77e;padding-right:14px;display:flex;flex-direction:column;gap:2px}.clock-label{font-size:10px;color:#a27e7d}.clock-card time{font:600 19px 'Cormorant Garamond';letter-spacing:1px;color:#8c626d;direction:ltr}.clock-date{font-size:10px;color:#a27e7d}
.hero-copy{text-align:center;padding:55px 12px 37px}.eyebrow{display:inline-flex;align-items:center;gap:12px;color:#a27c78;font-size:12px;letter-spacing:.5px}.eyebrow i{width:25px;height:1px;background:#c5a477}.hero-copy h2{font:500 clamp(34px,6vw,54px)/1.45 'Amiri';margin:18px 0 12px;color:#79535f}.lead{max-width:590px;margin:0 auto;color:#94777a;font-size:15px;line-height:2}
.occasion-panel{max-width:700px;margin:0 auto;padding:27px clamp(15px,4vw,38px) 34px;background:linear-gradient(145deg,#fffaf7c9,#f5e6e6a8);border:1px solid #d5b99488;box-shadow:0 16px 50px #8d5d6420;position:relative}.occasion-panel:before{content:"";position:absolute;inset:7px;border:1px solid #c6a67d55;pointer-events:none}.panel-heading{display:flex;justify-content:center;align-items:center;gap:17px;text-align:center;color:#b28b60}.panel-heading>span{font-size:20px}.panel-heading small{font:10px 'Cormorant Garamond';letter-spacing:2.5px;color:#ad8b7a}.panel-heading h3{font:500 24px 'Amiri';margin:5px 0 0;color:#805965}.occasion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}.occasion{min-height:100px;background:#fffaf7a8;border:1px solid #dfc9c3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#805965;transition:transform .25s,box-shadow .25s}.occasion:hover{transform:translateY(-4px);box-shadow:0 8px 20px #a77c7d22}.occasion-icon{font-size:25px;filter:drop-shadow(0 2px 2px #b88c7c22)}.occasion span:last-child{font-size:14px}
.contact-section{text-align:center;padding:43px 0 27px}.contact-flourish{color:#b18c63;letter-spacing:3px}.contact-section h3{font:500 27px 'Amiri';color:#805965;margin:12px 0 6px}.contact-section>p{font-size:13px;color:#987d7e;line-height:1.9;margin:0 auto 22px;max-width:520px}.social-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.social-link{width:205px;min-height:67px;display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fffaf7b8;border:1px solid #dec9c1;text-decoration:none;color:#805965;text-align:right;transition:.25s}.social-link:hover{transform:translateY(-3px);background:#fff;box-shadow:0 8px 20px #91636b20}.social-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#f3e3e4;color:#a5767d}.social-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.social-icon .dot{fill:currentColor;stroke:none}.social-link>span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1}.social-link strong{font:600 15px 'Cormorant Garamond';direction:ltr;text-align:right}.social-link small{font-size:10px;color:#a18883}.social-link>b{font-size:17px;color:#b28b60;font-weight:400}footer{text-align:center;border-top:1px solid #c8a77c55;padding:20px 0 4px;font:13px 'Cormorant Garamond';letter-spacing:1px;color:#97767b}footer small{display:block;font:11px 'Tajawal';letter-spacing:0;margin-top:7px;color:#ae9290}.footer-star{color:#b28b60;padding:0 8px}.replay{display:block;margin:18px auto 0;border:0;background:none;color:#a27e7d;font:12px 'Tajawal';cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.sparkle-layer{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}.spark{position:absolute;color:#c19b6c;animation:twinkle 1.5s ease-out forwards;text-shadow:0 0 8px #fff}@keyframes twinkle{0%{opacity:0;transform:scale(.2) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.3) rotate(70deg)}}
@media(max-width:600px){.intro{padding-top:25px}.intro h1{font-size:43px}.envelope-button{width:86vw;height:57vw;min-height:190px}.wax-seal{width:70px;height:70px}.wax-seal span{font-size:35px}.invitation{padding:22px 16px}.brand-mark{width:37px;height:37px}.brand-name strong{font-size:16px}.clock-card{padding-right:9px}.clock-label{font-size:9px}.clock-card time{font-size:16px}.hero-copy{padding:42px 4px 28px}.lead{font-size:14px}.occasion-grid{grid-template-columns:repeat(2,1fr);gap:9px}.occasion{min-height:88px}.panel-heading h3{font-size:22px}.social-links{display:grid;grid-template-columns:1fr;max-width:340px;margin:auto}.social-link{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}