/* Windloot mark: hover shake, lid, four sub-app fly-outs. */

.wl-hero{
  overflow:hidden;
}

.wl-lockup{
  overflow:visible;
}

.wl-box-stage{
  position:relative;
  flex:none;
  width:88px;
  height:88px;
  overflow:visible;
  perspective:280px;
  perspective-origin:50% 0%;
  z-index:2;
}

.wl-box-trigger{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  position:relative;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:22px;
  background:transparent;
  cursor:pointer;
  transform:none;
  transition:none;
  touch-action:manipulation;
}

.windloot-page .wl-box-trigger:active{
  transform:none;
}

.wl-box-stage .wl-mark{
  width:100%;
  height:100%;
  display:block;
  border-radius:22px;
  pointer-events:none;
}

.wl-box-lid{
  position:absolute;
  left:8%;
  top:-5px;
  width:84%;
  height:8px;
  border-radius:4px 4px 1px 1px;
  background:linear-gradient(90deg,#22D3EE,#8B5CF6);
  box-shadow:0 1px 0 #0B0D10;
  transform-origin:50% 100%;
  transform:rotateX(0deg);
  z-index:5;
  pointer-events:none;
  backface-visibility:hidden;
}

.wl-subicon{
  position:absolute;
  left:50%;
  top:2px;
  width:40px;
  height:40px;
  margin-left:-20px;
  opacity:0;
  pointer-events:none;
  z-index:4;
  will-change:auto;
}

.wl-subicon img{
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}

.wl-box-stage.is-playing .wl-box-trigger,
.wl-box-stage.is-playing .wl-box-lid,
.wl-box-stage.is-playing .wl-subicon{
  will-change:transform,opacity;
}

.wl-box-stage.is-playing .wl-box-trigger{
  animation:wl-box-shake .3s cubic-bezier(.36,.07,.19,.97) both;
}

.wl-box-stage.is-playing .wl-box-lid{
  animation:wl-box-lid 1.4s cubic-bezier(.22,.61,.36,1) both;
}

.wl-box-stage.is-playing .wl-subicon--cardpick{
  animation:wl-fly-nw 1.12s cubic-bezier(.2,.7,.25,1) .26s both;
}

.wl-box-stage.is-playing .wl-subicon--grocery{
  animation:wl-fly-ne 1.12s cubic-bezier(.2,.7,.25,1) .3s both;
}

.wl-box-stage.is-playing .wl-subicon--kings{
  animation:wl-fly-w 1.08s cubic-bezier(.18,.72,.22,1) .34s both;
}

.wl-box-stage.is-playing .wl-subicon--subs{
  animation:wl-fly-e 1.06s cubic-bezier(.18,.72,.22,1) .38s both;
}

@keyframes wl-box-shake{
  0%,100%{ transform:translate3d(0,0,0) rotate(0); }
  16%{ transform:translate3d(-3px,0,0) rotate(-4deg); }
  32%{ transform:translate3d(4px,1px,0) rotate(4deg); }
  48%{ transform:translate3d(-4px,0,0) rotate(-3deg); }
  64%{ transform:translate3d(3px,-1px,0) rotate(3deg); }
  80%{ transform:translate3d(-2px,0,0) rotate(-1.5deg); }
}

@keyframes wl-box-lid{
  0%,12%{ transform:rotateX(0deg); }
  26%,74%{ transform:rotateX(-110deg); }
  100%{ transform:rotateX(0deg); }
}

@keyframes wl-fly-nw{
  0%{
    opacity:0;
    transform:translate3d(0,10px,0) scale(.28);
  }
  12%{
    opacity:1;
    transform:translate3d(-16px,-38px,0) scale(1);
  }
  58%{
    opacity:.95;
    transform:translate3d(-32vw,-46vh,0) scale(.88) rotate(-16deg);
  }
  100%{
    opacity:0;
    transform:translate3d(-68vw,-86vh,0) scale(.5) rotate(-28deg);
  }
}

@keyframes wl-fly-ne{
  0%{
    opacity:0;
    transform:translate3d(0,10px,0) scale(.28);
  }
  12%{
    opacity:1;
    transform:translate3d(18px,-40px,0) scale(1);
  }
  58%{
    opacity:.95;
    transform:translate3d(36vw,-44vh,0) scale(.88) rotate(14deg);
  }
  100%{
    opacity:0;
    transform:translate3d(72vw,-82vh,0) scale(.5) rotate(26deg);
  }
}

@keyframes wl-fly-w{
  0%{
    opacity:0;
    transform:translate3d(0,8px,0) scale(.28);
  }
  14%{
    opacity:1;
    transform:translate3d(-36px,-22px,0) scale(1);
  }
  55%{
    opacity:.92;
    transform:translate3d(-42vw,-18vh,0) scale(.9) rotate(-10deg);
  }
  100%{
    opacity:0;
    transform:translate3d(-90vw,12vh,0) scale(.48) rotate(-22deg);
  }
}

@keyframes wl-fly-e{
  0%{
    opacity:0;
    transform:translate3d(0,8px,0) scale(.28);
  }
  14%{
    opacity:1;
    transform:translate3d(38px,-16px,0) scale(1);
  }
  55%{
    opacity:.92;
    transform:translate3d(46vw,-10vh,0) scale(.9) rotate(8deg);
  }
  100%{
    opacity:0;
    transform:translate3d(92vw,28vh,0) scale(.48) rotate(20deg);
  }
}

.wl-subicon--cardpick{ --wl-rest-x:-54px; --wl-rest-y:-6px; }
.wl-subicon--grocery{ --wl-rest-x:54px; --wl-rest-y:-6px; }
.wl-subicon--kings{ --wl-rest-x:-54px; --wl-rest-y:42px; }
.wl-subicon--subs{ --wl-rest-x:54px; --wl-rest-y:42px; }

.wl-box-stage.is-calm .wl-subicon{
  animation:wl-calm-show 1.25s ease both;
}

@keyframes wl-calm-show{
  0%{
    opacity:0;
    transform:translate3d(var(--wl-rest-x),var(--wl-rest-y),0);
  }
  8%,80%{
    opacity:1;
    transform:translate3d(var(--wl-rest-x),var(--wl-rest-y),0);
  }
  100%{
    opacity:0;
    transform:translate3d(var(--wl-rest-x),var(--wl-rest-y),0);
  }
}

@media (max-width:800px){
  .wl-box-stage{
    width:64px;
    height:64px;
  }
  .wl-box-trigger,
  .wl-box-stage .wl-mark{
    border-radius:16px;
  }
  .wl-subicon{
    width:32px;
    height:32px;
    margin-left:-16px;
  }
  .wl-subicon--cardpick{ --wl-rest-x:-42px; --wl-rest-y:-4px; }
  .wl-subicon--grocery{ --wl-rest-x:42px; --wl-rest-y:-4px; }
  .wl-subicon--kings{ --wl-rest-x:-42px; --wl-rest-y:34px; }
  .wl-subicon--subs{ --wl-rest-x:42px; --wl-rest-y:34px; }
}

@media (prefers-reduced-motion:reduce){
  .windloot-page .wl-box-stage.is-playing .wl-box-trigger,
  .windloot-page .wl-box-stage.is-playing .wl-box-lid,
  .windloot-page .wl-box-stage.is-playing .wl-subicon{
    animation:none !important;
  }
  .windloot-page .wl-box-stage.is-calm .wl-subicon{
    animation:wl-calm-show 1.25s ease both !important;
    transition:none !important;
  }
  .windloot-page .wl-box-lid{
    transform:rotateX(0deg) !important;
  }
}

html[data-motion=off] .windloot-page .wl-box-stage.is-playing .wl-box-trigger,
html[data-motion=off] .windloot-page .wl-box-stage.is-playing .wl-box-lid,
html[data-motion=off] .windloot-page .wl-box-stage.is-playing .wl-subicon{
  animation:none !important;
}

html[data-motion=off] .windloot-page .wl-box-stage.is-calm .wl-subicon{
  animation:wl-calm-show 1.25s ease both !important;
  transition:none !important;
}

html[data-motion=off] .windloot-page .wl-box-lid{
  transform:rotateX(0deg) !important;
}