/* chrome.css — Footer and overlays (cursor label, preview, brief tray). */

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; padding-top: 4rem; border-top: 1px solid var(--footer-rule); background: var(--hero-stage); }
.hero, .cta2, .site-footer { --fg-muted: var(--stage-muted); }
.footer__top { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .875rem; color: var(--fg-muted); }
.footer-nav a:hover, .footer-nav a[aria-current] { color: var(--fg-strong); }
.footer__mark {
  position: relative; display: block; margin-top: 1.5rem; padding-bottom: .14em; font-size: clamp(6rem, 25vw, 23rem); line-height: .92; text-align: center; white-space: nowrap; user-select: none;
  background-image: linear-gradient(357deg, rgba(34, 112, 195, 1) 0%, rgba(96, 160, 214, 1) 40%, rgba(255, 228, 160, 1) 55%, rgba(253, 187, 45, 1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer__mark > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.footer__mark.is-live { background: none; }   /* the canvas draws the same word, with the gradient moving through it */
body.has-tray .site-footer { padding-bottom: 5rem; }
/* ---------- Overlays: cursor label, preview, brief tray ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; }
.cursor__label { display: inline-block; padding: .375rem .75rem; border-radius: var(--r-pill); background: var(--fg-strong); color: var(--bg); font-size: .75rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; opacity: 0; transform: translate(16px, 16px) scale(.95); transform-origin: 0 0; transition: opacity .16s var(--ease-in), transform .16s var(--ease-in); }
.cursor.is-on .cursor__label { opacity: 1; transform: translate(16px, 16px) scale(1); }
.peek { position: fixed; left: 0; top: 0; z-index: 64; width: clamp(16rem, 22vw, 22rem); aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-card); background: var(--layer); pointer-events: none; opacity: 0; box-shadow: 0 30px 80px -30px rgb(0 0 0 / .9); transition: opacity .3s; }
.peek.is-on { opacity: 1; }
.peek > img, .peek video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.peek video { opacity: 0; transition: opacity .4s; }
.peek.has-film video { opacity: 1; }
.tray {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; align-items: center; gap: .875rem;
  max-width: calc(100vw - 2rem); padding: .4375rem .4375rem .4375rem 1.125rem; border-radius: var(--r-pill);
  background: var(--tray-bg); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 24px 60px -24px rgb(0 0 0 / .45);
  opacity: 0; transform: translate(-50%, 24px); transition: opacity .4s, transform .6s var(--ease-out);
}
.tray.is-open { opacity: 1; transform: translate(-50%, 0); }
.tray__label { font-size: .8125rem; font-weight: 500; color: var(--fg-strong); white-space: nowrap; }
.tray__count { display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding-inline: .375rem; border-radius: var(--r-pill); background: var(--accent); color: var(--ink); font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tray__items { min-width: 0; max-width: 24rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8125rem; color: var(--fg-muted); }
@media (max-width: 639.98px) { .tray__items { display: none; } }
.tray__clear { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-pill); color: var(--fg-muted); }
.tray__clear:hover { background: var(--tint); color: var(--fg-strong); }