/* fallinghippo.com/hippos: the all-time hippo count. Dark sky, one big number. */
.hippos-page { background: var(--space); color: var(--on-dark); }
.hippos { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 72px) 0 120px; }
.hippos .wrap { position: relative; z-index: 1; }
.hippos-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); margin-bottom: 18px; }
.hippos-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); animation: hippos-pulse 2.4s ease-in-out infinite; }
.hippos-number { font-family: var(--f-mono); font-weight: 500; font-size: clamp(64px, 17vw, 200px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 0; overflow-wrap: anywhere; }
.hippos-title { font-size: clamp(22px, 3.4vw, 36px); font-weight: 500; letter-spacing: -.02em; margin: 14px 0 10px; color: var(--hippo); }
.hippos-note { font-size: 14px; color: var(--muted); margin-bottom: 28px; min-height: 1.4em; }
.hippos-lead { max-width: 520px; color: var(--muted); margin-bottom: 28px; }
.hippos-rain { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hippos-rain img { position: absolute; top: -80px; width: 44px; height: auto; opacity: .85; animation: hippos-fall 3.2s cubic-bezier(.5, 0, 1, .6) forwards; }
@keyframes hippos-fall { to { transform: translateY(115vh) rotate(var(--spin, 200deg)); opacity: .2; } }
@keyframes hippos-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hippos-dot { animation: none; } .hippos-rain { display: none; } }