/* /websites/ — premium layer: motion, light and depth.
   Everything here is decoration on top of websites.css, which already works without it:
   touch screens skip the pointer effects, and reduced-motion turns the motion off. */
@property --ws-angle{syntax:'<angle>';inherits:false;initial-value:0deg}

/* scroll progress, a hairline of the brand gradient across the top */
.ws-progress{
  position:fixed;z-index:1000;top:0;left:0;right:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#818cf8,#22d3ee,#c4b5fd);
  transform-origin:0 50%;transform:scaleX(var(--ws-p,0));
  box-shadow:0 0 12px rgba(34,211,238,.7);
}

/* hero light: three drifting aurora blobs, a perspective grid floor, a cursor spotlight */
.ws-aurora{position:absolute;inset:-20% -10% auto;height:120%;pointer-events:none;filter:blur(70px);opacity:.75}
.ws-aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.ws-aurora i:nth-child(1){width:46vw;height:46vw;left:-6%;top:4%;background:radial-gradient(closest-side,rgba(99,102,241,.55),transparent);animation:wsDrift1 22s ease-in-out infinite alternate}
.ws-aurora i:nth-child(2){width:40vw;height:40vw;right:-4%;top:-6%;background:radial-gradient(closest-side,rgba(34,211,238,.38),transparent);animation:wsDrift2 26s ease-in-out infinite alternate}
.ws-aurora i:nth-child(3){width:34vw;height:34vw;left:38%;top:30%;background:radial-gradient(closest-side,rgba(196,181,253,.3),transparent);animation:wsDrift3 30s ease-in-out infinite alternate}
@keyframes wsDrift1{to{transform:translate(8vw,6vh) scale(1.15)}}
@keyframes wsDrift2{to{transform:translate(-10vw,10vh) scale(.9)}}
@keyframes wsDrift3{to{transform:translate(-6vw,-8vh) scale(1.2)}}
.ws-floor{
  position:absolute;left:-25%;right:-25%;bottom:-2px;height:62%;pointer-events:none;
  background:
    linear-gradient(rgba(129,140,248,.2) 1px,transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg,rgba(129,140,248,.2) 1px,transparent 1px) 0 0/56px 100%;
  transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 75%);mask-image:linear-gradient(to top,#000,transparent 75%);
  animation:wsFloor 7s linear infinite;
}
@keyframes wsFloor{to{background-position:0 56px,0 0}}
.ws-spot{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--hx,50%) var(--hy,30%),rgba(129,140,248,.14),transparent 60%);
}
.ws-hero:hover .ws-spot{opacity:1}
.ws-hero-inner,.ws-proof{z-index:1}

/* "now taking projects" kicker with a live pulse */
.ws-live{gap:.6rem}
.ws-live::before{display:none}
.ws-live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399}
.ws-live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#34d399;animation:wsPing 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes wsPing{75%,100%{transform:scale(2.6);opacity:0}}

/* headline: words rise in one by one; the gradient words shimmer */
.ws-split .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(8px);
  animation:wsWord .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 70ms + 150ms)}
@keyframes wsWord{to{opacity:1;transform:none;filter:none}}
.ws-shine .w{
  background:linear-gradient(92deg,#818cf8 0%,#22d3ee 25%,#c4b5fd 50%,#818cf8 75%,#22d3ee 100%);
  background-size:400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wsWord .9s cubic-bezier(.2,.7,.2,1) forwards,wsShimmer 10s linear infinite;
  animation-delay:calc(var(--i) * 70ms + 150ms),calc(var(--i) * -.6s);
}
@keyframes wsShimmer{to{background-position:-400% 0}}

/* buttons: a light sheen that sweeps across, and a magnetic pull towards the pointer */
.ws-sheen{position:relative;overflow:hidden;isolation:isolate}
.ws-sheen::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:wsSheen 4.5s ease-in-out infinite;
}
@keyframes wsSheen{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.ws-magnetic{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,translate .25s cubic-bezier(.2,.7,.2,1)}

/* hero devices: depth parallax with the pointer (translate, so the float animation keeps working) */
.ws-stage-browser,.ws-stage-phone,.ws-pill{transition:translate .6s cubic-bezier(.2,.7,.2,1)}
.ws-stage-browser{translate:calc(var(--sx,0) * -10px) calc(var(--sy,0) * -8px)}
.ws-stage-phone{translate:calc(var(--sx,0) * 22px) calc(var(--sy,0) * 16px)}
.ws-stage-phone-2{translate:calc(var(--sx,0) * 30px) calc(var(--sy,0) * 22px)}
.ws-pill{translate:calc(var(--sx,0) * 14px) calc(var(--sy,0) * 12px)}
.ws-stage-browser::after{ /* glass reflection across the screen */
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.09) 0%,transparent 32%,transparent 70%,rgba(255,255,255,.04));
}

/* glass proof bar, featured package and hovered work cards: a slow light runs round the edge */
.ws-proof{backdrop-filter:blur(14px);background:linear-gradient(170deg,rgba(99,102,241,.1),rgba(34,211,238,.04)),rgba(10,16,32,.55)}
.ws-proof::before,.ws-pack-feat::before,.ws-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ws-angle),transparent 0 62%,rgba(129,140,248,.9),rgba(34,211,238,.95),transparent 92%);
  -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);
  animation:wsSpin 6s linear infinite;
}
@keyframes wsSpin{to{--ws-angle:360deg}}

