.svg-wrapper {
  width: 100%;
  max-width: 50vw;
}

@keyframes move-left {
  to {
    transform: translateY(0);
  }
}

@keyframes move-right {
  to {
    transform: translateY(0);
  }
}

@keyframes grow-dot {
  to {
    transform: scale(1);
  }
}

#svg-sagittal{
  animation: move-left 1s forwards;
  transform: translateX(20px);
}

#svg-ai{
  animation: move-right 1s forwards;
  transform: translateX(-20px);
}

#svg-dot {
  transform-origin: 363px 43px;
  transform: scale(0.3);
  animation: grow-dot 1s forwards;
}

#svg-sagittal, #svg-dot, #svg-ai{
  animation-delay: 1500ms;
}

#s, #a, #g, #i1-bottom, #t1-bottom {
  animation: enter-from-left 1s ease-out forwards;
}

@keyframes enter-from-left {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

#dot {
  animation: grow-dot 1s forwards;
  animation-delay: 700ms;
  transform: scale(0);
  transform-origin: 363px 43px;
}

@keyframes grow-dot {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

#i1-top, #t1-top, #t2, #a2, #l {
  animation: enter-from-right 1s ease-out forwards;
}

#a3, #i2-bottom, #i2-top {
  animation: dot-ai-enter-from-right 1s ease-out forwards;
}

@keyframes enter-from-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes dot-ai-enter-from-right {
  from {
    transform: translateX(200%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .animations > section > div {
      animation: fade-in linear both, fade-out linear both;
      animation-timeline: view();
      animation-range: 5vh 35vh, 100vh 115vh;
    }
  }
}

.team-section {
  width: 100%;
  align-items: center;
}

.team {
  padding: 0;
  margin: auto 10px;
  display: flex;
  gap: 0.5em;
  justify-content: center;
}

.team-member {
  border: 0.2em solid white;
  border-radius: 50%;
  flex: 1;
  max-width: 100px;
  aspect-ratio: 1;
  object-fit: cover;
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: .25em .25em .5em #7a7b7b;
  background-size: cover;
  z-index: 1;
  scale: 1;
  transition: scale 0.5s;
}

.team-member:hover {
  scale: 1.5;
  z-index: 3;
  transition: scale 0.5s;
}

.team-member:hover + .team-member,
.team-member:has( + .team-member:hover) {
  scale: 1.2;
  z-index: 2;
  transition: scale 0.5s;
  transition-delay: 0.1s;
}

.could-be-you {
  filter: grayscale();
}

.quotes {
  margin: 2em 0;
  position: relative;
  width: 100%;
  height: 5em;
  justify-content: center;
}

.quote {
  color: darkgray;
  font-style: italic;
  font-size: x-large;
  font-weight: lighter;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.quote-text::after, .quote-text::before {
  font-family: 'Times New Roman', Times, serif;
  font-size: 2.4em;
}

.quote-text::before {
  content: open-quote;
}

.quote-text::after {
  content: close-quote;
}

.quote-text {
  opacity: 1;
  transition: opacity 0.3s;
  transition-delay: 0.3s;
  position: relative;
}

.quote-text > a {
  color: inherit;
  cursor: pointer;
}

.quote-author {
  transition: opacity 0.3s;
  transition-delay: .8s;
}

#quote0 * {
  font-family: 'Bradley Hand', cursive;
  color: black;
  padding: 0.1em;
}

.inactive > div {
  /* display: none; */
  opacity: 0;
  transition: opacity 0.3s;
}

.recruiting {
  color: #7a7b7b;
  font-size: small;
  padding: 5px;
  margin: 5px;
  text-align: center;
}

.recruiting a {
  color: #f28b2a;

}

@media (width < 600px) {
  .svg-wrapper {
    width: 100%;
    max-width: 80vw;
  }

  .quote {
    font-size: medium !important;
  }
}

a.cta-button {
  padding: 0.5em;
  border: none;
  border-radius: 30px;
  background-color: #f28b2a;
  color: #ffffff;
  cursor: pointer;
  font-size: medium;
  font-weight: bold;
  text-decoration: none;
  display: block;
  width: fit-content;
  margin-top: 0.4em;
}