*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#201a18}body{font-family:"Geeza Pro","Traditional Arabic","Times New Roman",serif;color:#5b4032;overflow:hidden}main{min-height:100svh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 42%,#685446 0%,#3b302a 48%,#201a18 100%)}
#cover{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 42%,#685446 0%,#3b302a 48%,#201a18 100%);transition:opacity .65s ease,visibility .65s;perspective:1200px}
.envelope{border:0;padding:0;position:relative;width:min(82vw,440px);aspect-ratio:1.48;background:#d8c7aa;border-radius:4px;cursor:pointer;box-shadow:0 28px 65px #0007,0 1px 2px #fff4 inset;perspective:1000px;isolation:isolate;transition:transform .9s ease,opacity .8s ease;color:inherit;-webkit-tap-highlight-color:transparent}
.envelope:focus-visible{outline:3px solid #f7e5b8;outline-offset:12px}.paper{position:absolute;inset:8% 7% 5%;background:#f5ecda;border:1px solid #b89a6e;transition:transform .9s ease;z-index:1}.front{position:absolute;inset:0;background:linear-gradient(145deg,#f4ead6,#e6d5b9);clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%);z-index:3;border-radius:3px}.bottom{position:absolute;inset:0;background:linear-gradient(0deg,#eee1c8,#e5d3b5);clip-path:polygon(0 100%,50% 43%,100% 100%);z-index:4}.flap{position:absolute;inset:0;background:linear-gradient(160deg,#f8efdb,#ddc7a4);clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:50% 0;transition:transform .8s cubic-bezier(.4,0,.2,1);z-index:5;filter:drop-shadow(0 2px 1px #7e624955)}
.seal{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a05055,#6b252e 75%);border:3px double #bd7d6b;box-shadow:0 3px 5px #56352966,inset 0 0 0 3px #702b33;color:#d2a88a;display:grid;place-items:center;font-size:26px;z-index:6;transition:opacity .25s,transform .5s}.label{position:absolute;left:0;right:0;bottom:13%;z-index:7;font-size:clamp(25px,6.5vw,36px);font-weight:400;line-height:1.7;text-shadow:0 1px #fff8}
.opening .flap{transform:rotateX(180deg);z-index:2}.opening .seal{opacity:0;transform:translate(-50%,-50%) scale(.8)}.opening .paper{transform:translateY(-24%)}.opening .envelope{transform:translateY(35px)}.revealed #cover{opacity:0;visibility:hidden;pointer-events:none}
.player{width:100%;height:100svh;display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:#100e0d}video{display:block;width:100%;height:100%;object-fit:contain;background:#100e0d}#retry{position:absolute;inset:auto auto 12%;border:1px solid #c7ac7f;background:#eee1c8;color:#503a2c;border-radius:999px;padding:14px 28px;font:22px inherit;cursor:pointer}#retry[hidden]{display:none}#error{position:absolute;bottom:22%;color:#fff;font:18px system-ui;text-align:center;padding:20px}#error[hidden]{display:none}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}