/* marquee of the brands, each in its own typeface */
.ws-marquee{
  position:relative;overflow:hidden;padding:1.7rem 0;border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(99,102,241,.06),rgba(34,211,238,.04));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ws-marquee-track{display:flex;align-items:center;gap:2.6rem;width:max-content;animation:wsMarquee 38s linear infinite;white-space:nowrap}
.ws-marquee:hover .ws-marquee-track{animation-play-state:paused}
@keyframes wsMarquee{to{transform:translateX(-50%)}}
.ws-marquee-track span{font-size:2.1rem;line-height:1.1;color:#c7cdf5;opacity:.85;transition:opacity .2s,color .2s}
.ws-marquee-track span:hover{opacity:1;color:#fff}
.ws-marquee-track i{font-style:normal;color:#22d3ee;opacity:.6;font-size:1rem}
.mq-dave{font-family:var(--font-head);font-weight:800;letter-spacing:-.03em}
.mq-dave b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ws-marquee-track .mq-tank{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#e2b86f}
.mq-sill{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:400}
.ws-marquee-track .mq-retro{font-family:'Pixelify Sans',monospace;font-weight:700;color:#b8d67a}
.mq-dod{font-family:var(--font-head);font-weight:700}
.mq-canvas{font-family:var(--font-body);font-weight:400;letter-spacing:-.02em}
.mq-canvas em{font-style:normal;font-weight:800;color:#a5b4fc}

/* work cards: 3D tilt towards the pointer, a spotlight that follows it, a light round the edge */
.ws-card{position:relative;isolation:isolate}
.ws-card::after{inset:0;opacity:0;transition:opacity .35s;z-index:4} /* inside the edge: the card clips overflow */
.ws-card:hover::after{opacity:1}
.ws-card::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(143,216,255,.13),transparent 55%);
}
.ws-card:hover::before{opacity:1}
.ws-shot{perspective:1400px}
.ws-shot .ws-browser{
  transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.ws-shot .ws-card-phone{
  transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateZ(40px);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),translate .35s cubic-bezier(.22,.61,.36,1);
}
.ws-card.is-tilting .ws-shot .ws-browser{transition-duration:.12s}
.ws-card.is-tilting .ws-shot .ws-card-phone{transition-duration:.12s,.35s}

/* specimens: the type breathes on hover */
.ws-spec-type{transition:letter-spacing .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.ws-spec:hover .ws-spec-type{transform:scale(1.05)}
.ws-spec-tank:hover .ws-spec-type{letter-spacing:.09em}

/* included tiles: lift, and the icon glows */
.ws-inc{transition:opacity .7s ease,transform .7s ease,border-color .3s,background .3s,translate .3s cubic-bezier(.22,.61,.36,1)}
.ws-inc:hover{translate:0 -4px;border-color:rgba(129,140,248,.45);background:rgba(20,29,58,.85)}
.ws-ico{transition:box-shadow .3s,background .3s}
.ws-inc:hover .ws-ico{background:rgba(129,140,248,.22);box-shadow:0 0 24px rgba(129,140,248,.45)}

/* process: the joining line fills in as you scroll past, each number lights up */
.ws-steps::after{
  content:"";position:absolute;top:24px;left:12%;right:12%;height:2px;
  background:linear-gradient(90deg,#818cf8,#22d3ee);box-shadow:0 0 14px rgba(34,211,238,.7);
  transform-origin:0 50%;transform:scaleX(var(--ws-steps,0));transition:transform .2s linear;
}
.ws-step-n{position:relative;z-index:1;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.ws-steps li.is-lit .ws-step-n{transform:scale(1.08);box-shadow:0 0 0 7px var(--bg),0 0 34px rgba(34,211,238,.65)}

/* final call: a big soft halo behind it */
.ws-cta{isolation:isolate}
.ws-cta::after{
  content:"";position:absolute;z-index:0;left:50%;top:50%;width:min(900px,100%);height:420px;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(99,102,241,.25),rgba(34,211,238,.08) 60%,transparent);filter:blur(20px);
}

@media (max-width:1020px){
  .ws-steps::after{display:none}
  .ws-marquee-track span{font-size:1.6rem}
  .ws-aurora i:nth-child(1){width:90vw;height:90vw}
  .ws-aurora i:nth-child(2){width:80vw;height:80vw}
}
@media (hover:none){
  .ws-spot,.ws-card::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ws-aurora i,.ws-floor,.ws-shine .w,.ws-sheen::after,.ws-marquee-track,.ws-live-dot::after,
  .ws-proof::before,.ws-pack-feat::before,.ws-card::after{animation:none}
  .ws-split .w{animation:none;opacity:1;transform:none;filter:none}
  .ws-marquee-track{flex-wrap:wrap;width:auto;justify-content:center;row-gap:1rem;padding:0 1rem}
  .ws-marquee-track > :nth-child(n+13){display:none}
}