*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Georgia,serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}#root{width:100%;height:100vh}.envelope-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#f5e6d3,#d4c5b9);perspective:1000px}.envelope{position:relative;width:500px;height:350px;cursor:pointer;transition:transform .3s ease}.envelope:hover{transform:scale(1.02)}.envelope-body{position:absolute;width:100%;height:100%;background:linear-gradient(to bottom,#7f1d1d,#5c1010);box-shadow:0 10px 40px #0000004d;overflow:hidden;z-index:1}.envelope-left-triangle{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#8b2020,#7f1d1d);clip-path:polygon(0 0,50% 50%,0 100%);z-index:7}.envelope-right-triangle{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(225deg,#8b2020,#7f1d1d);clip-path:polygon(100% 0,100% 100%,50% 50%);z-index:7}.envelope-bottom-rhombus{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#8b2020,#7f1d1d);clip-path:polygon(0 100%,30% 40%,70% 40%,100% 100%);z-index:10}.envelope-top-triangle{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#991b1b,#7f1d1d);clip-path:polygon(0 0,100% 0,50% 50%);box-shadow:0 4px 20px #0003;z-index:10;transform-origin:50% 0;transition:transform .8s cubic-bezier(.4,0,.2,1)}.envelope.open .envelope-top-triangle{transform:rotateX(-180deg);z-index:5}.wax-seal{position:absolute;top:137px;left:50%;transform:translate(-50%);width:80px;height:80px;background:radial-gradient(circle,#7c2d12,#5c1f0a);border-radius:50%;box-shadow:0 4px 8px #0000004d,inset 0 2px 4px #fff3,inset 0 -2px 4px #0000004d;display:flex;align-items:center;justify-content:center;transition:all .8s cubic-bezier(.4,0,.2,1);border:3px solid #92400e;z-index:20}.envelope.open .wax-seal{transform:translate(-50%) scale(.8);opacity:0}.seal-inner{font-size:22px;font-weight:700;color:#fef3c7;text-shadow:1px 1px 2px rgba(0,0,0,.5);font-family:Tangerine,Playfair Display,Georgia,serif}.paper{position:absolute;width:90%;height:90%;left:5%;top:5%;background:linear-gradient(to bottom,#fff,#f8f8f8);border-radius:4px;box-shadow:0 4px 20px #00000026;transform:translateY(0);transition:transform .8s cubic-bezier(.4,0,.2,1) .3s;z-index:0}.envelope.open .paper{transform:translateY(-25%);z-index:15}.invitation{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#2c1810;padding:20px;width:100%}.invitation h1{font-size:3em;margin:0 0 .3em;font-family:Tangerine,Playfair Display,Georgia,serif;font-weight:400;font-style:italic;color:#5c1010}.invitation p{font-size:1.3em;margin:0;font-family:Georgia,serif;color:#2c1810}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.envelope:not(.open){animation:float 3s ease-in-out infinite}.flowers{position:absolute;top:50%;z-index:25;opacity:.9;height:350px;width:auto;animation:floatFlower 4s ease-in-out infinite;transform-origin:bottom center}.flowers-left{left:-90px;transform:translateY(-50%) rotate(-15deg)}.flowers-right{right:-90px;transform:translateY(-50%) rotate(15deg)}@keyframes floatFlower{0%,to{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 15px))}}.flowers-left{animation:floatFlowerLeft 4s ease-in-out infinite}.flowers-right{animation:floatFlowerRight 4s ease-in-out infinite}@keyframes floatFlowerLeft{0%,to{transform:translateY(-50%) rotate(-15deg)}50%{transform:translateY(calc(-50% - 15px)) rotate(-13deg)}}@keyframes floatFlowerRight{0%,to{transform:translateY(-50%) rotate(15deg)}50%{transform:translateY(calc(-50% - 15px)) rotate(17deg)}}.envelope.open .flowers{opacity:0;transition:opacity .5s ease}