/* Fox Engine section (homepage, between Discover and Games).
   Ported from the Fox Engine demo. Site fonts and brand red only.
   Every rule is scoped to #fox-engine, except the html.fe-js hook. */

#fox-engine {
  --fe-red: var(--_colors---color--brand, #e6000b);
  --fe-red-deep: color-mix(in srgb, var(--fe-red) 58%, #000);
  --fe-red-soft: color-mix(in srgb, var(--fe-red) 16%, transparent);
  --fe-bg: var(--_colors---bg--bg-1, #212121);
  --fe-panel: var(--_colors---color--black, #000);
  /* the site's light-16 / light-32 / light-64 shades, as plain rgba so
     SVG colour animations blend them cleanly */
  --fe-line: rgba(255, 255, 255, 0.16);
  --fe-faint: rgba(255, 255, 255, 0.32);
  --fe-ink: var(--_colors---color--light, #fff);
  --fe-muted: rgba(255, 255, 255, 0.64);
  --fe-cyan: #3fe0f2;
  --fe-ok: #3ddc84;
  --fe-gold: #ffc940;
  --f-display: var(--font--heading-sans);
  --f-body: var(--font--body);
  --f-pixel: var(--font--ui);

  position: relative;
  color: var(--fe-ink);
  font-family: var(--f-body);
  background-color: var(--fe-bg);
}

/* Section heading. Above the panel on phones and tablets (and without JS);
   moved into the right-hand column on desktop by fox-engine.js. */
#fox-engine .fe-head {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 16px 32px;
  text-align: center;
}

#fox-engine .fe-eyebrow {
  margin: 0 0 14px;
  font-family: var(--f-pixel);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fe-muted);
}

#fox-engine .fe-title {
  margin: 0 0 16px;
  font-family: var(--f-display);
  font-weight: var(--weight--heading-sans, 500);
  font-size: clamp(40px, 4vw, 58px);
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fe-ink);
}

#fox-engine .fe-title span { color: var(--fe-red); }

#fox-engine .fe-sub {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--fe-muted);
}

#fox-engine .side .fe-head {
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Plain list: what crawlers, no-JS visitors and screen readers get. */
#fox-engine .fe-stages {
  list-style: none;
  counter-reset: fe-stage;
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 16px;
  display: grid;
  gap: 28px;
}

#fox-engine .fe-stage { counter-increment: fe-stage; }

#fox-engine .fe-stage::before {
  content: "Stage 0" counter(fe-stage);
  font-family: var(--f-pixel);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fe-red);
}

#fox-engine .fe-stage h3 {
  margin: 6px 0;
  font-family: var(--f-display);
  font-size: 32px;
  line-height: 1;
  font-weight: var(--weight--heading-sans, 500);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fe-ink);
}

#fox-engine .fe-stage p { margin: 0 0 6px; font-size: 16px; line-height: 1.55; color: var(--fe-muted); }
#fox-engine .fe-stage .fe-who { color: var(--fe-ok); font-size: 14px; }

/* With JS the list stays for screen readers but is hidden visually. */
html.fe-js #fox-engine .fe-stages {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------- scroll track + pinned panel (JS on) ---------- */
html.fe-js #fox-engine {
  height: 500vh;
  padding: 0;
}

#fox-engine .fe-panel {
  position: sticky;
  top: var(--fe-nav-h, 67px);
  height: calc(100svh - var(--fe-nav-h, 67px));
  overflow: hidden;
}

#fox-engine .fe-panel[hidden] { display: none; }

/* ---------- play area ---------- */
#fox-engine .fe-panel { display: grid; }

#fox-engine .pixel {
  font-family: var(--f-pixel);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#fox-engine .play {
  display: grid;
  grid-template-columns: auto minmax(0, 420px);
  justify-content: center;
  align-items: center;
  gap: 56px;
  padding: 16px 32px;
  min-height: 0;
  /* the orbit sizes itself from this box (cqw / cqh units) */
  container-type: size;
}

#fox-engine .orbit {
  position: relative;
  width: min(100cqh, calc(100cqw - 420px - 56px), 880px);
  aspect-ratio: 1;
}

