@property --cw-liquid-x1{syntax:'<percentage>';inherits:false;initial-value:12%}
@property --cw-liquid-y1{syntax:'<percentage>';inherits:false;initial-value:10%}
@property --cw-liquid-s1{syntax:'<percentage>';inherits:false;initial-value:58%}
@property --cw-liquid-x2{syntax:'<percentage>';inherits:false;initial-value:88%}
@property --cw-liquid-y2{syntax:'<percentage>';inherits:false;initial-value:18%}
@property --cw-liquid-s2{syntax:'<percentage>';inherits:false;initial-value:55%}
@property --cw-liquid-x3{syntax:'<percentage>';inherits:false;initial-value:42%}
@property --cw-liquid-y3{syntax:'<percentage>';inherits:false;initial-value:92%}
@property --cw-liquid-s3{syntax:'<percentage>';inherits:false;initial-value:64%}

[data-workforce-card]{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --pointer-x:50%;
  --pointer-y:50%;
  --light-shift-x:0px;
  --light-shift-y:0px;
  --card-lift:0px;
  position:relative;
  isolation:isolate;
  padding:0;
  border-radius:22px;
  background:transparent;
  transform:perspective(1200px) translate3d(0,var(--card-lift),0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.16,1,.3,1);
}

[data-workforce-card].is-interacting{will-change:transform}

[data-workforce-card] .cw-platform-card-inner{
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.38);
  border-radius:22px;
  background-color:var(--cw-liquid-base);
  background-image:
    radial-gradient(circle at var(--cw-liquid-x1) var(--cw-liquid-y1),var(--cw-liquid-color-1) 0%,transparent var(--cw-liquid-s1)),
    radial-gradient(circle at var(--cw-liquid-x2) var(--cw-liquid-y2),var(--cw-liquid-color-2) 0%,transparent var(--cw-liquid-s2)),
    radial-gradient(circle at var(--cw-liquid-x3) var(--cw-liquid-y3),var(--cw-liquid-color-3) 0%,transparent var(--cw-liquid-s3)),
    linear-gradient(145deg,var(--cw-liquid-base),var(--cw-liquid-end));
  animation:
    cw-liquid-blob-1 10.8s ease-in-out infinite,
    cw-liquid-blob-2 13.2s ease-in-out infinite,
    cw-liquid-blob-3 11.6s ease-in-out infinite;
  transform-style:preserve-3d;
}

[data-workforce-card] .cw-platform-card-inner>*{
  position:relative;
  z-index:2;
}

[data-workforce-card] .cw-platform-card-inner>.cw-platform-mark{
  position:absolute;
  z-index:3;
}

[data-workforce-card] .cw-platform-card-inner::before,
[data-workforce-card] .cw-platform-card-inner::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .38s cubic-bezier(.16,1,.3,1);
}

[data-workforce-card] .cw-platform-card-inner::before{
  left:-32%;
  bottom:-42%;
  width:166%;
  height:78%;
  border-radius:54% 46% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(ellipse at 52% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,.07) 24%,transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 -22px 56px rgba(108,218,255,.055);
  transform:translate3d(var(--light-shift-x),var(--light-shift-y),0) rotate(-6deg);
  opacity:.42;
  will-change:transform,opacity;
  animation:cw-liquid-wave 8.6s cubic-bezier(.45,0,.2,1) infinite;
}

[data-workforce-card] .cw-platform-card-inner::after{
  inset:-1px;
  right:auto;
  bottom:auto;
  width:auto;
  height:auto;
  border-radius:inherit;
  transform:none;
  opacity:.11;
}

[data-workforce-card].is-interacting .cw-platform-card-inner::before{animation-duration:6.8s;opacity:.56}
[data-workforce-card].is-interacting .cw-platform-card-inner::after{opacity:.4}

.cw-platform-card-windows{
  background:transparent;
  box-shadow:0 24px 64px rgba(35,73,125,.14);
}

.cw-platform-card-windows .cw-platform-card-inner{
  --cw-liquid-base:#315c9a;
  --cw-liquid-end:#5a8fbd;
  --cw-liquid-color-1:#b7d9e9c8;
  --cw-liquid-color-2:#83afd0ae;
  --cw-liquid-color-3:#557caf9a;
  color:#eaf4ff;
  border-color:rgba(234,244,255,.44);
}

.cw-platform-card-windows .cw-platform-card-inner::after{
  background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(233,250,255,.2) 0%,rgba(93,205,255,.07) 20%,transparent 46%);
}

.cw-platform-card-macos{
  background:transparent;
  box-shadow:0 24px 64px rgba(73,78,132,.14);
}

.cw-platform-card-macos .cw-platform-card-inner{
  --cw-liquid-base:#465880;
  --cw-liquid-end:#7779ad;
  --cw-liquid-color-1:#9fcbd1b8;
  --cw-liquid-color-2:#b0a5d0b0;
  --cw-liquid-color-3:#7b80aca0;
  color:#eaf4ff;
  border-color:rgba(236,238,255,.42);
  animation-delay:-2.4s,-5.1s,-7.3s;
  animation-direction:normal,reverse,normal;
}

