/* ===== PRE POWER luxury intro (ppx) — gate → slam → gold sweep → one continuous glide into the hero ===== */
.ppx,.ppx-logo{display:none}
html.ppx-on{overflow:hidden}
html.ppx-on .ppx{display:block}
html.ppx-on .ppx-logo{display:block}
.ppx{position:fixed;inset:0;z-index:10000;background:#05030a;overflow:hidden;will-change:transform;transform:translateZ(0)}
.ppx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgba(196,120,255,.95) 30%,#e8c46a 50%,rgba(196,120,255,.95) 70%,transparent);box-shadow:0 0 18px 4px rgba(170,80,255,.65),0 0 60px 10px rgba(140,60,230,.35);opacity:0;transition:opacity .3s}
.ppx-bg{position:absolute;inset:0}
.ppx-smoke{position:absolute;inset:-25%;background:url(img/intro-smoke.webp) center/cover no-repeat;opacity:.85;mix-blend-mode:screen;animation:ppxDrift 14s ease-in-out infinite alternate}
.ppx-smoke.s2{transform:scaleX(-1) rotate(180deg);opacity:.55;animation:ppxDrift2 18s ease-in-out infinite alternate}
@keyframes ppxDrift{from{transform:translate3d(-4%,2%,0) scale(1.05)}to{transform:translate3d(4%,-3%,0) scale(1.18)}}
@keyframes ppxDrift2{from{transform:scaleX(-1) rotate(180deg) translate3d(3%,0,0) scale(1.1)}to{transform:scaleX(-1) rotate(180deg) translate3d(-4%,4%,0) scale(1.25)}}
.ppx-glow{position:absolute;left:50%;top:42%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:radial-gradient(closest-side,rgba(150,70,255,.42),rgba(90,30,170,.18) 38%,transparent 70%);opacity:.55;transform:scale(.7);transition:opacity 1s,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.ppx-beam{position:absolute;left:50%;top:-10%;width:46vmin;height:120%;margin-left:-23vmin;background:linear-gradient(180deg,rgba(210,170,255,.18),rgba(160,90,255,.06) 55%,transparent 80%);filter:blur(18px);opacity:0;transform:scaleX(.4);transition:opacity .8s,transform 1.2s}
.ppx-ring{position:absolute;left:50%;top:42%;width:min(70vw,380px);aspect-ratio:1;margin:calc(min(70vw,380px)/-2) 0 0 calc(min(70vw,380px)/-2);border-radius:50%;border:2px solid rgba(220,180,255,.9);box-shadow:0 0 30px rgba(170,80,255,.9),inset 0 0 30px rgba(170,80,255,.6);opacity:0;transform:scale(.2)}
.ppx-logo{position:fixed;left:50%;top:42%;z-index:10001;width:min(78vw,430px);transform:translate(-50%,-50%);transform-origin:50% 50%;pointer-events:none;will-change:transform,opacity}
.ppx-logo img{display:block;width:100%;height:auto;opacity:.13;filter:blur(5px);transform:scale(.92);transition:opacity .6s}
.ppx-sweep{position:absolute;inset:0;background:linear-gradient(105deg,transparent 36%,rgba(255,236,170,.0) 40%,rgba(255,226,140,.95) 48%,#fff6d6 50%,rgba(232,196,106,.85) 53%,transparent 62%);background-size:260% 100%;background-position:160% 0;-webkit-mask:url(img/intro-logo.webp) center/100% 100% no-repeat;mask:url(img/intro-logo.webp) center/100% 100% no-repeat;opacity:0}
.ppx-name{position:absolute;left:0;right:0;top:calc(42% + min(78vw,430px)*.33);text-align:center;font-family:'Tajawal',system-ui,sans-serif;color:#e8c46a;pointer-events:none}
.ppx-name b{display:block;font-weight:800;font-size:clamp(15px,4.4vw,22px);letter-spacing:.42em;padding-left:.42em;color:#f6e7b8;text-shadow:0 0 14px rgba(232,196,106,.55);opacity:0;transform:translateY(10px);clip-path:inset(0 50% 0 50%)}
.ppx-name span{display:block;margin-top:8px;font-weight:500;font-size:clamp(10px,2.9vw,13px);letter-spacing:.55em;padding-left:.55em;color:#cdb2ff;opacity:0}
.ppx-name i{display:block;width:0;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,#e8c46a,transparent)}
.ppx-enter{position:absolute;left:50%;bottom:calc(16% + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:18px 42px;border-radius:99px;border:1px solid rgba(232,196,106,.85);background:linear-gradient(180deg,rgba(40,26,8,.55),rgba(12,8,4,.65));color:#f6e7b8;font:800 20px/1 'Tajawal',system-ui,sans-serif;letter-spacing:.06em;cursor:pointer;box-shadow:0 0 0 1px rgba(232,196,106,.15) inset,0 0 26px -4px rgba(232,196,106,.55),0 0 60px -10px rgba(160,80,255,.6);overflow:hidden;-webkit-tap-highlight-color:transparent;opacity:0;animation:ppxBtnIn .9s .35s cubic-bezier(.2,.8,.2,1) forwards;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s,filter .35s}
.ppx-enter .en{font-size:14px;letter-spacing:.42em;padding-left:.2em;color:#e8c46a}
.ppx-enter i{width:1px;height:18px;background:rgba(232,196,106,.7)}
.ppx-enter::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,240,190,.55) 50%,transparent 70%);background-size:250% 100%;animation:ppxShine 2.6s 1.2s ease-in-out infinite}
.ppx-enter:hover,.ppx-enter:focus-visible{outline:none;box-shadow:0 0 0 1px rgba(232,196,106,.4) inset,0 0 34px -2px rgba(232,196,106,.8),0 0 70px -6px rgba(160,80,255,.8)}
.ppx-enter:active{transform:translateX(-50%) scale(.96)}
.ppx-snd-hint{position:absolute;left:50%;bottom:calc(16% + env(safe-area-inset-bottom) - 34px);transform:translateX(-50%);font:500 11px/1 'Tajawal',system-ui,sans-serif;letter-spacing:.3em;color:rgba(232,196,106,.55);white-space:nowrap;opacity:0;animation:ppxBtnIn .9s .7s forwards}
@keyframes ppxBtnIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
@keyframes ppxShine{0%{background-position:160% 0}60%,100%{background-position:-60% 0}}
html.ppx-on.ppx-gate .snd{opacity:0;pointer-events:none}
html.ppx-on .snd{z-index:10003}
html.ppx-hold .topbar,html.ppx-hold .sprog,html.ppx-hold .to-top{opacity:0}
html.ppx-hold .hero,html.ppx-hold .hero *{animation-play-state:paused!important}
html.ppx-hold .hero-logo,html.ppx-fly .hero-logo{animation:none!important;opacity:0}
html.ppx-landed .hero-logo{animation:none!important;opacity:1;filter:drop-shadow(0 10px 40px rgba(160,80,255,.45))}
.topbar{transition:background .4s,backdrop-filter .4s,border-color .4s,opacity .9s .4s}
/* ---- play ---- */
.ppx.go .ppx-enter{opacity:0!important;transform:translateX(-50%) scale(1.25);filter:blur(8px);pointer-events:none;animation:none}
.ppx.go .ppx-snd-hint{opacity:0!important;transition:opacity .2s;animation:none}
.ppx.go .ppx-glow{opacity:1;transform:scale(1)}
.ppx.go .ppx-beam{opacity:1;transform:scaleX(1);transition-delay:0s}
.ppx.go .ppx-ring{animation:ppxRing 1.1s .02s cubic-bezier(.1,.7,.2,1) forwards}
.ppx-logo.go img{animation:ppxSlam .95s 0s cubic-bezier(.16,.9,.25,1) both,ppxNeon 5s 1.2s ease-in-out infinite}
.ppx-logo.go .ppx-sweep{animation:ppxSweep 1.1s 1.36s cubic-bezier(.45,0,.2,1) forwards}
.ppx.go .ppx-name b{animation:ppxNameIn .9s 1.62s cubic-bezier(.2,.8,.2,1) forwards}
.ppx.go .ppx-name i{animation:ppxLine .9s 1.8s ease forwards}
.ppx.go .ppx-name span{animation:ppxFade .8s 1.98s forwards}
@keyframes ppxSlam{
 0%{opacity:.13;transform:scale(.92);filter:blur(5px)}
 7%{opacity:1;transform:scale(1.32);filter:blur(0) brightness(2.2) drop-shadow(0 0 30px #c98bff) drop-shadow(0 0 70px #8a3dff)}
 20%{opacity:1;transform:scale(.97);filter:brightness(1.4) drop-shadow(0 0 22px #b06bff) drop-shadow(0 0 60px #7a2cff)}
 26%{opacity:.35}
 30%{opacity:1}
 36%{opacity:.55}
 40%{opacity:1;transform:scale(1.01)}
 100%{opacity:1;transform:scale(1);filter:brightness(1) drop-shadow(0 0 14px rgba(190,120,255,.9)) drop-shadow(0 0 46px rgba(130,50,255,.6))}}
@keyframes ppxNeon{0%,100%{filter:drop-shadow(0 0 14px rgba(190,120,255,.9)) drop-shadow(0 0 46px rgba(130,50,255,.6))}50%{filter:drop-shadow(0 0 20px rgba(205,145,255,1)) drop-shadow(0 0 64px rgba(140,60,255,.75))}}
@keyframes ppxRing{0%{opacity:.95;transform:scale(.25)}100%{opacity:0;transform:scale(2.6);border-width:1px}}
@keyframes ppxSweep{0%{opacity:1;background-position:160% 0}100%{opacity:1;background-position:-60% 0}}
@keyframes ppxNameIn{to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes ppxLine{to{width:min(56vw,240px)}}
@keyframes ppxFade{to{opacity:1}}
/* ---- release: curtain lifts, logo flies into the hero, hero plays on ---- */
.ppx.out{transform:translate3d(0,-101%,0);transition:transform 1.3s cubic-bezier(.76,0,.22,1)}
.ppx.out::after{opacity:1}
.ppx.out .ppx-name{transition:opacity .5s;opacity:0}
.ppx-logo.fly{transition:transform 1.3s cubic-bezier(.76,0,.22,1)}
.ppx-logo.fly img{animation:none;opacity:1;filter:drop-shadow(0 10px 40px rgba(160,80,255,.45));transition:filter 1.3s}
html.ppx-fly .hero-bg img{animation:ppxSettle 1.6s cubic-bezier(.2,.8,.2,1) both,kb 22s 1.6s ease-in-out infinite alternate!important}
@keyframes ppxSettle{from{transform:scale(1.32) translateY(4%)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.ppx-logo img{opacity:1;filter:drop-shadow(0 0 16px rgba(190,120,255,.8));transform:none}.ppx-enter,.ppx-snd-hint{opacity:1}.ppx-name b,.ppx-name span{opacity:1;transform:none;clip-path:none}}
.ppx-logo.fly img{transform:none}
.ppx-logo.land{transition:opacity .35s;opacity:0}

/* ---- v2: a hit on every drum — flash, shake, neon flicker ---- */
.ppx-flash{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.95),rgba(205,150,255,.6) 22%,rgba(120,50,230,.28) 48%,transparent 72%)}
.ppx-flash.on{animation:ppxFlash .34s ease-out}
.ppx-flash.big.on{animation:ppxFlashBig .6s ease-out}
@keyframes ppxFlash{0%{opacity:.85}100%{opacity:0}}
@keyframes ppxFlashBig{0%{opacity:1;background-color:rgba(255,250,240,.35)}25%{opacity:.7;background-color:transparent}100%{opacity:0}}
.ppx-bg.shk{animation:ppxShake .3s cubic-bezier(.3,.7,.4,1)}
.ppx-bg.shk-big{animation:ppxShakeBig .5s cubic-bezier(.3,.7,.4,1)}
.ppx-logo.hitfx{animation:ppxShake .3s cubic-bezier(.3,.7,.4,1),ppxFlick .3s linear}
.ppx-logo.hitfx-big{animation:ppxShakeBig .5s cubic-bezier(.3,.7,.4,1),ppxFlickBig .5s linear}
@keyframes ppxShake{0%{translate:0 0}15%{translate:-7px 4px}30%{translate:6px -4px}45%{translate:-4px 3px}60%{translate:2px -1px}80%{translate:-1px 1px}100%{translate:0 0}}
@keyframes ppxShakeBig{0%{translate:0 0}8%{translate:-11px 7px}18%{translate:9px -8px}30%{translate:-7px 5px}42%{translate:6px -4px}56%{translate:-4px 3px}72%{translate:2px -2px}100%{translate:0 0}}
@keyframes ppxFlick{0%{filter:brightness(2) drop-shadow(0 0 26px #d6a6ff)}25%{filter:brightness(.75)}45%{filter:brightness(1.6) drop-shadow(0 0 18px #c48bff)}100%{filter:none}}
@keyframes ppxFlickBig{0%{filter:brightness(2.6) drop-shadow(0 0 40px #e2c2ff) drop-shadow(0 0 90px #8a3dff)}18%{filter:brightness(.6)}30%{filter:brightness(2) drop-shadow(0 0 30px #d0a0ff)}48%{filter:brightness(.9)}62%{filter:brightness(1.4)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.ppx-flash,.ppx-bg.shk,.ppx-bg.shk-big,.ppx-logo.hitfx,.ppx-logo.hitfx-big{animation:none!important}}