/* ==========================================================================
   Frontier Edge — base and shared components
   Used by every page. Page-specific styles live in home.css and demo.css.
   ========================================================================== */

/* ---------- Fonts: Familjen Grotesk (Google Fonts, SIL Open Font License: fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/FamiljenGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/FamiljenGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Base ---------- */
html, body { margin: 0; background: var(--color-bg); }
body {
  position: relative; overflow-x: clip;
  color: var(--color-fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 3px; }
main:focus { outline: none; } /* main takes focus from the skip link; no ring around the whole page */

/* Content column: 1600px max with the gutter on each side */
.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Hidden SVG holding shared gradients and symbols */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: 12px; left: 12px; z-index: 1002;
  padding: 10px 16px; background: var(--color-fg); color: var(--color-bg);
  font-size: var(--button-size); text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Nav bar ---------- */
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: var(--weight-bold); font-size: var(--wordmark-size); letter-spacing: var(--wordmark-tracking);
  color: var(--color-fg); text-decoration: none;
}
.wordmark .mark { width: 26px; height: 26px; display: block; flex: none; }
.wordmark span, .cta { white-space: nowrap; }
/* very narrow phones (or 400% zoom): the wordmark steps down a touch so it and the button share one row */
@media (max-width: 359px) {
  .wordmark { font-size: 20px; gap: 8px; }
  .wordmark .mark { width: 24px; height: 24px; }
  .site-header .wrap { gap: 12px; }
}

/* ---------- Buttons ----------
   .cta          primary: orange mesh that swings round with a soft overshoot on hover
   .cta.ghost    secondary: dark, quiet */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  box-sizing: border-box; height: var(--button-height); padding: 0 var(--button-pad-x);
  font: inherit; font-weight: var(--weight-regular); font-size: var(--button-size);
  letter-spacing: var(--button-tracking); line-height: 1;
  color: #FFFFFF; background: var(--orange-500);
  border: 1px solid var(--button-border); border-radius: var(--radius);
  text-shadow: var(--button-text-shadow); text-decoration: none; cursor: pointer;
  transition: filter .3s ease;
}
.cta:not(.ghost)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 260%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  background:
    radial-gradient(28% 28% at 66% 38%, var(--orange-glow-yellow), transparent 70%),
    radial-gradient(26% 26% at 36% 62%, var(--orange-glow-green), transparent 70%),
    radial-gradient(30% 30% at 58% 64%, var(--orange-300), transparent 72%),
    radial-gradient(24% 24% at 40% 36%, var(--orange-600), transparent 70%),
    var(--orange-500);
  transition: transform var(--button-swing-duration) var(--ease-overshoot-button);
}
.cta:not(.ghost):hover::before,
.cta:not(.ghost):focus-visible::before { transform: translate(-50%, -50%) rotate(200deg) scale(1.15); }
.cta:not(.ghost):hover { filter: brightness(1.05) saturate(1.05); }
.cta.ghost { color: var(--color-fg); background: var(--surface-control); border-color: var(--border-control); }
.cta.ghost:hover { background: var(--surface-control-hover); }

/* ---------- Green mesh ----------
   Soft colour points that drift on their own cycles; inside a .hover container they shift round each other.
   Place <div class="gm"> with spans .g1–.g6, .y2, .y inside a positioned, overflow-hidden container. */
.gm { position: absolute; inset: -20%; background: var(--green-base); transform: translateZ(0); }
.gm span {
  position: absolute; inset: -10%; display: block; will-change: transform;
  animation: greenFlow var(--t, 14s) ease-in-out infinite alternate;
  transition: translate var(--mesh-swirl-duration) var(--ease-overshoot);
}
.gm .y  { background: radial-gradient(closest-side at 20% 80%, var(--green-yellow), transparent); --t: 11s; }
.gm .y2 { background: radial-gradient(closest-side at 70% 18%, var(--green-yellow-soft), transparent); --t: 15s; }
.gm .g1 { background: radial-gradient(closest-side at 10% 30%, var(--green-1), transparent); --t: 13s; }
.gm .g2 { background: radial-gradient(closest-side at 40% 85%, var(--green-2), transparent); --t: 17s; }
.gm .g3 { background: radial-gradient(closest-side at 48% 40%, var(--green-3), transparent); --t: 12s; }
.gm .g4 { background: radial-gradient(closest-side at 62% 78%, var(--green-4), transparent); --t: 16s; }
.gm .g5 { background: radial-gradient(closest-side at 86% 34%, var(--green-5), transparent); --t: 14s; }
.gm .g6 { background: radial-gradient(closest-side at 84% 86%, var(--green-6), transparent); --t: 18s; }
@keyframes greenFlow {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-12%, 9%) scale(1.14); }
  100% { transform: translate(10%, -8%) scale(.92); }
}
.hover > .gm .y  { translate: 10% -9%; }
.hover > .gm .y2 { translate: -10% 10%; }
.hover > .gm .g1 { translate: 9% 8%; }
.hover > .gm .g2 { translate: -8% -9%; }
.hover > .gm .g3 { translate: -9% 8%; }
.hover > .gm .g4 { translate: 8% -8%; }
.hover > .gm .g5 { translate: -8% 9%; }
.hover > .gm .g6 { translate: -9% -8%; }

/* ---------- Footer wordmark ----------
   Full-width outlined "Frontier Edge" with the outlined icon. On desktop a spotlight follows the cursor and
   lights the outline in the spotlight mesh; on touch screens a band of colour flows through it.
   Layers: .fm-glow (mesh-filled letters + stroke), .fm-cut (covers their insides), .fm-base (resting outline). */
