/* ============================================================================
   FiveNova — core design system
   ----------------------------------------------------------------------------
   Duplicated at savvy/public/assets/core.css (separate deployments).

   The brand mark is hand-drawn: rough brush strokes, a heavy black outline, a
   violet gradient running through the fill. The site takes its cues from that —
   thick black keylines, hard offset shadows like a printed sticker, heavy
   condensed caps, violet gradients. Nothing soft, nothing corporate.

   Terminal styling (mono type, log lines, carets) is NOT part of this system.
   It appears in exactly two places by design: the boot screen and Harmony Zone.
   ========================================================================== */

:root {
  --acc:        #a82dff;
  --acc-hi:     #cb87ff;
  --acc-lo:     #7412c9;
  --acc-deep:   #35075c;

  --bg:         #0a080d;
  --bg-1:       #120e19;
  --bg-2:       #191323;
  --bg-3:       #221a2f;

  --ink:        #f3eefa;
  --ink-dim:    #a99cbd;
  --ink-mute:   #6f6482;
  --ink-faint:  #494056;

  /* Semantic state colours. Used for form errors and status marks; never as
     decoration, and never as the only signal. */
  --log-ok:     #6ce8a4;
  --log-warn:   #ffd166;
  --log-err:    #ff6b7d;

  --edge:       #000;              /* the keyline colour, straight from the mark */
  --line:       #241d31;
  --line-hi:    #372c49;

  --f-display: "Anton", "Impact", sans-serif;
  --f-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-io:   cubic-bezier(.76, 0, .24, 1);

  --t-fast: 160ms;
  --t-med:  380ms;
  --t-slow: 820ms;

  --maxw: 1320px;
  --gut:  clamp(20px, 4vw, 56px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100svh;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--acc); color: #0a080d; }

:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }

* { scrollbar-color: var(--acc-lo) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--acc-lo); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--acc); }

/* --------------------------------------------------------- atmospherics -- */

.atmos { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.atmos-glow {
  position: absolute; inset: -30%;
  background:
    radial-gradient(38% 42% at 20% 16%, color-mix(in oklab, var(--acc) 30%, transparent), transparent 62%),
    radial-gradient(34% 38% at 80% 60%, color-mix(in oklab, var(--acc-lo) 38%, transparent), transparent 64%),
    radial-gradient(48% 40% at 50% 110%, color-mix(in oklab, var(--acc-deep) 80%, transparent), transparent 70%);
  filter: blur(90px) saturate(135%);
  opacity: .55;
  animation: atmos-drift 36s var(--e-io) infinite alternate;
}
@keyframes atmos-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.09); }
}

.atmos-grain {
  position: absolute; inset: -50%;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  animation: grain-shift 5s steps(5) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate3d(0,     0,    0); }
  25%  { transform: translate3d(-2%,  1.5%, 0); }
  50%  { transform: translate3d(1.5%, -1%,  0); }
  75%  { transform: translate3d(-1%,  -2%,  0); }
  100% { transform: translate3d(0,     0,    0); }
}

.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ------------------------------------------------------------ type kit --- */

.h-xl, .h-lg, .h-md, .h-sm {
  font-family: var(--f-display);
  font-weight: 400;                 /* Anton ships one weight and it is heavy */
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .92;
  text-wrap: balance;
}
.h-xl { font-size: clamp(46px, 8.5vw, 124px); }
.h-lg { font-size: clamp(36px, 5.6vw, 76px); }
.h-md { font-size: clamp(26px, 3.2vw, 44px); }
.h-sm { font-size: clamp(19px, 2vw, 26px); }

