/*
 * ==========================================================
 * VIBE ACTIVITY AMBIENT 1.0
 * ==========================================================
 */

:root{
  --vaa-x:0;
  --vaa-y:0;
}


/* ==========================================================
 * GLOBAL LAYER
 * ========================================================== */

.vaa-layer{
  position:fixed;

  z-index:0;

  inset:0;

  overflow:hidden;

  pointer-events:none;

  opacity:.86;

  contain:
    layout
    paint
    style;
}


.vaa-layer.is-paused *,
.vaa-layer.is-paused *::before,
.vaa-layer.is-paused *::after{
  animation-play-state:
    paused
    !important;
}


.vaa-grid{
  position:absolute;

  inset:-10%;

  opacity:.11;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    42px
    42px;

  transform:
    translate(
      calc(
        var(--vaa-x)
        *
        -8px
      ),
      calc(
        var(--vaa-y)
        *
        -8px
      )
    );

  transition:
    transform
    .20s
    ease-out;
}


.vaa-orb{
  position:absolute;

  width:340px;
  height:340px;

  border-radius:50%;

  opacity:.08;

  filter:
    blur(70px);

  transform:
    translate3d(
      calc(
        var(--vaa-x)
        *
        28px
      ),
      calc(
        var(--vaa-y)
        *
        28px
      ),
      0
    );

  transition:
    transform
    .28s
    ease-out;
}


.vaa-orb.a{
  left:-80px;
  top:10%;

  animation:
    vaa-orb-a
    18s
    ease-in-out
    infinite;
}


.vaa-orb.b{
  right:-100px;
  top:28%;

  animation:
    vaa-orb-b
    22s
    ease-in-out
    infinite;
}


.vaa-orb.c{
  left:42%;
  bottom:-150px;

  animation:
    vaa-orb-c
    26s
    ease-in-out
    infinite;
}


/* Games */

.vaa-layer[data-route="games"]
.vaa-orb{
  background:#8b7cff;
}


/* Farm */

.vaa-layer[data-route="farm"]
.vaa-orb{
  background:#22c55e;
}


/* Printers */

.vaa-layer[data-route="printers"]
.vaa-orb{
  background:#38bdf8;
}


/* ==========================================================
 * PARTICLES
 * ========================================================== */

.vaa-particles{
  position:absolute;

  inset:0;
}


.vaa-particles>i{
  position:absolute;

  left:
    calc(
      var(--x)
      *
      1%
    );

  top:
    calc(
      var(--y)
      *
      1%
    );

  color:
    rgba(255,255,255,.20);

  font-style:normal;

  font-size:
    calc(
      7px
      +
      (
        var(--i)
        %
        5
      )
      *
      1px
    );

  opacity:.20;

  will-change:
    transform,
    opacity;

  animation:
    vaa-particle
    calc(
      var(--d)
      *
      1s
    )
    ease-in-out
    infinite;

  animation-delay:
    calc(
      var(--i)
      *
      -430ms
    );
}


.vaa-layer[data-route="farm"]
.vaa-particles>i{
  color:
    rgba(134,239,172,.28);
}


.vaa-layer[data-route="printers"]
.vaa-particles>i{
  color:
    rgba(125,211,252,.27);
}


.vaa-layer[data-route="games"]
.vaa-particles>i{
  color:
    rgba(196,181,253,.28);
}


/* ==========================================================
 * CONTENT LAYER
 * ========================================================== */

.vaa-surface{
  position:relative;

  isolation:isolate;
}


.vaa-surface::before{
  content:"";

  position:absolute;

  z-index:-1;

  inset:-14px;

  pointer-events:none;

  opacity:.20;

  border-radius:24px;

  background:
    radial-gradient(
      circle at
      calc(
        50%
        +
        var(--vaa-x)
        *
        16%
      )
      calc(
        50%
        +
        var(--vaa-y)
        *
        12%
      ),
      rgba(255,255,255,.045),
      transparent 42%
    );
}


/* ==========================================================
 * UNIVERSAL ACTION LIFE
 * ========================================================== */

.vaa-action-live{
  position:relative;

  animation:
    vaa-action
    .46s
    cubic-bezier(.2,.8,.2,1)
    !important;
}


