/* GROAT pictograms. Forest from parent colour, lime accent, live motion on .pg--live. */

.pg {
  --pg-accent: #B2EB76;
  --pg-play: paused;
  --pg-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pg-anim-fee: none;
  --pg-anim-rule: none;
  --pg-anim-buyback: none;
  --pg-anim-receipt: none;
  --pg-anim-epoch: none;
  --pg-anim-stake: none;
  --pg-anim-unstake: none;
  display: inline-block;
  width: 24px;
  height: 24px;
  color: inherit;
  overflow: visible;
  vertical-align: middle;
  flex-shrink: 0;
}

.pg--24 { width: 24px; height: 24px; }
.pg--32 { width: 32px; height: 32px; }
.pg--48 { width: 48px; height: 48px; }
.pg--64 { width: 64px; height: 64px; }

.pg-accent {
  color: var(--pg-accent, #B2EB76);
}

.pg-move {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.pg--live {
  --pg-play: running;
  --pg-anim-fee: pg-fee-drop 5.2s var(--pg-out) infinite;
  --pg-anim-rule: pg-rule-lift 4.8s var(--pg-out) infinite;
  --pg-anim-buyback: pg-buyback-turn 6s var(--pg-out) infinite;
  --pg-anim-receipt: pg-receipt-slide 5.2s var(--pg-out) infinite;
  --pg-anim-epoch: pg-epoch-turn 12s linear infinite;
  --pg-anim-stake: pg-stake-in 5.2s var(--pg-out) infinite;
  --pg-anim-unstake: pg-unstake-out 5.2s var(--pg-out) infinite;
}

.pg--live .pg-move--fee {
  animation: pg-fee-drop 5.2s var(--pg-out) infinite;
  animation-play-state: var(--pg-play, running);
}

.pg--live .pg-move--rule {
  animation: pg-rule-lift 4.8s var(--pg-out) infinite;
  animation-play-state: var(--pg-play, running);
}

.pg--live .pg-move--buyback {
  animation: pg-buyback-turn 6s var(--pg-out) infinite;
  animation-play-state: var(--pg-play, running);
}

.pg--live .pg-move--receipt {
  animation: pg-receipt-slide 5.2s var(--pg-out) infinite;
  animation-play-state: var(--pg-play, running);
}

.pg--live .pg-move--epoch {
  animation: pg-epoch-turn 12s linear infinite;
  animation-play-state: var(--pg-play, running);
}

.pg--live .pg-move--stake {
  animation: pg-stake-in 5.2s var(--pg-out) infinite;
  animation-play-state: var(--pg-play, running);
}

.pg--live .pg-move--unstake {
  animation: pg-unstake-out 5.2s var(--pg-out) infinite;
  animation-play-state: var(--pg-play, running);
}

.pg--paused {
  --pg-play: paused;
}

.pg--paused .pg-move,
.pg--live.pg--paused .pg-move--fee,
.pg--live.pg--paused .pg-move--rule,
.pg--live.pg--paused .pg-move--buyback,
.pg--live.pg--paused .pg-move--receipt,
.pg--live.pg--paused .pg-move--epoch,
.pg--live.pg--paused .pg-move--stake,
.pg--live.pg--paused .pg-move--unstake {
  animation-play-state: paused;
}

@keyframes pg-fee-drop {
  0% { transform: translateY(-16px); opacity: 1; }
  23% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pg-rule-lift {
  0% { transform: translateY(0); }
  18% { transform: translateY(-12px); }
  28% { transform: translateY(-8px); }
  40% { transform: translateY(-8px); }
  55% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes pg-buyback-turn {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pg-receipt-slide {
  0% { transform: translateY(16px); opacity: 1; }
  23% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pg-epoch-turn {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pg-stake-in {
  0% { transform: translateY(-16px); opacity: 1; }
  23% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pg-unstake-out {
  0% { transform: translateY(16px); opacity: 1; }
  23% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pg--live {
    --pg-play: paused;
    --pg-anim-fee: none;
    --pg-anim-rule: none;
    --pg-anim-buyback: none;
    --pg-anim-receipt: none;
    --pg-anim-epoch: none;
    --pg-anim-stake: none;
    --pg-anim-unstake: none;
  }

  .pg-move,
  .pg--live .pg-move,
  .pg--live .pg-move--fee,
  .pg--live .pg-move--rule,
  .pg--live .pg-move--buyback,
  .pg--live .pg-move--receipt,
  .pg--live .pg-move--epoch,
  .pg--live .pg-move--stake,
  .pg--live .pg-move--unstake {
    animation: none;
    transform: none;
    opacity: 1;
  }
}