#fox-engine .side {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

#fox-engine .orbit svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* the core: the fox in a dark glass disc; the beam rides its rim */
#fox-engine .core-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#fox-engine .core {
  display: grid;
  place-items: center;
  padding-top: 6%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #2b2b31 0%, #18181c 55%, #101013 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* nothing animates while the section is off screen */
#fox-engine .fe-panel.paused *,
#fox-engine .fe-panel.paused *::before,
#fox-engine .fe-panel.paused *::after {
  animation-play-state: paused !important;
}

/* ring, travel */
#fox-engine .ring {
  fill: none;
  stroke: var(--fe-faint);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 0 11;
  animation: fe-ringflow 9s linear infinite;
}

@keyframes fe-ringflow { to { stroke-dashoffset: -110; } }

#fox-engine .dot, #fox-engine .trail { fill: var(--fe-red); }
#fox-engine .stream { fill: var(--fe-cyan); }
#fox-engine .lesson { fill: var(--fe-cyan); opacity: 0; }

#fox-engine .gate-seal .seal-diamond { fill: var(--fe-bg); }
#fox-engine .quiet .seal-diamond { animation: none; }

/* the engine core */
#fox-engine .halo {
  fill: none;
  stroke: var(--fe-red);
  stroke-width: 3;
  stroke-dasharray: 0 8;
  stroke-linecap: round;
  opacity: 0.55;
  transform-origin: 280px 280px;
  animation: fe-spin 30s linear infinite;
}

@keyframes fe-spin { to { transform: rotate(360deg); } }

#fox-engine .shock {
  fill: none;
  stroke: var(--fe-cyan);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

#fox-engine .shock.go { animation: fe-shock 1s ease-out; }

@keyframes fe-shock {
  from { transform: scale(0.1); opacity: 1; }
  to { transform: scale(1.5); opacity: 0; }
}

#fox-engine .hubtxt {
  font-size: 11px;
  fill: var(--fe-red);
  letter-spacing: 0.1em;
}

/* stages */
#fox-engine .node {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  animation: fe-nodeIn 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

#fox-engine .node-body {
  fill: var(--fe-panel);
  stroke: var(--fe-line);
  stroke-width: 2;
  transition: fill 0.35s, stroke 0.35s;
}

#fox-engine .node .nm { font-family: var(--f-display); font-weight: var(--weight--heading-sans, 500); font-size: 17px; letter-spacing: 0.5px; text-transform: uppercase; fill: var(--fe-ink); transition: fill 0.35s; }
#fox-engine .node.ahead .nm { fill: var(--fe-muted); }
#fox-engine .node.done .node-body { stroke: var(--fe-ok); }
#fox-engine .node.active .node-body { fill: var(--fe-red); stroke: color-mix(in srgb, var(--fe-red) 65%, #fff); }
#fox-engine .node.active .nm { fill: #fff; }
#fox-engine .node:hover .node-body { stroke: var(--fe-red); }
#fox-engine .node:focus { outline: none; }
#fox-engine .node:focus-visible .node-body { stroke: var(--fe-cyan); stroke-width: 3; }

@keyframes fe-nodeIn { from { transform: scale(0.4); opacity: 0; } }

#fox-engine .pulse {
  fill: none;
  stroke: var(--fe-red);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: fe-pulse 1.6s ease-out infinite;
}

@keyframes fe-pulse {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(1.55); opacity: 0; }
}

/* ---------- stage effects ---------- */
#fox-engine .fx { animation: fe-fxIn 0.6s ease-out both; }
@keyframes fe-fxIn { from { opacity: 0; } }

#fox-engine .spark {
  fill: var(--fe-gold);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: fe-twinkle 2.6s ease-in-out infinite both;
}

@keyframes fe-twinkle {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1) rotate(45deg); opacity: 0.8; }
}

#fox-engine .block {
  fill: var(--fe-red);
  opacity: 0.7;
  animation: fe-drop 3.6s cubic-bezier(0.3, 1.3, 0.5, 1) infinite both;
}

