/* Adapted from UI Vault sections/footer/model-001.
   Same layout, same measurements, same motion as the model. Only two things
   change: the fonts (--font-display instead of DM Serif Display) and the
   colours (footer tokens instead of the model's beige and #0c0c0c).

   Three deliberate differences, asked for: a Legal column in place of the
   model's "Author resources", a tighter gap above the big wordmark, and a
   bottom bar that spans the whole page width instead of just the shell. */

.mira-footer {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* The shell fills the footer so the wordmark and the bar always sit at the very
   bottom of the page: any spare height opens up above them, never between. */
.mira-footer__shell {
  display: flex;
  flex-direction: column;
  width: min(88%, 1500px);
  min-height: calc(100vh - 90px);
  margin: 0 auto;
  padding-top: 65px;
}

/* =========================================================
   TOP
========================================================= */

.mira-footer__statement {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.97;
}

/* =========================================================
   NAV GRID — the model's 4 columns, "1fr 1fr 1.3fr 1fr": its 4th
   (Author resources) became Legal and moved third, before the social
   chips, so the wide 1.3fr track now sits last.
========================================================= */

.mira-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: clamp(35px, 5vw, 90px);
  margin-top: clamp(75px, 8vw, 120px);
}

.mira-footer__column h3 {
  margin: 0 0 22px;
  color: var(--ui-footer-text);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.6vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mira-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.mira-footer__nav a {
  position: relative;
  display: inline-block;
  color: rgba(var(--ui-footer-text-rgb), 0.78);
  font-size: var(--fs-body);
  line-height: 1.3;
  text-decoration: none;
  transition:
    color 0.3s ease,
    transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.mira-footer__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--ui-footer-text);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.mira-footer__nav a:hover {
  color: var(--ui-footer-text);
  transform: translateX(4px);
}
.mira-footer__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* =========================================================
   SOCIAL
========================================================= */

.mira-footer__social {
  display: flex;
  flex-wrap: wrap;
  max-width: 350px;
  gap: 9px;
}

.mira-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(var(--ui-surface-rgb), 0.7);
  box-shadow: 0 2px 5px rgba(var(--ui-shadow-rgb), 0.02);
  color: var(--ui-footer-text);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.mira-footer__social a:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--ui-footer-text-rgb), 0.08);
  background: var(--ui-surface);
  box-shadow: 0 9px 25px rgba(var(--ui-shadow-rgb), 0.07);
}

.mira-footer__social iconify-icon {
  font-size: 1.15rem;
  color: var(--brand, currentColor);
  transition: color 0.35s ease;
}

/* Each network in its own colour: the icon at rest, the whole chip on hover
   (brand tokens in theme.css). */
.mira-footer__social--tiktok { --brand: var(--brand-mono); --brand-fill: var(--brand-mono); --brand-ink: var(--brand-on-mono); }
.mira-footer__social--instagram { --brand: var(--brand-instagram); --brand-fill: var(--brand-instagram-gradient); }
.mira-footer__social--x { --brand: var(--brand-mono); --brand-fill: var(--brand-mono); --brand-ink: var(--brand-on-mono); }
.mira-footer__social--youtube { --brand: var(--brand-youtube); --brand-fill: var(--brand-youtube); }
.mira-footer__social--threads { --brand: var(--brand-mono); --brand-fill: var(--brand-mono); --brand-ink: var(--brand-on-mono); }

/* TikTok's logo edge: a cyan and a pink offset behind the note. */
.mira-footer__social--tiktok iconify-icon {
  filter: drop-shadow(-1px -1px 0 var(--brand-tiktok-cyan)) drop-shadow(1px 1px 0 var(--brand-tiktok-pink));
}

.mira-footer__social a[class*="--"]:hover {
  border-color: transparent;
  background: var(--brand-fill);
  color: var(--brand-ink, var(--ui-on-photo));
}

.mira-footer__social a[class*="--"]:hover iconify-icon { color: var(--brand-ink, var(--ui-on-photo)); }

.mira-footer__social a:focus-visible {
  outline: 2px solid var(--brand, var(--ui-footer-text));
  outline-offset: 3px;
}

/* =========================================================
   BIG WORDMARK — bleeds past the bottom edge and is cut by the bar,
   exactly like the model. Only the gap above it is tighter than the
   model's clamp(70px, 8vw, 130px).
========================================================= */

.mira-footer__brand {
  position: relative;
  margin-top: auto;
  height: clamp(210px, 23vw, 370px);
  pointer-events: none;
  user-select: none;
}

.mira-footer__wordmark {
  position: absolute;
  left: 50%;
  bottom: clamp(-135px, -8vw, -70px);
  transform: translateX(-50%);
  color: var(--ui-footer-text);
  font-family: var(--font-display);
  font-size: clamp(15rem, 38vw, 44rem);
  font-weight: 800;
  letter-spacing: -0.115em;
  line-height: 0.68;
  white-space: nowrap;
}

/* =========================================================
   BOTTOM BAR — full page width (the model kept it inside the shell)
========================================================= */

.mira-footer__bottom {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  min-height: 90px;
  padding: 24px clamp(24px, 6vw, 96px);
  border-top: 1px solid rgba(var(--ui-footer-text-rgb), 0.17);
  background: rgba(var(--ui-footer-deep-rgb), 0.62);  /* 30% more transparent than the model's .88 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ui-footer-text);
  font-size: var(--fs-small);
}

.mira-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}

.mira-footer__legal a {
  color: var(--ui-footer-text);
  text-decoration: none;
  transition: color 0.25s ease;
}
.mira-footer__legal a:hover { color: var(--ui-footer-text); }

.mira-footer__note {
  margin: 0;
  text-align: right;
}

.mira-footer a:focus-visible {
  outline: 2px solid var(--ui-footer-text);
  outline-offset: 5px;
}

/* =========================================================
   TABLET — the model's 1100px step, snapped to the system's 1024px
========================================================= */

@media (max-width: 1023.98px) {
  .mira-footer__shell { width: 90%; }
  .mira-footer__grid { grid-template-columns: repeat(2, 1fr); row-gap: 65px; }
  .mira-footer__brand { height: 250px; }
  .mira-footer__wordmark { font-size: 37vw; }
}

/* =========================================================
   MOBILE — the model's 760px step, snapped to 768px
========================================================= */

@media (max-width: 767.98px) {
  .mira-footer__shell { width: 88%; padding-top: 45px; }
  .mira-footer__statement { font-size: 2rem; }
  .mira-footer__grid { grid-template-columns: repeat(2, 1fr); margin-top: 70px; gap: 55px 30px; }
  .mira-footer__brand { height: 180px; }
  .mira-footer__wordmark { bottom: -35px; font-size: 34vw; }
  .mira-footer__bottom {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 22px 24px;
  }
  .mira-footer__note { text-align: left; }
}

/* =========================================================
   SMALL MOBILE — the model's 520px step, snapped to 480px
========================================================= */

@media (max-width: 479.98px) {
  .mira-footer__grid { grid-template-columns: 1fr; gap: 52px; }
  .mira-footer__social { max-width: 100%; }
  .mira-footer__brand { height: 140px; }
  .mira-footer__wordmark { bottom: -8px; font-size: 34vw; }
}

@media (prefers-reduced-motion: reduce) {
  .mira-footer__nav a,
  .mira-footer__nav a::after,
  .mira-footer__social a {
    transition-duration: 0.01ms;
  }
}