/* Whole Stack Solutions: shared motion and tech accents.
   Loaded by every page. Classes are added by assets/site.js, so the pages stay readable without it. */

:root{
  --ws-navy:#0F1B2D;
  --ws-teal:#1AA6A0;
  --ws-teal-dark:#0B7A75;
  --ws-amber:#F2A33A;
  --ws-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Scroll progress bar */
.ws-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--ws-teal),var(--ws-amber));pointer-events:none}

/* Sticky header */
.ws-header{position:sticky;top:0;z-index:60;transition:box-shadow .3s ease, background-color .3s ease}
.ws-header.ws-scrolled{background:rgba(15,27,45,0.86) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.25)}

/* Header nav underline */
.ws-header a.nav{position:relative}
.ws-header a.nav::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:2px;border-radius:2px;
  background:var(--ws-amber);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s ease}
.ws-header a.nav:hover::after,.ws-header a.nav[aria-current="page"]::after{transform:scaleX(1)}

/* Hero: animated grid and glow */
.ws-hero{position:relative;isolation:isolate;overflow:hidden}
.ws-hero > *{position:relative;z-index:1}
.ws-hero::before{content:"";position:absolute;inset:-64px;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(26,166,160,0.13) 1px,transparent 1px),linear-gradient(90deg,rgba(26,166,160,0.13) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 0%,transparent 75%);
  animation:ws-grid 18s linear infinite}
.ws-hero::after{content:"";position:absolute;z-index:0;pointer-events:none;width:560px;height:560px;right:-120px;top:-160px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(26,166,160,0.32),rgba(26,166,160,0));filter:blur(10px);
  animation:ws-glow 12s ease-in-out infinite alternate}
@keyframes ws-grid{to{transform:translate(64px,64px)}}
@keyframes ws-glow{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-140px,120px) scale(1.15);opacity:.8}
  100%{transform:translate(-320px,40px) scale(.95);background:radial-gradient(closest-side,rgba(242,163,58,0.22),rgba(242,163,58,0))}}

/* Section labels: monospace with a // prefix */
.ws-eyebrow{font-family:var(--ws-mono) !important;font-weight:500 !important;letter-spacing:0.08em !important}
.ws-eyebrow::before{content:"// ";color:var(--ws-amber)}

/* Scroll reveal (only hidden once JS has confirmed it is running) */
.ws-js .ws-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--ws-delay,0s)}
.ws-js .ws-reveal.ws-in{opacity:1;transform:none}

/* Card spotlight that follows the pointer */
.card{position:relative;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(26,166,160,0.12),transparent 60%)}
.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--ws-teal),rgba(242,163,58,0.7) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.card:hover::before,.card:hover::after{opacity:1}

/* Buttons and arrow links */
a.btn{transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
a.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(242,163,58,0.28)}
.ws-arrow{display:inline-block;margin-left:.3em;transition:transform .2s ease}
a:hover .ws-arrow{transform:translateX(5px)}

/* Home: floating Design / Build / Support cards */
.ws-float{animation:ws-float 6s ease-in-out infinite}
.ws-float:nth-child(2){animation-delay:-2s}
.ws-float:nth-child(3){animation-delay:-4s}
@keyframes ws-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Home: status terminal line */
.ws-term{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 16px;border-radius:12px;
  background:rgba(8,15,26,0.72);border:1px solid #25374F;font-family:var(--ws-mono);font-size:13px;color:#B7C4D3}
.ws-term .ws-prompt{color:var(--ws-amber)}
.ws-term .ws-ok{display:inline-flex;align-items:center;gap:8px;color:#7FE3DE}
.ws-term .ws-dot{width:8px;height:8px;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 0 rgba(61,220,151,0.6);animation:ws-pulse 2s infinite}
.ws-term .ws-caret{display:inline-block;width:8px;height:15px;background:#B7C4D3;animation:ws-blink 1.1s steps(1) infinite}
@keyframes ws-pulse{70%{box-shadow:0 0 0 8px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
@keyframes ws-blink{50%{opacity:0}}

/* Home: industries ticker */
.ws-marquee{width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ws-marquee-track{display:flex;width:max-content;animation:ws-marquee 32s linear infinite}
.ws-marquee:hover .ws-marquee-track{animation-play-state:paused}
.ws-marquee-group{display:flex;flex-wrap:nowrap !important;align-items:center;justify-content:flex-start !important;gap:0 56px !important;padding-right:56px;max-width:none !important}
.ws-marquee-group > span{display:inline-flex;align-items:center;gap:56px}
.ws-marquee-group > span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ws-teal)}
@keyframes ws-marquee{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion: reduce){
  .ws-hero::before,.ws-hero::after,.ws-float,.ws-term .ws-dot,.ws-term .ws-caret,.ws-marquee-track{animation:none}
  .ws-js .ws-reveal{opacity:1;transform:none;transition:none}
  a.btn,a.btn:hover,a:hover .ws-arrow{transform:none}
  .ws-header{transition:none}
}

/* Long button labels ("Get a free quote and consultation") wrap instead of running off narrow screens */
a.btn{max-width:100%;text-align:center;line-height:1.25}
@media (max-width:520px){a.btn{white-space:normal;padding-top:10px !important;padding-bottom:10px !important}}