/*
 * ==========================================================
 * VIBE MOTION ENGINE 1.0
 * Games + Farm + Money Printers
 * ==========================================================
 */

:root{
  --vm-fast:70ms;
  --vm-micro:110ms;
  --vm-control:150ms;
  --vm-result:260ms;
  --vm-structural:320ms;
}


/* ----------------------------------------------------------
 * Network heartbeat
 * ---------------------------------------------------------- */

#vibeMotionNetwork{
  position:fixed;

  top:0;
  left:0;

  z-index:99999;

  width:100%;
  height:2px;

  opacity:0;

  pointer-events:none;

  overflow:hidden;

  transition:
    opacity
    var(--vm-micro)
    ease;
}


#vibeMotionNetwork::before{
  content:"";

  position:absolute;

  inset:0;

  transform:
    translateX(-100%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--vb-accent,#8b7cff),
      transparent
    );
}


html.vm-network
#vibeMotionNetwork{
  opacity:.8;
}


html.vm-network
#vibeMotionNetwork::before{
  animation:
    vm-network
    .68s
    linear
    infinite;
}


/* ----------------------------------------------------------
 * Universal interaction
 * ---------------------------------------------------------- */

.vm-motion-control{
  position:relative;

  overflow:hidden;

  transform:
    translateZ(0);

  transition:
    transform
      var(--vm-fast)
      ease,
    filter
      var(--vm-micro)
      ease,
    border-color
      var(--vm-control)
      ease,
    background
      var(--vm-control)
      ease;
}


.vm-motion-control:hover{
  filter:
    brightness(1.055);
}


.vm-motion-control.vm-pressed{
  transform:
    scale(.975);
}


.vm-ripple{
  position:absolute;

  z-index:50;

  width:12px;
  height:12px;

  left:
    calc(
      var(--vm-ripple-x)
      - 6px
    );

  top:
    calc(
      var(--vm-ripple-y)
      - 6px
    );

  border-radius:999px;

  background:
    color-mix(
      in srgb,
      var(--vb-accent,#8b7cff)
      30%,
      white
    );

  pointer-events:none;

  animation:
    vm-ripple
    .42s
    ease-out
    forwards;
}


/* ----------------------------------------------------------
 * Surface entrance
 * ---------------------------------------------------------- */

.vm-motion-node{
  transform:
    translateZ(0);
}


.vm-motion-enter{
  animation:
    vm-enter
    var(--vm-structural)
    cubic-bezier(.2,.8,.2,1)
    both;
}


/* ----------------------------------------------------------
 * Living surfaces
 * ---------------------------------------------------------- */

.vm-motion-surface{
  position:relative;

  transform:
    translateZ(0);

  transition:
    transform
      var(--vm-control)
      ease,
    border-color
      var(--vm-control)
      ease,
    box-shadow
      var(--vm-control)
      ease;
}


.vm-motion-surface::after{
  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  pointer-events:none;

  opacity:0;

  background:
    radial-gradient(
      circle
      at
      var(--vm-x,50%)
      var(--vm-y,50%),
      color-mix(
        in srgb,
        var(--vb-accent,#8b7cff)
        11%,
        transparent
      ),
      transparent 42%
    );

  transition:
    opacity
    var(--vm-control)
    ease;
}


.vm-motion-surface:hover::after{
  opacity:1;
}


/* ----------------------------------------------------------
 * FARM
 * ---------------------------------------------------------- */

.vfarm-plot.vm-farm-empty{
  background:
    linear-gradient(
      160deg,
      rgba(120,78,42,.09),
      rgba(0,0,0,.16)
    )
    !important;
}


.vfarm-plot.vm-farm-empty:hover{
  transform:
    translateY(-2px)
    scale(1.008);
}


.vfarm-plot.vm-farm-growing{
  overflow:hidden;
}


.vfarm-plot.vm-farm-growing::before{
  content:"";

  position:absolute;

  inset:
    auto
    -25%
    0;

  height:42%;

  pointer-events:none;

  opacity:.22;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(74,222,128,.25),
      transparent
    );

  animation:
    vm-farm-grow
    2.6s
    ease-in-out
    infinite;
}


.vfarm-plot.vm-farm-ready{
  border-color:
    rgba(74,222,128,.28)
    !important;

  box-shadow:
    0 0 0 1px
      rgba(74,222,128,.05),
    0 0 22px
      rgba(74,222,128,.06);
}


.vfarm-plot.vm-farm-ready::before{
  content:"";

  position:absolute;

  inset:-1px;

  border-radius:inherit;

  pointer-events:none;

  box-shadow:
    inset 0 0 22px
    rgba(74,222,128,.08);

  animation:
    vm-farm-ready
    1.45s
    ease-in-out
    infinite;
}


.vfarm-resource-value.vm-value-change{
  animation:
    vm-number
    .28s
    ease-out;
}


.vfarm-plot.vm-planting{
  animation:
    vm-plant
    .34s
    ease-out;
}


.vfarm-plot.vm-harvesting{
  animation:
    vm-harvest
    .30s
    ease-out;
}


.vfarm-buildings
.vm-actioning{
  animation:
    vm-machine-kick
    .32s
    ease-out;
}


/* ----------------------------------------------------------
 * GAMES
 * ---------------------------------------------------------- */

.vg-game-card{
  overflow:hidden;
}


.vg-game-card:hover{
  transform:
    translateY(-2px);
}


.vg-game-card.vm-game-playing{
  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--vb-accent,#8b7cff)
        24%,
        transparent
      ),
    0 8px 26px
      rgba(0,0,0,.18);
}


