@layer components {
  .hero {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--space-9) var(--space-4);
    background:
      radial-gradient(
        120% 90% at 78% 12%,
        rgb(255 255 255 / 0.12),
        transparent 55%
      ),
      radial-gradient(90% 80% at 12% 92%, rgb(0 0 0 / 0.12), transparent 60%),
      var(--color-brand-magenta);
    scroll-snap-align: start;
  }

  .hero__scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .hero__pattern {
    position: absolute;
    inset: 0;
    background: var(--color-cream);
    -webkit-mask: url(../../../../assets/images/hero-pattern.svg) 0 0 / 300px
      300px repeat;
    mask: url(../../../../assets/images/hero-pattern.svg) 0 0 / 300px 300px
      repeat;
    opacity: 0.08;
  }

  .hero__badge {
    position: absolute;
    left: -120px;
    top: -70px;
    width: 340px;
    aspect-ratio: 1;
    border: 22px solid var(--color-cream);
    border-radius: 50%;
    --enter-x: -70px;
    --enter-y: -50px;
    --enter-delay: 560ms;
    --float-dur: 11s;
    --float-delay: -5s;
  }

  .hero__badge-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .hero__badge-text {
    font-family: var(--font-family-display);
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    fill: var(--color-cream);
    transform: rotate(25deg);
    transform-origin: 100px 100px;
    transform-box: view-box;
  }

  @media (max-width: 1024px) {
    .hero__badge {
      left: -80px;
      top: -50px;
      width: 240px;
      border-width: 16px;
    }
  }

  .hero__lemons {
    --enter-y: 90px;
    --enter-delay: 240ms;
  }

  .hero__cane {
    position: absolute;
    right: 0;
    top: -50px;
    width: 180px;
    z-index: 0;
    pointer-events: none;
    rotate: 180deg;
    --enter-y: -90px;
    --enter-delay: 160ms;
    --float-dur: 9s;
    --float-delay: -2s;
  }

  .hero__lata {
    position: absolute;
    right: 0;
    bottom: -120px;
    width: 300px;
    z-index: 0;
    pointer-events: none;
    --enter-x: 150px;
    --enter-y: 40px;
    --enter-delay: 320ms;
    --float-dur: 8s;
    --float-delay: -4s;
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
  }

  .hero__title-box {
    position: relative;
    display: inline-block;
  }

  .hero__title {
    position: relative;
    z-index: 1;
    font-size: 260px;
  }

  .hero__lemon {
    position: absolute;
    z-index: 0;
    right: -14%;
    bottom: -30%;
    width: 200px;
    pointer-events: none;
  }

  .hero__tagline {
    font-family: var(--font-family-script);
    font-size: var(--font-size-3xl);
    line-height: 1.2;
    color: var(--color-cream);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
  }

  .hero__actions .btn {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
  }

  .hero__divider {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 200px;
    pointer-events: none;
  }

  .hero__divider-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .hero__divider-fill {
    fill: var(--color-cream);
  }

  /* Trails the silhouette a little inside the cream. */
  .hero__divider-line {
    fill: none;
    stroke: var(--color-brand-green);
    stroke-width: 2;
  }

  @media (max-width: 1024px) {
    .hero__divider {
      height: 140px;
    }

    .hero__title {
      font-size: 190px;
    }

    .hero__lemon {
      width: 150px;
    }
  }

  @media (max-width: 768px) {
    .hero__badge,
    .hero__cane {
      display: none;
    }

    .hero__divider {
      height: 90px;
    }

    .hero__lata {
      width: 210px;
      bottom: -160px;
    }

    .hero__title {
      font-size: 120px;
    }

    .hero__lemon {
      width: 110px;
    }
  }

  @media (max-width: 480px) {
    .hero__title {
      font-size: 88px;
    }

    .hero__lemon {
      width: 80px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero__cane,
    .hero__lata,
    .hero__badge {
      animation:
        hero-enter 1000ms var(--reveal-ease) var(--enter-delay, 0ms) both,
        hero-float var(--float-dur, 7s) ease-in-out var(--float-delay, 0ms)
          infinite;
    }

    .hero__lemons {
      animation: hero-enter 1000ms var(--reveal-ease) var(--enter-delay, 0ms)
        both;
    }

    .hero__lemon {
      animation:
        hero-lemon-drop 900ms var(--reveal-ease) 700ms both,
        hero-lemon-spin 16s linear infinite;
    }
  }

  @keyframes hero-enter {
    from {
      opacity: 0;
      translate: var(--enter-x, 0) var(--enter-y, 40px);
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes hero-float {
    50% {
      transform: translateY(-16px);
    }
  }

  @keyframes hero-lemon-drop {
    from {
      opacity: 0;
      translate: 60vw 0;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes hero-lemon-spin {
    to {
      rotate: 360deg;
    }
  }
}