/* Only the footer lane changes; shared page and Aero materials stay intact. */
@media screen {
  .site-footer .footer-wrap {
    min-height: 132px;
    padding-bottom: 42px;
  }
  .site-footer,
  .site-footer .footer-wrap,
  .fish-track,
  .theme-toggle,
  .fish-body,
  .fish-facing,
  .fish-reaction,
  .fish-bubbles,
  .fish-emission {
    overflow: visible;
  }
  /* Added footer space must not move the existing lower-page atmosphere. */
  :root[data-theme="aero"] body::after {
    bottom: 34px;
  }
  .fish-track {
    position: absolute;
    inset: auto 6px 3px;
    height: 70px;
    pointer-events: none;
  }
  .theme-toggle {
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 104px;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--brand);
    line-height: 0;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .theme-toggle:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
  }
  .fish-body,
  .fish-facing,
  .fish-reaction {
    position: relative;
    display: block;
    pointer-events: none;
  }
  .fish-body {
    isolation: isolate;
    /* Keep the original swim canvas and hitbox with the tighter fish crop. */
    aspect-ratio: 384 / 216;
    animation: fish-bob 4.2s ease-in-out infinite;
    animation-play-state: paused;
  }
  .fish-facing {
    z-index: 1;
  }
  [data-swim-state="swimming"] .fish-body {
    animation-play-state: running;
  }
  .fish-reaction {
    width: 78.38541667%; /* 301 / 384: preserve the drawing's current size. */
    margin-left: auto;
  }
  .fish-reaction > img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
  }
  .fish-surprised {
    position: absolute;
    inset: 0;
    visibility: hidden;
  }
  .is-surprised .fish-normal {
    visibility: hidden;
  }
  .is-surprised .fish-surprised {
    visibility: visible;
  }
  .is-surprised .fish-reaction {
    animation: fish-recoil 250ms ease-out both;
  }
  .fish-bubbles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  .fish-emission {
    /* 99% across the cropped fish, 52% down its nose. In the unchanged
       canvas this is 100% - (301 / 384 * 1%) = 99.22% across. */
    --fish-mouth-x: 99.22%;
    --fish-mouth-y: 52%;
    --bubble-direction: 1;
    position: absolute;
    left: var(--fish-mouth-x);
    top: var(--fish-mouth-y);
    /* Start visibly outside the lips, including during the recoil. */
    transform: translateX(calc(var(--bubble-direction) * 4px));
    pointer-events: none;
  }
  .fish-emission[data-direction="left"] {
    left: calc(100% - var(--fish-mouth-x));
    --bubble-direction: -1;
  }
  .fish-bubble {
    --bubble-out: 17px;
    --bubble-rise: 24px;
    --bubble-opacity: 0.95;
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    transform-origin: 0 0;
    pointer-events: none;
    animation: fish-bubble-stream 800ms ease-out both;
  }
  .fish-bubble img {
    display: block;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
  }
  [data-direction="left"] .fish-bubble img {
    /* Translate to the front of the mirrored mouth without flipping PNGs. */
    transform: translate(-100%, -50%);
  }
  .fish-bubble:nth-child(2) {
    width: 15px;
    top: -1px;
    --bubble-out: 20px;
    --bubble-rise: 27px;
    --bubble-opacity: 0.95;
    animation-delay: 70ms;
  }
  .fish-bubble:nth-child(3) {
    width: 19px;
    top: 1px;
    --bubble-out: 18px;
    --bubble-rise: 24px;
    --bubble-opacity: 1;
    animation-delay: 150ms;
  }
  .fish-bubble:nth-child(4) {
    width: 10px;
    top: -0.5px;
    --bubble-out: 22px;
    --bubble-rise: 28px;
    --bubble-opacity: 0.9;
    animation-delay: 220ms;
  }
  .fish-bubble:nth-child(5) {
    width: 14px;
    top: 0.5px;
    --bubble-out: 16px;
    --bubble-rise: 22px;
    --bubble-opacity: 0.95;
    animation-delay: 280ms;
  }
  [data-kind="swim"] .fish-bubble {
    width: 8px;
    --bubble-opacity: 0.75;
  }
  [data-kind="swim"] [data-size="md"] {
    width: 11px;
  }
  [data-kind="swim"] [data-size="lg"] {
    width: 14px;
  }
  [data-footer-visible="false"] .fish-bubble,
  [data-footer-visible="false"] .fish-reaction {
    animation-play-state: paused;
  }
}
@keyframes fish-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0.6deg);
  }
  50% {
    transform: translateY(-2px) rotate(-0.6deg);
  }
}
@keyframes fish-recoil {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  45% {
    transform: translateX(-2px) scale(1.04);
  }
}
@keyframes fish-bubble-stream {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  20% {
    opacity: var(--bubble-opacity);
    transform: translate(calc(var(--bubble-direction) * 4px), -2px) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(var(--bubble-direction) * var(--bubble-out)),
        calc(-1 * var(--bubble-rise))
      )
      scale(1.05);
  }
}
@media screen and (max-width: 640px) {
  .site-footer .footer-wrap {
    padding: 25px 0 66px;
  }
  .fish-track {
    height: 56px;
  }
  .theme-toggle {
    width: 80px;
  }
  /* Preserve the existing path while keeping an outward stream in bounds
     at either end of a narrow footer. */
  .fish-bubble:nth-child(n) {
    --bubble-out: 7px;
  }
  .fish-bubble:nth-child(2) {
    width: 13px;
  }
  .fish-bubble:nth-child(3) {
    width: 16px;
  }
  .fish-bubble:nth-child(5) {
    width: 12px;
  }
  .fish-bubble:nth-child(2) {
    --bubble-rise: 23px;
  }
  .fish-bubble:nth-child(4) {
    --bubble-rise: 24px;
  }
  :root[data-theme="aero"] body::after {
    bottom: 37px;
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  .fish-body,
  .is-surprised .fish-reaction,
  .fish-bubble {
    animation: none;
  }
  .fish-bubble {
    opacity: 0.65;
    transform: translate(calc(var(--bubble-direction) * 2px), 0) scale(0.65);
  }
  .fish-bubble:nth-child(2) {
    transform: translate(calc(var(--bubble-direction) * 8px), -5px) scale(0.75);
  }
  .fish-bubble:nth-child(3) {
    transform: translate(calc(var(--bubble-direction) * 11px), -12px)
      scale(0.85);
  }
  .fish-bubble:nth-child(4),
  .fish-bubble:nth-child(5) {
    display: none;
  }
}
@media print {
  .fish-track {
    display: none !important;
  }
}