/* ==========================================================================
   Footer — tonal-blue "STRAITS" marquee band, closing statement + sitemap,
   email with a drawn underline, flood-fill social discs, meta line.
   Light (--ice) section; bottom padding keeps the fixed dock off the content.
   ========================================================================== */

.s-footer {
  --footer-band-bg: #8daeff;     /* --blue lifted ~55% toward white */
  --footer-band-fg: #1d2c93;     /* deep tonal blue for the wordmark + mark */
  background: var(--ice);
  color: var(--ink);
  padding-bottom: 220rem;        /* room for the fixed dock */
  overflow: hidden;
}

/* ---------- Wordmark marquee band ---------- */
.footer__band {
  position: relative;
  height: 308rem;
  overflow: hidden;
  background: var(--footer-band-bg);
  color: var(--footer-band-fg);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 245rem;             /* Anton's caps are ~.87em: 245rem matches crency's 300rem Thunder cap height */
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}
.footer__band-inner { display: flex; height: 100%; gap: 56rem; will-change: transform; }
.footer__band-block {
  display: flex; align-items: center; gap: 36rem;
  flex: none; width: max-content; height: 100%;
}
.footer__band-word {
  display: block;
  line-height: 1;
  padding-top: .013em;           /* optical centring of Anton's caps */
  letter-spacing: .005em;
}
/* the separator mark is a disc; CSS radius clips it (no SVG ids to duplicate in marquee clones) */
.footer__band-mark { flex: none; width: .78em; height: .78em; border-radius: 50%; overflow: hidden; }
.footer__band-disc { fill: currentColor; }
.footer__band-speed rect { fill: var(--footer-band-bg); }
.footer__band-waves { stroke: var(--footer-band-bg); }
.footer__band-pixel { fill: var(--red); }
/* the sea flows right → left, front rows faster (px = SVG user units; one wavelength = 50) */
.footer__band-wave { animation: footer-flow 3.4s linear infinite; }
.footer__band-wave:nth-child(2) { animation-duration: 2.7s; }
.footer__band-wave:nth-child(3) { animation-duration: 2.1s; }
@keyframes footer-flow { to { transform: translateX(-50px); } }
html.reduced-motion .footer__band-wave { animation: none; }

/* ---------- Columns ---------- */
.footer__container { margin-top: 60rem; }
.footer__wrap { display: flex; justify-content: space-between; align-items: stretch; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; }

/* statement heading + little logo sign-off */
.footer__head { display: flex; align-items: flex-end; gap: 20rem; }
.footer__title {
  font-family: var(--font-body);
  font-size: var(--h3);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .92;
  text-transform: none;
}
.footer__logo {
  width: 62rem; height: 62rem; flex: none; object-fit: contain;
  margin-bottom: -4rem;
  transform-origin: 50% 90%;
}
html.js:not(.reduced-motion):not(.no-gsap) .footer__logo { opacity: 0; transform: scale(.4) rotate(-30deg); }

.footer__sitemap { margin-top: 50rem; font-size: 28rem; font-weight: 600; line-height: 1.3; }
.footer__nav { width: 100%; margin-top: 17rem; }
.footer__nav-list { display: flex; flex-direction: column; align-items: flex-start; gap: 12rem; }
.footer__link, .footer__privacy { display: inline-flex; padding: 5rem 0; font-size: 22rem; line-height: 1; }
.footer__link .menu-roll, .footer__privacy .menu-roll { vertical-align: top; }

/* ---------- Email with drawn underline ---------- */
.footer__contacts { font-style: normal; }
.footer__email {
  --email-ul: 1;
  position: relative;
  display: inline-block;
  font-size: var(--h3);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .92;
  white-space: nowrap;
}
html.js:not(.reduced-motion):not(.no-gsap) .footer__email { --email-ul: 0; }
.footer__email::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.092em;
  height: .077em;
  background: currentColor;
  transform: scaleX(var(--email-ul)) translateZ(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}
/* hover: the underline wipes out to the right, then redraws from the left */
.footer__email:hover::after { animation: footer-ul .72s var(--ease-in-out); }
@keyframes footer-ul {
  0%     { transform: scaleX(var(--email-ul)); transform-origin: 100% 50%; }
  46%    { transform: scaleX(0); transform-origin: 100% 50%; }
  46.1%  { transform: scaleX(0); transform-origin: 0 50%; }
  100%   { transform: scaleX(var(--email-ul)); transform-origin: 0 50%; }
}

