/*
 * ==========================================================
 * VIBE FARM UI 2.0
 * ==========================================================
 */

.vf2{
  --farm:
    #4ade80;

  --farm-soft:
    #86efac;

  --soil:
    #3f2b1f;

  padding-bottom:28px;
}


/* ==========================================================
 * HERO
 * ========================================================== */

.vf2-hero{
  position:relative;

  min-height:170px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:22px;

  margin-bottom:14px;

  padding:
    22px
    23px;

  overflow:hidden;

  border:
    1px solid
    rgba(74,222,128,.11);

  border-radius:21px;

  background:
    radial-gradient(
      circle at 82% -10%,
      rgba(74,222,128,.13),
      transparent 38%
    ),
    radial-gradient(
      circle at 10% 120%,
      rgba(132,204,22,.07),
      transparent 36%
    ),
    #0d1211;
}


.vf2-eyebrow,
.vf2-section-head>div>span{
  color:
    var(--vb-text-soft,#929bad);

  font-size:10px;
  font-weight:900;

  letter-spacing:.13em;

  text-transform:uppercase;
}


.vf2-hero h1{
  margin:
    5px
    0
    5px;

  font-size:
    clamp(
      26px,
      3vw,
      36px
    );

  letter-spacing:-.04em;
}


.vf2-hero p{
  max-width:590px;

  margin:0;

  color:
    var(--vb-text-soft,#929bad);

  font-size:12px;
  line-height:1.55;
}


.vf2-profile{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(88px,1fr)
    );

  gap:7px;

  min-width:315px;
}


.vf2-profile>div{
  padding:
    10px
    11px;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:13px;

  background:
    rgba(0,0,0,.18);

  backdrop-filter:
    blur(10px);
}


.vf2-profile span{
  display:block;

  color:
    var(--vb-text-soft,#929bad);

  font-size:8px;
  font-weight:900;

  letter-spacing:.08em;
}


.vf2-profile strong{
  display:block;

  margin-top:4px;

  font-family:
    ui-monospace,
    monospace;

  font-size:14px;
}


.vf2-ambient{
  position:absolute;

  inset:0;

  pointer-events:none;

  overflow:hidden;
}


.vf2-ambient i{
  position:absolute;

  width:4px;
  height:4px;

  border-radius:50%;

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

  box-shadow:
    0 0 10px
    rgba(74,222,128,.38);

  animation:
    vf2-firefly
    4s
    ease-in-out
    infinite;
}


.vf2-ambient .a{
  left:12%;
  top:34%;

  animation-delay:-1.2s;
}


.vf2-ambient .b{
  left:43%;
  top:68%;

  animation-delay:-2.7s;
}


.vf2-ambient .c{
  left:73%;
  top:28%;

  animation-delay:-.3s;
}


/* ==========================================================
 * RESOURCES
 * ========================================================== */

.vf2-resources{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:8px;

  margin-bottom:14px;
}


.vf2-resource{
  position:relative;

  min-height:78px;

  display:flex;
  align-items:center;

  gap:10px;

  padding:
    12px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:15px;

  background:
    rgba(255,255,255,.016);

  transition:
    transform .13s ease,
    border-color .13s ease;
}


.vf2-resource:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(74,222,128,.18);
}


.vf2-resource-icon{
  flex:
    0
    0
    39px;

  width:39px;
  height:39px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:
    rgba(255,255,255,.035);

  font-size:20px;

  animation:
    vf2-resource-float
    2.8s
    ease-in-out
    infinite;
}


.vf2-resource-copy{
  min-width:0;
}


.vf2-resource-copy span{
  display:block;

  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
  font-weight:850;

  text-transform:uppercase;
}


.vf2-resource-copy strong{
  display:inline-block;

  margin-top:2px;

  font-family:
    ui-monospace,
    monospace;

  font-size:18px;
  font-weight:900;
}


.vf2-resource-copy small{
  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
}


.vf2-resource-bar{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:
    rgba(255,255,255,.025);
}


.vf2-resource-bar i{
  display:block;

  height:100%;

  background:
    linear-gradient(
      90deg,
      #22c55e,
      #86efac
    );

  box-shadow:
    0 0 8px
    rgba(74,222,128,.35);

  transition:
    width .3s ease;
}


.vf2-resource-energy
.vf2-resource-bar i{
  background:
    linear-gradient(
      90deg,
      #eab308,
      #fde047
    );
}


/* ==========================================================
 * SECTIONS
 * ========================================================== */

.vf2 .vb-card{
  margin-bottom:14px;
}


.vf2-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:14px;
}