[data-game="slots"]
.vgame-icon.vm-actioning{
  animation:
    vm-slot
    .30s
    cubic-bezier(.3,.8,.3,1);
}


[data-game="coinflip"]
.vgame-icon.vm-actioning{
  animation:
    vm-coin
    .34s
    ease-out;
}


[data-game="dice"]
.vgame-icon.vm-actioning{
  animation:
    vm-dice
    .32s
    ease-out;
}


[data-game="rps"]
.vgame-icon.vm-actioning{
  animation:
    vm-rps
    .28s
    ease-out;
}


.vg-result-banner.vm-success{
  animation:
    vm-success
    .36s
    ease-out;
}


.vg-result-banner.vm-error{
  animation:
    vm-error
    .28s
    ease-out;
}


/* ----------------------------------------------------------
 * MINE
 * ---------------------------------------------------------- */

.vmine-board{
  position:relative;
}


.vmine-cell{
  transition:
    transform
      var(--vm-fast)
      ease,
    filter
      var(--vm-micro)
      ease,
    border-color
      var(--vm-control)
      ease,
    background
      var(--vm-control)
      ease
    !important;
}


.vmine-cell:not(:disabled):hover{
  transform:
    translateY(-2px)
    scale(1.025)
    !important;
}


.vmine-cell.vm-mine-scan{
  animation:
    vm-mine
    .27s
    ease-out;
}


.vmine-cell.is-open{
  animation:
    vm-cell-open
    .24s
    cubic-bezier(.2,.85,.25,1);
}


/* ----------------------------------------------------------
 * MONEY PRINTERS
 * ---------------------------------------------------------- */

.vm-printer-card{
  position:relative;

  overflow:hidden;
}


.vm-printer-card::before{
  content:"";

  position:absolute;

  left:-50%;
  right:-50%;
  bottom:0;

  height:1px;

  pointer-events:none;

  opacity:.2;

  background:
    linear-gradient(
      90deg,
      transparent,
      #60a5fa,
      #a78bfa,
      transparent
    );

  transform:
    translateX(-35%);
}


.vm-printer-card.vm-printer-running::before{
  animation:
    vm-printer-line
    1.15s
    linear
    infinite;
}


.vm-printer-card.vm-printer-running{
  box-shadow:
    inset 0 0 30px
      rgba(96,165,250,.025);
}


.vm-printer-card.vm-printer-ready{
  border-color:
    rgba(74,222,128,.24)
    !important;

  animation:
    vm-printer-ready
    1.55s
    ease-in-out
    infinite;
}


.vm-printer-card.vm-printer-starting{
  animation:
    vm-machine-kick
    .34s
    ease-out;
}


.vm-printer-card.vm-printer-cash{
  animation:
    vm-cash
    .38s
    ease-out;
}


/* ----------------------------------------------------------
 * Busy / success / failure
 * ---------------------------------------------------------- */

.vm-requesting{
  cursor:progress;
}


.vm-requesting::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.08;

  background:
    linear-gradient(
      105deg,
      transparent 25%,
      white 50%,
      transparent 75%
    );

  transform:
    translateX(-100%);

  animation:
    vm-request
    .62s
    ease-in-out
    infinite;
}


.vm-success{
  animation:
    vm-success
    .34s
    ease-out;
}


.vm-error{
  animation:
    vm-error
    .28s
    ease-out;
}


/* ----------------------------------------------------------
 * Particles
 * ---------------------------------------------------------- */

.vm-particle{
  position:fixed;

  z-index:100000;

  left:var(--vm-px);
  top:var(--vm-py);

  color:
    var(
      --vm-particle-color,
      #d9d3ff
    );

  font-size:
    var(
      --vm-particle-size,
      14px
    );

  font-weight:900;

  line-height:1;

  pointer-events:none;

  text-shadow:
    0 0 8px
    currentColor;

  animation:
    vm-particle
    .52s
    cubic-bezier(.1,.7,.2,1)
    forwards;
}


/* ----------------------------------------------------------
 * Keyframes
 * ---------------------------------------------------------- */

@keyframes vm-network{
  from{
    transform:
      translateX(-100%);
  }

  to{
    transform:
      translateX(100%);
  }
}


@keyframes vm-ripple{
  0%{
    opacity:.30;

    transform:
      scale(1);
  }

  100%{
    opacity:0;

    transform:
      scale(22);
  }
}


