@import 'base/base.css';


/* #region Defaults */
html {
    scroll-behavior: smooth;
}

html, body {
  
  }

body {
  color: var(--white);
  background: #1B578C;
  /*
  background-image: url('/src/img/bc-spiro4-dark4.svg'), url('/src/img/bc-spiro4-dark4.svg');
  background-attachment: fixed;
  background-size: 800px 800px;
  background-position: top -400px left -300px, right -400px bottom -300px;
  background-repeat: no-repeat;
  */
}

@media (max-width: 768px) {
body {
  background-size: 500px 500px;
  background-position: right -100px bottom -150px;
}
}
/* #endregion */


/* #region Layout */
html, body {
  height: 100%;
}

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(27, 87, 140, 1);
}

main {
  flex: 1 0 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

article {

  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

section {
  position: relative;
  padding: 8px 24px 0;
}

section:last-of-type {
  margin-bottom: 64px;
}

  a.linky, a.linky:visited {
    color: #fff;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
    padding-bottom: .333px;
    border-bottom: 1px solid var(--accent);
    transition: color .3s ease-out;
  }

  a.linky:hover, a.linky:focus {
    color: var(--accent);
  }

  a.linky:before, a.linky:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    opacity: .5;
    transition: all .15s ease-in;
    transform: scaleX(0);
  }

    a.linky:before {
      background-color: var(--white);
      outline-offset: -.25rem;
      outline: var(--white) solid .5rem;
      height: 100%;
      bottom: 0;
      z-index: -1;
    }

    a.linky:after {
      background-color: var(--highlight);
      bottom: -0.1rem;
      height: 0.1rem;
    }

    a.linky:hover::before,
    a.linky:focus::before,
    a.linky:hover::after,
    a.linky:focus::after {
      opacity: 1;
      transform: scaleX(1);
      transition: all .3s linear .1s;
    }
    @media (prefers-reduced-motion: reduce) {
      a.linky::before,
      a.linky::after {
        transition: none !important;
      }
    }

  .inner {}

.contain {
  max-width: 900px;
  padding: 16px 0 8px 24px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

@media (max-width: 768px) {
  header {border-bottom: 1px solid var(--border);}

  .contain { padding: 16px 24px 8px; }
}

  .logo {
    position: relative;
  }
  
    .logo .line-h {
      position: absolute;
      right: 0;
      bottom: -24px;
      left: 0;
      margin: 0;
    }

    .logo a, .logo a:visited {
      color: var(--white);
      font-weight: var(--font-weight-thin);
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 2px;
      display: flex;
      gap: 8px;
      align-items: center;
    }



.line-h + section {
  margin-top: 48px;
}

footer {
  position: relative;
  /* static in flow; sits at bottom when content short */
}

  footer .footer-wrap {
    color: var(--text);
    max-width: 900px;
    padding: 16px 24px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: flex;
   
    justify-content: space-between;
    align-items: center;
  }

  footer .emblem {
    width: 80px;
    height: 80px;
    background: #1B578C;
    border: 1px solid var(--border);
    border-radius: 50%;
    transform: translateX(-50%);
  }

    .emblem img {
      width: 80px;
      height: 80px;
      transform: rotate(60deg);
    }

    footer a, footer a:visited {
      color: var(--white);
      font-weight: var(--font-weight-thin);
      text-decoration: underline;
      
    }

    footer a:hover, footer a:focus {
      color: var(--accent);
      text-decoration: none;
    }

    footer p {margin: 0; justify-self: flex-end;}

    footer .line-h {margin: 0;}

@media (max-width: 768px) {
  article { padding: 0 16px; }
  footer .footer-wrap {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding-bottom: 24px;
  }
  footer .emblem {
    order: 0;
    transform: none;
  }
  footer .emblem { order: 0; }
  footer a { order: 1; }
  footer p { order: 2; }
  footer .line-v { display: none; }
}
 /* #endregion */


/* #region Nav */
nav {
  position: relative;
}

/* accessible hide */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 8px;
}

.hamburger {
  display: inline-block;
  width: 24px;
  height: 18px;
  position: relative;
}
.hamburger span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

.nav-list {
  
  display: flex;
  gap: var(--spacing-4, 4px);
  list-style: none;
  margin: 0;
  padding: 0;
 
}
.nav-list a, .nav-list a:visited {
  display: block;
  width: 100%;
  color: var(--text);
  font-size: var(--caption-sm-size);
  text-decoration: none;
  padding: 4px 16px;
}

.nav-list a:hover, .nav-list a:focus {
  color: var(--accent);
}

nav a img, nav a:visited img {
  height: 16px;
  width: auto;
  vertical-align: middle;
  filter: invert(100%);
  opacity: 0.8;
}

nav a:hover img, nav a:focus img {
  filter: invert(46%) sepia(70%) saturate(2060%) hue-rotate(8deg) brightness(102%) contrast(98%);

  opacity: 1;
  transform: scale(1.2);
}

.nav-list a:nth-last-of-type {border-bottom: none;}


/* #endregion */

/* #region Intro */
.intro {
  position: relative;
  margin-top: 24px
}

/*
.intro:before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/src/img/bc-spiro4-dark4.svg');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
}
*/

  .intro h1 {
    padding-bottom: 48px;
  }

  .intro h2 {
    padding-bottom: 24px;
  }
/* #endregion */

/* #region Cube */
.intro, .inner {
  perspective: 900px;
  -webkit-perspective: 900px;
}

.tools {padding-top: 32px}

  .toolbox {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    /*transform: translateX(-18px);*/
  }

    .toolbox .line-h {margin: 0;}

.apps {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  justify-content: center;
  margin: 0 0 48px 0;
  position: relative;
}

.apps .line-v {
  top: 0;
  left: calc(100% + 8px);
}

.app {
  width: 64px;
  height: 64px;
 
  position: relative;
}

  .app > div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
  
  box-sizing: border-box;
}