.vf2-section-head h3{
  margin:
    4px
    0
    0;

  font-size:17px;
  font-weight:900;

  letter-spacing:-.02em;
}


/* ==========================================================
 * CROPS
 * ========================================================== */

.vf2-crop-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:8px;
}


.vf2-crop{
  position:relative;

  min-height:92px;

  padding:
    11px;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:14px;

  background:
    rgba(0,0,0,.13);

  color:
    var(--vb-text,#f4f6fb);

  text-align:left;

  cursor:pointer;

  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease;
}


.vf2-crop:hover{
  transform:
    translateY(-2px);
}


.vf2-crop.is-active{
  border-color:
    rgba(74,222,128,.30);

  background:
    rgba(74,222,128,.055);

  box-shadow:
    inset 0 0 20px
    rgba(74,222,128,.025);
}


.vf2-crop-emoji{
  position:absolute;

  right:10px;
  top:9px;

  font-size:25px;

  transform-origin:
    50% 100%;
}


.vf2-crop.is-active
.vf2-crop-emoji{
  animation:
    vf2-crop-select
    1.9s
    ease-in-out
    infinite;
}


.vf2-crop strong{
  display:block;

  padding-right:35px;

  font-size:12px;
  font-weight:900;
}


.vf2-crop span{
  display:block;

  margin-top:7px;

  color:#fde68a;

  font-size:10px;
}


.vf2-crop small{
  display:block;

  margin-top:3px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
}


/* ==========================================================
 * FIELD
 * ========================================================== */

.vf2-field-count,
.vf2-live-chip,
.vf2-rate{
  padding:
    6px
    9px;

  border:
    1px solid
    rgba(74,222,128,.14);

  border-radius:999px;

  background:
    rgba(74,222,128,.06);

  color:#86efac;

  font-size:9px;
  font-weight:900;
}


.vf2-field-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:10px;
}


.vf2-plot{
  position:relative;

  min-height:235px;

  padding:
    11px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:17px;

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.018),
      rgba(0,0,0,.14)
    );

  transition:
    transform .13s ease,
    border-color .13s ease,
    box-shadow .13s ease;
}


.vf2-plot:hover{
  transform:
    translateY(-2px);
}


.vf2-plot.is-growing{
  border-color:
    rgba(74,222,128,.13);
}


