/* =========================================================================
   THE VFX INSTITUTE — v1 BASE
   Reset, layout primitives, type defaults, buttons, the belt (marquee)
   component. Fold-specific layout lives in folds.css; this file is what
   every fold is built out of.
   ========================================================================= */

*, *::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-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

/* --- skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--void);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t-1) var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

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

.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;
}

/* --- layout primitives --------------------------------------------------- */
.shell {
  max-width: var(--page);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--brand-lit);
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-lit);
  box-shadow: 0 0 10px 2px rgba(var(--brand-lit-rgb), 0.75);
}

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 1.05em 1.9em;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease), filter var(--t-1) var(--ease);
}
/* white label, not the dark one: the brand red is dark enough that near-black
   type on it measures under 2:1. White holds 7.92:1 at the gradient's deep end
   and 4.90:1 at its lit end, so the label is legal across the whole sweep.

   The grounds, the badge and the hover for every variant live together in
   folds.css under THE BUTTON — one component, so they cannot drift apart. */

/* =========================================================================
   THE BELT — the repeating marquee ticker. Pure CSS: an outer clip, a track
   that animates translateX(0 -> -50%), and the phrase duplicated exactly
   twice so the loop is seamless with no visible seam or reset-snap.

   Two instances share this component (.belt--hero / .belt--fold2); a
   modifier only changes speed/colour via the --t-belt custom property and a
   colour token, so there is one implementation, not two.
   ========================================================================= */
.belt {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
}
.belt-track {
  display: flex;
  width: max-content;
  animation: belt-scroll var(--t-belt) linear infinite;
}
.belt-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.belt-word {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-belt);
  white-space: nowrap;
  padding: 0 0.55em;
}
.belt-dot {
  color: var(--brand-lit);
  padding: 0 0.2em;
}

@keyframes belt-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* tokens.css already collapses transition/animation durations to 1ms —
     for a transform-driven loop that still leaves it flickering rather than
     stopped, so the belt needs an explicit off switch: freeze the track and
     drop the duplicate copy so reduced-motion users get one static line. */
  .belt-track { animation: none !important; }
  .belt-set:nth-of-type(2) { display: none; }
}