/* SBGeeks — motion & polish layer.
   Additive only; loaded right after sbg.css so it augments, never rewrites.
   Every moving part sits inside prefers-reduced-motion:no-preference and leaves
   a safe, visible resting state. The header keeps its fixed height (the page
   offset is tied to --hdr), so nothing here shifts layout. */

/* Scroll-progress bar — injected into <body> by sbg-anim.js. */
.sb-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:1100;
  background:linear-gradient(90deg,var(--brand),var(--sky),var(--accent));
  box-shadow:0 0 8px rgba(29,20,184,.45);
  pointer-events:none; transition:width .08s linear;
}

/* Hero aura — a soft, drifting glow behind the hero content.
   Injected as the hero's first child; the hero is overflow:hidden so it
   never spills. z-index 0 keeps it under .sb-hero>.sb-wrap (z-index 1). */
.sb-hero-aura{
  position:absolute; inset:-25% -12% auto -12%; height:150%; z-index:0;
  pointer-events:none; opacity:.9; filter:blur(28px);
  background:
    radial-gradient(38% 44% at 18% 26%,rgba(29,20,184,.55),transparent 70%),
    radial-gradient(34% 40% at 82% 20%,rgba(11,138,214,.45),transparent 70%),
    radial-gradient(30% 38% at 60% 82%,rgba(255,133,90,.30),transparent 72%);
}

@media (prefers-reduced-motion:no-preference){
  .sb-hero-aura{animation:sbgAura 20s ease-in-out infinite alternate}
  @keyframes sbgAura{
    0%  {transform:translate3d(0,0,0)      scale(1)}
    50% {transform:translate3d(2.5%,-2%,0) scale(1.07)}
    100%{transform:translate3d(-2%,1.5%,0) scale(1.03)}
  }

  /* Primary/accent CTA polish: a gentle lift, a soft glow and a light sheen
     that sweeps across on hover. sb-btn has no other pseudo-element. */
  .sb-btn--primary,.sb-btn--accent{position:relative;overflow:hidden}
  .sb-btn--primary::after,.sb-btn--accent::after{
    content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
    transform:skewX(-18deg); pointer-events:none; transition:left .6s ease;
  }
  .sb-btn--primary:hover,.sb-btn--accent:hover{transform:translateY(-1px)}
  .sb-btn--primary:hover{box-shadow:0 10px 24px rgba(29,20,184,.22)}
  .sb-btn--accent:hover {box-shadow:0 10px 24px rgba(242,106,58,.28)}
  .sb-btn--primary:hover::after,.sb-btn--accent:hover::after{left:135%}
}

/* Homepage "Our work" portfolio strip (auto-scrolling, pause on hover). */
.sb-folio-strip{overflow:hidden;margin:2rem 0 1.5rem;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sb-folio-track{display:flex;gap:1rem;width:max-content;padding:0 1rem}
.sb-folio-item{flex:0 0 auto;width:260px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg);text-decoration:none;color:var(--ink);box-shadow:0 10px 30px -20px rgba(11,16,38,.25);transition:transform .2s ease,box-shadow .2s ease}
.sb-folio-item:hover{transform:translateY(-4px);box-shadow:0 20px 42px -22px rgba(11,16,38,.3)}
.sb-folio-item img{width:100%;height:162px;object-fit:cover;object-position:top;display:block}
.sb-folio-item span{display:block;padding:.6rem .85rem;font-weight:700;font-size:.85rem}
@media (prefers-reduced-motion:no-preference){
  .sb-folio-track{animation:sbFolioMarq 46s linear infinite}
  .sb-folio-strip:hover .sb-folio-track{animation-play-state:paused}
  @keyframes sbFolioMarq{to{transform:translateX(-50%)}}
}

/* CLS fix: metric-matched fallback fonts so text does not reflow when the web
   fonts finish loading (the hero text was the main source of layout shift). */
@font-face{font-family:"Inter-fb";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22.4%;line-gap-override:0%}
@font-face{font-family:"Jakarta-fb";src:local("Arial");size-adjust:113%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
:root{
  --font:'Inter','Inter-fb',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Plus Jakarta Sans','Jakarta-fb',system-ui,-apple-system,'Segoe UI',sans-serif;
}