/* Canonical source: design-system/logo/animations/carry-states.css */

.carry { display: inline-flex; line-height: 0; }

.carry .bar {
  fill: var(--warm);
  transition: fill .4s ease-in-out;
  transform-box: fill-box;
  transform-origin: center bottom;
}

@keyframes outfra-wave {
  0%, 100% { fill: #993C1D; }
  33%      { fill: #D85A30; }
  66%      { fill: #F0997B; }
}
.carry.state-working .bar { animation: outfra-wave 1.8s ease-in-out infinite; }
.carry.state-working .b2  { animation-delay: -.6s; }
.carry.state-working .b3  { animation-delay: -1.2s; }

.carry.state-success .bar,
.carry.state-charged .bar { fill: var(--grn); transition: fill .25s ease-out; }
.carry.state-success .b2,
.carry.state-charged .b2  { transition-delay: .08s; }
.carry.state-success .b3,
.carry.state-charged .b3  { transition-delay: .16s; }

@keyframes outfra-pop { 40% { transform: scaleY(1.12); } }
.carry.state-success.pop-ok .b1,
.carry.state-charged.pop-ok .b1 { animation: outfra-pop .35s cubic-bezier(.34,1.56,.64,1); }
.carry.state-success.pop-ok .b2,
.carry.state-charged.pop-ok .b2 { animation: outfra-pop .35s cubic-bezier(.34,1.56,.64,1) .08s; }
.carry.state-success.pop-ok .b3,
.carry.state-charged.pop-ok .b3 { animation: outfra-pop .35s cubic-bezier(.34,1.56,.64,1) .16s; }

@keyframes outfra-chargeA {
  0%       { transform: scaleY(.15); opacity: .4; }
  25%, 90% { transform: scaleY(1);   opacity: 1;  }
  100%     { transform: scaleY(.15); opacity: .4; }
}
@keyframes outfra-chargeB {
  0%, 25%  { transform: scaleY(.15); opacity: .4; }
  50%, 90% { transform: scaleY(1);   opacity: 1;  }
  100%     { transform: scaleY(.15); opacity: .4; }
}
@keyframes outfra-chargeC {
  0%, 50%  { transform: scaleY(.15); opacity: .4; }
  75%, 90% { transform: scaleY(1);   opacity: 1;  }
  100%     { transform: scaleY(.15); opacity: .4; }
}
.carry.state-charging .b1 { animation: outfra-chargeA 2.1s ease-in-out infinite; }
.carry.state-charging .b2 { animation: outfra-chargeB 2.1s ease-in-out infinite; }
.carry.state-charging .b3 { animation: outfra-chargeC 2.1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .carry .bar {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .carry.state-success .bar,
  .carry.state-charged .bar {
    transition: fill .25s ease-out !important;
    transition-delay: 0s !important;
  }
}

.carry-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgb(var(--paper) / 0.92);
  backdrop-filter: blur(6px);
}
.carry-splash .carry {
  width: 96px;
  height: 96px;
  color: rgb(var(--ink));
  --outfra-glass: rgb(var(--paper-mix) / 0.35);
}
.carry-splash .carry svg {
  width: 100%;
  height: 100%;
  display: block;
}