/* Pishon Sports Wear — animation layer (added on top of style.css, nothing removed) */
/* progress bar */
#fxBar{position:fixed;top:0;left:0;height:4px;width:100%;background:linear-gradient(90deg,#0a5cff,#4d8aff,#ff3c3c);transform-origin:left;transform:scaleX(0);z-index:100000;pointer-events:none}
/* loader */
#fxLoader{position:fixed;inset:0;z-index:100001;background:#060c1a;display:grid;place-content:center;justify-items:center;gap:22px;transition:transform .8s cubic-bezier(.77,0,.18,1),visibility 0s .8s}
#fxLoader img{width:84px;height:84px;object-fit:contain;border-radius:14px;animation:fxPop 1.2s ease-in-out infinite alternate}
.fxl-bar{width:180px;height:3px;background:rgba(255,255,255,.15);border-radius:9px;overflow:hidden}
.fxl-bar i{display:block;height:100%;width:100%;background:#0a5cff;transform:translateX(-100%);animation:fxLoad 1.1s ease-out forwards}
body.fx-ready #fxLoader{transform:translateY(-100%);visibility:hidden}
@keyframes fxLoad{to{transform:none}}@keyframes fxPop{to{transform:scale(1.12) rotate(-4deg)}}
/* page-leave curtain */
#fxCurtain{position:fixed;inset:0;background:#0a5cff;z-index:100002;transform:translateY(100%);transition:transform .5s cubic-bezier(.77,0,.18,1);pointer-events:none}
#fxCurtain.on{transform:none}
/* split-word headline reveal */
.fxw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em .04em .1em;margin:-.06em -.04em -.1em}
.fxw i{display:inline-block;font-style:normal;font-weight:inherit;transform:translateY(115%) rotate(7deg);transition:transform .9s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--d)*80ms)}
body.fx-ready h1.fx-split i,.fx-split.fx-in i{transform:none}
/* scroll-scrubbed 3D entrance (uses individual transform props so it never fights existing effects) */
.fx-persp{perspective:1100px}
.fx3{rotate:1 0 0 calc((1 - var(--p,1))*26deg);scale:calc(.9 + var(--p,1)*.1);transform-origin:50% 100%;will-change:rotate,scale}
/* parallax helpers */
.fx-par{will-change:translate}
/* tilt glare */
.fxg{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 50%);z-index:3}
.fx-tilt:hover .fxg{opacity:1}
/* buttons */
.btn{overflow:hidden;position:relative}
.fxr{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:fxRip .7s ease-out forwards;pointer-events:none}
@keyframes fxRip{to{transform:scale(4);opacity:0}}
/* drifting outline text divider */
.fx-drift{overflow:hidden;padding:10px 0;background:var(--bg);pointer-events:none;border-block:1px solid rgba(10,92,255,.12)}
.fx-drift span{display:block;white-space:nowrap;width:max-content;font:400 clamp(26px,4vw,52px)/1.1 'Bebas Neue',sans-serif;letter-spacing:3px;color:transparent;-webkit-text-stroke:1px rgba(10,92,255,.45);will-change:transform}
/* scroll cue */
.fx-cue{position:absolute;left:50%;bottom:26px;translate:-50% 0;width:26px;height:44px;border:2px solid rgba(255,255,255,.55);border-radius:20px;z-index:3;transition:opacity .4s}
.fx-cue::after{content:'';position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:#fff;animation:fxCue 1.6s infinite}
@keyframes fxCue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
/* back to top */
#fxTop{position:fixed;left:22px;bottom:24px;width:52px;height:52px;border:0;border-radius:50%;background:#0a5cff;color:#fff;font-size:20px;cursor:pointer;z-index:9990;display:grid;place-items:center;opacity:0;visibility:hidden;translate:0 20px;transition:.4s;box-shadow:0 10px 26px rgba(10,92,255,.4)}
#fxTop.show{opacity:1;visibility:visible;translate:0 0}
#fxTop svg{position:absolute;inset:0;transform:rotate(-90deg)}
#fxTop circle{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:var(--o,151);stroke-linecap:round}
/* page-hero (sub pages) badge + button entrance */
body.fx-ready .page-hero .page-badge,body.fx-ready .page-hero p,body.fx-ready .page-hero .btn,body.fx-ready .hero .badge,body.fx-ready .hero p,body.fx-ready .hero-btns{animation:fxUp .9s cubic-bezier(.22,1,.36,1) both}
body.fx-ready .page-hero p,body.fx-ready .hero p{animation-delay:.45s}
body.fx-ready .page-hero .btn,body.fx-ready .hero-btns{animation-delay:.6s}
@keyframes fxUp{from{opacity:0;translate:0 30px}}
/* animated underline under section titles */
.title.fx-split::after{content:'';display:block;height:4px;width:90px;margin:16px auto 0;border-radius:4px;background:linear-gradient(90deg,#0a5cff,#ff3c3c);scale:0 1;transition:scale .9s .5s cubic-bezier(.22,1,.36,1)}
.title.fx-split.fx-in::after{scale:1 1}
@media(prefers-reduced-motion:reduce){#fxLoader{display:none}.fxw i{transform:none!important;transition:none}.fx3{rotate:none;scale:none}.fx-cue,.fx-drift{display:none}}

/* ===== v2.1 extra animations ===== */
/* header hides on scroll down, returns on scroll up */
.header{transition:translate .45s cubic-bezier(.22,1,.36,1),background .3s,box-shadow .3s}
.header.fx-hide{translate:0 -110%}
/* text fade-up + slide-in */
.fx-fade{opacity:0;translate:0 26px;transition:opacity .9s cubic-bezier(.22,1,.36,1),translate .9s cubic-bezier(.22,1,.36,1);transition-delay:var(--fd,0ms)}
.fx-fade.fx-in{opacity:1;translate:0 0}
.fx-slide{opacity:0;translate:-46px 0;transition:opacity .8s cubic-bezier(.22,1,.36,1),translate .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--fd,0ms)}
.fx-slide.fx-in{opacity:1;translate:0 0}
/* image curtain wipe */
.fx-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.77,0,.18,1)}
.fx-clip.fx-in{clip-path:inset(0 0 0 0)}
/* icons come alive on hover */
.feature-card:hover .feature-icon,.why-card:hover .why-icon,.contact-item:hover .contact-icon,.card:hover h3 span{animation:fxBounce .7s ease}
@keyframes fxBounce{30%{transform:translateY(-12px) rotate(-8deg) scale(1.15)}60%{transform:translateY(0) rotate(6deg)}100%{transform:none}}
.contact-icon,.why-icon,.feature-icon{transition:transform .3s}
/* soft floating for badges, stats and cards icons */
.badge{animation:fxFloat 4s ease-in-out infinite}
.stat-box h3{text-shadow:0 0 0 rgba(10,92,255,0);animation:fxGlow 3.2s ease-in-out infinite}
@keyframes fxFloat{50%{translate:0 -6px}}
@keyframes fxGlow{50%{text-shadow:0 0 28px rgba(10,92,255,.55)}}
/* animated arrow on links */
.view-link,.view-btn{display:inline-block;transition:translate .3s}
.product-card:hover .view-link,.view-btn:hover{translate:8px 0}
/* menu link underline draw */
.menu>li>a{position:relative}
.menu>li>a::after{content:'';position:absolute;left:14%;right:14%;bottom:2px;height:2px;background:currentColor;scale:0 1;transform-origin:left;transition:scale .35s cubic-bezier(.22,1,.36,1);border-radius:2px}
.menu>li>a:hover::after{scale:1 1}
/* marquee dots spin */
.marquee-dot{display:inline-block;animation:fxSpin 5s linear infinite}
@keyframes fxSpin{to{rotate:360deg}}
/* footer rise */
.footer{overflow:hidden}
.footer.fx-fade{translate:0 40px}
/* confetti burst */
.fxc{position:fixed;width:9px;height:14px;z-index:100003;pointer-events:none;border-radius:2px;animation:fxConf 1.4s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes fxConf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@media(prefers-reduced-motion:reduce){.badge,.stat-box h3,.marquee-dot{animation:none}.fx-fade,.fx-slide{opacity:1;translate:none}.fx-clip{clip-path:none}}