<footer class="cf12">
  <div class="cf12bg" aria-hidden="true"></div>
  <div class="cf12brand">
    <h2 class="cf12sign">FLUX<span>·</span>BAR</h2>
    <p class="cf12sub">Open till sunrise · Brooklyn NY · 21+</p>
  </div>
  <div class="cf12b">
    <div class="cf12col">
      <h4>Visit</h4>
      <a href="#">Hours</a>
      <a href="#">Reservations</a>
      <a href="#">Private events</a>
      <a href="#">Directions</a>
    </div>
    <div class="cf12col">
      <h4>Tonight</h4>
      <a href="#">DJ schedule</a>
      <a href="#">Cocktail menu</a>
      <a href="#">Specials</a>
      <a href="#">Photos</a>
    </div>
    <div class="cf12col">
      <h4>Connect</h4>
      <a href="#">Instagram</a>
      <a href="#">TikTok</a>
      <a href="#">Newsletter</a>
      <a href="#">Press</a>
    </div>
  </div>
  <div class="cf12meta">© 2026 Flux · Drink responsibly · Don't drink and drive</div>
</footer>

.cf12 {
  position: relative;
  width: 100%;
  padding: 56px 32px 26px;
  background: #0a0612;
  color: #e0c8e8;
  font-family: "Bebas Neue", "Oswald", ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
}
.cf12bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(236, 72, 153, 0.25) 0%, transparent 50%),
    repeating-linear-gradient(180deg, transparent 0 1px, rgba(255, 255, 255, 0.02) 1px 2px);
  pointer-events: none;
}
.cf12brand {
  position: relative;
  padding-bottom: 32px;
}
.cf12sign {
  margin: 0;
  font:
    800 60px/1 "Bebas Neue",
    "Oswald",
    ui-sans-serif,
    system-ui,
    sans-serif;
  color: #ff3df5;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 8px #ff3df5,
    0 0 18px #ff3df5,
    0 0 36px rgba(255, 61, 245, 0.6),
    0 0 60px rgba(255, 61, 245, 0.3);
  animation: cf12-flicker 5s infinite;
}
.cf12sign span {
  color: #3df5ff;
  text-shadow:
    0 0 8px #3df5ff,
    0 0 18px #3df5ff,
    0 0 36px rgba(61, 245, 255, 0.6);
  margin: 0 4px;
}
@keyframes cf12-flicker {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    opacity: 1;
    text-shadow:
      0 0 8px #ff3df5,
      0 0 18px #ff3df5,
      0 0 36px rgba(255, 61, 245, 0.6),
      0 0 60px rgba(255, 61, 245, 0.3);
  }
  20%,
  24%,
  55% {
    opacity: 0.6;
    text-shadow: none;
  }
}
.cf12sub {
  position: relative;
  margin: 14px 0 0;
  font:
    500 13px/1 ui-sans-serif,
    system-ui;
  color: #a78bfa;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cf12b {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  max-width: 720px;
  margin: 0 auto 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(167, 139, 250, 0.2);
}
.cf12col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cf12col h4 {
  margin: 0 0 6px;
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff3df5;
  text-shadow: 0 0 6px rgba(255, 61, 245, 0.5);
}
.cf12col a {
  font:
    14px/1.5 ui-sans-serif,
    system-ui;
  color: #c4b5fd;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition:
    color 0.2s,
    text-shadow 0.2s;
}
.cf12col a:hover {
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}
.cf12meta {
  position: relative;
  font:
    500 11px/1 ui-sans-serif,
    system-ui;
  color: #6a5a8a;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .cf12sign {
    font-size: 44px;
  }
  .cf12b {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf12sign {
    animation: none;
  }
}