/* IMTIAZ MART 7 - 3D & motion layer (no libraries). Only active when html has .fx (JS adds it, never under reduced-motion). */

/* ---- scroll progress ---- */
.fx-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:70;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--brand,#1d4ed8),var(--gold,#f5b301));pointer-events:none}

/* ---- hero: floating 3D shapes + pointer depth ---- */
.fx-scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;perspective:900px}
.fx-obj{position:absolute;left:var(--x);top:var(--y);width:0;height:0;transform:translate3d(calc(var(--mx,0)*var(--d,20)*1px),calc(var(--my,0)*var(--d,20)*1px),0);transition:transform .25s ease-out}
.fx-cube{position:absolute;left:calc(var(--s)/-2);top:calc(var(--s)/-2);width:var(--s);height:var(--s);transform-style:preserve-3d;animation:fxspin var(--t,22s) linear infinite}
.fx-cube i{position:absolute;inset:0;border:1.5px solid rgba(255,255,255,.75);background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.08));box-shadow:inset 0 0 18px rgba(255,255,255,.35)}
.fx-cube i:nth-child(1){transform:translateZ(calc(var(--s)/2))}
.fx-cube i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.fx-cube i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.fx-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.fx-cube i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.fx-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.fx-ring{position:absolute;left:calc(var(--s)/-2);top:calc(var(--s)/-2);width:var(--s);height:var(--s);border-radius:50%;border:calc(var(--s)/9) solid var(--brand,#1d4ed8);opacity:.8;box-shadow:inset 0 0 10px rgba(255,255,255,.55),0 6px 14px rgba(0,0,0,.18);transform-style:preserve-3d;animation:fxring var(--t,16s) ease-in-out infinite}
.fx-orb{position:absolute;left:calc(var(--s)/-2);top:calc(var(--s)/-2);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0,var(--gold,#f5b301) 38%,#b7790a 100%);box-shadow:0 14px 26px rgba(0,0,0,.25);animation:fxbob var(--t,7s) ease-in-out infinite}
@keyframes fxspin{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
@keyframes fxring{0%,100%{transform:rotateX(68deg) rotateZ(0)}50%{transform:rotateX(68deg) rotateZ(180deg) translateY(-8px)}}
@keyframes fxbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (max-width:760px){.fx-obj.hide-m{display:none}.fx-obj{opacity:.8}}

/* product image on the slide leans toward the pointer */
.fx .hx-img{transform:perspective(1000px) rotateY(calc(var(--mx,0)*9deg)) rotateX(calc(var(--my,0)*-6deg));transition:transform .3s ease-out;will-change:transform}

/* ---- product cards: 3D tilt + glare ---- */
@media (hover:hover) and (pointer:fine){
.fx .card.pc:hover,.fx .pcx:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px);transition:transform .12s linear,box-shadow .3s}
.fx .card.pc,.fx .pcx{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.fx .pcx:hover .pcx-b{box-shadow:calc(var(--ry,0deg)*-1.6) 22px 40px rgba(26,29,35,.2)}
.fx-glare{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 60%);mix-blend-mode:soft-light}
.fx .card.pc:hover .fx-glare{opacity:1}
}

/* ---- magnetic buttons ---- */
.fx .hx-cta,.fx .hx-wa{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;will-change:transform}

/* ---- fly to cart ---- */
.fx-fly{position:fixed;z-index:9999;pointer-events:none;border-radius:14px;object-fit:contain;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.28)}
@keyframes fxbump{0%{transform:scale(1)}35%{transform:scale(1.35) rotate(-8deg)}70%{transform:scale(.92) rotate(4deg)}100%{transform:scale(1)}}
.fx-bump{animation:fxbump .55s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:reduce){.fx-scene,.fx-progress{display:none}.fx .hx-img{transform:none}}