html, body { margin: 0; background: #ffffff; color: #1a1a1a; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #1a1a1a; text-decoration: none; }
a:hover { color: #1a1a1a; }
a:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 6px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.page { min-height: 100vh; display: flex; flex-direction: column; background: #ffffff; }
.top { height: 72px; display: flex; align-items: center; justify-content: center; }
.top a { display: flex; }
.top img { width: 44px; height: 44px; object-fit: contain; }
.main { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(48px, 10vw, 120px) 24px; }
.brands { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(48px, 10vw, 140px); }
.brand { display: flex; flex-direction: column; align-items: center; gap: 20px; transition: transform .2s; }
.brand:hover { transform: translateY(-2px); }
.brand-art { position: relative; width: 220px; height: 140px; display: flex; align-items: center; justify-content: center; }
.footer { padding: 32px 24px; text-align: center; font-size: 12px; color: #9a9a9a; }

/* OlliePop: the bucket bounces and kernels pop out each beat while hovered (script.js). */
.olliepop-logo { height: 100px; width: auto; display: block; transform-origin: 50% 100%; }
.brand-olliepop.is-animating .olliepop-logo { animation: pop-bounce .9s ease-in-out infinite; }
.pop-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.popcorn-kernel { position: absolute; pointer-events: none; opacity: 0; }
.popcorn-kernel svg { display: block; width: 100%; height: 100%; }
@keyframes pop-bounce {
  0%, 45%, 100% { transform: scale(1, 1); }
  12% { transform: scale(1.06, .93); }
  26% { transform: scale(.97, 1.05); }
}

/* Rollout: the speed lines are drawn shapes behind the R (r.png has them cut out).
   Each runs well under the R, so sliding left never opens a gap at the seam.
   Positions are from the 280x200 artwork. */
.rollout-mark { position: relative; display: block; width: 140px; height: 100px; }
.mark-r { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mark-line { position: absolute; display: block; background: #0069d3; border-radius: 999px; }
.line-1 { left: 15.54%; top: 29.5%; width: 39.82%; height: 11%; }
.line-2 { left: 1.96%; top: 48%; width: 55.18%; height: 11.5%; }
.line-3 { left: 14.11%; top: 67.5%; width: 33.04%; height: 11%; }
.brand-rollout.is-animating .rollout-mark { animation: mark-surge 1.2s ease-in-out infinite; }
.brand-rollout.is-animating .line-1 { animation: trail-1 1.2s ease-in-out infinite; }
.brand-rollout.is-animating .line-2 { animation: trail-2 1.2s ease-in-out infinite; }
.brand-rollout.is-animating .line-3 { animation: trail-3 1.2s ease-in-out infinite; }
/* Every layer is at rest at 0% and 100%, so stopping on a loop boundary never jumps. */
@keyframes mark-surge {
  0%, 100% { transform: none; }
  50% { transform: translateX(4px); }
}
@keyframes trail-1 {
  0%, 60%, 100% { transform: none; }
  30% { transform: translateX(-9px); }
}
@keyframes trail-2 {
  0%, 15%, 75%, 100% { transform: none; }
  45% { transform: translateX(-9px); }
}
@keyframes trail-3 {
  0%, 30%, 90%, 100% { transform: none; }
  60% { transform: translateX(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .brand, .brand:hover { transition: none; transform: none; }
  .brand.is-animating * { animation: none !important; }
}