.footer-mark-wrap { padding-block: 0 32px; }
/* small links under the wordmark (the privacy policy is Bill Gosling Outsourcing's) */
.footer-meta { padding-block: 0 32px; font-size: var(--small-size); line-height: 1.4; }
.footer-meta a { color: var(--color-muted); text-decoration: none; transition: color .2s ease; }
.footer-meta a:hover, .footer-meta a:focus-visible { color: var(--color-fg); text-decoration: underline; text-underline-offset: 3px; }
.footer-mark {
  position: relative; font-weight: var(--weight-bold); line-height: .8; letter-spacing: -0.035em; white-space: nowrap;
  font-size: var(--fm-size, 16vw); user-select: none; -webkit-user-select: none; padding-bottom: .2em;
}
.footer-mark span { display: block; }
.footer-mark .fm-base {
  display: inline-block; position: relative;
  padding: .1em .06em .28em; margin: -.1em -.06em -.28em; /* padded so the spotlight mask never clips the g or the strokes */
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .28);
}
.footer-mark .fm-glow {
  position: absolute; inset: -0.08em -0.12em -0.08em -0.12em; padding: 0.08em 0.12em; /* padded so the last letter's stroke isn't clipped */
  opacity: 0; transition: opacity .5s ease-out;
  color: transparent; -webkit-text-stroke: 3px transparent;
  background:
    radial-gradient(30% 90% at 8% 60%, var(--spot-1), transparent 70%),
    radial-gradient(30% 110% at 28% 20%, var(--spot-2), transparent 70%),
    radial-gradient(28% 100% at 50% 70%, var(--spot-3), transparent 70%),
    radial-gradient(30% 110% at 70% 30%, var(--spot-4), transparent 70%),
    radial-gradient(30% 100% at 90% 70%, var(--spot-5), transparent 70%),
    var(--spot-base);
  background-size: 140% 140%;
  -webkit-background-clip: text; background-clip: text;
  animation: fmMesh 14s ease-in-out infinite alternate;
  -webkit-mask-image: radial-gradient(circle var(--fm-r, 160px) at calc(var(--fm-x, 50%) + 0.12em) calc(var(--fm-y, 50%) + 0.08em), #000 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(circle var(--fm-r, 160px) at calc(var(--fm-x, 50%) + 0.12em) calc(var(--fm-y, 50%) + 0.08em), #000 0%, #000 55%, transparent 100%);
}
.footer-mark.lit .fm-glow { opacity: 1; }
.footer-mark .fm-cut { position: absolute; inset: 0; color: var(--color-bg); pointer-events: none; }
.footer-mark.lit .fm-base {
  -webkit-mask-image: radial-gradient(circle var(--fm-r, 160px) at var(--fm-x, 50%) var(--fm-y, 50%), transparent 0%, transparent 25%, #000 50%);
          mask-image: radial-gradient(circle var(--fm-r, 160px) at var(--fm-x, 50%) var(--fm-y, 50%), transparent 0%, transparent 25%, #000 50%);
}
@keyframes fmMesh { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }
/* the icon's lines are topped up with a stroke so they're always 1.5px, like the letter outlines (set in site.js) */
.footer-mark .fm-icon { width: .76em; height: .76em; margin-right: .1em; vertical-align: -0.005em; overflow: visible; }
.footer-mark .fm-icon path { stroke-width: var(--icon-stroke, 0px); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.footer-mark .fm-base .fm-icon { opacity: .28; }
.footer-mark .fm-base .fm-icon path { fill: #FFFFFF; stroke: #FFFFFF; }
.footer-mark .fm-glow .fm-icon path { fill: url(#fm-mesh); stroke: url(#fm-mesh); }
.footer-mark .fm-cut .fm-icon { visibility: hidden; }

/* Touch screens and phones: the hover effects play on their own */
@media (hover: none), (max-width: 760px) {
  .footer-mark .fm-glow {
    opacity: .9;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);
    -webkit-mask-size: 40% 100%; mask-size: 40% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: -100% 0; mask-position: -100% 0;
  }
  /* no cursor spotlight here (a mouse on a narrow window would otherwise dim a circle of the outline) */
  .footer-mark.lit .fm-base { -webkit-mask-image: none; mask-image: none; }
  /* starts when the footer comes into view: one pass, then another every 5s */
  .footer-mark.in-view .fm-glow { animation: fmFlow 8.5s ease-in-out infinite, fmMesh 14s ease-in-out infinite alternate; }
}
@keyframes fmFlow {
  0%   { -webkit-mask-position: -100% 0; mask-position: -100% 0; }
  41%  { -webkit-mask-position: 200% 0; mask-position: 200% 0; }  /* ~3.5s pass, then ~5s rest */
  100% { -webkit-mask-position: 200% 0; mask-position: 200% 0; }
}
@media (max-width: 760px) { .footer-mark-wrap { padding-block: 0 16px; } .footer-meta { padding-block: 8px 24px; } }

/* ---------- Page transitions ----------
   A WebGL cover (js/transition.js). The nav bar stays visible above it; .cue content fades in on reveal. */
.fe-wipe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none; background: var(--color-bg); display: block; }
.fe-wipe.out { background: transparent; }
.fe-wipe.fe-veil { opacity: 0; transition: opacity .3s ease-out; }
.fe-wipe.fade { transition: opacity .3s ease-out; opacity: 0; }
.site-header { position: relative; z-index: 1001 !important; }
.cue { transition: opacity .5s ease-out; }
html.fe-intro .cue { opacity: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cta:not(.ghost)::before { transition: none; }
  .gm span { animation: none; transition: none; }
  .hover > .gm span { translate: none; }
  .footer-mark .fm-glow, .footer-mark.in-view .fm-glow { animation: none; opacity: 0; }
  .fe-wipe { display: none; }
  html.fe-intro .cue { opacity: 1; }
}