.app img {
  height: auto;
  display: block;
}

.cube {
  width: 64px;
  height: 64px;
  
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-origin: center center;
  animation: cube-rotate 8s linear infinite;
  will-change: transform;
}

/* pause rotation when user hovers or focuses the cube */
.cube:hover,
.cube:focus-within {
  animation-play-state: paused;
}

.cube > div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: 8px;
  background: var(--secondary);
  
  box-sizing: border-box;
}

.cube img {
  height: auto;
  display: block;
}
/* place faces at half-depth (half of cube size = 32px) */
.front  { transform: rotateX(0deg)    translateZ(32px); }
.back   { transform: rotateX(180deg)  translateZ(32px); }
.right  { transform: rotateY(90deg)   translateZ(32px); }
.left   { transform: rotateY(-90deg)  translateZ(32px); }
.top    { transform: rotateX(90deg)   translateZ(32px); }
.bottom { transform: rotateX(-90deg)  translateZ(32px); }

/* rotate vertically through faces: front -> bottom -> back -> top -> front */
@keyframes cube-rotate {
  /* start at front, short hold */
  0%    { transform: rotateX(0deg) rotateY(0deg); }
  12%   { transform: rotateX(0deg) rotateY(0deg); }

  /* fast -> top */
  15%   { transform: rotateX(90deg) rotateY(0deg); }
  24%   { transform: rotateX(90deg) rotateY(0deg); }

  /* fast -> bottom */
  27%   { transform: rotateX(-90deg) rotateY(0deg); }
  36%   { transform: rotateX(-90deg) rotateY(0deg); }

  /* fast -> left */
  39%   { transform: rotateX(0deg) rotateY(-90deg); }
  48%   { transform: rotateX(0deg) rotateY(-90deg); }

  /* fast -> right */
  51%   { transform: rotateX(0deg) rotateY(90deg); }
  60%   { transform: rotateX(0deg) rotateY(90deg); }

  /* fast -> back */
  63%   { transform: rotateX(180deg) rotateY(0deg); }
  72%   { transform: rotateX(180deg) rotateY(0deg); }

  /* fast -> front and hold until loop */
  75%   { transform: rotateX(0deg) rotateY(0deg); }
  100%  { transform: rotateX(0deg) rotateY(0deg); }
}

.flip {
  transform: scaleY(-1);
}
/* #endregion */

/* #region Underline */
.intro mark {font-weight: var(--font-weight-semibold);}

.underline,
mark.underline {
  position: relative;
  display: inline-block;
  color: inherit;
  background: none;
  padding: 0;
}

.underline::after,
mark.underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.12em;
  background: linear-gradient(90deg, rgba(43, 141, 227,0.54) 0%, rgba(43, 141, 227,0.62) 50%, rgba(43, 141, 227, .64) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.2,.9,.3,1);
  border-radius: 2px;
  pointer-events: none;
}

.underline:hover::after,
.underline:focus::after,
mark.underline:hover::after,
mark.underline:focus::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .underline::after,
  mark.underline::after { transition: none; transform: scaleX(1); }
}

/* Load-on-page variant: animate underline on page load after a short delay */
.underline--load::after,
mark.underline--load::after {
  animation: underline-reveal 420ms cubic-bezier(.2,.9,.3,1) 840ms forwards;
}

