/* ============================================
   Base — reset + global
   Concatenated verbatim, in the exact order these files were linked from
   index.html. Nothing was edited: the cascade depends on this order.
   ============================================ */

/* ---------- reset.css ---------- */
/* ============================================
   CSS Reset / Normalize
   ============================================ */

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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
}

p {
  overflow-wrap: break-word;
}

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

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
}

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

/* ---------- global.css ---------- */
/* ============================================
   Global Styles & Utilities
   ============================================ */

/* ---- Typeface ----
   Inter, self-hosted. It has to be the VARIABLE font, not static instances:
   the stylesheets ask for font-weight 720, 760, 780, 820, 840, 850 and 860 in
   nine places, and static cuts would round every one of them to the nearest
   hundred and change the typography.

   One file, latin subset (U+0000-00FF covers every accented character Spanish
   needs), 47 KB, whole 100-900 weight axis.

   No metric-adjusted fallback face. That technique needs its family appended to
   --font-primary, which this change is not allowed to touch, and a single
   size-adjust cannot be right everywhere: measured against Inter it is 106.61%
   for Segoe UI but 112.24% for Helvetica Neue. The file is preloaded from the
   same origin, so the swap window is short, and index.html measures CLS 0.0001
   either way. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-variable.3100e775e8.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

/* ---- Section Spacing ---- */
.section {
  padding-block: var(--space-section);
}

.section--no-top {
  padding-top: 0;
}

.section--no-bottom {
  padding-bottom: 0;
}

/* ---- Typography Utilities ---- */
.text-muted {
  color: var(--color-text-muted);
}

.text-white {
  color: var(--color-white);
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.text-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

/* ---- Links ---- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: gap var(--duration-normal) var(--ease-out);
}

.link-arrow::after {
  content: '→';
  transition: transform var(--duration-normal) var(--ease-out);
}

.link-arrow:hover {
  gap: var(--space-3);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-out);
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-gray-800);
  transform: translateY(-1px);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-gray-300);
}

.btn--outline:hover {
  border-color: var(--color-black);
}

.btn--accent {
  background-color: var(--color-primary);
  color: var(--color-navy);
}

.btn--accent:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* ---- Divider ---- */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
}

/* ---- Scroll Reveal Animations ----
   The hidden state is scoped to `.js-reveal` on <html>, which only the reveal
   bootstrap in index.html adds. Nothing here hides content on its own, so a
   blocked script, a load error or a client without IntersectionObserver leaves
   a readable page instead of a header above four empty sections.

   Same contract and same class name as css/lp.css, which already works this
   way. The state class differs (`revealed` here, `is-in` there) because
   js/animations.js and js/main.js both write this one. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
}

.js-reveal .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal .reveal-delay-1 { transition-delay: 100ms; }
.js-reveal .reveal-delay-2 { transition-delay: 200ms; }
.js-reveal .reveal-delay-3 { transition-delay: 300ms; }
.js-reveal .reveal-delay-4 { transition-delay: 400ms; }

/* Belt and braces: the bootstrap already refuses to add the class under
   reduced motion, but if it ever gets there anyway the content stays put. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---- Visually Hidden (Accessibility) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ---- Body overlay when mobile menu open ---- */
body.menu-open {
  overflow: hidden;
}

/* ---- Skip Navigation Link (Accessibility) ---- */
.skip-nav {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-navy);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  z-index: 10000;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-nav:focus {
  top: var(--space-4);
}

/* ---- Focus Visible (Accessibility) ----
   Two tones, because one cannot serve both grounds this site uses: brand gold
   measures 1.51:1 on the paper tone and the aged cut is weak on ink. The
   outline is the dark core; the box-shadow is a light halo just outside it.
   Whichever ground the element sits on, one of the two reads. */
:focus-visible {
  outline: 2px solid #14120E;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-sm);
}

/* On the dark acts the pair inverts: gold core, ink halo. */
.hero :focus-visible,
.showreel :focus-visible,
.news :focus-visible,
.faq :focus-visible,
.footer :focus-visible,
.header:not(.scrolled) :focus-visible {
  outline-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.9);
}

/* ---- Newsletter Success ---- */
.footer__newsletter-success {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-3) 0;
}