/* Site footer, shared by every page except game.html (which has no footer).
   All selectors are prefixed sh-ftr- and every custom property/keyframe is
   scoped under .sh-ftr so nothing here can collide with the rest of the
   site's styles. Interaction (ruler ticks, eye tracking, blink) lives in
   js/global/footer.js. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Archivo:wght@600;800;900&display=swap");

.sh-ftr {
  --ftr-bg: #141010;
  --ftr-panel: #1b1512;
  --ftr-cream: #efe6da;
  --ftr-gray: #8d8177;
  --ftr-gray-dim: #4a3f37;
  --ftr-orange: #ff5a1f;
  --ftr-orange-hot: #ff8a3c;
  --ftr-line: rgba(239, 230, 218, 0.09);

  position: relative;
  background: radial-gradient(ellipse 55% 45% at 50% 100%, rgba(255, 90, 31, 0.07), transparent 70%), var(--ftr-panel);
  border-top: 1px solid var(--ftr-line);
  overflow: hidden;
  font-family: "JetBrains Mono", monospace;
  color: var(--ftr-cream);
}

/* ---------- ruler ---------- */
.sh-ftr-ruler {
  display: flex;
  justify-content: space-between;
  padding: 0 4vw;
  height: 14px;
  align-items: flex-start;
  opacity: 0.5;
}

.sh-ftr-ruler i {
  width: 1px;
  height: 5px;
  background: var(--ftr-gray-dim);
}

.sh-ftr-ruler i:nth-child(10n + 1) {
  height: 11px;
  background: var(--ftr-gray);
}

.sh-ftr-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 80px) 5vw clamp(24px, 4vh, 40px);
}

/* ---------- eyes + CTA ---------- */
.sh-ftr-eyes-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(40px, 7vh, 72px);
}

.sh-ftr-eyes {
  display: flex;
  gap: 14px;
  cursor: none;
}

.sh-ftr-eye {
  width: clamp(54px, 6vw, 78px);
  height: clamp(40px, 4.6vw, 58px);
  background: var(--ftr-cream);
  border-radius: 8px 8px 42% 42%;
  position: relative;
  overflow: hidden;
  transition: height 0.12s ease;
}

.sh-ftr-iris {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, var(--ftr-orange-hot), var(--ftr-orange) 70%);
  transform: translate(-50%, -50%);
  transition: transform 0.05s linear;
}

.sh-ftr-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #120d0b;
  transform: translate(-50%, -50%);
}

.sh-ftr-pupil::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 22%;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

.sh-ftr-eyes.blink .sh-ftr-eye {
  height: 6px;
  border-radius: 4px;
}

.sh-ftr-eyes-label {
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 0.35em;
  color: var(--ftr-gray);
  text-transform: uppercase;
}

.sh-ftr-cta {
  text-align: center;
  margin-top: clamp(18px, 3vh, 28px);
}

.sh-ftr-tc {
  font-size: 11px;
  color: var(--ftr-gray);
  letter-spacing: 0.2em;
}

.sh-ftr-tc b {
  color: var(--ftr-orange-hot);
  font-weight: 500;
}

.sh-ftr-cta h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 6.5vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0.15em 0 0.3em;
}

.sh-ftr-accent {
  color: var(--ftr-orange);
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), color 0.3s;
}

.sh-ftr-cta h2:hover .sh-ftr-accent {
  transform: rotate(-4deg) scale(1.06);
  color: var(--ftr-orange-hot);
}

.sh-ftr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.14em;
  color: var(--ftr-bg);
  background: linear-gradient(135deg, var(--ftr-orange-hot), var(--ftr-orange));
  text-decoration: none;
  padding: 0.95em 2em;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 0 0 rgba(255, 90, 31, 0);
}

.sh-ftr-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(255, 90, 31, 0.35);
}

.sh-ftr-arrow {
  transition: transform 0.25s ease;
}

.sh-ftr-btn:hover .sh-ftr-arrow {
  transform: translateX(5px);
}

/* ---------- link columns ---------- */
.sh-ftr-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(32px, 5vh, 56px) 0;
  border-top: 1px solid var(--ftr-line);
  border-bottom: 1px solid var(--ftr-line);
}

.sh-ftr-logo {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.02em;
}

.sh-ftr-logo span {
  color: var(--ftr-orange);
}

.sh-ftr-brand p {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--ftr-gray);
  max-width: 30ch;
}

.sh-ftr-col h4 {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ftr-gray);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
}

.sh-ftr-col a {
  display: block;
  color: var(--ftr-cream);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 0;
  position: relative;
  width: fit-content;
  transition: color 0.2s;
}

.sh-ftr-col a::before {
  content: "\25B8";
  position: absolute;
  left: -16px;
  opacity: 0;
  color: var(--ftr-orange);
  transition: opacity 0.2s, left 0.2s;
}

.sh-ftr-col a:hover {
  color: var(--ftr-orange-hot);
}

.sh-ftr-col a:hover::before {
  opacity: 1;
  left: -13px;
}

/* ---------- icon strip ---------- */
.sh-ftr-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2vw;
  padding: clamp(36px, 6vh, 64px) 1vw clamp(20px, 3vh, 32px);
}