@keyframes underline-reveal {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .underline--load::after,
  mark.underline--load::after { animation: none; transform: scaleX(1); }
}

/* #endregion */

/* Header nav: apply underline effect to text-only links (exclude links containing images) */
header .nav-list a:not(:has(img)) {
  position: relative;
  color: inherit;
  background: none;
}
header .nav-list a:not(:has(img))::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.12em;
  background: linear-gradient(90deg, rgba(43, 141, 227,0.54) 0%, rgba(43, 141, 227,0.62) 50%, rgba(43, 141, 227, .64) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.2,.9,.3,1);
  border-radius: 2px;
  pointer-events: none;
}
header .nav-list a:not(:has(img)):hover::after,
header .nav-list a:not(:has(img)):focus::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  header .nav-list a:not(:has(img))::after { transition: none; transform: scaleX(1); }
}

/* #region Lines */
.line-v {
  padding: 0 8px;
  border-top: 1px solid var(--border); 
  border-bottom: 1px solid var(--border); 
  position: absolute;
  top: 12px;
  bottom: 0;
  left: 0;
}

header .line-v {top: 1px;}

  .line-v > div {
      width: 1px;
      height: 100%; 
      background: var(--border);
      position: relative;
  }

  .line-v > div::before {
      content: '';
      position: absolute;
      left: 50%; 
      top: 0; 
      transform: translateX(-50%); 
      width: 0;
      height: 0;
      border-right: 4px solid transparent;  
      border-left: 4px solid transparent; 
      border-bottom: 8px solid var(--border);    
  }

  .line-v > div::after {
      content: '';
      position: absolute;
      left: 50%; 
      bottom: 0;
      transform: translateX(-50%); 
      width: 0;
      height: 0;
      border-right: 4px solid transparent; 
      border-left: 4px solid transparent;
      border-top: 8px solid var(--border); 
  }

.line-h {
  padding: 8px 0;
  border-right: 1px solid var(--border); 
  border-left: 1px solid var(--border); 
  margin: 0 18px;
}

nav .line-h {
  position: absolute;
  right: 0;
  bottom: -32px;
  left: -4px
}

  .line-h > div {
      width: 100%;
      height: 1px; 
      background: var(--border);
      position: relative;
  }

  .line-h > div::before {
      content: '';
      position: absolute;
      left: 0; 
      top: 50%; 
      transform: translateY(-50%); 
      width: 0;
      height: 0;
      border-top: 4px solid transparent;  
      border-bottom: 4px solid transparent; 
      border-right: 8px solid var(--border);    
  }

  .line-h > div::after {
      content: '';
      position: absolute;
      right: 0; 
      top: 50%;
      transform: translateY(-50%); 
      width: 0;
      height: 0;
      border-top: 4px solid transparent; 
      border-bottom: 4px solid transparent;
      border-left: 8px solid var(--border); 
  }
/* #endregion */

/* #region Scrolling list */
.scrolling {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.scrolling__inner {
  display: flex;
  gap: 48px;
  align-items: center;
  will-change: transform;
  /* duration can be adjusted with --scroll-duration */
  animation: scrolling-marquee var(--scroll-duration, 24s) linear infinite;
}

.scrolling__item {
  background: var(--secondary);
  font-weight: var(--font-weight-thin);
  padding: 8px 24px;
  border-radius: 24px;
  color: var(--white);
  flex: 0 0 auto;
}

@keyframes scrolling-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scrolling__inner { animation: none; }
}

/* Utility: visually hide duplicate markers if used */
.scrolling--no-gap { --scroll-duration: 18s; }

/* #endregion */

/* #region Two-column list */
.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}
.two-column li {
  break-inside: avoid;
  padding: 0;
  font-weight: var(--font-weight-thin);
}

@media (max-width: 768px) {
  .two-column {
    grid-template-columns: 1fr;
  }
}

/* #endregion */

/* #region Loading */
.loader {
  padding: 40px;
  display: flex;
  justify-content: center;
}

 .loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 75px;
  width: 126px;
  position: relative;
 }
/* Sequential rotate pattern for `.bc` children inside `.loading`.
   Behavior: step 1 rotates all `.bc` except the first by 30deg,
   step 2 rotates all except the second by another 30deg, etc.
   Supports up to 12 children; adjust `--slots` and keyframes if needed. */