@keyframes vm-enter{
  from{
    opacity:0;

    transform:
      translateY(6px)
      scale(.992);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}


@keyframes vm-number{
  0%{
    opacity:.50;

    transform:
      translateY(2px)
      scale(.96);
  }

  55%{
    transform:
      scale(1.06);
  }

  100%{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}


@keyframes vm-farm-grow{
  0%,
  100%{
    transform:
      translateX(-22%);

    opacity:.10;
  }

  50%{
    transform:
      translateX(22%);

    opacity:.30;
  }
}


@keyframes vm-farm-ready{
  0%,
  100%{
    opacity:.45;
  }

  50%{
    opacity:1;
  }
}


@keyframes vm-plant{
  0%{
    transform:
      scale(.96);
  }

  52%{
    transform:
      scale(1.025);
  }

  100%{
    transform:
      scale(1);
  }
}


@keyframes vm-harvest{
  0%{
    transform:
      translateY(0)
      scale(1);
  }

  45%{
    transform:
      translateY(-4px)
      scale(1.018);
  }

  100%{
    transform:
      translateY(0)
      scale(1);
  }
}


@keyframes vm-slot{
  0%{
    transform:
      translateY(-3px)
      scale(.92);
  }

  50%{
    transform:
      translateY(3px)
      scale(1.12);
  }

  100%{
    transform:
      translateY(0)
      scale(1);
  }
}


@keyframes vm-coin{
  0%{
    transform:
      perspective(120px)
      rotateY(0);
  }

  100%{
    transform:
      perspective(120px)
      rotateY(720deg);
  }
}


@keyframes vm-dice{
  0%{
    transform:
      rotate(0)
      scale(.90);
  }

  45%{
    transform:
      rotate(210deg)
      scale(1.14);
  }

  100%{
    transform:
      rotate(360deg)
      scale(1);
  }
}


@keyframes vm-rps{
  0%{
    transform:
      translateY(0)
      rotate(0);
  }

  35%{
    transform:
      translateY(-5px)
      rotate(-7deg);
  }

  70%{
    transform:
      translateY(2px)
      rotate(4deg);
  }

  100%{
    transform:
      translateY(0)
      rotate(0);
  }
}


@keyframes vm-mine{
  0%{
    box-shadow:
      0 0 0 0
      rgba(139,124,255,.32);
  }

  100%{
    box-shadow:
      0 0 0 14px
      rgba(139,124,255,0);
  }
}


@keyframes vm-cell-open{
  0%{
    transform:
      scale(.82);
  }

  65%{
    transform:
      scale(1.08);
  }

  100%{
    transform:
      scale(1);
  }
}


@keyframes vm-machine-kick{
  0%{
    transform:
      translateX(0);
  }

  25%{
    transform:
      translateX(-2px);
  }

  50%{
    transform:
      translateX(2px);
  }

  75%{
    transform:
      translateX(-1px);
  }

  100%{
    transform:
      translateX(0);
  }
}


@keyframes vm-printer-line{
  from{
    transform:
      translateX(-35%);
  }

  to{
    transform:
      translateX(35%);
  }
}


@keyframes vm-printer-ready{
  0%,
  100%{
    box-shadow:
      0 0 0
      rgba(74,222,128,0);
  }

  50%{
    box-shadow:
      0 0 22px
      rgba(74,222,128,.07);
  }
}


@keyframes vm-cash{
  0%{
    transform:
      scale(1);
  }

  45%{
    transform:
      scale(1.018);
  }

  100%{
    transform:
      scale(1);
  }
}


@keyframes vm-request{
  from{
    transform:
      translateX(-100%);
  }

  to{
    transform:
      translateX(100%);
  }
}


@keyframes vm-success{
  0%{
    filter:
      brightness(1);
  }

  45%{
    filter:
      brightness(1.32)
      saturate(1.15);
  }

  100%{
    filter:
      brightness(1);
  }
}


@keyframes vm-error{
  0%,
  100%{
    transform:
      translateX(0);
  }

  25%{
    transform:
      translateX(-3px);
  }

  50%{
    transform:
      translateX(3px);
  }

  75%{
    transform:
      translateX(-2px);
  }
}


@keyframes vm-particle{
  from{
    opacity:1;

    transform:
      translate(
        0,
        0
      )
      scale(.82);
  }

  to{
    opacity:0;

    transform:
      translate(
        var(--vm-dx),
        var(--vm-dy)
      )
      scale(1.20);
  }
}


/* ----------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------- */

@media (
  prefers-reduced-motion:
  reduce
){

  #vibeMotionNetwork::before,

  .vm-ripple,

  .vm-motion-enter,

  .vm-particle,

  .vm-actioning,

  .vm-success,

  .vm-error,

  .vm-requesting::before,

  .vm-farm-growing::before,

  .vm-farm-ready::before,

  .vm-printer-running::before,

  .vm-printer-ready{

    animation:none
      !important;
  }


  .vm-motion-control,

  .vm-motion-surface,

  .vmine-cell{

    transition:none
      !important;
  }

}