/*
  MYSTIC FOX STUDIO — one stylesheet, no build step.

  The brief was "enchanting and magical, strictly professional fonts", and those
  pull in opposite directions unless the work is divided: the TYPE stays sober
  throughout, and every drop of atmosphere comes from colour, light and space
  instead. Nothing here is decorative-for-its-own-sake — the glow and the
  starfield are three gradients and one canvas.

  Palette and type are BORROWED, not invented. Both come straight out of
  zenunscramble.com: the Electric theme's own values, and Manrope, the one
  family the game and its site are set in. A studio page in a typeface and a
  colour its own product has never used reads as a different company.
*/

:root {
  /*
    zenunscramble.com's Electric theme, verbatim. gradient[0..2] become the
    three background stops; accent, card, cardBorder, textPrimary and textMuted
    keep the names they have in the game so the two can be diffed.
  */
  --night-0: #150d24;
  --night-1: #1b1132;
  --night-2: #21143c;
  --line: #3c2963;
  --line-soft: #2b1c4a;

  --ink: #f3ebfd;
  --ink-soft: #c9bce0;
  --ink-mute: #9f8dc0;

  /* Electric's accent, and its locked-tile lilac as the softer second. */
  --volt: #b45bff;
  --volt-deep: #8f3ee0;
  --lilac: #d2a8ff;

  /*
    The logo's own two, kept for the mark's colours and for the one warm accent
    on the page. Sampled from the PNG: the fox is 50% berry and 41% flame.
  */
  --flame: #f3784d;
  --berry: #b13488;
  --rose: #cd4f85;

  /* Manrope, as the game and its site use it. No second family. */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1120px;
  --radius: 14px;
}

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

/*
  The background lives on BODY, never on the root element.

  A background on `html` propagates to the canvas and paints OVER a fixed
  backdrop layer, which silently kills the aurora and the starfield — the same
  mistake cost the Zen Unscramble site its glow for several deploys. Paint order
  first, markup second.
*/
html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--night-0);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------ the backdrop ------------------------------ */
/*
  Two fixed layers behind everything. `100lvh` rather than `100vh` so a mobile
  address bar collapsing does not leave a bare strip at the bottom mid-scroll.
*/
.sky {
  position: fixed;
  inset: 0;
  height: 100lvh;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(118% 80% at 50% -10%, rgba(180, 91, 255, 0.20) 0%, rgba(180, 91, 255, 0) 62%),
    radial-gradient(70% 46% at 10% 2%, rgba(243, 120, 77, 0.13) 0%, rgba(243, 120, 77, 0) 70%),
    radial-gradient(66% 46% at 92% 8%, rgba(177, 52, 136, 0.18) 0%, rgba(177, 52, 136, 0) 72%),
    linear-gradient(180deg, var(--night-2) 0%, var(--night-1) 42%, var(--night-0) 100%);
}

/* The starfield canvas. Sized and drawn by js/site.js; empty without it. */
#dust {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
}

/* ------------------------------- structure -------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 82px 0; }
section + section { padding-top: 0; }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
}

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.022em;
  margin: 0 0 16px;
}

h1 { font-size: clamp(38px, 6vw, 62px); }
h2 { font-size: clamp(27px, 3.6vw, 37px); }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.012em; }

p { margin: 0 0 18px; color: var(--ink-soft); }
p.lead { font-size: 18.5px; color: var(--ink-soft); max-width: 62ch; }

a { color: var(--volt); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------- header --------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(21, 13, 36, 0.76);
  border-bottom: 1px solid var(--line-soft);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; color: var(--ink); }
.brand img { width: 28px; height: 28px; flex: none; display: block; }
.brand b { font-weight: 800; }
.brand span { color: var(--ink-mute); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 500;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current='page'] { color: var(--volt); }

/* ---------------------------------- hero ---------------------------------- */

/* Was 108px, which left the mark stranded a long way below the header. */
.hero { padding: 52px 0 74px; }
.hero h1 { max-width: 17ch; }
.hero .lead { margin-top: 6px; }

.lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}

/* The word and its descriptor share a column, so the descriptor lines up with
   MYSTIC FOX rather than with the mark to its left. */
.lockup-text { min-width: 0; }

/* .eyebrow carries a 14px bottom margin for standalone use; inside the lockup
   the gap belongs above it instead, tight under the word. */
.lockup-sub { margin: 7px 0 0; }

.hero-mark {
  width: 96px;
  height: 96px;
  display: block;
  flex: none;
}