/* Violet gradient through the letterforms, echoing the mark's fill. */
.grad {
  background: linear-gradient(168deg, var(--ink) 6%, var(--acc-hi) 46%, var(--acc) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.eyebrow {
  display: inline-block;
  font-family: var(--f-display);
  font-size: clamp(12px, 1.2vw, 15px);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--acc-hi);
  padding: 4px 0;
  border-bottom: 3px solid var(--acc);
}

.lede {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------- surfaces -- */
/* Hard keyline plus a solid offset shadow: printed-sticker logic, taken from
   the outline around the wordmark. No blur anywhere. */

.slab {
  position: relative;
  background: var(--bg-1);
  border: 2px solid var(--edge);
  box-shadow: 7px 7px 0 var(--acc-lo);
  transition: transform var(--t-med) var(--e-out), box-shadow var(--t-med) var(--e-out);
}
.slab:hover { transform: translate(-3px, -3px); box-shadow: 12px 12px 0 var(--acc); }

.rule { height: 3px; border: 0; margin: 0; background: var(--edge); }
.rule.acc { background: linear-gradient(to right, var(--acc) 0 96px, var(--line-hi) 96px 100%); }

/* -------------------------------------------------------------- buttons -- */
/* Press-down interaction: the shadow collapses under the button. */

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 14px 24px;
  font-family: var(--f-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink);
  background: var(--bg-2);
  border: 2px solid var(--edge);
  box-shadow: 5px 5px 0 var(--edge);
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out),
              background var(--t-fast) var(--e-io), color var(--t-fast) var(--e-io);
}
.btn:hover { background: var(--acc); color: #0a080d; transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--edge); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--edge); }

.btn.solid {
  background: linear-gradient(150deg, var(--acc-hi), var(--acc) 55%, var(--acc-lo));
  color: #0a080d;
  box-shadow: 5px 5px 0 var(--edge);
}
.btn.solid:hover { background: var(--ink); color: #0a080d; }

.btn.sm { padding: 9px 15px; font-size: 12.5px; box-shadow: 4px 4px 0 var(--edge); }
.btn.sm:hover { box-shadow: 2px 2px 0 var(--edge); }

/* ---------------------------------------------------------------- tags --- */

.tag {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  font-family: var(--f-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-dim);
  background: var(--bg-2);
  border: 2px solid var(--edge);
  transition: background var(--t-fast) var(--e-io), color var(--t-fast) var(--e-io);
}
.tag:hover { background: var(--acc); color: #0a080d; }

/* Status is a solid block, not a light. Nothing on this site blinks. */
.status {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-display);
  font-size: 12px; text-transform: uppercase; letter-spacing: .11em;
  padding: 5px 10px;
  border: 2px solid var(--edge);
  background: var(--bg-2);
  color: var(--ink-dim);
}
.status .dot { width: 8px; height: 8px; background: currentColor; flex: none; }
.status[data-status="active"]     { color: #0a080d; background: #6ce8a4; }
.status[data-status="paused"]     { color: #0a080d; background: #ffd166; }
.status[data-status="unreleased"] { color: var(--ink-dim); background: var(--bg-3); }
.status[data-status="archived"]   { color: var(--ink-mute); background: var(--bg-2); }

/* ------------------------------------------------------------- reveals --- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
}
[data-reveal].seen { opacity: 1; transform: none; }

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

.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 12px var(--gut);
  border-bottom: 2px solid transparent;
  transition: background var(--t-med) var(--e-out), border-color var(--t-med) var(--e-out), padding var(--t-med) var(--e-out);
}
.masthead.stuck {
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--edge);
  padding-block: 8px;
}

/* The mark is the brand, so it is given real size. */
.masthead .mark { display: inline-flex; align-items: center; }
.masthead .mark img {
  height: clamp(54px, 5.4vw, 76px);
  width: auto;
  filter: drop-shadow(0 0 22px color-mix(in oklab, var(--acc) 55%, transparent));
  transition: transform var(--t-med) var(--e-out), filter var(--t-med) var(--e-out);
}
.masthead.stuck .mark img { height: clamp(44px, 4vw, 56px); }
.masthead .mark:hover img {
  transform: rotate(-4deg) scale(1.07);
  filter: drop-shadow(0 0 32px color-mix(in oklab, var(--acc) 85%, transparent));
}
.masthead .mark:active img { transform: scale(.94) rotate(2deg); }

/* --door is set by secretDoor() as the tap count climbs. Deliberately faint:
   enough to feel like something is there, not enough to announce it. */
.masthead .mark img {
  --door: 0;
  filter:
    drop-shadow(0 0 22px color-mix(in oklab, var(--acc) 55%, transparent))
    drop-shadow(0 0 calc(var(--door) * 34px) color-mix(in oklab, var(--acc-hi) calc(var(--door) * 90%), transparent));
}

.navset { display: inline-flex; align-items: center; gap: 6px; }
.navset a {
  position: relative;
  padding: 9px 14px;
  font-family: var(--f-display);
  font-size: 14px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-dim);
  transition: color var(--t-fast) var(--e-io);
}
.navset a::after {
  content: "";
  position: absolute; left: 8px; right: 8px; bottom: 2px; height: 3px;
  background: var(--acc);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-med) var(--e-io);
}
.navset a:hover, .navset a[aria-current] { color: var(--ink); }
.navset a:hover::after, .navset a[aria-current]::after { transform: scaleX(1); transform-origin: left; }

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

.foot {
  position: relative; z-index: 4;
  border-top: 3px solid var(--edge);
  background: var(--bg-1);
  margin-top: clamp(80px, 12vh, 150px);
  padding: 44px 0 52px;
}
.foot-grid {
  display: flex; flex-wrap: wrap; gap: 30px 48px;
  align-items: center; justify-content: space-between;
}
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand img { height: 52px; width: auto; }
.foot-brand span { font-family: var(--f-display); font-size: 22px; text-transform: uppercase; letter-spacing: .04em; }

.socials { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.social {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  font-family: var(--f-display);
  font-size: 13.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-dim);
  background: var(--bg-2);
  border: 2px solid var(--edge);
  box-shadow: 4px 4px 0 var(--edge);
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out),
              background var(--t-fast) var(--e-io), color var(--t-fast) var(--e-io);
}
.social svg { width: 18px; height: 18px; flex: none; }
.social img { width: 18px; height: 18px; flex: none; object-fit: contain; }
.social:hover { background: var(--acc); color: #0a080d; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--edge); }
.social.yt:hover { background: #ff0033; color: #fff; }

.foot-legal {
  margin-top: 34px; padding-top: 20px;
  border-top: 2px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  justify-content: space-between;
  font-size: 13px; color: var(--ink-mute);
}
.foot-legal strong { color: var(--ink-dim); font-weight: 600; }

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}