@keyframes fe-drop {
  0% { transform: translateY(-24px); opacity: 0; }
  14% { transform: none; opacity: 0.7; }
  85% { opacity: 0.7; }
  100% { opacity: 0; }
}

#fox-engine .gear {
  fill: none;
  stroke: var(--fe-faint);
  stroke-width: 4;
  stroke-dasharray: 3 9;
  transform-origin: 280px 280px;
  animation: fe-spin 16s linear infinite;
}

#fox-engine .reticle {
  fill: none;
  stroke: var(--fe-ok);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.6;
  transform-origin: 280px 280px;
  animation: fe-spin 18s linear infinite;
}

#fox-engine .run { font-size: 9px; fill: var(--fe-ok); opacity: 0.75; }

#fox-engine .converge {
  fill: none;
  stroke: var(--fe-cyan);
  stroke-width: 1.5;
  transform-origin: 280px 280px;
  animation: fe-converge 2.4s ease-in infinite both;
}

@keyframes fe-converge {
  from { transform: scale(1); opacity: 0; }
  40% { opacity: 0.5; }
  to { transform: scale(0.8); opacity: 0; }
}

/* ---------- quest card ---------- */
#fox-engine .quest {
  justify-self: start;
  width: 100%;
  max-width: 420px;
  background: var(--fe-panel);
  border-radius: var(--_spacing---radius--radius-2, 16px);
  padding: 24px 28px;
}

#fox-engine .quest-in > * { animation: fe-fade 0.5s ease-out both; }
#fox-engine .quest-in > *:nth-child(2) { animation-delay: 0.06s; }
#fox-engine .quest-in > *:nth-child(3) { animation-delay: 0.12s; }
#fox-engine .quest-in > *:nth-child(4) { animation-delay: 0.18s; }

@keyframes fe-fade { from { opacity: 0; transform: translateY(8px); } }

#fox-engine .quest-top {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fe-red);
}

#fox-engine .quest-title {
  font-family: var(--f-display);
  font-weight: var(--weight--heading-sans, 500);
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 10px 0 12px;
  overflow-wrap: anywhere;
}

#fox-engine .quest-text { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--fe-ink); }

#fox-engine .checkpoint {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px dashed var(--fe-line);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fe-muted);
}

#fox-engine .checkpoint b { display: block; color: var(--fe-ok); font-weight: 600; }
#fox-engine .checkpoint.pending b { color: var(--fe-ink); }

/* human-in-the-loop seal: a waiting diamond that turns into a drawn tick */
#fox-engine .seal { flex: none; width: 24px; height: 24px; }
#fox-engine .seal svg { display: block; width: 100%; height: 100%; overflow: visible; }

#fox-engine .seal-status {
  margin-left: 6px;
  font-size: 9px;
  font-weight: 400;
  color: var(--fe-muted);
}

#fox-engine .approved .seal-status { color: var(--fe-ok); }

#fox-engine .seal-diamond {
  fill: none;
  stroke: var(--fe-muted);
  stroke-width: 2;
  transform-origin: 12px 12px;
  transform: rotate(45deg) scale(0.75);
  transition: opacity 0.2s, transform 0.3s;
}

#fox-engine .pending .seal-diamond { animation: fe-await 1.1s ease-in-out infinite; }

@keyframes fe-await {
  50% { stroke: var(--fe-ok); transform: rotate(45deg) scale(0.9); }
}

#fox-engine .seal-ring {
  fill: var(--fe-ok);
  fill-opacity: 0;
  stroke: var(--fe-ok);
  stroke-width: 2;
  stroke-dasharray: 63;
  stroke-dashoffset: 63;
  transform: rotate(-90deg);
  transform-origin: 12px 12px;
}

#fox-engine .seal-tick {
  fill: none;
  stroke: #04140b;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
}

#fox-engine .seal-burst {
  fill: none;
  stroke: var(--fe-ok);
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: 12px 12px;
}

