/* Afzal Auto Centre — motion layer (decoration only; page works without it) */
.fx [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fx [data-reveal].in{opacity:1;transform:none}
.fx .caps[data-reveal].in>*,.fx .serve[data-reveal].in>*,.fx .cgrid[data-reveal].in>*,.fx .hl-grid[data-reveal].in>*{animation:childUp .8s var(--ease) both}
.fx .caps[data-reveal].in>*:nth-child(2),.fx .serve[data-reveal].in>*:nth-child(2),.fx .cgrid[data-reveal].in>*:nth-child(2),.fx .hl-grid[data-reveal].in>*:nth-child(2){animation-delay:.1s}
.fx .caps[data-reveal].in>*:nth-child(3),.fx .serve[data-reveal].in>*:nth-child(3),.fx .cgrid[data-reveal].in>*:nth-child(3),.fx .hl-grid[data-reveal].in>*:nth-child(3){animation-delay:.2s}
.fx .caps[data-reveal].in>*:nth-child(4),.fx .serve[data-reveal].in>*:nth-child(4),.fx .hl-grid[data-reveal].in>*:nth-child(4){animation-delay:.3s}
.fx .serve[data-reveal].in>*:nth-child(5){animation-delay:.4s}
@keyframes childUp{from{opacity:0;transform:translateY(22px)}}
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.08;padding-bottom:.04em;margin-bottom:-.04em}
html[lang="ur"] .split .w{overflow:visible;line-height:inherit;padding:0;margin:0}
html[lang="ur"] .fx .split .w>span{transform:translateY(.4em);opacity:0;animation:wordUpUr .7s var(--ease) forwards;animation-delay:calc(.15s + var(--w) * 60ms)}
@keyframes wordUpUr{to{transform:none;opacity:1}}
.fx .split .w>span{display:inline-block;transform:translateY(110%);animation:wordUp .75s var(--ease) forwards;animation-delay:calc(.15s + var(--w) * 70ms)}
@keyframes wordUp{to{transform:none}}
.btn.mag{transition:transform .25s var(--ease),background-color .18s,border-color .18s,box-shadow .18s}
[data-depth]{transition:transform .35s var(--ease)}
.hero .hv-stage[data-depth]{animation:floaty 7s ease-in-out infinite}
.cur-glow{position:fixed;left:-170px;top:-170px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(216,28,42,.26),rgba(216,28,42,.06) 45%,transparent 65%);pointer-events:none;z-index:1;opacity:0;transition:opacity .35s;mix-blend-mode:screen}
.hero h1 .bar{transform-origin:left;animation:barIn .8s var(--ease) both}
html[dir="rtl"] .hero h1 .bar{transform-origin:right}
@keyframes barIn{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){
  .fx [data-reveal]{opacity:1;transform:none}
  .fx .split .w>span{transform:none;animation:none}
  .cur-glow{display:none}
}

/* product rows: big index number + 3D tilt with spotlight */
.prow-n{display:block;font:800 clamp(44px,4.6vw,60px)/.85 var(--f-latin-head);color:transparent;-webkit-text-stroke:1.4px rgba(43,47,53,.18);letter-spacing:-.02em;margin-bottom:10px;user-select:none}
html[dir="rtl"] .prow-n{direction:ltr;text-align:start}
.prow .pvis[data-tilt]{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .3s,background-color .35s,border-color .35s}
.prow .pvis[data-tilt]:hover{box-shadow:var(--sh-lg)}
.prow .pvis[data-tilt] .spot{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(216,28,42,.10),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:1}
.prow .pvis[data-tilt]:hover .spot{opacity:1}
/* highlight strip: lift with a red-tinted shadow */
.hl-grid{box-shadow:0 44px 90px -40px rgba(216,28,42,.38),0 30px 60px -34px rgba(16,24,40,.35),0 1px 2px rgba(16,24,40,.05)}
/* vision & mission: glow ring, pulsing target, mission items one by one, drifting light */
.vm .orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;opacity:.55}
.vm .orb.a{width:420px;height:420px;background:rgba(216,28,42,.45);top:-120px;inset-inline-start:28%;animation:orbA 14s ease-in-out infinite}
.vm .orb.b{width:300px;height:300px;background:rgba(255,255,255,.08);bottom:-100px;inset-inline-end:10%;animation:orbB 18s ease-in-out infinite}
@keyframes orbA{50%{transform:translate(60px,40px)}}
@keyframes orbB{50%{transform:translate(-50px,-30px)}}
.vcard{isolation:isolate}
.vcard::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang,0deg),rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 12%,rgba(255,255,255,0) 28%);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask-composite:exclude;animation:ring360 7s linear infinite;pointer-events:none;z-index:1}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes ring360{to{--ang:360deg}}
.vcard h3 .ico{position:relative}
.vcard .ping{position:absolute;width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:ping 2.4s ease-out infinite;pointer-events:none}
.vcard .ping+.ping{animation-delay:1.2s}
@keyframes ping{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}
.vcard p{background:linear-gradient(90deg,#fff 0%,#fff 45%,#FFD5D8 50%,#fff 55%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:textSweep 6s ease-in-out infinite}
@keyframes textSweep{0%,35%{background-position:120% 0}65%,100%{background-position:-20% 0}}
.fx .vm-grid[data-reveal] .mlist li{opacity:0;transform:translateX(18px)}
html[dir="rtl"] .fx .vm-grid[data-reveal] .mlist li{transform:translateX(-18px)}
.fx .vm-grid[data-reveal].in .mlist li{animation:liIn .7s var(--ease) forwards}
.fx .vm-grid[data-reveal].in .mlist li:nth-child(1){animation-delay:.25s}
.fx .vm-grid[data-reveal].in .mlist li:nth-child(2){animation-delay:.4s}
.fx .vm-grid[data-reveal].in .mlist li:nth-child(3){animation-delay:.55s}
.fx .vm-grid[data-reveal].in .mlist li:nth-child(4){animation-delay:.7s}
@keyframes liIn{to{opacity:1;transform:none}}
.mlist li{transition:transform .3s var(--ease),background-color .3s,border-color .3s}
.mlist li:hover{transform:translateX(6px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
html[dir="rtl"] .mlist li:hover{transform:translateX(-6px)}
.mlist .mi{transition:transform .3s var(--ease),background-color .3s}
.mlist li:hover .mi{transform:scale(1.1) rotate(-6deg);background:var(--red);color:#fff}
@media (prefers-reduced-motion:reduce){
  .vm .orb,.vcard::before,.vcard .ping,.vcard p{animation:none}
  .vcard p{color:#fff;background:none}
  .fx .vm-grid[data-reveal] .mlist li{opacity:1;transform:none}
}