.vf2-plot.is-ready,
.vf2-plot.is-ready-local{
  border-color:
    rgba(74,222,128,.34);

  box-shadow:
    inset 0 0 25px
      rgba(74,222,128,.025),
    0 0 20px
      rgba(74,222,128,.035);

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


.vf2-plot-number{
  position:absolute;

  top:9px;
  left:10px;

  z-index:3;

  color:
    var(--vb-text-soft,#929bad);

  font-size:8px;
  font-weight:900;

  letter-spacing:.10em;
}


.vf2-soil{
  position:relative;

  height:122px;

  margin:
    15px
    0
    9px;

  overflow:hidden;

  border-radius:14px;

  background:
    radial-gradient(
      ellipse at 50% 85%,
      #4a3020,
      #251a14 66%
    );

  box-shadow:
    inset 0 -10px 20px
    rgba(0,0,0,.25);
}


.vf2-soil::before{
  content:"";

  position:absolute;

  inset:
    auto
    0
    0;

  height:34%;

  background:
    repeating-linear-gradient(
      168deg,
      transparent 0 17px,
      rgba(255,255,255,.025) 18px 19px
    );
}


.vf2-soil-lines{
  position:absolute;

  left:-20%;
  right:-20%;
  bottom:24%;

  height:1px;

  opacity:.16;

  background:
    linear-gradient(
      90deg,
      transparent,
      #fbbf24,
      transparent
    );

  animation:
    vf2-soil-life
    4s
    ease-in-out
    infinite;
}


.vf2-empty-plant{
  position:absolute;

  left:50%;
  top:50%;

  width:42px;
  height:42px;

  margin:
    -21px
    0
    0
    -21px;

  display:grid;
  place-items:center;

  border:
    1px dashed
    rgba(255,255,255,.13);

  border-radius:50%;

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

  font-size:23px;

  animation:
    vf2-empty-breathe
    2.2s
    ease-in-out
    infinite;
}


.vf2-plant{
  position:absolute;

  left:50%;
  bottom:18px;

  width:86px;
  height:88px;

  margin-left:-43px;

  transform:
    scale(
      calc(
        .38
        +
        var(--vf2-growth,.62)
        *
        .62
      )
    );

  transform-origin:
    50%
    100%;

  transition:
    transform .35s ease;
}


.vf2-plant-shadow{
  position:absolute;

  left:15px;
  right:15px;
  bottom:-5px;

  height:9px;

  border-radius:50%;

  background:
    rgba(0,0,0,.28);

  filter:
    blur(3px);
}


.vf2-stem{
  position:absolute;

  left:41px;
  bottom:4px;

  width:4px;
  height:48px;

  border-radius:999px;

  background:
    linear-gradient(
      #86efac,
      #15803d
    );

  transform-origin:
    50%
    100%;

  animation:
    vf2-stem
    2.5s
    ease-in-out
    infinite;
}


.vf2-leaf{
  position:absolute;

  width:24px;
  height:13px;

  border-radius:
    90%
    10%
    90%
    10%;

  background:
    linear-gradient(
      135deg,
      #4ade80,
      #166534
    );
}


.vf2-leaf.a{
  left:21px;
  bottom:28px;

  transform:
    rotate(23deg);

  animation:
    vf2-leaf-a
    2.2s
    ease-in-out
    infinite;
}


.vf2-leaf.b{
  right:18px;
  bottom:39px;

  transform:
    scaleX(-1)
    rotate(18deg);

  animation:
    vf2-leaf-b
    2.4s
    ease-in-out
    infinite;
}


.vf2-crop-fruit{
  position:absolute;

  left:27px;
  top:-5px;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  font-size:29px;

  animation:
    vf2-fruit
    2.7s
    ease-in-out
    infinite;
}


.vf2-plot.is-ready
.vf2-crop-fruit,
.vf2-plot.is-ready-local
.vf2-crop-fruit{
  animation:
    vf2-fruit-ready
    1s
    ease-in-out
    infinite;
}


.vf2-plot-info{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:7px;

  margin-bottom:9px;
}


.vf2-plot-info strong{
  font-size:11px;
}


.vf2-plot-info span{
  color:
    var(--vb-text-soft,#929bad);

  font-family:
    ui-monospace,
    monospace;

  font-size:9px;
}


.vf2-ready-text{
  color:#86efac
    !important;

  font-weight:900;
}


.vf2-grow-progress{
  height:4px;

  margin-bottom:9px;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(255,255,255,.04);
}


.vf2-grow-progress i{
  position:relative;

  display:block;

  width:0;
  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #15803d,
      #4ade80,
      #bbf7d0
    );

  transition:
    width .25s linear;
}


.vf2-grow-progress i::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255,255,255,.55),
      transparent
    );

  transform:
    translateX(-100%);

  animation:
    vf2-progress-shine
    1.2s
    linear
    infinite;
}


.vf2-plot .vb-button{
  width:100%;
}


/* ==========================================================
 * TWO COLUMN
 * ========================================================== */

.vf2-two-column{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:14px;
}


/* ==========================================================
 * BUILDINGS
 * ========================================================== */

.vf2-building-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:9px;
}


.vf2-building{
  position:relative;

  padding:11px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:15px;

  background:
    rgba(0,0,0,.13);
}


.vf2-building:hover
.vf2-building-icon{
  transform:
    translateY(-2px)
    scale(1.05);
}


.vf2-building-visual{
  position:relative;

  height:64px;

  display:grid;
  place-items:center;

  margin-bottom:8px;

  border-radius:12px;

  background:
    radial-gradient(
      circle,
      rgba(74,222,128,.06),
      transparent 62%
    );
}


