.homepage-hero {
  display: flex;
  flex-direction: column;
  position: relative;

  background-color: var(--color-dark-blue-darkened);
}

.homepage-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(90% 60% at 100% 100%, var(--color-dark-blue) 0%, transparent 50%);
  pointer-events: none;
}

.homepage-hero .homepage-hero__image {
  overflow: hidden;
  object-fit: cover;
  max-width: 100%;
  min-height: 20rem;
}

.homepage-hero .homepage-hero__content {
  position: relative;
  padding: var(--space-md);
  margin-top: -5rem;
  z-index: 2;
}

.homepage-hero .homepage-hero__content::before {
  content: "";
  position: absolute;
  top: -5rem;
  left: 0;
  width: 100%;
  height: 10rem;
  background: linear-gradient(
    to bottom,
    hsla(var(--color-dark-blue-hsl), 0) 0%,
    hsla(var(--color-dark-blue-hsl), 0.6) 40%,
    hsla(var(--color-dark-blue-hsl), 0.95) 85%, 
    var(--color-dark-blue-darkened) 99%);
}

.homepage-hero .homepage-hero__speech-bubble {
  position: absolute;
  top: 2rem;
  left: 50%;
  right: -0.5rem;
  max-width: 13.25rem;
  height: auto;
  border-radius: 1.5rem 1.5rem 1.5rem 0.5rem;
  z-index: 3;
  padding: 0.75rem;
  backdrop-filter: blur(0.5rem);
  background-color: hsla(var(--color-light-blue-hsl), 0.85);
}

.homepage-hero .homepage-hero__inner-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;

  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);

  /* Inset box shadow used to give a gradient border effect */
  box-shadow:
    0px 2px 10px 0px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 1px rgba(255, 255, 255, 0.15);
}

.homepage-hero .scrolling-words {
  height: 2.5rem;
  margin: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column; 
  align-items: center;
}

.homepage-hero .scrolling-words ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; 
  align-items: center;
}

.homepage-hero .scrolling-words li {
  display: flex;
  margin: 0 auto;
  text-align: center;
  height: 2.5rem;
  list-style: none; 
}

@media not (prefers-reduced-motion) {
  .homepage-hero .scrolling-words ul {
    animation: scrollUp 9s infinite;
    animation-timing-function: cubic-bezier(.05,.74,.23,.98);
  }
}

@media (min-width: 600px) {
  .homepage-hero {
    flex-direction: row;
  }

  .homepage-hero::after {
    background: radial-gradient(29.61% 100% at 100% 0%, var(--color-dark-blue) 0%, transparent 100%);
  }

  .homepage-hero .homepage-hero__content {
    margin-top: 0;
    padding: var(--space-xl);
  }

  .homepage-hero .homepage-hero__content::before {
    top: 0;
    left: -8em;
    width: 8rem;
    height: 100%;
    background: linear-gradient(
      to right,
      hsla(var(--color-dark-blue-hsl), 0) 0%,
      hsla(var(--color-dark-blue-hsl), 0.6) 40%,
      hsla(var(--color-dark-blue-hsl), 0.95) 85%, 
      var(--color-dark-blue-darkened) 99%);
  }

  .homepage-hero .homepage-hero__speech-bubble {
    top: 20%;
    left: 18%;
    right: 54%;
    max-width: 13.25rem;
  }
}

@media (min-width: 1000px) {
  .homepage-hero .homepage-hero__inner-panel {
    padding: var(--space-3xl) var(--space-2xl);
  }

  .homepage-hero .homepage-hero__speech-bubble {
    top: 22%;
    left: 22%;
    right: 57%;
  }
}

/* Hero text animation keyframes */

/* 
  Hero text animation keyframes

  Any change to the quantity of items in the animation means you need to update
  the keyframes here. Unfortunately vanilla CSS doesn't support logic functions
  so you will need to follow the logic of this SASS for loop and output the
  results manually. To make it easier, you can open this CodePen, make the change
  there and then inspect the page to get the vanilla CSS result.
  
  https://codepen.io/azrikahar/pen/NWNEByV?editors=1100

  The keyframes follow this logic:

  $item-count: 9; // 1 less than the actual number of items

  @keyframes scrollUp {
  @for $i from 1 through ($item-count - 1) {
    #{($i * 100 / $item-count) - 10%}, #{$i * 100 / $item-count %} {
      transform: translateY((-100% / $item-count) * $i);
    }
  }
}
*/

@keyframes scrollUp {
  1.1%, 11.1% {
    transform: translateY(-10%);
  }

  12.2%, 22.2% {
      transform: translateY(-20%);
  }
  23.3%, 33.3% {
      transform: translateY(-30%);
  }
  34.4%, 44.4% {
      transform: translateY(-40%);
  }
  45.5%, 55.5% {
      transform: translateY(-50%);
  }
  56.6%, 66.6% {
      transform: translateY(-60%);
  }
  67.7%, 77.7% {
      transform: translateY(-70%);
  }
  78.8%, 88.8% {
      transform: translateY(-80%);
  }
  89.9%, 99.9% {
      transform: translateY(-90%);
  }
}