.featured-card-1 {
  width: 100%;
  position: relative;
  container-type: inline-size;
}

.featured-card-1 svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.featured-card-1.is--landscape svg {
  width: 117.371%;
  margin: 0 -8.68545%;
}

.featured-card-1.is--portrait {
  display: none;
}

@media (orientation: portrait) {
  .featured-card-1.is--landscape {
    display: none;
  }

  .featured-card-1.is--portrait {
    display: block;
  }

  .featured-card-1.is--portrait svg {
    width: 110.567%;
    margin: -1.15979% -5.28351% -9.40722%;
  }
}

/* Held while the card fades in. Paused rather than removed: several of the
   idle loops carry a negative animation-delay so they start mid-cycle, and
   `animation: none` parks the node at its authored position instead. On
   release the animation resolved straight to its delayed phase and the
   floating pills snapped a few px. Paused holds them AT that phase, so
   there is nothing to jump to. */
.featured-card-1.is--idle-held, .featured-card-1.is--idle-held * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: no-preference) {
  .featured-card-1 path[stroke-dasharray="11.95 87.65"] {
    animation: 3.4s linear infinite fc1-flow;
  }

  .featured-card-1 path[d^="M36.36 71.52"], .featured-card-1 path[d^="M-17.0142 94.8201"] {
    animation-delay: 0s;
  }

  .featured-card-1 path[d^="M713.64 91.4399"], .featured-card-1 path[d^="M449.014 108.54"] {
    animation-delay: .28s;
  }

  .featured-card-1 path[d^="M36.36 201"], .featured-card-1 path[d^="M-17.0142 184"] {
    animation-delay: .55s;
  }

  .featured-card-1 path[d^="M713.64 250.8"], .featured-card-1 path[d^="M449.014 218.3"] {
    animation-delay: .83s;
  }

  .featured-card-1 path[d^="M175.8 469.92"], .featured-card-1 path[d^="M78.9329 369.22"] {
    animation-delay: 1.1s;
  }

  .featured-card-1 path[d^="M574.2 469.92"], .featured-card-1 path[d^="M353.067 369.22"] {
    animation-delay: 1.38s;
  }

  .featured-card-1 path[stroke="#176FF0"] {
    transform-box: fill-box;
    transform-origin: center;
    animation: 2.9s ease-in-out infinite fc1-node;
  }

  .featured-card-1 path[d^="M713.64 91.4399"] + path[stroke="#176FF0"], .featured-card-1 path[stroke="#176FF0"]:nth-of-type(2n) {
    animation-delay: .7s;
  }

  .featured-card-1 rect[width="8"][height="8"] {
    transform-box: fill-box;
    transform-origin: center;
    animation: 2.4s ease-in-out infinite fc1-dot;
  }

  .featured-card-1 rect[width="8"][height="8"][fill="#3B82F6"] {
    animation-delay: .8s;
  }
}

@keyframes fc1-flow {
  from {
    stroke-dashoffset: 99.6px;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fc1-node {
  0%, 100% {
    opacity: .75;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes fc1-dot {
  0%, 100% {
    opacity: .7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .featured-card-1 .fc1-float {
    transform-box: view-box;
    will-change: transform;
    animation: 5.2s ease-in-out infinite fc1-float;
  }

  .featured-card-1 .fc1-float-2 {
    animation-duration: 4.6s;
    animation-delay: -1s;
  }

  .featured-card-1 .fc1-float-3 {
    animation-duration: 5.8s;
    animation-delay: -2.1s;
  }

  .featured-card-1 .fc1-float-4 {
    animation-duration: 4.9s;
    animation-delay: -3.2s;
  }

  .featured-card-1 .fc1-float-5 {
    animation-duration: 5.5s;
    animation-delay: -1.6s;
  }

  .featured-card-1 path[d^="M375 163.8"], .featured-card-1 path[d^="M213.5 147.9"] {
    transform-box: fill-box;
    transform-origin: center;
    animation: 3.6s ease-in-out infinite fc1-lock;
  }
}

@keyframes fc1-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes fc1-lock {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07);
  }
}