.vaa-action-live::after{
  content:"";

  position:absolute;

  z-index:20;

  inset:-1px;

  pointer-events:none;

  border-radius:inherit;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.11),
      transparent 68%
    );

  animation:
    vaa-action-flash
    .46s
    ease-out
    forwards;
}


.vaa-result-pulse{
  animation:
    vaa-result
    .70s
    ease-out
    !important;
}


/* ==========================================================
 * GAMES
 * ========================================================== */

.vaa-games
[data-game]{
  --vaa-local:
    rgba(139,124,255,.16);

  transform:
    translateZ(0);
}


.vaa-games
[data-game]::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.12;

  border-radius:inherit;

  box-shadow:
    inset 0 0 28px
    var(--vaa-local);

  animation:
    vaa-game-breathe
    calc(
      3.2s
      +
      var(--vaa-i)
      *
      .08s
    )
    ease-in-out
    infinite;

  animation-delay:
    var(--vaa-delay);
}


.vaa-games
.gs-scene{
  box-shadow:
    inset 0 0 28px
      rgba(139,124,255,.025),
    0 8px 24px
      rgba(0,0,0,.10);
}


.vaa-games
.gs-scene::before{
  content:"";

  position:absolute;

  width:90px;
  height:170%;

  top:-35%;
  left:-120px;

  pointer-events:none;

  opacity:.10;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.32),
      transparent
    );

  transform:
    rotate(14deg);

  animation:
    vaa-scene-sweep
    6s
    linear
    infinite;

  animation-delay:
    var(--vaa-delay,0s);
}


.vaa-games
.vmine-cell:not(:disabled){
  animation:
    vaa-mine-idle
    3.4s
    ease-in-out
    infinite;

  animation-delay:
    var(--vaa-delay);
}


/* ==========================================================
 * FARM
 * ========================================================== */

.vaa-farm
.vf2-resource-icon{
  filter:
    drop-shadow(
      0 0 8px
      rgba(74,222,128,.10)
    );
}


.vaa-farm
.vf2-plot{
  transform:
    translateZ(0);
}


.vaa-farm
.vf2-plot.is-empty
.vf2-soil::after{
  content:"";

  position:absolute;

  left:12%;
  right:12%;
  bottom:20%;

  height:12px;

  border-radius:50%;

  opacity:.16;

  background:
    rgba(134,239,172,.16);

  filter:
    blur(8px);

  animation:
    vaa-soil-breathe
    3.2s
    ease-in-out
    infinite;
}


.vaa-farm
.vf2-plot.is-growing{
  animation:
    vaa-field-life
    4.2s
    ease-in-out
    infinite;

  animation-delay:
    var(--vaa-delay);
}


.vaa-farm
.vf2-plot.is-ready,
.vaa-farm
.vf2-plot.is-ready-local{
  animation:
    vaa-farm-ready
    1.55s
    ease-in-out
    infinite
    !important;
}


.vaa-farm
.vf2-building{
  overflow:hidden;
}


.vaa-farm
.vf2-building::after{
  content:"";

  position:absolute;

  width:2px;
  height:160%;

  top:-30%;
  left:-10%;

  opacity:.10;

  background:
    rgba(134,239,172,.70);

  box-shadow:
    0 0 18px
    rgba(74,222,128,.30);

  transform:
    rotate(18deg);

  animation:
    vaa-building-scan
    7s
    linear
    infinite;

  animation-delay:
    var(--vaa-delay);
}


.vaa-farm
.vf2-job:not(.is-ready)
.vf2-job-machine{
  box-shadow:
    0 0 18px
    rgba(96,165,250,.06);

  animation:
    vaa-machine-power
    1.8s
    ease-in-out
    infinite;
}


.vaa-farm
.vf2-exchange{
  background-position:
    0
    0;

  animation:
    vaa-market-energy
    7s
    ease-in-out
    infinite;
}


/* ==========================================================
 * PRINTERS
 * ========================================================== */

.vaa-printers
:is(
  .vmpx-machine,
  .vmp-machine,
  [data-vmpx-printer],
  [data-printer-id]
){
  position:relative;

  transform:
    translateZ(0);
}


.vaa-printers
:is(
  .vmpx-machine,
  .vmp-machine,
  [data-vmpx-printer],
  [data-printer-id]
)::after{
  content:"";

  position:absolute;

  inset:0;

  z-index:15;

  pointer-events:none;

  border-radius:inherit;

  opacity:.11;

  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(125,211,252,.14) 48%,
      transparent 75%
    );

  background-size:
    220%
    100%;

  animation:
    vaa-printer-scan
    4.8s
    linear
    infinite;

  animation-delay:
    var(--vaa-delay);
}


