/* Hero: Berryburrow at golden hour, the logo bouncing in, the eight friends popping up out of the grass. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(760px, 100svh);
  display: flex; align-items: flex-start;
  padding: clamp(110px, 16vh, 160px) 0 0;
  color: #fff;
  background: var(--forest-deep);
}
.hero__sky { position: absolute; inset: -6% -2% 0; z-index: -3; will-change: transform; }
.hero__sky img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: saturate(1.08); animation: kenburns 28s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.5%, 1%); } }
.hero__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 22% 38%, rgba(7, 38, 25, .78), transparent 70%),
    linear-gradient(180deg, rgba(7, 38, 25, .55) 0%, rgba(7, 38, 25, .05) 40%, rgba(7, 38, 25, .2) 75%, rgba(255, 246, 228, 0) 100%);
}
.hero__fx { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero__content { position: relative; z-index: 2; }
.hero__logo {
  width: clamp(260px, 38vw, 520px);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35));
  transform-origin: 50% 90%;
  animation: logo-in 1.2s var(--ease-spring) .1s both, logo-bob 5s ease-in-out 1.4s infinite;
}
@keyframes logo-in {
  0% { opacity: 0; transform: translateY(-60px) scale(.6, 1.3); }
  55% { opacity: 1; transform: translateY(8px) scale(1.12, .86); }
  75% { transform: translateY(-4px) scale(.96, 1.05); }
  100% { transform: none; }
}
@keyframes logo-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.hero__tag {
  margin-top: 10px; font-size: clamp(28px, 3.1vw, 44px); color: #FFE7A6;
  text-shadow: 0 3px 0 #7A4E1F, 0 10px 24px rgba(0, 0, 0, .45);
  animation: rise .9s var(--ease-out) .55s both;
}
.hero__sub {
  max-width: 34ch; margin: 14px 0 28px; font-size: clamp(18px, 1.7vw, 21px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
  animation: rise .9s var(--ease-out) .7s both;
}
.hero__ctas { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; animation: rise .9s var(--ease-out) .85s both; }
.hero__ctas .badge { min-height: 48px; padding: 0 14px; font-size: 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.hero__button {
  position: absolute; z-index: 1; right: clamp(16px, 16vw, 300px); top: clamp(110px, 17vh, 190px);
  width: clamp(110px, 14vw, 210px); pointer-events: none;
}
.hero__button img { animation: float 6s ease-in-out infinite; filter: drop-shadow(0 0 28px rgba(255, 214, 102, .9)); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-22px) rotate(4deg); } }

/* The eight friends stand on the grass line. */
.hero__friends {
  position: absolute; z-index: 3; right: max(8px, calc((100vw - 1320px) / 2)); bottom: 52px;
  width: min(780px, 52vw); display: flex; justify-content: center; align-items: flex-end;
}
.hero__content { max-width: min(600px, 46vw); margin-left: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
.hero-friend {
  position: relative; flex: 0 1 150px; margin: 0 -6px; border: 0; padding: 0; background: none; cursor: pointer;
  transform-origin: 50% 100%;
  animation: friend-pop .9s var(--ease-spring) both; animation-delay: calc(1s + var(--i) * .09s);
}
.hero-friend:nth-child(odd) { margin-bottom: 14px; }
.hero-friend img { width: 100%; transform-origin: 50% 100%; animation: breathe 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); filter: drop-shadow(0 12px 10px rgba(20, 40, 10, .35)); }
.hero-friend .cheer { position: absolute; inset: 0; opacity: 0; }
.hero-friend:hover .idle, .hero-friend:focus-visible .idle, .hero-friend.is-cheer .idle { opacity: 0; }
.hero-friend:hover .cheer, .hero-friend:focus-visible .cheer, .hero-friend.is-cheer .cheer { opacity: 1; animation: hop .6s var(--ease-spring); }
.hero-friend__name {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 8px) scale(.6); opacity: 0;
  padding: 6px 12px; border-radius: 99px; background: var(--cream-light); color: var(--ink);
  font: 700 15px/1 "Fredoka", sans-serif; white-space: nowrap; box-shadow: var(--shadow-soft);
  transition: transform .35s var(--ease-spring), opacity .2s;
}
.hero-friend:hover .hero-friend__name, .hero-friend:focus-visible .hero-friend__name, .hero-friend.is-cheer .hero-friend__name { opacity: 1; transform: translate(-50%, -4px) scale(1); }
@keyframes friend-pop { 0% { opacity: 0; transform: translateY(120%) scale(.6, 1.2); } 60% { opacity: 1; transform: translateY(-10%) scale(1.08, .92); } 100% { transform: none; } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
@keyframes hop { 0% { transform: translateY(0) scale(1.1, .9); } 40% { transform: translateY(-26px) scale(.95, 1.06); } 100% { transform: none; } }

.hero__grass { position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(70px, 9vw, 140px); }

@media (min-width: 761px) { .hero__tag { white-space: nowrap; } }
@media (max-width: 760px) {
  .hero { min-height: 860px; padding-top: 96px; }
  .hero__content { max-width: none; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero__logo { width: min(78vw, 360px); }
  .hero__sub { margin-inline: auto; }
  .hero__ctas { justify-content: center; }
  .hero__button { top: 84px; right: 6px; width: 78px; }
  .hero__friends { right: 50%; transform: translateX(50%); bottom: 34px; flex-wrap: wrap; width: 100%; max-width: 420px; row-gap: 0; }
  .hero-friend { flex: 0 0 25%; margin: 0 0 -18px; }
  .hero-friend:nth-child(odd) { margin-bottom: -18px; }
  .hero-friend__name { font-size: 13px; }
}

/* Ribbon of match pieces under the hero. */
.ribbon { overflow: hidden; padding: 14px 0 6px; background: var(--cream); }
.ribbon__track { display: flex; gap: 34px; width: max-content; animation: marquee 38s linear infinite; }
.ribbon__track img { width: 54px; height: 54px; filter: drop-shadow(0 6px 6px rgba(59, 42, 26, .2)); animation: wobble 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-6px); } }

/* Cursor sparkles (desktop). */
.sparkle-layer { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.sparkle { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none;
  background: radial-gradient(circle, #FFF6C8 0 25%, rgba(255, 206, 84, .8) 40%, transparent 70%); border-radius: 50%;
  animation: sparkle .8s ease-out forwards; }
@keyframes sparkle { to { transform: translate(var(--dx), var(--dy)) scale(.1); opacity: 0; } }