/* ============================================================================
   global.css — site-wide typography, body canvas, focus, link defaults.
   ========================================================================= */

html {
  background: var(--color-canvas-base);
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  font-size: var(--size-base);
  color: var(--color-text-primary);
  background: var(--color-canvas-base);
  overflow-x: hidden;
}

/* The home page locks scroll because the depth gallery hijacks wheel input. */
body.body--gallery {
  overflow: hidden;
  height: 100vh;
}

/* Project pages scroll normally. */
body.body--project {
  overflow-x: hidden;
  min-height: 100vh;
}

/* Tecnica accent type — subtle green glow (not gallery hover chrome) */
.intro-layer__positioning,
.project-card__tagline,
.intro-layer__positioning-line,
.project-page__tagline,
.project-page__tagline-line,
.project-section__quote {
  text-shadow: var(--text-glow-accent);
}

/* ----------------------------------------------------------------------------
   Type defaults
   ------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
}

h4 {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-snug);
}

p {
  line-height: var(--leading-loose);
}

.text-mono {
  font-family: var(--font-body);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------------------
   Links
   ------------------------------------------------------------------------- */
a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-default);
}

a:hover {
  color: var(--color-accent);
}

/* ----------------------------------------------------------------------------
   Focus — sharper, visible, intentional
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ----------------------------------------------------------------------------
   Selection
   ------------------------------------------------------------------------- */
::selection {
  background: var(--color-accent);
  color: var(--color-canvas-base);
}

/* ----------------------------------------------------------------------------
   Ambient film grain — animated noise overlay sitting above the canvas
   but below the DOM content. Subtle, never moves more than ~4% opacity.
   ------------------------------------------------------------------------- */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
  opacity: 0.06;
  background-image:
    radial-gradient(
      rgba(255, 255, 255, 0.4) 1px,
      transparent 1px
    );
  background-size: 3px 3px;
  animation: grain-shift var(--dur-pulse) steps(8) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 3%); }
  40%  { transform: translate(3%, -1%); }
  60%  { transform: translate(-1%, -3%); }
  80%  { transform: translate(2%, 2%); }
  100% { transform: translate(0, 0); }
}