/* Hand-maintained fixes on top of the generated design CSS.
   Loaded after fonts.css and styles.css. tools/unpack_bundle.py never
   overwrites this file — put durable tweaks here, not in styles.css. */

/* The logo is a 2774x234 wordmark, so at height:26px it renders ~308px wide and
   collides with the nav CTA on a phone. The icon occupies the first 234 units of
   the viewBox (glyphs start at x=432), so object-fit:cover into a square box
   crops to exactly the icon — no second asset needed. */
@media (max-width: 640px) {
  nav a[href="#top"] img {
    width: 26px;
    object-fit: cover;
    object-position: left center;
  }
}

/* ---- Footer on small screens ---------------------------------------------
   The design's own breakpoint takes .foot-grid from four columns to two at
   860px and then leaves it there, so the brand block (logo + tagline) ends up
   wedged into a half-width cell beside a link list, and on a phone the two
   columns are ~150px wide — narrow enough that "Terms & Conditions" wraps.
   Inline styles set the grid, so these need !important to land. */

@media (max-width: 860px) {
  .foot-grid {
    padding: 48px 24px 32px !important;
    gap: 34px 24px !important;
  }

  /* Give the brand its own full-width row instead of a cramped cell. */
  .foot-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .foot-grid > div:first-child p {
    max-width: 420px !important;
  }

  /* Links are the footer's only tap targets; 11px of gap is a thin thing to
     hit with a thumb. Pad them into a comfortable row instead. */
  .foot-grid a {
    display: block;
    padding: 5px 0;
  }

  /* Keep the copyright bar's gutter flush with the grid above it. */
  footer > div:last-child {
    padding: 20px 24px 34px !important;
  }
}

/* Two ~150px columns stop working once the phone gets narrow. Stack outright. */
@media (max-width: 540px) {
  .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

/* ---- Hero orbit ----------------------------------------------------------
   The container's children are, in order: four ring divs, four data-node divs,
   then the brand-mark <svg>. Nothing carries a class, so the rings and nodes are
   selected by type position. Only transform and opacity are animated, so this
   stays on the compositor and costs nothing on scroll. */

/* Arc mark rotates. The centre dot sits on the rotation axis, so it reads as
   still — the arcs sweep around it. */
.orbit > svg {
  animation: orbit-sweep 30s linear infinite;
  transform-origin: 50% 50%;
}

/* Rings breathe, staggered outward, so the field feels alive rather than
   scanned. Scale is tiny on purpose — a 1px ring shimmers if you push it. */
.orbit > div:nth-of-type(-n + 4) {
  animation: orbit-breathe 7s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.orbit > div:nth-of-type(2) { animation-delay: -0.9s; }
.orbit > div:nth-of-type(3) { animation-delay: -1.8s; }
.orbit > div:nth-of-type(4) { animation-delay: -2.7s; }

/* Data nodes drift and twinkle, each on its own rhythm so they never sync up. */
.orbit > div:nth-of-type(n + 5) {
  animation: orbit-drift 5.5s ease-in-out infinite;
}
.orbit > div:nth-of-type(6) { animation-duration: 7.2s; animation-delay: -1.4s; }
.orbit > div:nth-of-type(7) { animation-duration: 6.3s; animation-delay: -3.1s; }
.orbit > div:nth-of-type(8) { animation-duration: 8.1s; animation-delay: -2.2s; }

@keyframes orbit-sweep {
  to { transform: rotate(360deg); }
}

@keyframes orbit-breathe {
  0%, 100% { transform: scale(1);     opacity: 1; }
  50%      { transform: scale(1.015); opacity: 0.72; }
}

@keyframes orbit-drift {
  0%, 100% { transform: translate(0, 0);        opacity: 1; }
  50%      { transform: translate(0, -6px);      opacity: 0.55; }
}

/* The design's own reduced-motion rule only covers [data-reveal]. */
@media (prefers-reduced-motion: reduce) {
  .orbit > svg,
  .orbit > div {
    animation: none !important;
  }
}