/* ============================================================
   XO8 MEDIA - base.css
   Design tokens, reset, shared chrome (nav, footer atoms,
   cursor, progress bar, noise) and reusable atoms used on
   every page. Page-specific layout lives in home.css / case.css.
   ============================================================ */

:root {
  --bg:        #0C0B0A;   /* page background */
  --panel:     #15110E;   /* cards / media wells */
  --text:      #EDE8E0;   /* primary text */
  --muted:     #9A938A;   /* secondary text */
  --muted-2:   #C9C2B8;   /* text over video/imagery */
  --dim:       #5E5953;   /* tertiary / monospace meta */
  --red:       #A8342B;   /* brand accent */
  --red-2:     #C2453A;   /* "beta" accent */

  --line:      rgba(237,232,224,0.10);
  --line-2:    rgba(237,232,224,0.12);
  --line-soft: rgba(237,232,224,0.06);

  --display: 'Anton', sans-serif;
  --body:    'Archivo', sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(20px, 4vw, 64px);            /* page side padding */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  overflow-x: hidden;
  overscroll-behavior: none;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

::selection { background: var(--red); color: var(--text); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2A2622; border-radius: 5px; }

/* Hide the native cursor only where the custom cursor runs */
@media (hover: hover) and (pointer: fine) {
  body, a, button { cursor: none; }
}

/* ---------- keyframes ---------- */
@keyframes xoRise  { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes xoFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes xoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes xoDrift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-4%, 6%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Fixed overlays (cursor, progress, noise)
   ============================================================ */

.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  z-index: 400;
}

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 350; opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

.cursor {
  position: fixed; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text);
  z-index: 600; pointer-events: none; will-change: transform;
}
.cursor-label {
  position: fixed; top: 0; left: 0; z-index: 601; pointer-events: none;
  font-family: var(--body); font-size: 10px; font-weight: 600; letter-spacing: 0.3em;
  color: var(--bg); opacity: 0; will-change: transform;
}

/* ============================================================
   Navigation (shared shell)
   ============================================================ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  background: linear-gradient(rgba(12,11,10,0.96), rgba(12,11,10,0.88));
  border-bottom: 1px solid var(--line-soft);
}
.nav-logo { font-family: var(--display); font-size: 19px; letter-spacing: 0.06em; color: var(--text); }
.nav-logo span { color: var(--red); }

.nav-links { display: flex; gap: 36px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; }
.nav-link { color: var(--muted); transition: color 0.3s; }
.nav-link:hover { color: var(--text); }

.nav-right { display: flex; align-items: center; gap: 28px; }
.clock { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--dim); }

.nav-back { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); transition: color 0.3s; }
.nav-back:hover { color: var(--text); }

.btn-outline {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--text); border: 1px solid rgba(237,232,224,0.25);
  padding: 11px 26px; border-radius: 100px; transition: all 0.35s;
  white-space: nowrap;
}
.btn-outline:hover { background: var(--red); border-color: var(--red); color: var(--text); }

/* ============================================================
   Reusable atoms
   ============================================================ */

/* monospace "( 01 - SERVICES )" eyebrows */
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; color: var(--red); }

/* primary red pill button (inner of a magnetic wrapper) */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--red); color: var(--text);
  font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  padding: 18px 38px; border-radius: 100px; will-change: transform;
}
.btn-primary--lg { gap: 12px; font-size: 11.5px; padding: 22px 48px; }

/* underlined secondary link */
.link-underline {
  font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid rgba(237,232,224,0.2);
  padding-bottom: 6px; transition: color 0.3s;
}
.link-underline:hover { color: var(--text); }

/* monospace bordered tag */
.pill {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--muted-2);
  border: 1px solid rgba(237,232,224,0.18); padding: 8px 14px; border-radius: 100px;
}
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* outline / stroked display type */
.stroke-red      { color: transparent; -webkit-text-stroke: 1.2px var(--red); }
.stroke-white    { color: transparent; -webkit-text-stroke: 1.2px var(--text); }
.stroke-red-lg   { color: transparent; -webkit-text-stroke: 1.5px var(--red); }
.stroke-white-lg { color: transparent; -webkit-text-stroke: 1.5px var(--text); }

/* masked text that rises into place (hero / case titles) */
.line-mask { overflow: hidden; }
.line { transform: translateY(110%); animation: xoRise 1.1s var(--ease) forwards; }

/* word-by-word scroll reveal (manifesto / outcome) */
.word { opacity: 0.16; transition: opacity 0.5s linear; }
.word--red { color: var(--red); }

/* count-up / labelled stat block */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat { padding: 70px clamp(20px, 3vw, 48px); border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat-num { font-family: var(--display); font-size: clamp(56px, 6.5vw, 118px); line-height: 1; color: var(--text); }
.stat-num--red { color: var(--red); }
.stat-label { margin-top: 14px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }

/* section heading helper */
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; }