/* ═══════════════════════════════════════════════════════════════════════════
   NEK — BASE  (reset · base typography · layout primitives · media-grade · motion)
   Depends on css/tokens.css. ZERO !important anywhere in css/ (success gate).
   Reduced-motion is honoured by neutralising animations/transitions at normal
   specificity — we own every page's CSS, so nothing needs to win a cascade war.
═══════════════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  /* Clip stray horizontal overflow at the root. body{overflow-x:hidden} does
     NOT catch position:fixed decorative layers (.atmos/.grain/.vignette), which
     extend ~3px past the layout viewport when a vertical scrollbar appears (e.g.
     taller RU/HY pages). overflow-x:clip kills that sliver without creating a
     scroll container or affecting fixed-layer painting / vertical scroll. */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  font-size: clamp(16px, 1.05vw, 19px);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

::selection { background: var(--accent); color: #0C0A16; }

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }

/* ───────────────────────── base typography ───────────────────────── */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p  { color: var(--ink-dim); }
em.serif, .serif-accent { font-style: italic; font-family: var(--serif); font-weight: 600; color: var(--accent-hi); }

/* ───────────────────────── layout primitives ───────────────────────── */
.container      { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--tight { max-width: var(--maxw-tight); margin-inline: auto; padding-inline: var(--gutter); }
.container--prose { max-width: var(--maxw-prose); margin-inline: auto; padding-inline: var(--gutter); }
.section        { position: relative; z-index: 2; padding: var(--sp-section) var(--gutter); }
.grid           { display: grid; gap: clamp(18px, 1.8vw, 32px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: var(--fs-eyebrow); letter-spacing: .34em;
  text-transform: uppercase; color: var(--accent-hi); margin-bottom: clamp(20px, 2vw, 30px);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px 2px var(--glow); }

/* skip link — a11y */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--accent); color: #0C0A16; padding: 10px 18px; border-radius: 0 0 var(--r-md) 0;
  font-family: var(--display); font-weight: 600;
}
.skip-link:focus { left: 0; }

/* focus-visible — never removed (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════════════════════
   FULL-BLEED ATMOSPHERE  (the violet light-field behind every page)
   A static-by-default light field; the homepage script animates the vars,
   other pages simply get a rich, calm violet depth at no JS cost.
═══════════════════════════════════════════════════════════════ */
.atmos {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(58% 48% at var(--a-x,30%) var(--a-y,24%), var(--a-c, rgba(99,88,232,.38)), transparent 60%),
    radial-gradient(52% 48% at var(--b-x,76%) var(--b-y,62%), var(--b-c, rgba(123,111,255,.26)), transparent 62%),
    radial-gradient(46% 70% at var(--d-x,60%) var(--d-y,8%),  var(--d-c, rgba(164,155,255,.20)), transparent 66%),
    radial-gradient(90% 80% at 50% 122%, var(--c-c, rgba(48,36,110,.42)), transparent 70%),
    var(--bg);
  transition: background .9s linear;
}
.atmos::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(123,111,255,.07), transparent 55%);
}
.atmos::after {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 30% at 60% 30%, rgba(164,155,255,.13), transparent 70%),
    radial-gradient(35% 28% at 30% 70%, rgba(99,88,232,.12), transparent 72%);
  filter: blur(48px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.haze {
  position: fixed; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(30% 22% at 22% 38%, rgba(180,168,255,.08), transparent 70%),
    radial-gradient(26% 20% at 74% 24%, rgba(123,111,255,.07), transparent 72%);
  filter: blur(60px);
  animation: hazeFloat 34s ease-in-out infinite alternate;
}
@keyframes hazeFloat {
  0%   { transform: translate3d(2%, 1%, 0) scale(1.05); opacity:.9; }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.14); opacity:1; }
}

.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: .04; mix-blend-mode: overlay;
}
.vignette {
  position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background: radial-gradient(140% 100% at 50% 0%, transparent 54%, rgba(6,4,14,.58) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   BRAND-GRADE PHOTO SYSTEM — fuse every stock photo into ONE violet world.
   .media        wrapper that clips a full-bleed photo + its grading stack
   .media__img   the real <img> (object-fit:cover, no CLS via width/height)
   .media__grade violet glow → violet-black blended onto the photo (3 passes)
   .media__scrim dark gradient behind text over a photo → keeps WCAG AA
═══════════════════════════════════════════════════════════════ */
.media { position: absolute; inset: 0; overflow: hidden; }
.media__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.media__grade {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: multiply; opacity: .55;
  background:
    radial-gradient(120% 90% at 68% 8%, rgba(139,127,255,.42), transparent 60%),
    linear-gradient(180deg, rgba(40,30,92,.30) 0%, rgba(12,10,22,.86) 100%);
}
.media__grade::before {
  content: ""; position: absolute; inset: 0;
  mix-blend-mode: soft-light; opacity: .5;
  background:
    radial-gradient(90% 80% at 64% 6%, rgba(180,168,255,.55), transparent 62%),
    linear-gradient(180deg, rgba(99,88,232,.25), rgba(12,10,22,.4));
}
.media__grade::after {
  content: ""; position: absolute; inset: 0;
  mix-blend-mode: overlay; opacity: .38;
  background:
    radial-gradient(60% 60% at 70% 4%, rgba(206,196,255,.6), transparent 60%),
    radial-gradient(80% 70% at 50% 120%, rgba(48,36,110,.5), transparent 70%);
}
.media__scrim { position: absolute; inset: 0; pointer-events: none; }

/* ───────────────────────── reveal-on-scroll ───────────────────────── */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — neutralise animation/transition for users who asked
   the OS to reduce motion (WCAG 2.3.3). Done at normal specificity (no
   !important) so the css/ !important count stays at zero. Page-specific
   motion blocks (e.g. the homepage film) add their own reduced-motion
   fallbacks; nothing here needs to override an inline animation.
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .atmos::after, .haze { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
  }
}