/* "What we do" — entrance animation, hover effects and translucent accents */

html body section.ws{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
html body section.ws .ws-wrap{position:relative;z-index:1}

/* ---------- soft glows behind the section ---------- */
html body section.ws::before,
html body section.ws::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  filter:blur(70px);
}
html body section.ws::before{
  width:420px;height:420px;
  left:-120px;top:-60px;
  background:radial-gradient(circle,rgba(47,107,255,.20),rgba(47,107,255,0) 70%);
  animation:wsDrift 16s ease-in-out infinite alternate;
}
html body section.ws::after{
  width:480px;height:480px;
  right:-140px;bottom:-80px;
  background:radial-gradient(circle,rgba(34,211,238,.18),rgba(34,211,238,0) 70%);
  animation:wsDrift 19s ease-in-out infinite alternate-reverse;
}

/* ---------- floating translucent shapes ---------- */
html body section.ws .ws-deco{
  position:absolute;
  z-index:0;
  pointer-events:none;
  display:block;
}
html body section.ws .ws-d1{
  left:5%;top:90px;
  width:110px;height:110px;
  border-radius:50%;
  border:2px solid rgba(47,107,255,.20);
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(47,107,255,.06));
  backdrop-filter:blur(2px);
  animation:wsFloat 9s ease-in-out infinite;
}
html body section.ws .ws-d2{
  right:6%;top:210px;
  width:92px;height:92px;
  border-radius:22px;
  border:1px solid rgba(47,107,255,.22);
  background:linear-gradient(135deg,rgba(79,195,255,.26),rgba(47,107,255,.07));
  backdrop-filter:blur(3px);
  transform:rotate(18deg);
  animation:wsFloat2 11s ease-in-out infinite;
}
html body section.ws .ws-d3{
  left:3%;bottom:70px;
  width:130px;height:130px;
  background-image:radial-gradient(rgba(47,107,255,.34) 1.6px,transparent 1.9px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(circle,#000 35%,transparent 72%);
          mask-image:radial-gradient(circle,#000 35%,transparent 72%);
  animation:wsFloat 13s ease-in-out infinite reverse;
}
html body section.ws .ws-d4{
  right:9%;bottom:120px;
  width:58px;height:58px;
  border-radius:50%;
  border:1.5px dashed rgba(34,211,238,.45);
  animation:wsSpin 26s linear infinite;
}

@keyframes wsFloat{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes wsFloat2{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 14px;rotate:8deg}}
@keyframes wsSpin{to{rotate:360deg}}
@keyframes wsDrift{from{translate:0 0}to{translate:40px 30px}}

/* ---------- entrance animation (only when JS is running) ---------- */
html body section.ws.ws-anim .ws-head > *{
  opacity:0;
  translate:0 18px;
  transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1);
}
html body section.ws.ws-anim .ws-head > *:nth-child(2){transition-delay:.12s}
html body section.ws.ws-anim .ws-head > *:nth-child(3){transition-delay:.24s}
html body section.ws.ws-anim.ws-in .ws-head > *{opacity:1;translate:0 0}

html body section.ws.ws-anim .wx-card{
  opacity:0;
  translate:0 34px;
  transition:
    opacity .8s ease var(--d,0s),
    translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),
    transform .35s ease 0s;
}
html body section.ws.ws-anim .wx-card:nth-child(1){--d:.15s}
html body section.ws.ws-anim .wx-card:nth-child(2){--d:.3s}
html body section.ws.ws-anim .wx-card:nth-child(3){--d:.45s}
html body section.ws.ws-anim .wx-card:nth-child(4){--d:.6s}
html body section.ws.ws-anim.ws-in .wx-card{opacity:1;translate:0 0}

/* ---------- card extras ---------- */
html body section.ws .wx-grid{counter-reset:wx}
html body section.ws .wx-card{counter-increment:wx;will-change:transform}

/* glass number badge */
html body section.ws .wx-card::before{
  content:counter(wx,decimal-leading-zero);
  position:absolute;
  top:14px;right:14px;
  z-index:4;
  padding:6px 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(8,20,48,.38);
  -webkit-backdrop-filter:blur(8px) saturate(1.3);
          backdrop-filter:blur(8px) saturate(1.3);
  color:#fff;
  font:700 .78rem/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.12em;
  pointer-events:none;
  transition:background .3s ease,transform .3s ease;
}
html body section.ws .wx-card:hover::before{
  background:rgba(47,107,255,.62);
  transform:scale(1.08);
}

/* hover lift + glow */
html body section.ws .wx-card:hover{transform:translateY(-6px)}
html body section.ws .wx-media{
  transition:box-shadow .35s ease,outline-color .35s ease;
  outline:1px solid rgba(255,255,255,0);
  outline-offset:-10px;
}
html body section.ws .wx-card:hover .wx-media{
  box-shadow:0 30px 50px -22px rgba(47,107,255,.55);
  outline-color:rgba(255,255,255,.35);
}

/* light sweep across the photo */
html body section.ws .wx-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.26) 50%,transparent 65%);
  transform:translateX(-130%);
}
html body section.ws .wx-card:hover .wx-media::before{
  transform:translateX(130%);
  transition:transform .95s ease;
}

/* button arrow slides in */
html body section.ws .wx-btn{gap:0}
html body section.ws .wx-btn::after{
  content:"\2192";
  display:inline-block;
  max-width:0;
  margin-left:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  transition:max-width .3s ease,margin-left .3s ease,opacity .3s ease;
}
html body section.ws .wx-card:hover .wx-btn::after,
html body section.ws .wx-btn:focus-visible::after{
  max-width:1.5em;
  margin-left:8px;
  opacity:1;
}

/* ---------- responsive / accessibility ---------- */
@media (max-width:760px){
  html body section.ws .ws-d1,html body section.ws .ws-d2{opacity:.55;transform-origin:center}
  html body section.ws .ws-d3,html body section.ws .ws-d4{display:none}
  html body section.ws .wx-card:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html body section.ws::before,html body section.ws::after,
  html body section.ws .ws-deco{animation:none!important}
  html body section.ws.ws-anim .ws-head > *,
  html body section.ws.ws-anim .wx-card{opacity:1;translate:0 0;transition:none}
  html body section.ws .wx-card:hover{transform:none}
  html body section.ws .wx-media::before{display:none}
}