/* AL SUFIAN — motion layer (loaded after site.css). All of it is switched off by prefers-reduced-motion in site.css. */

/* Scroll progress */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--brand),var(--brand-bright),var(--amber))}

/* Header: shrink + sliding underline */
.hdr-in{transition:height .3s ease}
.hdr.scrolled .hdr-in{height:62px}
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav a:not(.btn):hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav a:not(.btn):hover,.nav a[aria-current=page]{background:transparent}

/* Buttons: gradient, shine sweep, magnetic (JS) */
.btn{position:relative;overflow:hidden;isolation:isolate;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.btn:hover::before{transform:translateX(120%)}
.btn:not(.btn-light):not(.btn-ghost-light):not(.btn-outline){background:linear-gradient(135deg,#2563eb,#0ea5e9);box-shadow:0 8px 24px -10px rgba(37,99,235,.8)}
.btn:not(.btn-light):not(.btn-ghost-light):not(.btn-outline):hover{background:linear-gradient(135deg,#1d4ed8,#0284c7)}

/* Hero */
.hero-bg img{animation:kenburns 22s ease-in-out infinite alternate;transform-origin:70% 50%}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
.hero-bg{will-change:transform}
.hero-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-fx .grid{position:absolute;left:-10%;right:-10%;bottom:0;height:70%;background-image:linear-gradient(rgba(56,189,248,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.12) 1px,transparent 1px);background-size:56px 56px;transform:perspective(600px) rotateX(58deg);transform-origin:50% 100%;animation:gridmove 5s linear infinite;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 75%);mask-image:linear-gradient(to top,#000 10%,transparent 75%)}
@keyframes gridmove{to{background-position:0 56px,0 0}}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;mix-blend-mode:screen;animation:float 14s ease-in-out infinite alternate}
.orb.o1{width:420px;height:420px;left:-120px;top:-80px;background:#2563eb}
.orb.o2{width:340px;height:340px;right:8%;bottom:-120px;background:#0ea5e9;animation-duration:18s;animation-delay:-5s}
.orb.o3{width:220px;height:220px;left:40%;top:30%;background:#f59e0b;opacity:.2;animation-duration:20s}
@keyframes float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.15)}100%{transform:translate(-30px,80px) scale(.95)}}
.spark{position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;background:#7dd3fc;box-shadow:0 0 10px 2px rgba(125,211,252,.8);opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:.8}100%{transform:translateY(-80vh);opacity:0}}
.hero h1 em:not(:has(.g)),.hero h1 .g{background:linear-gradient(90deg,#67e8f9,#38bdf8,#f59e0b,#67e8f9);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:300% 0}}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block;transform:translateY(110%);animation:wordup .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + .15s)}
@keyframes wordup{to{transform:none}}
.hero .eyebrow,.hero-lead,.hero-actions{opacity:0;animation:fadeup .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero .eyebrow{animation-delay:.05s}.hero-lead{animation-delay:.55s}.hero-actions{animation-delay:.75s}
.hero-stats{opacity:0;animation:fadeup 1s cubic-bezier(.2,.8,.2,1) .95s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero-stats div{transition:background .3s}
.hero-stats div:hover{background:rgba(37,99,235,.3)}
.scroll-cue{position:absolute;left:50%;bottom:18px;width:26px;height:42px;border:2px solid rgba(255,255,255,.4);border-radius:14px;transform:translateX(-50%)}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media (max-width:720px){.scroll-cue{display:none}}

/* Marquee */
.marquee{background:var(--ink);color:#fff;padding:20px 0;overflow:hidden;border-top:1px solid var(--line-dark)}
.marquee-row{display:flex;width:max-content;animation:marq 40s linear infinite}
.marquee-row.rev{animation-direction:reverse;animation-duration:48s;margin-top:8px}
.marquee:hover .marquee-row{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:22px;padding-right:22px;font-weight:800;font-size:clamp(1.1rem,2.2vw,1.6rem);letter-spacing:-.01em;white-space:nowrap}
.marquee span::after{content:"";width:10px;height:10px;border-radius:2px;background:var(--amber);transform:rotate(45deg)}
.marquee-row.rev span{-webkit-text-stroke:1px rgba(255,255,255,.55);color:transparent}
@keyframes marq{to{transform:translateX(-50%)}}

/* Eyebrow line grows in */
.eyebrow::before{transition:width .8s cubic-bezier(.2,.8,.2,1) .2s}
.js .rv .eyebrow::before{width:0}
.js .rv.in .eyebrow::before{width:22px}

/* Reveal variants + stagger (--d set by JS) */
.js .rv{transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),clip-path 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .rv[data-rv=left]{transform:translateX(-48px)}
.js .rv[data-rv=right]{transform:translateX(48px)}
.js .rv[data-rv=zoom]{transform:scale(.88)}
.js .rv[data-rv=wipe]{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.js .rv.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.js .card.rv.in{transition:opacity .8s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;transition-delay:0s}

/* Cards: 3D tilt (JS) + cursor spotlight + spinning gradient border */
.card{transform-style:preserve-3d;will-change:transform}
.card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(56,189,248,.18),transparent 45%)}
.card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .3s;background:conic-gradient(from var(--ang,0deg),#2563eb,#38bdf8,#f59e0b,#2563eb);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 4s linear infinite}
.card:hover::before,.card:hover::after{opacity:1}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
.card-media.is-icon{background:radial-gradient(60% 60% at 50% 45%,rgba(56,189,248,.28),transparent 70%),linear-gradient(160deg,#0d1426,#060a14)}
.card-media.is-icon .ic,.phero-icon .ic{animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-4deg)}}

/* Tiles & chips */
.tile{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.tile::after{content:"";position:absolute;width:180px;height:180px;right:-60px;top:-60px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.25),transparent 70%);transform:scale(0);transition:transform .5s ease}
.tile:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.5);box-shadow:0 20px 40px -20px rgba(37,99,235,.6)}
.tile:hover::after{transform:scale(1.4)}
.tile .ic{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover .ic{transform:rotate(-10deg) scale(1.15)}
.chip{transition:transform .3s,border-color .3s,background .3s}
.chip:hover{transform:translateY(-4px);border-color:rgba(245,158,11,.6);background:#131d36}
.chip .ic{transition:transform .6s}
.chip:hover .ic{transform:rotate(360deg)}

/* Steps: connector line draws in */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:28px;right:28px;top:48px;height:2px;background:linear-gradient(90deg,var(--brand),var(--brand-bright),var(--amber));transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.8,.2,1) .3s;z-index:0}
.steps.in::before{transform:scaleX(1)}
.steps li{position:relative;z-index:1;transition:transform .3s,box-shadow .3s}
.steps li:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.steps li::before{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;letter-spacing:0;box-shadow:0 0 0 6px #fff}
@media (max-width:860px){.steps::before{display:none}}

/* Gallery */
.gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,20,.6),transparent 55%);opacity:0;transition:opacity .4s}
.gallery figure:hover::after{opacity:1}
.gallery figure:hover img{transform:scale(1.1) rotate(1deg)}
.gallery figcaption{z-index:1;transition:transform .4s}
.gallery figure:hover figcaption{transform:translateY(-4px)}

/* About media float */
.split-media .frame{animation:hover3d 7s ease-in-out infinite}
@keyframes hover3d{50%{transform:translateY(-10px)}}
.badge-float{animation:hover3d 5s ease-in-out infinite reverse}

/* Inner-page hero backdrop */
.phero{position:relative;isolation:isolate;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(37,99,235,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(70% 90% at 80% 0%,#000,transparent 70%);mask-image:radial-gradient(70% 90% at 80% 0%,#000,transparent 70%);animation:gridmove2 8s linear infinite}
@keyframes gridmove2{to{background-position:0 48px,48px 0}}
.phero::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-160px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.25),transparent 65%);animation:float 16s ease-in-out infinite alternate}
.phero h1{animation:fadeup .9s cubic-bezier(.2,.8,.2,1) both}
.phero .lead{animation:fadeup .9s cubic-bezier(.2,.8,.2,1) .15s both}
.phero-media,.phero-icon{animation:zoomin 1.1s cubic-bezier(.2,.8,.2,1) .1s both}
@keyframes zoomin{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:none}}

/* CTA band: drifting glows */
.cta-band{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.cta-band::before,.cta-band::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px)}
.cta-band::before{width:480px;height:480px;right:-100px;top:-200px;background:rgba(37,99,235,.55);animation:float 12s ease-in-out infinite alternate}
.cta-band::after{width:360px;height:360px;left:10%;bottom:-240px;background:rgba(245,158,11,.25);animation:float 15s ease-in-out infinite alternate-reverse}

/* FAQ */
.faq details:hover{border-color:rgba(37,99,235,.35)}
.faq details[open] p{animation:fadeup .45s ease both}

/* WhatsApp pulse */
.wa-float{isolation:isolate}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.6}to{transform:scale(1.8);opacity:0}}

/* Contact */
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(37,99,235,.16),0 8px 20px -12px rgba(37,99,235,.6)}
.cinfo a,.cinfo div{transition:transform .3s,border-color .3s,box-shadow .3s}
.cinfo a:hover{transform:translateX(6px);box-shadow:var(--shadow)}

/* Back-to-top button */
.to-top-btn{position:fixed;right:24px;bottom:90px;z-index:40;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .3s,transform .3s}
.to-top-btn.show{opacity:1;transform:none;pointer-events:auto}
.to-top-btn .ic{transform:rotate(-90deg)}

/* Counters don't jitter while counting */
[data-count]{font-variant-numeric:tabular-nums}

/* Reduced motion: make sure nothing stays hidden */
@media (prefers-reduced-motion:reduce){.hero .eyebrow,.hero-lead,.hero-actions,.hero-stats{opacity:1}.w>span{transform:none}.hero-fx,.scroll-cue{display:none}.js .rv[data-rv=wipe]{clip-path:none}}