/* Site footer: the cockpit on its floor fills the first screen, the call to action sits on the floor,
   then the bases with live time and the legal line. Built for night, works by day. */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
}
/* A low glow at the bottom edge: the sun just below the horizon. */
.footer::after {
  content: '';
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--color-dawn-amber) 20%, transparent), transparent 62%);
  pointer-events: none;
}
[data-theme='dark'] .footer::after,
.footer[data-theme='dark']::after {
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--color-dawn-rust) 34%, transparent), transparent 62%);
}

/* The stage and the call to action share one grid cell: the panels arc across the top half and the
   CTA stands on the floor below them. Empty CTA space lets pointer events through to the cockpit. */
.footer__scene {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
}
.footer__stage,
.footer__cta {
  grid-area: 1 / 1;
}
.footer__stage {
  position: relative;
  min-height: 640px;
}
.footer__cockpit {
  position: absolute;
  inset: 0 0 18% 0;
}
.footer__label {
  position: absolute;
  top: calc(var(--space-6) + 56px); /* below the site header */
  left: var(--space-page);
  z-index: 1;
  color: var(--ink-muted);
}
.footer__cta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-8);
  align-items: end;
  align-self: end;
  padding: 0 var(--space-page) var(--space-8);
  pointer-events: none;
}
.footer__cta > * {
  pointer-events: auto;
}
.footer__main .t-display-l {
  margin-top: var(--space-5);
}
.footer__main .t-display-l em {
  display: block;
}

/* Topic rows: serif label, muted hint, an arrow that leans forward on hover. */
.footer__topics {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__topic {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-4) 0;
  border: 0;
  border-top: 1px solid var(--hairline-strong);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.footer__topics li:last-child .footer__topic {
  border-bottom: 1px solid var(--hairline-strong);
}
.footer__topic-label {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.15;
  transition: color var(--dur-base) var(--ease-standard);
}
.footer__topic-hint {
  font-size: var(--text-small);
  color: var(--ink-muted);
}
.footer__topic .glyph {
  align-self: center;
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.footer__topic:hover .footer__topic-label,
.footer__topic:focus-visible .footer__topic-label {
  font-style: italic;
  color: var(--accent);
}
.footer__topic:hover .glyph,
.footer__topic:focus-visible .glyph {
  transform: translateX(6px);
}
.footer__write {
  margin-top: var(--space-4);
  color: var(--ink-muted);
}
.footer__write a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

/* ── Bases ── */

.footer__bases {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 var(--space-page);
  padding: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  list-style: none;
}
.footer__bases li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-5) 0;
}
.footer__bases li + li {
  padding-left: var(--space-5);
  border-left: 1px solid var(--hairline);
}
.footer__bases time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding-right: var(--space-5);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Sun up: a gold dot with a glow. Night: an empty ring. */
.footer__bases time::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  transition: background var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
.footer__bases time[data-daylight='day']::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ── Legal line ── */

.footer__legal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-5) var(--space-page) var(--space-6);
  color: var(--ink-muted);
}
.footer__legal nav {
  display: flex;
  gap: var(--space-5);
}
.footer__legal a {
  color: inherit;
  text-decoration: none;
}
.footer__legal a:hover {
  color: var(--ink);
}

/* ── Reveal ── */

.footer [data-reveal] {
  opacity: 0;
}
.footer.is-visible [data-reveal] {
  animation: footer-in 1100ms var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes footer-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(18px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .footer [data-reveal] {
    opacity: 1;
  }
  .footer.is-visible [data-reveal] {
    animation: none;
  }
}

@media (max-width: 900px) {
  .footer__scene {
    display: block;
    min-height: 0;
  }
  .footer__stage {
    height: 72vh;
    min-height: 480px;
  }
  .footer__cockpit {
    inset: 0;
  }
  .footer__cta {
    grid-template-columns: 1fr;
    gap: var(--space-7);
    padding-top: var(--space-6);
  }
  .footer__topic {
    grid-template-columns: 1fr auto;
  }
  .footer__topic-hint {
    grid-column: 1;
    grid-row: 2;
  }
  .footer__topic .glyph {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .footer__bases {
    grid-template-columns: 1fr;
  }
  .footer__bases li + li {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .footer__bases time {
    padding-right: 0;
  }
}