*{box-sizing:border-box;margin:0;padding:0}
:root{--red:#d70024;--deep:#720014;--white:#fff;--soft:#fff2f4;--glass:rgba(255,255,255,.16)}
html,body{min-height:100%;overflow-x:hidden}
body{font-family:'Cairo',system-ui,sans-serif;background:radial-gradient(circle at 18% 10%,#ffccd3 0,#f11134 22%,#8a0018 56%,#200006 100%);color:var(--white);min-height:100svh;position:relative}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.20),transparent 24%,rgba(255,255,255,.08) 55%,transparent),radial-gradient(circle at 80% 15%,rgba(255,255,255,.25),transparent 28%);pointer-events:none}
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}
.page{min-height:100svh;display:grid;place-items:center;padding:28px;position:relative;z-index:2;gap:24px}
.card{width:min(720px,100%);text-align:center;padding:44px 28px;border:1px solid rgba(255,255,255,.38);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.08));box-shadow:0 32px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.38);backdrop-filter:blur(18px);animation:cardIn .9s cubic-bezier(.2,.8,.2,1)}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.96);color:var(--red);padding:10px 18px;border-radius:999px;font-weight:900;font-size:clamp(15px,3vw,19px);box-shadow:0 14px 35px rgba(0,0,0,.18)}
h1{font-size:clamp(42px,9vw,82px);line-height:1.15;margin:22px 0 30px;font-weight:900;letter-spacing:-1px;text-shadow:0 12px 35px rgba(0,0,0,.30)}
.actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.btn{border:0;cursor:pointer;border-radius:999px;padding:17px 30px;font-family:inherit;font-weight:900;font-size:clamp(18px,4vw,24px);transition:.25s transform,.25s box-shadow,.25s filter;min-width:190px;position:relative;overflow:hidden}
.btn:active{transform:scale(.96)}.btn:hover{transform:translateY(-4px);filter:saturate(1.1)}
.btn-light{background:#fff;color:var(--red);box-shadow:0 18px 45px rgba(255,255,255,.20)}
.btn-red{background:linear-gradient(135deg,#ff0030,#9e001e);color:#fff;box-shadow:0 20px 55px rgba(88,0,18,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:before{content:"";position:absolute;inset:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-80%) rotate(25deg)}
.btn:hover:before{animation:glint .85s ease}.success{height:0;opacity:0;display:grid;place-items:center;transition:.35s ease;overflow:hidden}.success.show{height:105px;opacity:1;margin-top:22px}
.checkmark{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#e6002a;font-size:58px;font-weight:900;box-shadow:0 0 0 12px rgba(255,255,255,.17),0 20px 60px rgba(0,0,0,.24);animation:pop .55s cubic-bezier(.2,1.4,.35,1)}
.musicVideo{display:none;width:min(960px,100%);opacity:0;transform:translateY(26px) scale(.94);transition:.7s cubic-bezier(.2,.8,.2,1)}
.musicVideo.show{display:block;opacity:1;transform:translateY(0) scale(1)}
.videoFrame{height:min(74svh,760px);min-height:430px;border-radius:38px;overflow:hidden;position:relative;background:#160005;border:1px solid rgba(255,255,255,.44);box-shadow:0 38px 110px rgba(0,0,0,.52),0 0 0 12px rgba(255,255,255,.08);isolation:isolate}
.clipBg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(22px) brightness(.56) saturate(1.35);transform:scale(1.12);z-index:1;transition:opacity .42s ease}
.clipMain{position:absolute;z-index:4;left:50%;top:50%;width:min(72%,590px);height:82%;object-fit:cover;border-radius:30px;box-shadow:0 30px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.28);transform:translate(-50%,-50%);animation:clipZoom 2.4s ease both;transition:opacity .22s ease}
.clipSide{position:absolute;z-index:3;width:28%;height:44%;object-fit:cover;border-radius:24px;filter:saturate(1.08) contrast(1.02);box-shadow:0 22px 70px rgba(0,0,0,.42);opacity:.9;transition:opacity .28s ease;animation:floatCard 3.8s ease-in-out infinite}
.sideA{left:5%;top:7%;transform:rotate(-8deg)}.sideB{right:5%;bottom:7%;transform:rotate(7deg);animation-delay:.7s}
.videoFrame.cut .clipMain{opacity:0;transform:translate(-50%,-50%) scale(.92) rotate(-1deg)}
.videoFrame.cut .clipSide{opacity:0}.videoFrame.cut .clipBg{opacity:.45}
.videoFrame.scene-1 .clipMain{animation-name:clipZoom}.videoFrame.scene-2 .clipMain{animation-name:clipPanLeft}.videoFrame.scene-3 .clipMain{animation-name:clipPanRight}.videoFrame.scene-4 .clipMain{animation-name:clipPop}
.filmGlow{position:absolute;inset:0;z-index:8;background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.12),transparent 38%),linear-gradient(to top,rgba(0,0,0,.48),transparent 38%,rgba(255,255,255,.06));pointer-events:none}.filmGrain{position:absolute;inset:0;z-index:9;opacity:.13;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.9) .7px,transparent .7px);background-size:6px 6px;mix-blend-mode:screen;animation:grain .35s steps(2) infinite}
.heart{position:absolute;z-index:7;color:#fff;font-size:22px;text-shadow:0 8px 25px rgba(0,0,0,.35);animation:heartRise 3.3s ease-out forwards;pointer-events:none}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}@keyframes pop{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}@keyframes glint{to{transform:translateX(80%) rotate(25deg)}}
@keyframes clipZoom{from{transform:translate(-50%,-50%) scale(1.03);filter:brightness(.92)}to{transform:translate(-50%,-50%) scale(1.17);filter:brightness(1.05)}}
@keyframes clipPanLeft{from{transform:translate(-47%,-50%) scale(1.16) rotate(.7deg)}to{transform:translate(-53%,-50%) scale(1.08) rotate(-.7deg)}}
@keyframes clipPanRight{from{transform:translate(-54%,-50%) scale(1.1) rotate(-.6deg)}to{transform:translate(-47%,-50%) scale(1.18) rotate(.6deg)}}
@keyframes clipPop{0%{transform:translate(-50%,-50%) scale(.92);filter:brightness(.8)}30%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1.15);filter:brightness(1.04)}}
@keyframes floatCard{0%,100%{translate:0 0}50%{translate:0 -14px}}@keyframes grain{to{transform:translate(3px,-3px)}}@keyframes heartRise{0%{opacity:0;transform:translateY(20px) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translateY(-170px) scale(1.4) rotate(18deg)}}
@media(max-width:560px){.page{padding:18px}.card{padding:34px 18px;border-radius:28px}.actions{gap:12px}.btn{width:100%;min-width:auto;padding:16px 18px}.videoFrame{height:64svh;min-height:430px;border-radius:28px}.clipMain{width:86%;height:78%;border-radius:25px}.clipSide{width:34%;height:28%;border-radius:18px}.sideA{left:3%;top:4%}.sideB{right:3%;bottom:4%}}