.sh-ftr-fic {
  width: clamp(52px, 7.5vw, 104px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: sh-ftr-float 5s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.3, 1.8, 0.5, 1);
}

.sh-ftr-fic:nth-child(2) { animation-delay: 0.6s; }
.sh-ftr-fic:nth-child(3) { animation-delay: 1.2s; }
.sh-ftr-fic:nth-child(4) { animation-delay: 1.8s; }
.sh-ftr-fic:nth-child(5) { animation-delay: 2.4s; }
.sh-ftr-fic:nth-child(6) { animation-delay: 3s; }
.sh-ftr-fic:nth-child(7) { animation-delay: 3.6s; }

@keyframes sh-ftr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.sh-ftr-fic svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* the rotated diamond shape reads visually smaller/off-center than the
   others' circular marks even at equal box size, so nudge it to sit at
   the same apparent distance from its neighbors as the rest. Its own
   float keyframe carries that offset through so it doesn't fight the
   base sh-ftr-float animation. */
.sh-ftr-fic.key {
  animation-name: sh-ftr-float-key;
}

@keyframes sh-ftr-float-key {
  0%, 100% { transform: translate(-50px, 18px); }
  50% { transform: translate(-50px, calc(18px - 9px)); }
}

.sh-ftr-fic svg * {
  transform-origin: center;
  transform-box: fill-box;
}

.sh-ftr-fic:hover {
  animation-play-state: paused;
}

.sh-ftr-fic.play:hover svg { transform: scale(1.18); }
.sh-ftr-fic.play:hover .tri { animation: sh-ftr-nudge 0.5s ease; }
@keyframes sh-ftr-nudge {
  50% { transform: translateX(8%); }
}

.sh-ftr-fic.blade:hover svg { animation: sh-ftr-slice 0.55s cubic-bezier(0.6, 0, 0.3, 1); }
@keyframes sh-ftr-slice {
  30% { transform: rotate(-22deg) translateY(-10%); }
  60% { transform: rotate(10deg); }
  100% { transform: rotate(0); }
}

.sh-ftr-fic.key:hover svg { animation: sh-ftr-keypulse 0.6s ease; }
@keyframes sh-ftr-keypulse {
  40% { transform: scale(1.35) rotate(45deg); }
  100% { transform: scale(1) rotate(0); }
}

.sh-ftr-fic.wheel:hover svg { animation: sh-ftr-spin 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes sh-ftr-spin {
  to { transform: rotate(360deg); }
}

.sh-ftr-fic.wave .bar {
  animation: sh-ftr-wob 1.2s ease-in-out infinite;
  animation-play-state: paused;
}
.sh-ftr-fic.wave:hover .bar { animation-play-state: running; }
.sh-ftr-fic.wave .bar:nth-child(2) { animation-delay: 0.1s; }
.sh-ftr-fic.wave .bar:nth-child(3) { animation-delay: 0.2s; }
.sh-ftr-fic.wave .bar:nth-child(4) { animation-delay: 0.3s; }
.sh-ftr-fic.wave .bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes sh-ftr-wob {
  50% { transform: scaleY(1.7); }
}

.sh-ftr-fic.reel:hover svg { animation: sh-ftr-reelspin 0.9s ease; }
@keyframes sh-ftr-reelspin {
  to { transform: rotate(-360deg); }
}

.sh-ftr-fic.node:hover svg { animation: sh-ftr-squish 0.55s ease; }
@keyframes sh-ftr-squish {
  35% { transform: scale(1.25, 0.75); }
  70% { transform: scale(0.85, 1.2); }
  100% { transform: scale(1); }
}

/* ---------- bottom bar ---------- */
.sh-ftr-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--ftr-line);
  font-size: 11px;
  color: var(--ftr-gray);
  letter-spacing: 0.08em;
  flex-wrap: wrap;
}

.sh-ftr-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-ftr-rec {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ftr-orange);
  animation: sh-ftr-rec-blink 1.6s ease-in-out infinite;
}

@keyframes sh-ftr-rec-blink {
  50% { opacity: 0.25; }
}

.sh-ftr-socials {
  display: flex;
  gap: 22px;
}

.sh-ftr-socials a {
  color: var(--ftr-gray);
  text-decoration: none;
  transition: color 0.2s;
}

.sh-ftr-socials a:hover {
  color: var(--ftr-orange-hot);
}

/* ---------- back to top ---------- */
.sh-ftr-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 28px auto 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ftr-cream) 20%, transparent);
  background: transparent;
  color: var(--ftr-cream);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sh-ftr-top svg {
  width: 18px;
  height: 18px;
}

.sh-ftr-top:hover {
  border-color: var(--ftr-orange);
  background: var(--ftr-orange);
  color: var(--ftr-bg);
  transform: translateY(-3px);
}

@media (max-width: 760px) {
  .sh-ftr-cols {
    grid-template-columns: 1fr 1fr;
  }
  .sh-ftr-brand {
    grid-column: 1 / -1;
  }
  .sh-ftr-icons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6vw;
  }
  .sh-ftr-fic {
    width: 60px;
  }
  .sh-ftr-bottom {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-ftr-fic,
  .sh-ftr-fic svg,
  .sh-ftr-fic .bar,
  .sh-ftr-rec {
    animation: none !important;
  }
}