@property --bob {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@layer components {
  .home-culture {
    --cans-height: 200px;
    --reveal-stagger: 120ms;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-bottom: var(--cans-height);
    background: var(--color-cream);
    scroll-snap-align: start;
  }

  .home-culture__cans {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--cans-height);
    background-image: url("../../../../assets/images/latas.webp");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: auto var(--cans-height);
    z-index: 2;
    pointer-events: none;
  }

  .home-culture__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-6);
  }

  .home-culture__badges {
    position: relative;
    width: 100%;
    min-height: 28rem;
  }

  .home-culture__brand {
    position: relative;
    display: grid;
    place-items: center;
  }

  .home-culture__lemons {
    --lemon-inset-y: calc(var(--cans-height) - 70px);
  }

  .home-culture__lemon--main {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 240px;
    pointer-events: none;
    transform: translate(-50%, -52%);
  }

  @keyframes culture-lemon-spin {
    from {
      transform: translate(-50%, -52%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -52%) rotate(360deg);
    }
  }

  .home-culture__word {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-family-display);
    font-size: var(--font-size-5xl);
    line-height: 0.9;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: transparent;
    background-color: var(--color-brand-magenta);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.28' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 8 0 0 0 -5.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0.05em 0.06em 0 var(--color-brand-magenta-dark));
  }

  @supports not (background-clip: text) {
    .home-culture__word {
      color: var(--color-brand-magenta);
      background: none;
    }
  }

  .home-culture__aside {
    justify-self: center;
    max-width: 24rem;
    text-align: center;
  }

  .home-culture__eyebrow {
    margin: 0;
    font-family: var(--font-family-script);
    font-size: var(--font-size-3xl);
    line-height: 1;
    color: var(--color-brand-magenta);
  }

  .home-culture__script {
    margin: 0 0 var(--space-3);
    font-family: var(--font-family-display);
    font-size: var(--font-size-3xl);
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--color-brand-green);
  }

  .home-culture__text {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--color-brand-magenta);
  }

  .home-culture__badge {
    position: absolute;
    transform: translate(-50%, calc(-50% + var(--bob)));
    animation: badge-bob var(--bob-dur, 3s) ease-in-out var(--bob-delay, 0s)
      infinite;
    will-change: transform;
    backface-visibility: hidden;
  }

  @keyframes badge-bob {
    0%,
    100% {
      --bob: 0px;
    }
    50% {
      --bob: -12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-culture__badge {
      animation: none;
    }
  }

  .home-culture__badge--treino {
    top: 30%;
    left: 46%;
    --bob-dur: 3s;
    --bob-delay: 0s;
  }

  .home-culture__badge--cana {
    top: 50%;
    left: 66%;
    --bob-dur: 3.6s;
    --bob-delay: -1.2s;
  }

  .home-culture__badge--produto {
    top: 58%;
    left: 32%;
    --bob-dur: 3.2s;
    --bob-delay: -2s;
  }

  .home-culture__corner {
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }

  .home-culture__corner--tl {
    top: -10px;
    left: -20px;
    width: 150px;
    transform: scaleY(-1) rotate(20deg);
  }

  .home-culture__corner--br {
    bottom: 20px;
    right: 0px;
    width: 150px;
    transform: scaleX(-1) rotate(6deg);
  }

  @media (max-width: 1024px) {
    .home-culture {
      --cans-height: 130px;
    }

    .home-culture__inner {
      grid-template-columns: 1fr;
      gap: var(--space-7);
    }

    .home-culture__brand {
      order: -1;
    }

    .home-culture__lemon--main,
    .home-culture__lemons {
      display: none;
    }

    .home-culture__badges {
      position: static;
      min-height: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-2);
    }

    .home-culture__badge {
      position: static;
      width: 7rem;
      margin: 0;
      font-size: var(--font-size-md);
      transform: none;
      animation: none;
    }

    .home-culture__aside {
      max-width: 32rem;
      margin-inline: auto;
      text-align: center;
    }

    .home-culture__corner {
      display: none;
    }
  }
}

/* Staggers each block after the one before it, since reveal.js restarts --i
   inside every group. The lemon keeps spinning once it has been revealed. */
@layer utilities {
  .home-culture__brand .reveal.is-revealed {
    animation-delay: calc((var(--i, 0) + 3) * var(--reveal-stagger));
  }

  .home-culture__aside .reveal.is-revealed {
    animation-delay: calc((var(--i, 0) + 5) * var(--reveal-stagger));
  }

  @media (prefers-reduced-motion: no-preference) {
    .home-culture__lemon--main.reveal.is-revealed {
      animation:
        reveal-in var(--reveal-duration) var(--reveal-ease)
          calc((var(--i, 0) + 3) * var(--reveal-stagger)) backwards,
        culture-lemon-spin 24s linear infinite;
    }

    /* Revealing would otherwise drop the badges' idle bob. */
    @media (min-width: 1025px) {
      .home-culture__badge.reveal.is-revealed {
        animation:
          reveal-in var(--reveal-duration) var(--reveal-ease)
            calc(var(--i, 0) * var(--reveal-stagger)) backwards,
          badge-bob var(--bob-dur, 3s) ease-in-out var(--bob-delay, 0s) infinite;
      }
    }
  }
}