.pi{position:fixed;inset:0;z-index:9999;overflow:hidden;background:radial-gradient(120% 80% at 50% 42%,#005596 0%,#004170 38%,#001a33 100%);transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1)}
.pi-out{opacity:0;transform:scale(1.05);pointer-events:none}
.pi canvas{position:absolute;inset:0;width:100%;height:100%}
.pi-band{position:absolute;left:50%;top:-10%;width:64px;height:120%;margin-left:-32px;background:linear-gradient(90deg,#fff 0 6%,#DA291C 6% 94%,#fff 94%);transform-origin:50% 0;transform:scaleY(0);opacity:.9;animation:piBand .7s .1s cubic-bezier(.7,0,.2,1) forwards,piBandOut .6s 1.15s ease forwards}
.pi-sweep{position:absolute;top:-30%;left:-60%;width:40%;height:160%;transform:rotate(16deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22) 50%,transparent);filter:blur(8px);animation:piSweep 1.1s .55s ease-in-out both}
.pi-c{position:absolute;left:50%;top:42%;width:140px;height:140px;margin:-70px}
.pi-c:before{content:"";position:absolute;inset:-90px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),rgba(218,41,28,.12) 40%,transparent 68%);opacity:0;animation:piGlow 1s .7s ease both}
.pi-c img{position:relative;width:100%;height:100%;animation:piCrest .8s .6s cubic-bezier(.2,.8,.2,1) both}
.pi-t{position:absolute;left:0;right:0;top:calc(42% + 100px);text-align:center;color:#fff}
.pi-t b{display:block;font:700 13px Inter,sans-serif;text-transform:uppercase;white-space:nowrap;animation:piTrack 1s .95s cubic-bezier(.2,.7,.2,1) both}
.pi-t small{display:block;margin-top:12px;font:500 14px 'IBM Plex Sans Arabic',sans-serif;opacity:0;animation:piFade .6s 1.2s ease forwards}
.pi-skip{position:absolute;right:16px;top:calc(16px + env(safe-area-inset-top));height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:#fff;font:600 12px Inter,sans-serif}
@keyframes piBand{to{transform:scaleY(1)}}
@keyframes piBandOut{to{opacity:0;transform:scaleY(1) scaleX(3)}}
@keyframes piSweep{0%{margin-left:0;opacity:0}30%{opacity:1}100%{margin-left:190%;opacity:0}}
@keyframes piCrest{0%{opacity:0;transform:scale(.6) rotate(-8deg);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes piGlow{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
@keyframes piTrack{0%{opacity:0;letter-spacing:.05em;filter:blur(3px)}100%{opacity:1;letter-spacing:.4em;filter:none}}
@keyframes piFade{to{opacity:.85}}
@media (prefers-reduced-motion:reduce){.pi{display:none}}