/* ==========================================================================
   CINEXIS — Base: reset, typography primitives, utilities
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-head);
}
p  { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }

a { color: var(--cyan); text-decoration: none; transition: color var(--fast) var(--ease); }
a:hover { color: var(--magenta); }

/* Focus: a prism ring. Visible, never suppressed. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

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

/* Scrollbars — hidden on rails, slim elsewhere */
.no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.no-bar::-webkit-scrollbar { display: none; }

/* ---- Type primitives ---------------------------------------------------- */

.brand {
  font-family: var(--font-brand);
  letter-spacing: var(--tr-brand);
  text-transform: uppercase;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-brand);
  font-size: var(--t-2xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.h1 { font-size: var(--t-3xl); font-weight: 700; }
.h2 { font-size: var(--t-2xl); font-weight: 600; }
.h3 { font-size: var(--t-xl);  font-weight: 600; }
.h4 { font-size: var(--t-lg);  font-weight: 600; }
.h5 { font-family: var(--font-head); font-size: var(--t-md); font-weight: 600; }

.body   { font-size: var(--t-sm); color: var(--ink-2); }
.small  { font-size: var(--t-xs); color: var(--ink-2); }
.tiny   { font-size: var(--t-2xs); color: var(--ink-3); }
.num    { font-family: var(--font-head); font-weight: 600; font-variant-numeric: tabular-nums; }

.dim  { color: var(--ink-2); }
.dimr { color: var(--ink-3); }

/* Prism-filled text — the brand gradient as ink */
.prism-text {
  background: var(--prism);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Chromatic aberration: a 1px magenta/cyan split behind display type.
   Echoes the logo's spectral split. Applied sparingly, on large text only. */
.aberrate {
  position: relative;
  text-shadow:
    -0.6px 0 rgba(193, 63, 224, .55),
     0.6px 0 rgba(41, 182, 246, .55);
}

/* ---- Layout utilities --------------------------------------------------- */

.row    { display: flex; align-items: center; }
.col    { display: flex; flex-direction: column; }
.between{ justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.wrap   { flex-wrap: wrap; }
.grow   { flex: 1 1 auto; min-width: 0; }
.g-1 { gap: var(--s-1); } .g-2 { gap: var(--s-2); } .g-3 { gap: var(--s-3); }
.g-4 { gap: var(--s-4); } .g-5 { gap: var(--s-5); } .g-6 { gap: var(--s-6); }

.pad   { padding-inline: var(--s-4); }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Grain overlay — apply to any surface that needs cinema texture */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .035;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Prism hairline — a gradient edge-light along the top of a surface */
.edge-light { position: relative; }
.edge-light::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--prism);
  opacity: .55;
}

/* ---- Icons -------------------------------------------------------------- */
.ico {
  width: 24px; height: 24px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-sm { width: 18px; height: 18px; }
.ico-lg { width: 28px; height: 28px; }
.ico-fill { fill: currentColor; stroke: none; }

/* ---- Entrance animation ------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.rise { animation: rise var(--slow) var(--ease) both; }

/* Staggered rail reveal — set --i on children */
.stagger > * { animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }

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