.vaa-printers
:is(
  .is-running,
  [data-status="running"]
){
  animation:
    vaa-printer-running
    1.8s
    ease-in-out
    infinite;
}


.vaa-printers
:is(
  .is-running,
  [data-status="running"]
)::before{
  content:"";

  position:absolute;

  z-index:14;

  width:7px;
  height:7px;

  right:10px;
  top:10px;

  border-radius:50%;

  background:#38bdf8;

  box-shadow:
    0 0 10px
    rgba(56,189,248,.70);

  animation:
    vaa-led
    .86s
    ease-in-out
    infinite;
}


/* ==========================================================
 * KEYFRAMES
 * ========================================================== */

@keyframes vaa-particle{

  0%,
  100%{
    opacity:.06;

    transform:
      translate3d(
        0,
        9px,
        0
      )
      rotate(0);
  }

  35%{
    opacity:.30;
  }

  55%{
    transform:
      translate3d(
        9px,
        -13px,
        0
      )
      rotate(80deg);
  }

  75%{
    opacity:.12;
  }

}


@keyframes vaa-orb-a{

  0%,
  100%{
    translate:0 0;
  }

  50%{
    translate:70px 36px;
  }

}


@keyframes vaa-orb-b{

  0%,
  100%{
    translate:0 0;
  }

  50%{
    translate:-80px 54px;
  }

}


@keyframes vaa-orb-c{

  0%,
  100%{
    translate:0 0;
  }

  50%{
    translate:40px -65px;
  }

}


@keyframes vaa-action{

  0%{
    transform:
      scale(1);
  }

  32%{
    transform:
      scale(.988);
  }

  68%{
    transform:
      scale(1.006);
  }

  100%{
    transform:
      scale(1);
  }

}


@keyframes vaa-action-flash{

  0%{
    opacity:0;
  }

  28%{
    opacity:1;
  }

  100%{
    opacity:0;
  }

}


@keyframes vaa-result{

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

  42%{
    filter:
      brightness(1.18)
      saturate(1.12);
  }

}


@keyframes vaa-game-breathe{

  0%,
  100%{
    opacity:.07;
  }

  50%{
    opacity:.18;
  }

}


@keyframes vaa-scene-sweep{

  from{
    left:-120px;
  }

  to{
    left:
      calc(
        100%
        +
        120px
      );
  }

}


@keyframes vaa-mine-idle{

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

  50%{
    filter:
      brightness(1.035);
  }

}


@keyframes vaa-soil-breathe{

  0%,
  100%{
    opacity:.08;

    transform:
      scaleX(.85);
  }

  50%{
    opacity:.22;

    transform:
      scaleX(1.05);
  }

}


@keyframes vaa-field-life{

  0%,
  100%{
    box-shadow:
      0 0 0
      rgba(74,222,128,0);
  }

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

}


@keyframes vaa-farm-ready{

  0%,
  100%{
    box-shadow:
      0 0 10px
      rgba(74,222,128,.03);
  }

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

}


@keyframes vaa-building-scan{

  from{
    left:-10%;
  }

  to{
    left:110%;
  }

}


@keyframes vaa-machine-power{

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

  50%{
    filter:
      brightness(1.08);
  }

}


@keyframes vaa-market-energy{

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

  50%{
    filter:
      brightness(1.035);
  }

}


@keyframes vaa-printer-scan{

  from{
    background-position:
      220%
      0;
  }

  to{
    background-position:
      -120%
      0;
  }

}


@keyframes vaa-printer-running{

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

  50%{
    filter:
      brightness(1.055);
  }

}


@keyframes vaa-led{

  0%,
  100%{
    opacity:.32;

    transform:
      scale(.78);
  }

  50%{
    opacity:1;

    transform:
      scale(1.15);
  }

}


/* ==========================================================
 * REDUCED MOTION
 * ========================================================== */

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

  .vaa-layer{
    display:none;
  }


  .vaa-surface *,
  .vaa-surface *::before,
  .vaa-surface *::after{
    animation:none
      !important;

    transition:none
      !important;
  }

}