.wf{--wf-blue:#1f4fcc;--wf-blue2:#5c82e2;--wf-ink:#0e1a2e;--wf-ink3:#5a6a82;--wf-gold:#a8852e;--wf-line:#dce3ef;position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:820/620;container-type:inline-size;border-radius:20px;overflow:hidden;background:radial-gradient(closest-side at 50% 42%,rgba(31,79,204,.1),transparent),#eef2f9;border:1px solid var(--wf-line);box-shadow:0 12px 32px rgba(14,26,46,.12);font-family:var(--font-inter,Inter,system-ui,sans-serif)}.wf-phone{top:6%;height:76%;aspect-ratio:240/480;border-radius:12%/6%;padding:2.4%;box-shadow:0 30px 70px rgba(14,26,46,.28);animation:wf-phone-in 9s ease-in-out infinite}.wf-notch,.wf-phone{position:absolute;left:50%;transform:translateX(-50%);background:var(--wf-ink)}.wf-notch{top:4.5%;width:30%;height:4%;border-radius:999px;z-index:5}.wf-screen{position:absolute;inset:2.4%;border-radius:9%/4.5%;overflow:hidden;background:#fff}.wf-cam{position:absolute;inset:0;background:linear-gradient(180deg,#0e1a2e,#14233d);display:flex;align-items:center;justify-content:center;animation:wf-cam-fade 9s ease-in-out infinite}.wf-qr-box{position:relative;background:#fff;padding:12px;border-radius:12px;animation:wf-qr 9s ease-in-out infinite}.wf-scanline{position:absolute;left:8px;right:8px;top:8px;height:3px;border-radius:2px;background:var(--wf-blue2);box-shadow:0 0 12px var(--wf-blue2);animation:wf-scan 9s ease-in-out infinite}.wf-check{width:34%;aspect-ratio:1;border-radius:50%;background:#1f7a4d;color:#fff;justify-content:center;font-size:4.5cqw;box-shadow:0 10px 30px rgba(31,122,77,.5);transform:scale(0);animation:wf-check 9s ease-in-out infinite}.wf-cardview,.wf-check{position:absolute;display:flex;align-items:center}.wf-cardview{inset:0;background:#f6f8fc;flex-direction:column;padding-top:9%;opacity:0;animation:wf-cardview 9s ease-in-out infinite}.wf-billetera{font-size:2.4cqw;color:var(--wf-ink3);font-weight:600;margin-bottom:6%}.wf-card{width:84%;aspect-ratio:260/170;border-radius:12px;background:linear-gradient(135deg,#0e1a2e,#16305f 55%,#1f4fcc 140%);box-shadow:0 18px 40px rgba(14,26,46,.35);padding:7% 8%;color:#fff;position:relative;overflow:hidden;transform:translateY(340%);animation:wf-card 9s ease-in-out infinite}.wf-card-k{font-size:1.4cqw;letter-spacing:.16em;color:rgba(255,255,255,.6);font-weight:600}.wf-card-name{font-size:2.7cqw;font-weight:700;margin-top:2.5%;white-space:nowrap}.wf-stamps{display:grid;grid-template-columns:repeat(5,max-content);gap:1.1cqw;margin-top:7%}.wf-stamp{width:2.6cqw;height:2.6cqw;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25)}.wf-stamp.on{background:var(--wf-gold);border:none}.wf-wallet{position:absolute;left:9%;right:9%;bottom:22%;display:flex;flex-direction:column;gap:4%;transform:translateY(160%);opacity:0;animation:wf-wallet 9s ease-in-out infinite}.wf-wbtn{height:5.5cqw;min-height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:1.9cqw;font-weight:600;white-space:nowrap}.wf-wbtn.apple{background:#000;color:#fff}.wf-wbtn.google{background:#fff;color:var(--wf-ink);border:1px solid var(--wf-line)}.wf-caption{position:absolute;bottom:5%;left:0;right:0;display:flex;justify-content:center;opacity:0}.wf-caption>span{gap:10px;background:#fff;border:1px solid var(--wf-line);border-radius:999px;padding:2.4% 3.6%;box-shadow:0 6px 20px rgba(14,26,46,.1);font-size:3cqw;font-weight:600;color:var(--wf-ink);white-space:nowrap}.wf-caption .wf-step,.wf-caption>span{display:inline-flex;align-items:center}.wf-caption .wf-step{width:4.6cqw;height:4.6cqw;min-width:18px;min-height:18px;border-radius:50%;background:var(--wf-blue);color:#fff;font-size:2.8cqw;justify-content:center;font-weight:700}.wf-c1{animation:wf-c1 9s ease-in-out infinite}.wf-c2{animation:wf-c2 9s ease-in-out infinite}.wf-c3{animation:wf-c3 9s ease-in-out infinite}.wf-c4{animation:wf-c4 9s ease-in-out infinite}@keyframes wf-phone-in{0%{transform:translateX(-50%) translateY(14px);opacity:0}4%,to{transform:translateX(-50%) translateY(0);opacity:1}}@keyframes wf-cam-fade{0%,40%{opacity:1}46%,to{opacity:0}}@keyframes wf-qr{0%{transform:scale(.6);opacity:0}34%,6%{transform:scale(1) translateY(0);opacity:1}44%{transform:scale(1) translateY(18px);opacity:0}to{opacity:0}}@keyframes wf-scan{0%,6%{top:8px;opacity:0}8%{opacity:1}32%,8%{opacity:1}20%{top:calc(100% - 12px)}32%{opacity:0}to{opacity:0}}@keyframes wf-check{0%,33%{transform:scale(0)}38%{transform:scale(1.12)}42%,45%{transform:scale(1)}49%,to{transform:scale(0)}}@keyframes wf-cardview{0%,44%{opacity:0}50%,to{opacity:1}}@keyframes wf-card{0%,48%{transform:translateY(340%)}60%,to{transform:translateY(0)}}@keyframes wf-wallet{0%,70%{transform:translateY(140%);opacity:0}80%,96%{transform:translateY(0);opacity:1}to{transform:translateY(0);opacity:1}}@keyframes wf-c1{0%,4%{opacity:0;transform:translateY(8px)}30%,8%{opacity:1;transform:translateY(0)}34%,to{opacity:0}}@keyframes wf-c2{0%,33%{opacity:0;transform:translateY(8px)}38%,46%{opacity:1;transform:translateY(0)}50%,to{opacity:0}}@keyframes wf-c3{0%,49%{opacity:0;transform:translateY(8px)}54%,72%{opacity:1;transform:translateY(0)}76%,to{opacity:0}}@keyframes wf-c4{0%,75%{opacity:0;transform:translateY(8px)}82%,98%{opacity:1;transform:translateY(0)}to{opacity:0}}@media (prefers-reduced-motion:reduce){.wf-c1,.wf-c2,.wf-c3,.wf-c4,.wf-cam,.wf-card,.wf-cardview,.wf-check,.wf-phone,.wf-qr-box,.wf-scanline,.wf-wallet{animation:none!important}.wf-cam{opacity:0}.wf-cardview{opacity:1}.wf-card,.wf-wallet{transform:translateY(0)}.wf-c4,.wf-wallet{opacity:1}}