/* The SFC "light trace" logo: the line of the logo is drawn by a pulse of
   light, held, then fades, in a 4.4s loop that runs until the page that shows
   it goes away. Self-contained: every selector, keyframe and custom property
   uses the .brand-trace / .et- prefixes and it styles nothing outside its own
   markup. Used by the entrance page and the loading screen. */
.brand-trace {
  width: 100%;
  max-width: 460px;
  height: auto;
}

.brand-trace__all {
  animation: et-fade 4.4s linear infinite;
}

.brand-trace__ghost {
  opacity: 0.12;
}

.brand-trace__bloom {
  filter: blur(10px) sepia(1) saturate(7) hue-rotate(-12deg) brightness(1.15);
}

.brand-trace__mask {
  fill: none;
  stroke: #fff;
  stroke-width: 64;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-trace__tagline {
  transform-box: fill-box;
  transform-origin: left center;
  animation: et-tagline 4.4s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}

.et-r0 {
  stroke-dasharray: 1 1;
  animation: et-r0 4.4s linear infinite;
}

.et-g0 {
  stroke-dasharray: 0.14 3;
  animation: et-g0 4.4s linear infinite;
}

@keyframes et-r0 {
  0%,
  2.3% {
    stroke-dashoffset: 1;
  }

  22.7%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes et-g0 {
  0%,
  2.3% {
    stroke-dashoffset: 0.14;
  }

  22.7%,
  100% {
    stroke-dashoffset: -1.1;
  }
}

.et-r1 {
  stroke-dasharray: 1 1;
  animation: et-r1 4.4s linear infinite;
}

.et-g1 {
  stroke-dasharray: 0.14 3;
  animation: et-g1 4.4s linear infinite;
}

@keyframes et-r1 {
  0%,
  18.2% {
    stroke-dashoffset: 1;
  }

  34.1%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes et-g1 {
  0%,
  18.2% {
    stroke-dashoffset: 0.14;
  }

  34.1%,
  100% {
    stroke-dashoffset: -1.1;
  }
}

.et-r2 {
  stroke-dasharray: 1 1;
  animation: et-r2 4.4s linear infinite;
}

.et-g2 {
  stroke-dasharray: 0.14 3;
  animation: et-g2 4.4s linear infinite;
}

@keyframes et-r2 {
  0%,
  29.5% {
    stroke-dashoffset: 1;
  }

  36.4%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes et-g2 {
  0%,
  29.5% {
    stroke-dashoffset: 0.14;
  }

  36.4%,
  100% {
    stroke-dashoffset: -1.1;
  }
}

.et-r3 {
  stroke-dasharray: 1 1;
  animation: et-r3 4.4s linear infinite;
}

.et-g3 {
  stroke-dasharray: 0.14 3;
  animation: et-g3 4.4s linear infinite;
}

@keyframes et-r3 {
  0%,
  31.8% {
    stroke-dashoffset: 1;
  }

  52.3%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes et-g3 {
  0%,
  31.8% {
    stroke-dashoffset: 0.14;
  }

  52.3%,
  100% {
    stroke-dashoffset: -1.1;
  }
}

.et-r4 {
  stroke-dasharray: 1 1;
  animation: et-r4 4.4s linear infinite;
}

.et-g4 {
  stroke-dasharray: 0.14 3;
  animation: et-g4 4.4s linear infinite;
}

@keyframes et-r4 {
  0%,
  47.7% {
    stroke-dashoffset: 1;
  }

  56.8%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes et-g4 {
  0%,
  47.7% {
    stroke-dashoffset: 0.14;
  }

  56.8%,
  100% {
    stroke-dashoffset: -1.1;
  }
}

.et-r5 {
  stroke-dasharray: 1 1;
  animation: et-r5 4.4s linear infinite;
}

.et-g5 {
  stroke-dasharray: 0.14 3;
  animation: et-g5 4.4s linear infinite;
}

@keyframes et-r5 {
  0%,
  52.3% {
    stroke-dashoffset: 1;
  }

  65.9%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes et-g5 {
  0%,
  52.3% {
    stroke-dashoffset: 0.14;
  }

  65.9%,
  100% {
    stroke-dashoffset: -1.1;
  }
}

.et-r6 {
  stroke-dasharray: 1 1;
  animation: et-r6 4.4s linear infinite;
}

.et-g6 {
  stroke-dasharray: 0.14 3;
  animation: et-g6 4.4s linear infinite;
}

@keyframes et-r6 {
  0%,
  61.4% {
    stroke-dashoffset: 1;
  }

  72.7%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes et-g6 {
  0%,
  61.4% {
    stroke-dashoffset: 0.14;
  }

  72.7%,
  100% {
    stroke-dashoffset: -1.1;
  }
}

@keyframes et-tagline {
  0%,
  58.5% {
    transform: scaleX(0);
  }

  70.5%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes et-fade {
  0%,
  79.5% {
    opacity: 1;
  }

  88.5%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-trace__all,
  .brand-trace__tagline,
  .brand-trace__mask[class*='et-r'],
  .brand-trace__mask[class*='et-g'] {
    animation: none;
  }

  .brand-trace__mask[class*='et-r'] {
    stroke-dashoffset: 0;
  }

  .brand-trace__mask[class*='et-g'] {
    display: none;
  }

  .brand-trace__tagline {
    transform: none;
  }
}