/*
  MYSTIC FOX, with the shine the game runs over a score.

  Two backgrounds on one element. The lower one is the LOGO's own gradient,
  sampled from the mark — flame into rose into berry — so the word is coloured
  by the fox rather than beside it, and "Mystic" lands warm while "Fox" lands
  magenta, exactly as the supplied lockup does.

  The upper one is a single narrow white band, and only its position animates.
  That mirrors premium.tsx's ShimmerNumber: the glyphs stay solid and legible
  the whole time, and a streak passes over them — rather than the colour itself
  pulsing, which reads as a loading state.

  Sized 300% so the band spends most of the loop off the end of the word. The
  pause between sweeps is the effect; a band that never leaves is a strobe.
*/
.wordmark {
  margin: 0;
  font-size: clamp(34px, 5.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  background-image:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0) 42%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 255, 255, 0) 58%),
    linear-gradient(100deg, var(--flame) 0%, var(--rose) 52%, var(--berry) 100%);
  background-size: 300% 100%, 100% 100%;
  background-position: 300% 0, 0 0;
  background-repeat: no-repeat;
  animation: mf-shine 3.4s linear infinite;
}

/*
  Painting text with a background needs the clip, and the clip needs the fill
  to be transparent — so BOTH only apply where the browser supports it. Without
  the guard, anything that cannot clip renders `color: transparent`, and the
  studio's name disappears from its own front page.
*/
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@keyframes mf-shine {
  to { background-position: -100% 0, 0 0; }
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: var(--volt); color: #16081f; }
.btn-primary:hover { background: #c47bff; }

.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-mute); background: rgba(255, 255, 255, 0.03); }

/* --------------------------------- cards ---------------------------------- */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.card {
  position: relative;
  padding: 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(30, 19, 53, 0.82), rgba(24, 15, 44, 0.82));
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.card:hover { border-color: var(--line); transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }
.card p { margin-bottom: 0; font-size: 15px; }

a.card { display: block; color: inherit; }
a.card:hover { text-decoration: none; }

/* A project's state. Colour carries the meaning; the word carries it again for
   anyone who cannot see the colour. */
.tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 14px;
  border: 1px solid;
}
.tag-live { color: var(--lilac); border-color: rgba(180, 91, 255, 0.5); background: rgba(180, 91, 255, 0.14); }
.tag-soon { color: var(--flame); border-color: rgba(243, 120, 77, 0.45); background: rgba(243, 120, 77, 0.11); }
/* Berry at full strength is too dark for 11.5px text on this background, so
   the LABEL is lifted while the border and fill stay the brand magenta. */
.tag-early { color: #de7fc0; border-color: rgba(177, 52, 136, 0.55); background: rgba(177, 52, 136, 0.14); }

.feature {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
  padding: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(180, 91, 255, 0.12) 0%, rgba(180, 91, 255, 0) 58%),
    linear-gradient(180deg, rgba(30, 19, 53, 0.86), rgba(24, 15, 44, 0.86));
}

/* The tile row that stands in for the game. Pure CSS, no image to load. */
.tiles { display: flex; gap: 9px; flex-wrap: wrap; }
.tiles i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  color: #17120a;
  background: var(--volt);
}
.tiles i:nth-child(2n) { background: var(--volt); color: #16081f; }
.tiles i:nth-child(3n) { background: var(--berry); color: #fdeafa; }

.list { margin: 0; padding: 0; list-style: none; }
.list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--volt);
}

/* --------------------------------- prose ---------------------------------- */
/* Policy pages. Narrow measure, generous rhythm — these exist to be READ, and
   the last thing a privacy policy needs is to look like fine print. */

.prose { max-width: 74ch; }
.prose h2 { margin-top: 46px; font-size: 25px; }
.prose h3 { margin-top: 30px; }
.prose ul { padding-left: 20px; margin: 0 0 18px; }
.prose li { color: var(--ink-soft); margin-bottom: 9px; }
.prose .updated { color: var(--ink-mute); font-size: 14px; }

.note {
  border-left: 2px solid var(--volt);
  padding: 2px 0 2px 18px;
  margin: 26px 0;
  border-radius: 0;
}
.note p:last-child { margin-bottom: 0; }

/* --------------------------------- footer --------------------------------- */

footer {
  margin-top: 40px;
  border-top: 1px solid var(--line-soft);
  padding: 46px 0 60px;
}
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  align-items: flex-start;
}
.foot p { font-size: 14px; color: var(--ink-mute); margin: 0; max-width: 42ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { color: var(--ink-soft); font-size: 14px; }

/* ------------------------------- responsive ------------------------------- */

@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
  .hero { padding: 40px 0 56px; }
  section { padding: 62px 0; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13.5px; }
}

@media (max-width: 520px) {
  .brand span { display: none; }
  .lockup { gap: 14px; }
  .hero-mark { width: 68px; height: 68px; }
  .tiles i { width: 40px; height: 40px; font-size: 17px; }
}

/*
  Respect a system-level request for less movement. The starfield checks the
  same query in JS and draws one static frame instead of animating.
*/
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* Park the band off the end so the wordmark rests on its brand gradient. */
  .wordmark { background-position: 300% 0, 0 0; }
}