#fox-engine .seal-body { transform-origin: 12px 12px; }
#fox-engine .approved .seal-diamond { opacity: 0; transform: rotate(135deg) scale(0.2); }
#fox-engine .approved .seal-ring { animation: fe-sealRing 0.4s ease-out forwards, fe-sealFill 0.2s 0.35s ease-out forwards; }
#fox-engine .approved .seal-tick { animation: fe-sealTick 0.3s 0.5s cubic-bezier(0.3, 0.7, 0.3, 1) forwards; }
#fox-engine .approved .seal-body { animation: fe-sealPop 0.45s 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.5); }
#fox-engine .approved .seal-burst { animation: fe-sealBurst 0.7s 0.5s ease-out; }
#fox-engine .approved .seal-status { animation: fe-fade 0.3s 0.5s ease-out both; }

@keyframes fe-sealRing { to { stroke-dashoffset: 0; } }
@keyframes fe-sealFill { to { fill-opacity: 1; } }
@keyframes fe-sealTick { to { stroke-dashoffset: 0; } }
@keyframes fe-sealPop { 50% { transform: scale(1.25); } }
@keyframes fe-sealBurst {
  from { transform: scale(0.9); opacity: 0.9; }
  to { transform: scale(2.2); opacity: 0; }
}

/* already approved (a stage revisited): show the tick, skip the show */
#fox-engine .instant .seal-ring { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
#fox-engine .instant .seal-tick { animation: none; stroke-dashoffset: 0; }
#fox-engine .instant .seal-body, #fox-engine .instant .seal-burst, #fox-engine .instant .seal-status { animation: none; }

@media (prefers-reduced-motion: reduce) {
  #fox-engine .ring, #fox-engine .node, #fox-engine .pulse, #fox-engine .halo, #fox-engine .gear,
  #fox-engine .reticle, #fox-engine .spark, #fox-engine .block, #fox-engine .converge,
  #fox-engine .quest-in > *, #fox-engine .fx, #fox-engine .seal-body, #fox-engine .seal-burst,
  #fox-engine .seal-status, #fox-engine .pending .seal-diamond {
    animation: none;
  }
}

/* ---------- narrow screens ---------- */
/* Portrait tablets and phones: the card sits under the orbit, and the orbit
   takes the height the card leaves inside the pinned panel. */
@media (max-width: 1080px) {
  #fox-engine .play {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 12px;
    padding: 8px 16px 16px;
  }

  #fox-engine .orbit {
    width: min(92vw, 560px, calc(100svh - var(--fe-nav-h, 67px) - var(--fe-card-h, 240px) - 44px));
  }

  #fox-engine .side { justify-self: center; max-width: 560px; }

  #fox-engine .quest {
    justify-self: center;
    max-width: 560px;
    padding: 14px 16px;
  }

  #fox-engine .fe-head { padding: 56px 16px 24px; }
  #fox-engine .fe-sub { font-size: 16px; }

  #fox-engine .quest-title { font-size: 28px; margin: 4px 0 6px; }
  #fox-engine .quest-text { font-size: 15px; margin-bottom: 10px; }
  #fox-engine .checkpoint { padding-top: 10px; font-size: 13.5px; }
}

/* Phones held sideways: orbit and card side by side, sized by height. */
@media (max-width: 1080px) and (orientation: landscape) {
  #fox-engine .play {
    grid-template-columns: auto minmax(0, 360px);
    gap: 24px;
    padding: 8px 16px;
  }

  #fox-engine .orbit { width: min(calc(100svh - var(--fe-nav-h, 67px) - 16px), 50vw); }
  #fox-engine .side { justify-self: start; }
  #fox-engine .quest-title { font-size: 22px; }
  #fox-engine .quest-text { font-size: 14px; line-height: 1.45; }
}

@media (max-width: 640px) {
  /* the orbit is drawn at about half size here, so its labels get bigger units */
  #fox-engine .node .nm { font-size: 18px; letter-spacing: 0; }
  #fox-engine .hubtxt { font-size: 12px; }
}

/* Phones: five nav links don't fit, so the Fox Engine link is dropped and the
   section reads as part of Discover (Discover's fill stays full through it).
   479px is the site's own phone breakpoint. */
@media screen and (max-width: 479px) {
  .nav-link.fox-engine { display: none; }
}