.vf2-building-icon{
  position:relative;
  z-index:2;

  font-size:30px;

  transition:
    transform .15s ease;

  animation:
    vf2-building-idle
    3s
    ease-in-out
    infinite;
}


.vf2-building-pulse{
  position:absolute;

  width:42px;
  height:42px;

  border:
    1px solid
    rgba(74,222,128,.11);

  border-radius:50%;

  animation:
    vf2-building-ring
    2s
    ease-out
    infinite;
}


.vf2-building-info{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:7px;
}


.vf2-building-info strong{
  font-size:10px;
}


.vf2-building-info span{
  color:
    var(--vb-text-soft,#929bad);

  font-size:8px;
  font-weight:850;
}


.vf2-levels{
  display:flex;

  gap:2px;

  margin:
    8px
    0;
}


.vf2-levels i{
  flex:1;

  height:3px;

  border-radius:99px;

  background:
    rgba(255,255,255,.04);
}


.vf2-levels i.on{
  background:#4ade80;

  box-shadow:
    0 0 5px
    rgba(74,222,128,.25);
}


.vf2-cost{
  display:flex;

  flex-wrap:wrap;

  gap:6px;

  min-height:25px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
}


.vf2-max{
  min-height:42px;

  display:grid;
  place-items:center;

  color:#86efac;

  font-size:9px;
  font-weight:900;
}


/* ==========================================================
 * PRODUCTION
 * ========================================================== */

.vf2-recipe-grid{
  display:grid;

  gap:8px;
}


.vf2-recipe{
  display:grid;

  grid-template-columns:
    38px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:9px;

  padding:10px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:13px;

  background:
    rgba(0,0,0,.12);
}


.vf2-recipe-icon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:11px;

  background:
    rgba(255,255,255,.03);

  font-size:20px;

  animation:
    vf2-machine-idle
    2.8s
    ease-in-out
    infinite;
}


.vf2-recipe-copy strong{
  display:block;

  font-size:10px;
}


.vf2-recipe-copy span{
  display:block;

  margin-top:3px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:8px;
}


.vf2-recipe-flow{
  grid-column:
    1
    /
    -1;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
}


.vf2-recipe-flow>div{
  display:flex;

  gap:5px;
}


.vf2-recipe
.vb-button{
  grid-column:
    1
    /
    -1;

  width:100%;
}


.vf2-jobs{
  display:grid;

  gap:8px;

  margin-top:12px;

  padding-top:12px;

  border-top:
    1px solid
    rgba(255,255,255,.05);
}


.vf2-job{
  position:relative;

  display:grid;

  grid-template-columns:
    56px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:10px;

  padding:10px;

  overflow:hidden;

  border:
    1px solid
    rgba(96,165,250,.10);

  border-radius:14px;

  background:
    rgba(59,130,246,.025);
}


.vf2-job-machine{
  position:relative;

  width:54px;
  height:42px;

  border-radius:11px;

  background:#090c11;
}


.vf2-job-gear{
  position:absolute;

  color:#93c5fd;

  line-height:1;

  animation:
    vf2-gear
    1.3s
    linear
    infinite;
}


.vf2-job-gear.a{
  left:8px;
  top:10px;

  font-size:22px;
}


.vf2-job-gear.b{
  right:8px;
  top:14px;

  font-size:16px;

  animation-direction:reverse;
}


.vf2-job-copy strong{
  display:block;

  font-size:10px;
}


