/* Shared chrome for crowdform signoff + archive:
   font, page width system, header (logo + showreel button), footer, modal. */

@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/open-sauce-sans-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/open-sauce-sans-latin-600.woff2") format("woff2");
}

:root {
  --page-pad: clamp(1.25rem, 4vw, 2.5rem);
  --page-max: 100rem;   /* upper limit on very large screens */
  --footer-max: var(--page-max);
  --blur-h: 6rem;       /* height of the gradual blur at the foot of the page */
}

*, *::before, *::after { box-sizing: border-box; }

html { background: #120F20; }

body {
  margin: 0;
  min-height: 100svh;
  position: relative;
  color: #fff;
  font-family: "Open Sauce Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #fff; color: #120F20; }

/* ---------- Header ----------
   Sticky rather than fixed so it reserves its own space at the top of the
   document, which keeps content from starting underneath it. Once scrolling
   begins it pins to the top and content passes behind it. Its z-index sits
   above the gradual blur so the nav itself is never blurred. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vh, 2rem) var(--page-pad);
}

.site-header__left {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.logo-link { display: inline-flex; }

.logo {
  display: block;
  width: clamp(6rem, 16vw, 8rem);
  height: auto;
  color: #fff;
}

/* ---------- Pill button (showreel, pager, back) ---------- */
.btn {
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.15rem;
  font-family: inherit;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

/* Specular highlight: a thin light that runs along the pill's edge and points
   toward the cursor, fading in as the pointer approaches. Adapted from the
   React Bits <SpecularButton /> (WebGL) as a masked conic-gradient ring so it
   stays dependency free and keeps the fully round border radius. */
.btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  padding: 1px;
  background: conic-gradient(
    from var(--sb-angle, 130deg),
    rgba(255, 255, 255, 0.95) 0deg,
    rgba(255, 255, 255, 0) 34deg,
    rgba(255, 255, 255, 0) 146deg,
    rgba(255, 255, 255, 0.95) 180deg,
    rgba(255, 255, 255, 0) 214deg,
    rgba(255, 255, 255, 0) 326deg,
    rgba(255, 255, 255, 0.95) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--sb-bright, 0);
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}

.btn:active { transform: scale(0.97); }

.btn:hover, .btn:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
  text-decoration: none;
}

.btn svg { width: 0.6rem; height: 0.6rem; flex: none; }

/* ---------- Footer ---------- */
/* Sits above the gradual blur so the footer stays sharp. */
.site-footer {
  position: relative;
  z-index: 1200;
  max-width: var(--footer-max);
  margin: 0 auto;
  padding: 5rem var(--page-pad) 3rem;
  font-size: 1rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer nav {
  display: flex;
  gap: 1.5rem;
}

.site-footer a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: text-decoration-color 0.2s ease;
}

.site-footer a:hover, .site-footer a:focus-visible { text-decoration-color: #fff; }

/* ---------- Showreel modal ---------- */
.modal {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.modal::backdrop {
  background: rgba(9, 7, 16, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.modal__inner {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.modal__frame {
  position: relative;
  width: min(100%, 68rem);
  aspect-ratio: 16 / 9;
}

.modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}

.modal__close {
  position: absolute;
  top: -3rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-family: inherit;
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.modal__close:hover, .modal__close:focus-visible { opacity: 1; outline: none; }

@media (max-width: 48rem) {
  .modal__close { top: -2.75rem; }
  .logo { width: 9rem; }
  .btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    gap: 0.45rem;
  }
  .btn svg { width: 0.5rem; height: 0.5rem; }
  .site-footer { font-size: 0.9375rem; }
  .site-footer nav { gap: 1rem; }
}