.loading {
  --slots: 12;
  --bc-color-duration: calc(var(--slots) * var(--bc-slot-duration) * 0.35);
  --bc-start-delay: 0.175s;
  --bc-scale-duration: 0.15s;
  --bc-rotate-delay: calc(var(--bc-start-delay) + var(--bc-scale-duration));
}
.loading .bc { transform-origin: 50% 50%; z-index: 1; }

/* total duration covers all slots; per-slot increment is 30deg */
:root { --bc-slot-duration: 0.23s; }
.loading .bc {
  animation-duration: calc(var(--slots) * var(--bc-slot-duration));
  animation-timing-function: cubic-bezier(.92,.42,.6,.37);
  animation-delay: var(--bc-rotate-delay);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* Keyframes generated per child index (1..12). Each keyframe sets the
   cumulative rotation at the end of each slot. Percentages are slot boundaries. */
@keyframes rotate-1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes rotate-2 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(30deg); }
}
@keyframes rotate-3 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(60deg); }
}
@keyframes rotate-4 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}
@keyframes rotate-5 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(120deg); }
}
@keyframes rotate-6 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(150deg); }
}
@keyframes rotate-7 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
@keyframes rotate-8 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(210deg); }
}
@keyframes rotate-9 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(240deg); }
}
@keyframes rotate-10 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}
@keyframes rotate-11 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(300deg); }
}
@keyframes rotate-12 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes scale-in {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes color-1 {
  0.000%   { color: #ffffff; }
  8.333%   { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-2 {
  0.000%   { color: #ffffff; }
  8.333%   { color: #ffffff; }
  16.667%  { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-3 {
  0.000%   { color: #ffffff; }
  16.667%  { color: #ffffff; }
  25.000%  { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-4 {
  0.000%   { color: #ffffff; }
  25.000%  { color: #ffffff; }
  33.333%  { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-5 {
  0.000%   { color: #ffffff; }
  33.333%  { color: #ffffff; }
  41.667%  { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-6 {
  0.000%   { color: #ffffff; }
  41.667%  { color: #ffffff; }
  50.000%  { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-7 {
  0.000%   { color: #ffffff; }
  50.000%  { color: #ffffff; }
  58.333%  { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-8 {
  0.000%   { color: #ffffff; }
  58.333%  { color: #ffffff; }
  66.667%  { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-9 {
  0.000%   { color: #ffffff; }
  66.667%  { color: #ffffff; }
  75.000%  { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-10 {
  0.000%   { color: #ffffff; }
  75.000%  { color: #ffffff; }
  83.333%  { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-11 {
  0.000%   { color: #ffffff; }
  83.333%  { color: #ffffff; }
  91.667%  { color: #2b8de3; }
  100.000% { color: #2b8de3; }
}
@keyframes color-12 {
  0.000%   { color: #ffffff; }
  91.667%  { color: #ffffff; }
  100.000% { color: #2b8de3; }
}
@keyframes stroke-12 {
  0.000%   { stroke-width: 0.5; }
  91.667%  { stroke-width: 0.5; }
  100.000% { stroke-width: 1; }
}

.loading .bc:nth-child(1)  { animation-name: rotate-1, color-1; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(2)  { animation-name: rotate-2, color-2; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(3)  { animation-name: rotate-3, color-3; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(4)  { animation-name: rotate-4, color-4; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(5)  { animation-name: rotate-5, color-5; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(6)  { animation-name: rotate-6, color-6; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(7)  { animation-name: rotate-7, color-7; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(8)  { animation-name: rotate-8, color-8; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(9)  { animation-name: rotate-9, color-9; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(10) { animation-name: rotate-10, color-10; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(11) { animation-name: rotate-11, color-11; animation-duration: calc(var(--slots) * var(--bc-slot-duration)), var(--bc-color-duration); animation-timing-function: cubic-bezier(0.02, 0, 1, 1), linear; animation-delay: var(--bc-rotate-delay), var(--bc-rotate-delay); }
.loading .bc:nth-child(12) { animation-name: rotate-12; z-index: 100; }
.loading .bc:nth-child(12) use {
  animation-name: stroke-12;
  animation-duration: calc(var(--slots) * var(--bc-slot-duration));
  animation-timing-function: ease-in-out;
  animation-delay: var(--bc-rotate-delay);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .loading .bc { animation: none; }
}

  .bc {
    height: auto;
    width: 100%;
    position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0; 
    color: #ffffff;
  }
  .bc svg {
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    transform-origin: 50% 50%;
    animation: scale-in var(--bc-scale-duration) ease-out var(--bc-start-delay) both;
  }

  .bc use {
    stroke: currentColor;
    stroke-width: 0.5;
  }
/* #endregion */