/* Footer and the site-wide stay-up-to-date band. Owner: terminal -38. Split out of site-apex-chrome.css (header, -76). */
/* Every graphic is one of the user's asset IDs in static/kit/foot (file name = asset ID), whole, nothing clipped:
   thin_red_horizontal_brushline as the stay band's top line (plain red middle stretched), the B mark, condensed title and a line,
   then the Discord join from the Cyber Eden pack, recoloured to the site red: ASSET-0012 as the field (its hex dot and
   divider cap, plain run x 95-114 stretched, slash cap) and ASSET-0010 as JOIN (painted-out text area, plain run x 130-180
   stretched, its chevron cap). --k is one native pixel of each (field 74px, JOIN 64px: their frames match in height). */
.ax-stay-in { position: relative; display: flex; align-items: center; gap: 30px; min-height: 147px; }
.ax-stay-rule { position: absolute; left: 0; right: 0; top: -5px; height: 10px; border: 0 solid; border-image: url("kit/foot/thin_red_horizontal_brushline.webp") 0 30 0 30 fill / 0 30px 0 30px stretch; pointer-events: none; }
.ax-stay-mark { flex: none; width: 108px; height: 108px; }
.ax-stay-copy { min-width: 0; }
.ax-stay-copy h2 { color: #fff; font: 400 36px/1 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; }
.ax-stay-copy p { margin-top: 8px; color: #d0d0d0; font: 600 17px/1.4 var(--ax-font-body); }
.ax-stay-field { flex: none; width: min(640px, 100%); display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: auto; }
.ax-stay-input { --k: calc(74px / 138); flex: 1 1 auto; display: flex; align-items: center; gap: 14px; min-width: 330px; height: 74px; margin-top: 7px; padding: 0 calc(var(--k) * 92) 7px calc(var(--k) * 104); border: 0 solid; border-image: url("kit/foot/ASSET-0012.webp") 0 92 0 95 fill / 0 calc(var(--k) * 92) 0 calc(var(--k) * 95) stretch; color: #b4b4bb; font: 600 17px/1 var(--ax-font-body); white-space: nowrap; overflow: hidden; }
.ax-stay-input img { flex: none; width: auto; height: 24px; }
.ax-stay-input span { overflow: hidden; padding-block: .1em; margin-block: -.1em; text-overflow: ellipsis; }
.ax-stay-go { --k: calc(64px / 143); flex: none; display: grid; place-items: center; width: 184px; height: 64px; padding: 0 calc(var(--k) * 84) 0 calc(var(--k) * 62); border: 0 solid; border-image: url("kit/foot/ASSET-0010.webp") 0 120 0 130 fill / 0 calc(var(--k) * 120) 0 calc(var(--k) * 130) stretch; color: #fff; font: 700 22px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }

/* Footer: logo, B mark and HUB art with the four facts inside red_outline_display_frame, four caps link columns,
   FOLLOW US as social_discord_hex / social_youtube_hex, and right under them the copyright bar on Cyber Eden
   ASSET-0018 (recoloured to the site red; Eden logo, EDEN, links and STILL WE RISE painted out; its left cap holds the
   barrage.cc art, the plain run x 206-246 stretches under the live copyright, the slash cap stays native). --k = 72px / 106. */
.ax-foot { margin-top: 24px; font-family: var(--ax-font-body); font-weight: 600; }
.ax-foot-main { display: grid; align-items: start; grid-template-columns: auto repeat(4, minmax(0, 130px)) minmax(0, 1fr); column-gap: 32px; padding: 50px 0 30px; }
.ax-foot-brand { display: flex; align-items: center; gap: 26px; align-self: start; }
.ax-foot-logo { display: block; }
.ax-foot-logo img { width: auto; height: 50px; }
.ax-rating { position: relative; display: flex; align-items: center; gap: 12px; width: 252px; aspect-ratio: 343 / 163; padding: 0 16px 0 22px; }
.ax-rating-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ax-rating-box { flex: none; display: grid; justify-items: center; gap: 4px; width: 66px; }
.ax-rating-box > img { width: 40px; height: 40px; }
.ax-rating-box .inline-wordmark { display: block; width: auto; height: 21px; margin: 0; vertical-align: 0; filter: none; }
.ax-rating ul { margin: 0; padding: 0; list-style: none; color: #e6e6ea; font-size: 13px; line-height: 1.6; white-space: nowrap; }
.ax-foot-col { display: grid; align-content: start; }
.ax-foot-col h2, .ax-follow h2 { margin-bottom: 10px; color: #fff; font: 700 17px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.ax-foot-col a { display: flex; align-items: center; height: 24px; color: #9b9ba3; font: 700 15px/1 var(--ax-font-ui); letter-spacing: .02em; transition: color .2s; }
.ax-foot-col a:hover, .ax-foot-col a:focus-visible { color: #fff; }
.ax-follow { justify-self: end; display: grid; justify-items: center; align-content: start; }
.ax-follow-row { --ax-hover-push: 6px; display: flex; gap: 10px; }
.ax-follow-row a { display: block; }
.ax-follow-row img { display: block; width: auto; height: 56px; }
.ax-foot-bottom { --k: calc(72px / 106); position: relative; isolation: isolate; display: flex; align-items: center; height: 72px; margin: 0 auto 28px; padding: 0 calc(var(--k) * 261) 0 calc(var(--k) * 36); color: #a3a3ab; font-size: 13px; line-height: 1.4; }
.ax-foot-bar { position: absolute; inset: 0; z-index: -1; border: 0 solid; border-image: url("kit/foot/ASSET-0018.webp") 0 261 0 206 fill / 0 calc(var(--k) * 261) 0 calc(var(--k) * 206) stretch; }
.ax-foot-bottom p { min-width: 0; padding-left: calc(var(--k) * 30); }
.ax-foot-bottom .inline-wordmark { height: 2.15em; margin: -.125em .08em; vertical-align: -.66em; filter: none; }
.ax-studio { flex: none; display: flex; justify-content: center; width: calc(var(--k) * 160); }
.ax-studio img { width: 100%; height: auto; }

/* Shared hover and light-up (site-wide spec; the vars live in site-apex.css, the fallbacks match them).
   JOIN, the FOLLOW US hexes and the footer logo also grow (--ax-hover-scale); the other hexes step aside (--ax-hover-push, 6px on that row). */
.ax-stay-field, .ax-follow-row a, .ax-foot-logo, .ax-studio { transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease, ease), scale .2s var(--ease, ease), translate .25s var(--ease, ease)); }
.ax-stay-field:hover, .ax-stay-field:focus-visible, .ax-follow-row a:hover, .ax-follow-row a:focus-visible,
.ax-foot-logo:hover, .ax-foot-logo:focus-visible, .ax-studio:hover, .ax-studio:focus-visible { filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); }
.ax-stay-field:hover, .ax-stay-field:focus-visible, .ax-follow-row a:hover, .ax-follow-row a:focus-visible,
.ax-foot-logo:hover, .ax-foot-logo:focus-visible, .ax-studio:hover, .ax-studio:focus-visible { z-index: 1; scale: var(--ax-hover-scale, 1.06); }
/* The picture inside each one (the Discord wordmark in the field, the hex art, the logos) also zooms and turns (--ax-art-*). */
.ax-stay-input img, .ax-follow-row img, .ax-foot-logo img, .ax-studio img { transition: scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }
.ax-follow-row a:is(:hover, :focus-visible) ~ a { translate: var(--ax-hover-push, 6px) 0; }
.ax-follow-row a:has(~ a:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 6px)) 0; }
/* No white focus or tap box on the footer art: keyboard focus shows the same art-following glow as hover. */
.ax-stay-field, .ax-follow-row a, .ax-foot-logo, .ax-studio { -webkit-tap-highlight-color: transparent; }
:is(.ax-foot, .ax-stay) :is(.ax-stay-field, .ax-follow-row a, .ax-foot-logo, .ax-studio):is(:focus, :focus-visible) { outline: none; }
.ax-stay-field:is(:hover, :focus-visible) .ax-stay-input img, .ax-follow-row a:is(:hover, :focus-visible) img,
.ax-foot-logo:is(:hover, :focus-visible) img, .ax-studio:is(:hover, :focus-visible) img { scale: var(--ax-art-zoom, 1.1); rotate: var(--ax-art-turn, -3deg); }

@media (max-width: 1280px) {
  .ax-foot-main { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; row-gap: 34px; }
  .ax-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
  .ax-stay-in { flex-wrap: wrap; gap: 18px 24px; padding: 32px 0; }
  .ax-stay-copy { flex: 1 1 280px; }
  .ax-stay-field { margin-left: 0; }
}
@media (max-width: 960px) {
  .ax-foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .ax-foot-brand { flex-wrap: wrap; gap: 20px; }
  .ax-follow { grid-column: 1 / -1; justify-self: start; justify-items: start; }
}
/* Copyright bar: below 761px the line no longer fits two rows inside the bar, so it moves under it. */
@media (max-width: 760px) {
  .ax-foot-bottom { flex-direction: column; align-items: stretch; gap: 14px; height: auto; padding: 0; }
  .ax-foot-bar { bottom: auto; height: calc(var(--k) * 106); }
  .ax-studio { height: calc(var(--k) * 106); align-items: center; padding-left: calc(var(--k) * 36); box-sizing: content-box; }
  .ax-foot-bottom p { padding: 0; }
}
/* The field (ASSET-0012 + JOIN) needs 518px; below that only JOIN shows. */
@media (max-width: 580px) {
  .ax-stay-field { width: auto; }
  .ax-stay-input { display: none; }
}
@media (max-width: 640px) {
  .ax-stay-mark { width: 60px; height: 60px; }
  .ax-stay-copy h2 { font-size: 28px; }
  .ax-stay-copy p { font-size: 15px; }
  .ax-foot-main { padding-top: 40px; }
  .ax-foot-bottom { --k: calc(56px / 106); }
}