.homepage-intro { position: relative; z-index: 1; }
.species-overview {
  margin: -64px auto 2rem;
  max-width: 1440px;
}
.species-overview__scroll { overflow-x: auto; }
.species-overview__scroll-hint { display: none; color: #52636b; font-size: .8rem; padding: .5rem 1rem 0; margin-bottom: 0; }
.species-overview__canvas { display: block; width: 100%; min-width: 960px; }
.species-overview--empty .species-overview__canvas { min-width: 0; }
.species-overview__clade { font: 14px system-ui, sans-serif; fill: #3c6679; stroke: white; stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; }
.species-overview__name { font: 23px 'Comfortaa', sans-serif; fill: #1d313b; }
.species-overview__scientific { font: italic 18px system-ui, sans-serif; fill: #52636b; }
.species-overview__tip { text-decoration: none; }
.species-overview__tip:hover .species-overview__name,
.species-overview__tip:focus .species-overview__name { fill: #0072bc; text-decoration: underline; }
.species-overview__tip:focus { outline: 2px solid #0072bc; outline-offset: 5px; }
.species-overview figcaption { padding: 0 2rem; text-align: center; color: #52636b; font-size: .85rem; }
.species-overview figcaption span { display: block; }
.species-overview__database { transform-origin: 160px 103px; animation: species-database-arrive .4s ease-out both; }
.species-overview__branch {
  stroke-dasharray: 1;
  animation: species-branch-grow var(--grow-duration) var(--reveal-delay) linear both;
}
.species-overview__node, .species-overview__clade {
  animation: species-reveal .15s var(--reveal-delay) ease-out both;
}
.species-overview__tip { animation: species-reveal .225s var(--reveal-delay) ease-out both; }
@keyframes species-database-arrive {
  0% { opacity: 0; transform: translateY(14px) scale(.9); }
  70% { opacity: 1; transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes species-branch-grow {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes species-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .species-overview * { animation: none; }
}
@media (max-width: 980px) {
  .species-overview { margin-top: 0; }
  .species-overview__scroll-hint { display: block; }
}
@media (max-width: 600px) {
  .species-overview__canvas { min-width: 740px; }
  .species-overview--empty .species-overview__canvas { min-width: 0; }
  .species-overview__name { font-size: 28px; }
  .species-overview__scientific { font-size: 20px; }
}
/* The search results container is taller than its contents. Only the results
   themselves should intercept clicks on the species overview below it. */
#autocomplete-output { pointer-events: none; }
#autocomplete-output .autocomplete-list { pointer-events: auto; }