/* Shared by the pre-React PWA splash and all application loading states. */
.cardinet-loader {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
  color: var(--logo-gold, #c6a45e);
}
html[data-theme='light'] .cardinet-loader { color: var(--cardinet-brand-gold-light, #a7803f); }
.theme-dark .cardinet-loader { color: var(--cardinet-brand-gold, #c6a45e); }
.theme-light .cardinet-loader { color: var(--cardinet-brand-gold-light, #a7803f); }
#cardinet-startup .cardinet-loader { color: var(--cardinet-brand-gold, #c6a45e); }
.cardinet-loader-cabinet, .cardinet-loader-card {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.cardinet-loader-cabinet {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cardinet-load-cabinet 4s ease-in-out infinite;
}
.cardinet-loader-card {
  opacity: 0;
  animation: cardinet-load-card 4s ease-in-out infinite;
}
.cardinet-loader-hero {
  fill: currentColor;
  opacity: 0;
  animation: cardinet-load-hero 4s ease-in-out infinite;
}
/* The path starts at the top-right. Returning to +1 erases from the bottom,
   retracing the C, rather than erasing from its starting point. */
@keyframes cardinet-load-cabinet {
  0%, 5% { stroke-dashoffset: 1; }
  24%, 78% { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 1; }
}
@keyframes cardinet-load-card {
  0%, 24% { opacity: 0; transform: translateY(-14px); }
  36%, 66% { opacity: 1; transform: translateY(0); }
  77%, 100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes cardinet-load-hero {
  0%, 38% { opacity: 0; transform: translateY(-14px); }
  49%, 56% { opacity: 1; transform: translateY(0); }
  65%, 100% { opacity: 0; transform: translateY(-14px); }
}
/* Keep the full mark legible when animation is not wanted. Status text is
   supplied by the surrounding control; the SVG is decorative. */
@media (prefers-reduced-motion: reduce) {
  .cardinet-loader-cabinet, .cardinet-loader-card, .cardinet-loader-hero {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: none;
  }
}