/* ============================================================
   FLOKSTUDIO — base.css
   Design tokens, reset, global element styles, utilities.
   Load order: base → layout → components → pages
   ============================================================ */

:root {
  color-scheme: dark;

  /* Colors */
  --bg: #0A0A0C;
  --bg-soft: #101014;
  --line: #232329;
  --text: #F4F4F6;
  --muted: #8E8E99;
  --purple: #7F00FF; /* exact brand purple sampled from the logo */
  --purple-soft: #A64DFF;

  /* Typography */
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", sans-serif;

  /* Layout */
  --pad: clamp(20px, 4vw, 64px);
  --nav-h: 76px;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--purple); color: #fff; }

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

/* ---------- Shared accents ---------- */
.dot { color: var(--purple); }
.dot-outline { -webkit-text-stroke: 2.5px var(--purple); }

/* ---------- Utilities ---------- */
.hidden { display: none !important; }

/* Reveal on scroll (elements fade in as they enter the viewport).
   Hidden only under html.js, which main.js sets right before arming the
   observer, so content is never blanked when JS is off or fails. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Ultra-wide screens: keep generous side margins ---------- */
@media (min-width: 1920px) {
  :root { --pad: 5vw; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none !important; }
  .hero__line { animation: none !important; opacity: 1 !important; transform: none !important; }
}