.cw-platform-card-macos .cw-platform-card-inner::before{animation-delay:-2.1s}

.cw-platform-card-macos .cw-platform-card-inner::after{
  background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(244,242,255,.2) 0%,rgba(53,203,225,.07) 20%,transparent 47%);
}

[data-workforce-card] .cw-platform-mark{
  display:grid;
  place-items:center;
  width:92px;
  height:92px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:24px;
  transform:translate3d(0,0,22px) rotate(-7deg);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.28),inset -8px -10px 24px rgba(2,14,48,.12),10px 18px 34px rgba(5,24,67,.16);
}

.cw-platform-card-windows .cw-platform-mark{background:linear-gradient(145deg,#78b2d3 0%,#5287bd 52%,#3768aa 100%)}
.cw-platform-card-macos .cw-platform-mark{background:linear-gradient(145deg,#9a91bf 0%,#7779ad 52%,#5b6393 100%)}
[data-workforce-card] .cw-platform-mark img{display:block;width:42px;height:42px;object-fit:contain}

[data-workforce-card] .cw-status-pill{
  color:rgba(234,244,255,.76);
  background:rgba(6,20,51,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  font-family:"Geist Mono","SFMono-Regular",Consolas,monospace;
  letter-spacing:.01em;
}

[data-workforce-card] h2{
  color:#fff;
  text-shadow:0 12px 34px rgba(0,0,0,.18);
}

[data-workforce-card] p{color:rgba(234,244,255,.72)}
[data-workforce-card] dl{border-color:rgba(234,244,255,.18)}
[data-workforce-card] dl div{border-color:rgba(234,244,255,.18)}
[data-workforce-card] dt{
  color:rgba(234,244,255,.6);
  font-family:"Geist Mono","SFMono-Regular",Consolas,monospace;
}
[data-workforce-card] dd{color:#fff}

[data-workforce-card] .cw-disabled-download{
  color:rgba(234,244,255,.72);
  background:rgba(5,17,42,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

@keyframes cw-liquid-blob-1{
  0%,100%{--cw-liquid-x1:4%;--cw-liquid-y1:5%;--cw-liquid-s1:44%}
  34%{--cw-liquid-x1:72%;--cw-liquid-y1:20%;--cw-liquid-s1:64%}
  68%{--cw-liquid-x1:18%;--cw-liquid-y1:78%;--cw-liquid-s1:52%}
}

@keyframes cw-liquid-blob-2{
  0%,100%{--cw-liquid-x2:96%;--cw-liquid-y2:4%;--cw-liquid-s2:42%}
  43%{--cw-liquid-x2:46%;--cw-liquid-y2:62%;--cw-liquid-s2:66%}
  75%{--cw-liquid-x2:90%;--cw-liquid-y2:88%;--cw-liquid-s2:48%}
}

@keyframes cw-liquid-blob-3{
  0%,100%{--cw-liquid-x3:34%;--cw-liquid-y3:96%;--cw-liquid-s3:48%}
  40%{--cw-liquid-x3:88%;--cw-liquid-y3:48%;--cw-liquid-s3:68%}
  74%{--cw-liquid-x3:8%;--cw-liquid-y3:62%;--cw-liquid-s3:52%}
}

@keyframes cw-liquid-wave{
  0%,100%{
    transform:translate3d(calc(var(--light-shift-x) - 2%),calc(var(--light-shift-y) + 7%),0) rotate(-5deg) scaleX(.98);
    opacity:.36;
  }
  50%{
    transform:translate3d(calc(var(--light-shift-x) + 2%),calc(var(--light-shift-y) - 7%),0) rotate(1deg) scale(1.02,1.05);
    opacity:.58;
  }
}

@media (pointer:fine){
  [data-workforce-card]:hover{--card-lift:-6px}
  [data-workforce-card]:hover .cw-platform-mark{transform:translate3d(0,-4px,28px) rotate(0deg)}
}

@media (max-width:600px){
  [data-workforce-card]{transform:none}
  [data-workforce-card] .cw-platform-card-inner{animation-duration:12s,13.8s,12.6s}
  [data-workforce-card] .cw-platform-card-inner::before{animation-duration:10.8s}
  [data-workforce-card] .cw-platform-mark{width:70px;height:70px;right:24px}
  [data-workforce-card] .cw-platform-mark img{width:32px;height:32px}
}

@media (prefers-reduced-motion:reduce){
  [data-workforce-card],
  [data-workforce-card] .cw-platform-mark,
  [data-workforce-card] .cw-platform-card-inner::before,
  [data-workforce-card] .cw-platform-card-inner::after{
    transform:none!important;
    transition:none!important;
  }
  [data-workforce-card] .cw-platform-card-inner{animation:none!important}
  [data-workforce-card] .cw-platform-card-inner::before{animation:none!important}
  [data-workforce-card] .cw-platform-card-inner::after{opacity:.18!important}
}