/* ---------- Social discs with flood-fill hover ---------- */
.footer__socials { display: flex; gap: 20rem; margin-top: 50rem; }
.footer__social {
  display: block;
  width: 64rem; height: 64rem;
  border-radius: 50%;
  color: var(--ink);
}
.footer__social > .bubble__circle { display: none; }   /* this button floods instead */
.footer__social-icon { display: block; width: 100%; height: 100%; }
.footer__social-disc { fill: var(--ink); }
.footer__social-glyph { stroke: var(--ice); }
.footer__social-dot, .footer__social-fill { fill: var(--ice); }
/* flood layer: an inverted copy (cyan disc, ink glyph) wiped in from the bottom */
.footer__flood {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cyan);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .25s cubic-bezier(.25, .46, .45, .94);
  will-change: clip-path;
}
.footer__flood .footer__social-icon { transform: scale(1.06); transition: none; }
.footer__flood .footer__social-disc { fill: var(--cyan); }
.footer__flood .footer__social-glyph { stroke: var(--ink); }
.footer__flood .footer__social-dot, .footer__flood .footer__social-fill { fill: var(--ink); }
.footer__social:hover .footer__flood,
.footer__social:focus-visible .footer__flood { clip-path: inset(0 0 0 0); }
/* leaving: the flood keeps rising out through the top while its icon counter-slides.
   The clip stays open during .out (only transform transitions here), otherwise it would
   snap shut the moment :hover ends and the exit would never be seen. */
.footer__social.out .footer__flood {
  clip-path: inset(0 0 0 0);
  transform: translateY(-102%);
  transition: transform .25s cubic-bezier(.25, .46, .45, .94), clip-path .25s cubic-bezier(.25, .46, .45, .94);
}
.footer__social.out .footer__flood .footer__social-icon { transform: translateY(102%) scale(1.06); transition: transform .25s cubic-bezier(.25, .46, .45, .94); }
.footer__social.resetting .footer__flood { clip-path: inset(100% 0 0 0) !important; transform: none !important; transition: none !important; }
.footer__social.resetting .footer__flood .footer__social-icon { transform: scale(1.06) !important; transition: none !important; }

/* ---------- Meta ---------- */
.footer__meta { margin-top: auto; padding-top: 40rem; font-size: 22rem; }
.footer__copy { margin-top: 12rem; line-height: 1.35; }
.footer__copy span { display: inline-block; }   /* break before "All rights reserved." when it must wrap */

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 991px) {
  .s-footer { padding-bottom: 225rem; }      /* tablet dock reaches ~172rem up */
  .footer__band { font-size: 163rem; height: 264rem; }
  .footer__band-inner { gap: 36rem; }
  .footer__band-block { gap: 30rem; }
  .footer__band-mark { width: .8em; height: .8em; }
  .footer__container { margin-top: 50rem; }
  .footer__wrap { flex-direction: column; gap: 90rem; }
  .footer__title, .footer__email { font-size: 49rem; }
  .footer__logo { width: 48rem; height: 48rem; }
}

/* ==========================================================================
   Phone — everything stacks (crency mob layout)
   ========================================================================== */
@media (max-width: 743px) {
  .s-footer { padding-bottom: 112rem; }
  .footer__band { font-size: 82rem; height: 130rem; }
  .footer__band-inner { gap: 30rem; }
  .footer__band-block { gap: 26rem; }
  .footer__container { margin-top: 50rem; padding: 0 16rem; }
  .footer__wrap { gap: 48rem; }
  .footer__head { gap: 10rem; }
  .footer__title { font-size: 28rem; }
  .footer__logo { width: 30rem; height: 30rem; margin-bottom: -2rem; }
  .footer__sitemap { margin-top: 44rem; font-size: 28rem; line-height: 1; }
  .footer__nav { margin-top: 14rem; }
  .footer__nav-list { gap: 0; }
  .footer__link { font-size: 15rem; padding: 6rem 0; }
  .footer__email { font-size: 24rem; }
  .footer__socials { gap: 10rem; margin-top: 40rem; }
  .footer__social { width: 38rem; height: 38rem; }
  .footer__meta { padding-top: 22rem; font-size: 16rem; }
  .footer__privacy { font-size: 16rem; padding: 4rem 0; }
  .footer__copy { margin-top: 14rem; }
}