/* The parts every page shares: the header's LIVE link, the footer, and the moving DH marks. Loaded after site.css.
   Footer icons: simple-icons 16.35.0 (simpleicons.org). The project's files are CC0; the logos stay their owners' marks. */

/* ---------- The header's link to TikTok (D-02): the same on every page. ---------- */

.live-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--white);
  font: 400 1.25rem/1 var(--display);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.live-link::after { content: ""; position: absolute; right: 8px; bottom: 7px; left: 8px; height: 3px; border-radius: 2px; background: var(--red); }
.live-link:active { opacity: 0.7; }

/* ---------- Footer. The first row is three columns with the same outer widths, so the middle one is truly centred. ---------- */

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 8px;
  margin-top: 28px;
  padding-block: 10px calc(10px + var(--safe-bottom));
  padding-inline: var(--pad-l, var(--gutter-l)) var(--pad-r, var(--gutter-r)); /* --pad-* are the wide-screen margins, set in site.css. */
  border-top: 1px solid var(--line);
  background: var(--black);
  color: var(--muted);
}
.footer-mark { justify-self: start; width: 56px; height: 44px; background: url("brand/mark-dh.svg") center / contain no-repeat; }
.footer-find { display: grid; justify-items: center; gap: 4px; }
.find-title { color: var(--white); font: 400 1rem/1.15 var(--display); letter-spacing: 0.04em; white-space: nowrap; text-transform: uppercase; }
.socials { display: flex; gap: 6px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.socials svg { display: block; width: 22px; height: 22px; fill: var(--white); }
.socials a:active { background: var(--raised); }
.footer-end { display: contents; } /* On a phone its parts sit straight in the footer's grid. */
.footer-privacy {
  display: inline-flex;
  align-items: center;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  min-width: 44px;
  min-height: 44px;
  color: var(--white);
  font: 600 1rem/1 var(--label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.footer-privacy:active { opacity: 0.7; }
/* These lines take rows only when they are there, so the live build can strip one without leaving a gap. */
.footer-note, .site-footer > p { grid-column: 1 / -1; justify-self: center; max-width: 46ch; font-size: 0.75rem; line-height: 1.3; text-align: center; text-wrap: balance; }
.footer-note { margin-top: 4px; }

@media (hover: hover) {
  .live-link:hover, .footer-privacy:hover { color: var(--yellow); }
  .socials a:hover { background: var(--raised); }
}

/* ---------- Roomier screens: everything on one line. ---------- */

@media (min-width: 720px) {
  .site-footer { column-gap: 24px; }
  .footer-mark { width: 72px; height: 57px; }
  .find-title { font-size: 1.25rem; }
  .footer-end { display: flex; align-items: center; justify-content: flex-end; gap: 4px 16px; grid-column: 3; grid-row: 1; }
  .footer-note { max-width: 30ch; margin-inline: 0; text-align: right; }
  .footer-note { margin-top: 0; }
}

/* ---------- The DH marks: rest, pop up, spin right round, drop past their size, bounce and settle. ---------- */

/* Rest comes first, so a mark never moves while the page is arriving. It ends at 360 degrees, which looks the same as 0. */
@keyframes dh-pop {
  0%, 56% { transform: perspective(var(--dh-depth)) translateY(0) rotateY(0deg) scale(1); }
  62% { transform: perspective(var(--dh-depth)) translateY(calc(var(--dh-lift) * 0.4)) rotateY(0deg) scale(var(--dh-big)); }
  77% { transform: perspective(var(--dh-depth)) translateY(var(--dh-lift)) rotateY(360deg) scale(var(--dh-big)); }
  84% { transform: perspective(var(--dh-depth)) translateY(0) rotateY(360deg) scale(var(--dh-small)); }
  89% { transform: perspective(var(--dh-depth)) translateY(calc(var(--dh-lift) * 0.4)) rotateY(360deg) scale(1.04); }
  94% { transform: perspective(var(--dh-depth)) translateY(0) rotateY(360deg) scale(0.98); }
  100% { transform: perspective(var(--dh-depth)) translateY(0) rotateY(360deg) scale(1); }
}
/* One loop with no delay: all the marks on a page move together, which is calmer than a stagger. Each size has its own limits, so none reaches an edge. */
html[data-motion="on"] .wordmark::before, html[data-motion="on"] .footer-mark, html[data-motion="on"] .hero__flat { animation: dh-pop 6s ease-in-out infinite; }
html[data-motion="on"] .wordmark::before { --dh-depth: 120px; --dh-lift: -4px; --dh-big: 1.26; --dh-small: 0.88; }
html[data-motion="on"] .footer-mark { --dh-depth: 200px; --dh-lift: -6px; --dh-big: 1.2; --dh-small: 0.9; }
@media (min-width: 720px) { html[data-motion="on"] .footer-mark { --dh-big: 1.1; } } /* The one-line footer is short, so its mark has less room to grow. */
html[data-motion="on"] .hero__flat { --dh-depth: 6000px; --dh-lift: -2px; --dh-big: 1.03; --dh-small: 0.97; }
html[data-motion="on"] .hero[data-hero-live] .hero__flat { animation: none; } /* 3D has taken over and this one is hidden. */