.vf2-job-copy span{
  color:
    var(--vb-text-soft,#929bad);

  font-family:
    ui-monospace,
    monospace;

  font-size:9px;
}


.vf2-job-progress{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:
    rgba(255,255,255,.03);
}


.vf2-job-progress i{
  display:block;

  width:0;
  height:100%;

  background:
    linear-gradient(
      90deg,
      #3b82f6,
      #93c5fd
    );

  box-shadow:
    0 0 7px
    rgba(96,165,250,.35);

  transition:
    width .25s linear;
}


.vf2-job.is-ready{
  border-color:
    rgba(74,222,128,.20);
}


/* ==========================================================
 * EXCHANGE
 * ========================================================== */

.vf2-exchange{
  position:relative;

  overflow:hidden;

  border-color:
    rgba(139,124,255,.13)
    !important;

  background:
    radial-gradient(
      circle at 85% -15%,
      rgba(139,124,255,.10),
      transparent 38%
    ),
    rgba(255,255,255,.016)
    !important;
}


.vf2-exchange.is-trading{
  animation:
    vf2-trade
    .5s
    ease-out;
}


.vf2-rate{
  color:#c4b5fd;

  border-color:
    rgba(139,124,255,.16);

  background:
    rgba(139,124,255,.06);
}


.vf2-exchange-resource{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:7px;
}


.vf2-exchange-resource-button{
  min-height:72px;

  padding:8px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:13px;

  background:
    rgba(0,0,0,.14);

  color:
    var(--vb-text,#f4f6fb);

  cursor:pointer;

  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease;
}


.vf2-exchange-resource-button:hover{
  transform:
    translateY(-2px);
}


.vf2-exchange-resource-button.is-active{
  border-color:
    rgba(139,124,255,.30);

  background:
    rgba(139,124,255,.07);
}


.vf2-exchange-resource-button span{
  display:block;

  font-size:20px;
}


.vf2-exchange-resource-button strong{
  display:block;

  margin-top:3px;

  font-size:10px;
}


.vf2-exchange-resource-button small{
  display:block;

  margin-top:2px;

  color:
    var(--vb-text-soft,#929bad);

  font-family:
    ui-monospace,
    monospace;
}


.vf2-percent{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:5px;

  margin-top:9px;
}


.vf2-percent button{
  min-height:35px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:10px;

  background:
    rgba(0,0,0,.13);

  color:
    var(--vb-text-soft,#929bad);

  font-family:
    ui-monospace,
    monospace;

  font-size:10px;
  font-weight:850;

  cursor:pointer;
}


.vf2-percent button.is-active{
  color:#c4b5fd;

  border-color:
    rgba(139,124,255,.24);

  background:
    rgba(139,124,255,.07);
}


.vf2-exchange-amount{
  display:flex;
  align-items:baseline;

  gap:7px;

  margin:
    13px
    0;

  padding:
    12px;

  border-radius:13px;

  background:#090b10;
}


.vf2-exchange-amount span,
.vf2-exchange-amount small{
  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
}


.vf2-exchange-amount strong{
  font-family:
    ui-monospace,
    monospace;

  font-size:23px;
}


.vf2-quote{
  min-height:78px;
}


.vf2-quote-live{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    )
    auto;

  align-items:center;

  gap:8px;

  padding:10px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:13px;

  background:
    rgba(0,0,0,.14);
}


.vf2-quote-live>div{
  padding:6px;
}


.vf2-quote-live span{
  display:block;

  color:
    var(--vb-text-soft,#929bad);

  font-size:8px;
  font-weight:850;
}


.vf2-quote-live strong{
  display:block;

  margin-top:3px;

  font-family:
    ui-monospace,
    monospace;

  font-size:11px;
}


.vf2-quote-receive strong{
  color:#c4b5fd;

  font-size:14px;
}


.vf2-quote-empty,
.vf2-quote-error,
.vf2-quote-loading{
  min-height:72px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  border:
    1px dashed
    rgba(255,255,255,.06);

  border-radius:13px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:10px;
}


.vf2-quote-loading i,
.vf2-loading i{
  width:17px;
  height:17px;

  border:
    2px solid
    rgba(255,255,255,.10);

  border-top-color:
    #a78bfa;

  border-radius:50%;

  animation:
    vf2-spin
    .65s
    linear
    infinite;
}


/* ==========================================================
 * LOADING / ACTION
 * ========================================================== */

.vf2-loading{
  min-height:280px;

  display:grid;
  place-items:center;

  align-content:center;

  gap:10px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:10px;
}


.vf2 .is-action{
  box-shadow:
    0 0 0 1px
      rgba(74,222,128,.12),
    0 0 25px
      rgba(74,222,128,.04);

  animation:
    vf2-action
    .32s
    ease-out;
}


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

@keyframes vf2-spin{

  to{
    transform:
      rotate(360deg);
  }

}


@keyframes vf2-firefly{

  0%,
  100%{
    opacity:.2;

    transform:
      translate(
        0,
        0
      );
  }

  40%{
    opacity:.8;

    transform:
      translate(
        17px,
        -13px
      );
  }

  75%{
    opacity:.35;

    transform:
      translate(
        -8px,
        -20px
      );
  }

}


@keyframes vf2-resource-float{

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

  50%{
    transform:
      translateY(-2px);
  }

}


@keyframes vf2-crop-select{

  0%,
  100%{
    transform:
      rotate(-2deg)
      scale(1);
  }

  50%{
    transform:
      rotate(3deg)
      scale(1.06);
  }

}


@keyframes vf2-soil-life{

  0%,
  100%{
    transform:
      translateX(-20%);

    opacity:.08;
  }

  50%{
    transform:
      translateX(20%);

    opacity:.24;
  }

}


@keyframes vf2-empty-breathe{

  0%,
  100%{
    transform:
      scale(.94);

    opacity:.45;
  }

  50%{
    transform:
      scale(1.05);

    opacity:.75;
  }

}


@keyframes vf2-stem{

  0%,
  100%{
    transform:
      rotate(-1deg);
  }

  50%{
    transform:
      rotate(2deg);
  }

}


@keyframes vf2-leaf-a{

  0%,
  100%{
    transform:
      rotate(20deg);
  }

  50%{
    transform:
      rotate(29deg);
  }

}


@keyframes vf2-leaf-b{

  0%,
  100%{
    transform:
      scaleX(-1)
      rotate(16deg);
  }

  50%{
    transform:
      scaleX(-1)
      rotate(24deg);
  }

}


@keyframes vf2-fruit{

  0%,
  100%{
    transform:
      translateY(0)
      rotate(-2deg);
  }

  50%{
    transform:
      translateY(-2px)
      rotate(2deg);
  }

}


@keyframes vf2-fruit-ready{

  0%,
  100%{
    transform:
      scale(1)
      rotate(-3deg);
  }

  50%{
    transform:
      scale(1.09)
      rotate(3deg);
  }

}


@keyframes vf2-ready{

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

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

}


@keyframes vf2-progress-shine{

  from{
    transform:
      translateX(-100%);
  }

  to{
    transform:
      translateX(100%);
  }

}


@keyframes vf2-building-idle{

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

  50%{
    transform:
      translateY(-2px);
  }

}


@keyframes vf2-building-ring{

  0%{
    opacity:.5;

    transform:
      scale(.75);
  }

  100%{
    opacity:0;

    transform:
      scale(1.45);
  }

}


@keyframes vf2-machine-idle{

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

  50%{
    transform:
      scale(1.05);
  }

}


@keyframes vf2-gear{

  to{
    transform:
      rotate(360deg);
  }

}


@keyframes vf2-trade{

  0%{
    transform:
      scale(1);
  }

  40%{
    transform:
      scale(.993);

    filter:
      brightness(1.15);
  }

  100%{
    transform:
      scale(1);
  }

}


@keyframes vf2-action{

  0%{
    transform:
      scale(.985);
  }

  60%{
    transform:
      scale(1.006);
  }

  100%{
    transform:
      scale(1);
  }

}


/* ==========================================================
 * RESPONSIVE
 * ========================================================== */

@media(max-width:980px){

  .vf2-two-column{
    grid-template-columns:1fr;
  }

}


@media(max-width:800px){

  .vf2-hero{
    flex-direction:column;

    align-items:stretch;
  }


  .vf2-profile{
    min-width:0;
  }


  .vf2-resources{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .vf2-field-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


@media(max-width:560px){

  .vf2-profile{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }


  .vf2-crop-grid{
    grid-template-columns:1fr;
  }


  .vf2-field-grid{
    grid-template-columns:1fr;
  }


  .vf2-building-grid{
    grid-template-columns:1fr;
  }


  .vf2-exchange-resource{
    grid-template-columns:1fr;
  }


  .vf2-quote-live{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }


  .vf2-quote-live
  .vb-button{
    grid-column:
      1
      /
      -1;
  }

}


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

  .vf2 *,
  .vf2 *::before,
  .vf2 *::after{
    animation:none
      !important;

    transition:none
      !important;
  }

}