.footer {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: end; justify-content: stretch;
  min-height: clamp(480px, 33.333vw, 800px); border-top: 0; padding: 40px 32px;
  color: #fff; background: var(--paper);
}
.footer-landscape {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 18%);
}
.footer-landscape img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.footer-runner-track { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.footer-runner {
  --runner-size:80px;
  position:absolute; top:0; left:0; display:block; width:var(--runner-size); height:var(--runner-size);
  background:url('assets/timing-agent.png') 0 0 / calc(var(--runner-size) * 16) calc(var(--runner-size) * 16) no-repeat;
  image-rendering:pixelated; transform:translateX(-120px); opacity:0;
}
.footer-runner[data-runner="upper-right"] { background-image:url('assets/footer-runner-water.png'); }
.footer-runner[data-runner="front-left"] { background-image:url('assets/footer-runner-fire.png'); }
.footer-runner[data-runner="front-right"] { background-image:url('assets/footer-runner-neutral.png'); }
.footer-runner[data-runner="nearest-left"] { background-image:url('assets/footer-runner-fire-2.png'); }
.footer-runner[data-blinking="true"] { background-position:0 0 !important; }
.footer-runner[data-blinking="true"]::after {
  content:'';position:absolute;left:45.3125%;top:35.9375%;width:9.375%;height:3.125%;
  background:linear-gradient(var(--eyelid-skin,#ab5544) 50%,var(--eyelid-line,#772a1b) 50%);
  mask-image:linear-gradient(to right,#000 33.333%,transparent 33.333%,transparent 66.667%,#000 66.667%);
  opacity:0;
  animation:footer-eyelids var(--blink-cycle) steps(1,end) var(--blink-delay) infinite;
  animation-play-state:var(--blink-play-state);
}
.footer-runner[data-runner="front-right"] { --eyelid-skin:#de864b;--eyelid-line:#8c4131; }
.footer-runner[data-runner="nearest-left"] { --eyelid-skin:#d89878;--eyelid-line:#885848; }
@keyframes footer-eyelids {
  0%,8%,100% { opacity:0; }
  2%,6% { opacity:1; }
}
.footer:focus-visible { outline:1px solid var(--blue);outline-offset:-4px; }
@media (prefers-reduced-motion:reduce) { .footer-runner-track { visibility:hidden; } }
.footer::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, #13006488);
}
.footer .brand { color: inherit; }
.paper .footer a:focus-visible { outline-color: #fff; }
.footer > .footer-inner {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  width: 100%; gap: 28px; text-align: left;
  position:relative;
}
.footer::after {
  content:''; position:absolute; inset:auto 0 0; height:220px; z-index:-1; pointer-events:none;
  background:#160b4810; backdrop-filter:blur(3px);
  mask-image:linear-gradient(to bottom,transparent,#000);
}
.footer-about { justify-self: start; }
.footer-credits { display:grid; align-items:center; justify-items:start; justify-self:start; min-height:96px; }
.footer-credits > * {
  grid-area:1 / 1; opacity:0; visibility:hidden;
}
.footer-credits > .is-active {
  opacity:1; visibility:visible;
}
/* Finite signal breakup in the existing credit slot; no duplicate links,
   noise canvas, permanent filter or animation while the marks are at rest. */
.footer-credits > .is-leaving { animation:footer-signal-out 360ms steps(1,end) both; }
.footer-credits > .is-arriving { animation:footer-signal-in 680ms steps(1,end) both; }
@keyframes footer-signal-out {
  0% { visibility:visible;opacity:1;transform:none;clip-path:inset(0); }
  16% { transform:translateX(-5px) skewX(4deg);clip-path:polygon(0 0,100% 0,100% 23%,0 23%,0 38%,100% 38%,100% 67%,0 67%,0 82%,100% 82%,100% 100%,0 100%); }
  36% { transform:translateX(8px) skewX(-6deg);clip-path:inset(24% 0 38%); }
  52% { transform:translateX(-3px);clip-path:inset(0);opacity:.8; }
  70% { transform:translateX(11px) scaleY(.96);clip-path:polygon(0 12%,100% 12%,100% 28%,0 28%,0 61%,100% 61%,100% 70%,0 70%); }
  86% { transform:translateX(-7px);clip-path:inset(72% 0 18%);opacity:.5; }
  100% { visibility:hidden;opacity:0;transform:none;clip-path:inset(0); }
}
@keyframes footer-signal-in {
  0%,48% { opacity:0;transform:none;clip-path:inset(0); }
  49% { opacity:.6;transform:translateX(9px) skewX(-5deg);clip-path:inset(20% 0 63%); }
  59% { opacity:1;transform:translateX(-6px);clip-path:polygon(0 0,100% 0,100% 30%,0 30%,0 48%,100% 48%,100% 75%,0 75%,0 88%,100% 88%,100% 100%,0 100%); }
  71% { transform:translateX(4px) skewX(3deg);clip-path:inset(0); }
  81% { transform:translateX(-2px);clip-path:inset(42% 0 8%); }
  90%,100% { opacity:1;transform:none;clip-path:inset(0); }
}
@media (prefers-reduced-motion:reduce) {
  .footer-credits { gap:12px; }
  .footer-credits > *, .footer-credits > .is-active { grid-area:auto;opacity:1;visibility:visible;animation:none;transform:none;clip-path:none; }
}
.footer-about .brand { gap: 16px; }
.footer-brand-copy { display: grid; gap: 8px; }
.footer-parent { display: flex; align-items: center; gap: 8px; font-size: .75rem; letter-spacing: 0; line-height: 1; white-space: nowrap; }
.footer-parent-logo {
  display: block; width: 104px; aspect-ratio: 2048 / 381; background: currentColor;
  mask: url('assets/asabeko-logo.png') center / contain no-repeat; mask-mode: alpha;
}
.footer-links { display: grid; justify-items: end; gap: 12px; font-size: .875rem; }
.footer-links a { color: inherit; }
.runebench-credit .external-arrow { display:inline-block; transition:transform 280ms cubic-bezier(.2,.7,.3,1); }
.runebench-credit:is(:hover,:focus-visible) .external-arrow { transform:translate(3px,-3px); }
@media (prefers-reduced-motion:reduce) {
  .runebench-credit .external-arrow { transition:none; }
  .runebench-credit:is(:hover,:focus-visible) .external-arrow { transform:none; }
}
.footer .puffer-credit {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; min-height: 96px; color: inherit; font-size: .875rem;
  text-decoration: none; white-space: nowrap;
}
.puffer-credit > span:last-child { padding-inline: 14px; }
.puffer-credit strong { display: block; position: relative; width: max-content; margin: 4px -14px 0; padding: 2px 14px; font-size: 1.125rem; font-weight: 400; }
.puffer-credit strong::before,.puffer-credit strong::after {
  content: ''; position: absolute; top: 2px; bottom: 2px; width: 5px;
  border-block: 1px solid currentColor; opacity: 0; transition: opacity 180ms ease,transform 180ms ease;
}
.puffer-credit strong::before { left: 0; border-left: 1px solid currentColor; transform: translateX(3px); }
.puffer-credit strong::after { right: 0; border-right: 1px solid currentColor; transform: translateX(-3px); }
.puffer-credit:is(:hover,:focus-visible) strong { background: #ffffff10; }
.puffer-credit:is(:hover,:focus-visible) strong::before,.puffer-credit:is(:hover,:focus-visible) strong::after { opacity: .8; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .puffer-credit strong::before,.puffer-credit strong::after { transition: none; } }
.puffer-mascot {
  display: block; flex: none; width: 96px; height: 96px;
  background: url('assets/pufferlib/puffer-5-swim.webp') 0 0 / 9600px 96px no-repeat;
}
.footer-socials { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.footer-socials :is(a,.social-pending) { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: inherit; }
.footer-socials svg { width: 20px; height: 20px; fill: currentColor; }
.footer-socials .social-pending { opacity: .45; cursor: default; }
.social-x-strokes { stroke: currentColor; stroke-width: .45px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.social-youtube-play,.social-twitch-eyes { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .puffer-credit.is-active .puffer-mascot {
    animation:puffer-swim 5s steps(100,end) infinite;
    animation-play-state:var(--puffer-play-state,paused);
  }
  .footer-socials a:is(:focus-visible,:active) .social-x-strokes { animation: social-x-draw 800ms ease-out; }
  .footer-socials a:is(:focus-visible,:active) .social-youtube-play { animation: social-play 700ms ease-in-out; }
  .footer-socials a:is(:focus-visible,:active) .social-twitch-eyes { animation: social-blink 700ms ease-in-out; }
}
@keyframes puffer-swim { to { background-position:-9600px 0; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .footer-socials a:hover .social-x-strokes { animation: social-x-draw 800ms ease-out; }
  .footer-socials a:hover .social-youtube-play { animation: social-play 700ms ease-in-out; }
  .footer-socials a:hover .social-twitch-eyes { animation: social-blink 700ms ease-in-out; }
}
@keyframes social-x-draw {
  0% { stroke-dashoffset: 1; fill-opacity: .15; }
  55% { fill-opacity: .15; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}
@keyframes social-play {
  0%,100% { transform: translateX(0); }
  40% { transform: translateX(2px) scale(.85); }
  70% { transform: translateX(-1px); }
}
@keyframes social-blink {
  0%,25%,75%,100% { transform: scaleY(1); }
  45%,55% { transform: scaleY(.1); }
}
@media (max-width: 1100px) {
  .footer > .footer-inner { grid-template-columns: 1fr auto; }
  .footer-links { display: flex; align-items: flex-end; flex-direction:column; gap: 16px; }
}
@media (max-width: 760px) {
  .footer { min-height: 600px; padding: 28px 20px; }
  .footer::after { height:300px; }
  .footer::before { background: linear-gradient(to bottom, transparent 42%, #13006470 65%, #130064aa); }
  .footer > .footer-inner { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .footer-about .brand { gap: 8px; }
  .footer-brand-copy { gap: 7px; }
  .footer-parent { gap: 6px; font-size: .6875rem; }
  .footer-parent-logo { width: 84px; }
  .footer .puffer-credit { gap: 4px; font-size: .75rem; }
  .puffer-credit strong { margin-top: 2px; font-size: 1rem; }
  .footer-links { display: grid; justify-items: start; gap: 10px; font-size: .8125rem; }
  .footer-socials { justify-content: flex-start; margin-left: -12px; }
}