/* ===== Бегемотики в футере (пасхалка) ===== */
.site-footer { position: relative; overflow: hidden; }

.hippo-track {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 96px; overflow: hidden; pointer-events: none; z-index: 0;
}
.hippo-track--cable { bottom: calc(100% + 1px); height: 72px; }

/* --- сам бегемот --- */
.hippo { display: block; width: 100%; height: auto; overflow: visible; }
.hippo .h-main  { fill: #7f859b; }
.hippo .h-far   { fill: #5f647a; }
.hippo .h-belly { fill: #9ca1b4; }
.hippo .h-snout { fill: #a8909c; }
.hippo .h-dark  { fill: #0d0e13; }
.hippo .h-shine { fill: #f2f3f7; }
.hippo .h-tail, .hippo .h-mouth { fill: none; stroke: #0d0e13; stroke-width: 2.2; stroke-linecap: round; }
.hippo .h-tail { stroke: #7f859b; stroke-width: 3; }

.hippo .leg {
  transform-box: fill-box; transform-origin: 50% 12%;
  animation: hippo-leg var(--step, .32s) ease-in-out infinite alternate;
}
.hippo .leg--b { animation-delay: calc(var(--step, .32s) * -1); }
.hippo .bob { animation: hippo-bob var(--step, .32s) ease-in-out infinite alternate; }
.hippo .h-eye { transform-box: fill-box; transform-origin: center; animation: hippo-blink 4.2s infinite; }
.hippo .h-ear { transform-box: fill-box; transform-origin: 50% 100%; }

@keyframes hippo-leg   { from { transform: rotate(26deg); } to { transform: rotate(-26deg); } }
@keyframes hippo-bob   { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
@keyframes hippo-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes hippo-ear   { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-18deg); } 90% { transform: rotate(10deg); } }

/* --- дорожка: ширина = ширине футера, translateX(100%) = весь путь --- */
.hippo-lane {
  position: absolute; left: 0; bottom: var(--bottom, 4px);
  width: 100%; height: 0;
  animation-duration: var(--dur, 20s); animation-delay: var(--delay, 0s);
  animation-timing-function: linear; animation-iteration-count: infinite;
  animation-fill-mode: both; will-change: transform;
}
.hippo-body { position: absolute; right: 100%; bottom: 0; width: var(--size, 60px); }

/* 1. Патруль: туда и обратно */
.is-patrol { animation-name: hippo-patrol; }
.is-patrol .hippo-body { animation: hippo-face var(--dur) linear var(--delay) infinite both; }
@keyframes hippo-patrol {
  0%       { transform: translateX(0); }
  42%, 50% { transform: translateX(calc(100% + var(--size) + 24px)); }
  92%,100% { transform: translateX(0); }
}
@keyframes hippo-face { 0%, 46% { transform: none; } 46.5%, 99% { transform: scaleX(-1); } 100% { transform: none; } }

/* 2. Стадо и 5. Кабель: проход слева направо + пауза */
.is-cross { animation-name: hippo-cross; }
@keyframes hippo-cross {
  0%        { transform: translateX(0); }
  75%, 100% { transform: translateX(calc(100% + var(--size) + 24px)); }
}
.is-hop .hippo { animation: hippo-hop calc(var(--step) * 2) ease-in-out infinite; }
@keyframes hippo-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-9px) rotate(-6deg); } }

/* 3. Паника: один быстрый забег */
.is-dash { animation-name: hippo-dash; animation-iteration-count: 1; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
@keyframes hippo-dash { to { transform: translateX(calc(100% + var(--size) + 40px)); } }
.is-dash .hippo-body::before {
  content: ""; position: absolute; left: -45%; bottom: -2px; width: 60%; height: 40%;
  background: radial-gradient(closest-side, rgba(160,165,185,.35), transparent);
  animation: hippo-dust .25s linear infinite;
}
@keyframes hippo-dust { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.3) translateX(-8px); opacity: 0; } }
.hippo-shake { animation: hippo-shake .1s linear 10; }
@keyframes hippo-shake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(1px,-1px); } 75% { transform: translate(-1px,1px); } }

/* 4. Выглядывает из-под края */
.hippo-peek {
  position: absolute; right: 14%; bottom: 0; width: 78px;
  transform: translateY(105%); pointer-events: auto; cursor: default;
  animation: hippo-peek 11s ease-in-out 1.5s infinite;
}
.hippo-peek .hippo { transform: scaleX(-1); }
.hippo-peek .h-ear { animation: hippo-ear 2.4s ease-in-out infinite; }
.hippo-peek .h-ear + .h-ear { animation-delay: .15s; }
.hippo-peek:hover { animation: none; transform: translateY(105%); transition: transform .2s ease-in; }
@keyframes hippo-peek {
  0%, 56%   { transform: translateY(105%); }
  63%       { transform: translateY(46%); }
  66%, 84%  { transform: translateY(52%); }
  91%, 100% { transform: translateY(105%); }
}

/* 5. Тёплый кабель: след «нагревается» и остывает */
.hippo-trail {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, rgba(79,127,214,0) 0%, rgba(79,127,214,.6) 45%, #ff8a3d 88%, #ff4a2e 100%);
  box-shadow: 0 0 10px rgba(255,74,46,.45);
  animation: hippo-trail var(--dur, 16s) linear infinite;
}
@keyframes hippo-trail { 0% { width: 0; opacity: 1; } 75% { width: 100%; opacity: 1; } 95%, 100% { width: 100%; opacity: 0; } }
.is-hot .h-snout { fill: #d27a6a; }

/* Текст футера — над бегемотами */
.site-footer > *:not(.hippo-track) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hippo-track { display: none; }
}