/* ============ FOLD 10 · Sponsors ============ */

.sponsors {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 55.4628rem;
  background: var(--white);
}
/* mascots peeking in from both edges (exported already cropped to the section) */
.sponsors__robot { position: absolute; top: 0; height: 55.4628rem; cursor: pointer; }
/* the green mascot is a full-body export: keep its aspect, let the edge crop it */
.sponsors__robot--left  { --out: -1; left: 0;  width: 37.489rem; transform-origin: 0% 50%;   animation: sponsor-sway 6s ease-in-out infinite; }
/* the green mascot is a full-body export: keep its aspect (height auto) and let the edge crop it */
.sponsors__robot--right {                 /* Figma 536:3026 → x 1183, y 25.95, w 547 */
  --out: 1; right: -20.577rem; top: -1.2rem; bottom: auto;
  width: 54.7rem; height: auto; object-fit: contain;
  transform-origin: 100% 50%; animation: sponsor-sway 6s ease-in-out -3s infinite;
}
/* The exports are cropped flat at the section edge, so every tilt also slides the mascot
   outward (--out) far enough that the cut edge stays hidden past the section edge. */
@keyframes sponsor-sway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(calc(var(--out) * 1rem), -0.6rem) rotate(calc(var(--out) * 1.6deg)); }
}

.sponsors__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3.4773rem; }
.sponsors__head  { display: flex; flex-direction: column; align-items: center;  text-align: center; }
.sponsors__eyebrow { font-weight: 400; font-size: 12px; line-height: 1.15; text-transform: uppercase; color: var(--brand-navy); }
.sponsors__title { font-weight: 700; font-size: 4rem; line-height: 1.5; color: var(--brand-navy); }

.sponsors__list { display: flex; gap: 2.7818rem; width: 62.4173rem; height: 14.083rem; list-style: none; margin: 0; padding: 0; }
.sponsor {
  flex: 1 0 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0.3477rem;
  border: 0.0869rem solid rgba(255, 255, 255, 0.14);
  border-radius: 1.7386rem;
  background: #084773;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sponsor:hover { transform: translateY(-0.5rem); box-shadow: 0 1.8rem 3rem -1.4rem rgba(8, 71, 115, 0.6); }
.sponsor__logo--sf { width: 13.5614rem; height: 9.3887rem; }
.sponsor__logo--rs { width: 20.9812rem; height: 5.3952rem; }

.sponsors__more {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.0829rem 2.4738rem;             /* Figma 13.909/27.818 minus the 3.08 inside stroke */
  border: 0.308rem solid var(--brand-orange);
  border-radius: 999.9rem;
  font-weight: 500; font-size: 1.7386rem; line-height: normal; letter-spacing: -0.0174rem;
  color: var(--seafloor); white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}
.sponsors__more:hover { background: var(--brand-orange); color: var(--white); }

/* hover: a playful wobble (js adds .is-wobbling so the full wobble always plays) */
.sponsors__robot.is-wobbling { animation: sponsor-wobble 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes sponsor-wobble {
  0%   { transform: translate(0, 0) rotate(0deg); }
  15%  { transform: translate(calc(var(--out) * 3.4rem), -0.8rem) rotate(-6deg); }
  30%  { transform: translate(calc(var(--out) * 2.9rem), -0.3rem) rotate(5deg); }
  45%  { transform: translate(calc(var(--out) * 2.4rem), 0) rotate(-4deg); }
  60%  { transform: translate(calc(var(--out) * 1.8rem), 0) rotate(3deg); }
  75%  { transform: translate(calc(var(--out) * 1rem), 0) rotate(-1.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) { .sponsors__robot, .sponsors__robot.is-wobbling { animation: none; } }