/* Static-site additions for mubasharkhan.com (replaces the React runtime behaviour) */
html{scroll-behavior:smooth}
/* page enter / leave */
.has-js #root{opacity:0;transition:opacity .45s ease}
.has-js.page-ready #root{opacity:1}
.has-js.page-leave #root{opacity:0;transition:opacity .25s ease}
/* reveal */
[data-rv]{transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
header{transition:background-color .3s,border-color .3s}
header.is-scrolled{background:rgba(7,8,11,.82)!important;border-color:hsl(var(--border))!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* hero typewriter */
.tw-caret{display:inline-block;width:.07em;height:.92em;background:#FFB23F;margin-left:.1em;vertical-align:-.1em;border-radius:1px;animation:caretBlink 1s step-end infinite}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}}
.glow-dot{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
/* hero rotating word (legacy) */
.hero-word{display:block;will-change:transform,opacity}
.hero-word.out{animation:wordOut .6s cubic-bezier(.22,1,.36,1) forwards}
.hero-word.in{animation:wordIn .6s cubic-bezier(.22,1,.36,1) forwards}
@keyframes wordOut{to{opacity:0;transform:translateY(-105%)}}
@keyframes wordIn{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
/* hero cards float (inner card) + parallax (outer wrapper, set by JS) */
.hero-float{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
section:first-of-type div.absolute[class*="w-["]{will-change:transform}
/* scroll indicator */
.scroll-ind{animation:scrollInd 1.6s ease-in-out infinite}
@keyframes scrollInd{from{transform:translateY(-16px)}to{transform:translateY(40px)}}
/* growth model glow */
.glow-ring{animation:ring 2.8s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 rgba(255,178,63,0)}40%{box-shadow:0 0 56px rgba(255,178,63,.5)}100%{box-shadow:0 0 30px rgba(255,178,63,.25)}}
/* process steps */
ol li > span.rounded-full.border-2{transition:border-color .5s,color .5s,box-shadow .5s}
.step-active{border-color:#5C7CFF!important;color:#F5F2EC!important;box-shadow:0 0 0 6px rgba(46,84,255,.16)}
/* tilt */
.tilt{transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,background-color .3s}
/* services dropdown */
#services-menu{position:absolute;left:-16px;top:calc(100% + 14px);width:360px;background:rgba(14,17,23,.96);border:1px solid hsl(var(--border));border-radius:18px;padding:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.85);backdrop-filter:blur(16px);z-index:70;opacity:0;transform:translateY(8px) scale(.985);pointer-events:none;transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1)}
#services-menu.open{opacity:1;transform:none;pointer-events:auto}
#services-menu a{display:block;padding:11px 12px;border-radius:12px;font-size:14.5px;color:rgba(245,242,236,.88);text-decoration:none;transition:background .15s}
#services-menu a:hover{background:rgba(255,255,255,.06);color:#fff}
#services-menu a small{display:block;font-size:12px;color:rgba(245,242,236,.55);margin-top:2px}
button[aria-controls="services-menu"] svg{transition:transform .3s}
/* mobile menu */
#mobile-menu{position:fixed;inset:0;z-index:55;background:rgba(7,8,11,.97);backdrop-filter:blur(12px);display:none;padding:96px 24px 32px;overflow:auto;opacity:0;transition:opacity .25s ease}
#mobile-menu.open{display:block}
#mobile-menu.in{opacity:1}
#mobile-menu a.mm{display:block;padding:16px 0;border-bottom:1px solid hsl(var(--border));font-family:"Sora Variable",Sora,sans-serif;font-size:22px;font-weight:600;color:#F5F2EC;text-decoration:none}
#mobile-menu .mm-sub{display:grid;gap:4px;padding:8px 0 12px}
#mobile-menu .mm-sub a{font-size:15px;color:rgba(245,242,236,.75);text-decoration:none;padding:8px 0}
body.menu-open{overflow:hidden}
/* floating WhatsApp button */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:8px;height:56px;padding:0 18px 0 16px;border-radius:999px;background:#25D366;color:#062d17;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 16px 40px -12px rgba(37,211,102,.6);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.wa-fab.show{opacity:1;transform:none;pointer-events:auto}
.wa-fab:hover{transform:translateY(-2px)}
@media (max-width:640px){.wa-fab span{display:none}.wa-fab{padding:0 16px}}
/* work / project image cards */
.work-shot{display:block;margin:-28px -28px 0;border-radius:18px 18px 0 0;overflow:hidden;border-bottom:1px solid hsl(var(--border));background:#0C0E13;aspect-ratio:16/10}
.work-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.panel:hover .work-shot img,a.panel:hover .work-shot img{transform:scale(1.04)}
.work-card{position:relative}
.work-card .live{position:absolute;top:14px;left:14px;z-index:2;font-family:"Geist Mono Variable",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:rgba(7,8,11,.82);border:1px solid hsl(var(--border));color:#FFBD59;padding:6px 10px;border-radius:999px;backdrop-filter:blur(8px)}
.work-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.work-chips li{border-radius:999px;background:rgba(245,242,236,.06);padding:4px 10px;font-size:12px;color:hsl(var(--muted-foreground))}
.filter-card{transition:opacity .28s ease,transform .28s ease}
.filter-card.is-out{opacity:0;transform:scale(.97)}
/* capability grid */
.cap-grid{display:grid;gap:14px;margin-top:3.5rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.cap-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.cap-grid{grid-template-columns:repeat(4,1fr)}}
.cap{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;border:1px solid hsl(var(--border));background:hsl(var(--card));transition:border-color .25s,transform .25s}
.cap:hover{border-color:rgba(92,124,255,.6);transform:translateY(-3px)}
.cap .ci{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:rgba(46,84,255,.14);color:#8EA6FF}
.cap .ci svg{width:18px;height:18px}
.cap b{display:block;font-weight:600;font-size:15px;color:#F5F2EC}
.cap span{display:block;font-size:13px;color:hsl(var(--muted-foreground));margin-top:3px}
.cap .tag{display:inline-block;margin-top:8px;font-family:"Geist Mono Variable",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#FFBD59}
/* social links */
.social-row{display:flex;gap:10px;margin-top:22px}
.social-row a{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid hsl(var(--border));color:rgba(245,242,236,.8);transition:all .15s}
.social-row a:hover{border-color:#FFBD59;color:#fff;transform:translateY(-2px)}
.social-row svg{width:18px;height:18px}
.form-note{margin-top:14px;font-size:14px;color:rgba(245,242,236,.7)}
.form-note.ok{color:#34D399}
@media (prefers-reduced-motion:reduce){.hero-word.out,.hero-word.in,.hero-float,.glow-ring,.scroll-ind{animation:none}#root{opacity:1;transition:none}}