/* ==========================================================================
   STRATA — Base Design System & Core Tokens
   ========================================================================== */

/* Stack Sans Headline (OFL, variable weight 200–700) — home layer titles, pills, small text; project-page body copy */
@font-face {
  font-family: 'Stack Sans Headline';
  src: url('../assets/fonts/StackSansHeadline/StackSansHeadline-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* Zalando Sans Expanded (OFL, variable weight 200–900) — SCOTCH logo + project page headings */
@font-face {
  font-family: 'Zalando Sans Expanded';
  src: url('../assets/fonts/ZalandoSansExpanded/ZalandoSansExpanded-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zalando Sans Expanded';
  src: url('../assets/fonts/ZalandoSansExpanded/ZalandoSansExpanded-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'BBH Bartle';
  src: url('../assets/fonts/BBHBartle-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Titles: Helvetica from the visitor's device (no font files shipped — Helvetica is a
   commercial font). Apple devices have Helvetica / Helvetica Neue; Windows/Android fall back to Arial. */

/* Body copy: Redaction 35 (OFL) */
@font-face {
  font-family: 'Redaction 35';
  src: url('../assets/fonts/Redaction35/Redaction35-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Redaction 35';
  src: url('../assets/fonts/Redaction35/Redaction35-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Redaction 35';
  src: url('../assets/fonts/Redaction35/Redaction35-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color Palette */
  --bg-deep: #08090b;
  --bg-surface: #101216;
  --bg-surface-glass: rgba(16, 18, 22, 0.65);
  --bg-surface-elevated: rgba(26, 29, 36, 0.75);
  
  --text-primary: #f5f5f7;
  --text-secondary: #9ea3ae;
  --text-tertiary: #656b78;
  /* Overarching Vibrant Chromatic Accent System (Matches Signature Drop Shadows) */
  --accent-vibrant-1: #ffe600; /* Electric Yellow */
  --accent-vibrant-2: #ff007f; /* Neon Rose */
  --text-accent: #ffe600;
  --text-accent-secondary: #ff007f;
  --text-accent-bright: #ffffff;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-prominent: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(255, 230, 0, 0.45);

  --scrim-heavy: linear-gradient(180deg, rgba(8, 9, 11, 0.7) 0%, rgba(8, 9, 11, 0.4) 40%, rgba(8, 9, 11, 0.85) 100%);
  --scrim-radial: radial-gradient(circle at 50% 50%, rgba(8, 9, 11, 0.2) 0%, rgba(8, 9, 11, 0.85) 100%);
  --scrim-vignette: radial-gradient(ellipse at center, transparent 30%, rgba(8, 9, 11, 0.75) 100%);

  /* Typography System */
  --font-main: 'Redaction 35', 'Helvetica Neue', Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Letter-spacing guideline: every rule on the site uses one of these. */
  --tracking-title: -0.02em;  /* titles, headings, pills, big statements */
  --tracking-label: 0.06em;   /* small UPPERCASE labels, buttons, kickers, captions */
  --tracking-logo: 0.04em;    /* SCOTCH wordmark only */
  --font-logo: 'Zalando Sans Expanded', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* logo + project headings */
  --logo-weight: 800;
  --font-text: 'Stack Sans Headline', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* main text font */
  --title-tracking: var(--tracking-title); /* legacy alias */
  --font-serif: var(--font-title);
  --font-tech: 'Jersey 25', monospace, sans-serif;
  --font-mono: var(--font-tech);
  --font-sans: var(--font-main);

  /* Typography Size Controls */
  --title-font-min: 1.74rem;
  --title-font-vw: 3.95vw;
  --title-font-size: 3.6rem;
  --base-font-size: 16px;

  /* Spacing Scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* Animation & Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 220ms;
  --duration-medium: 450ms;
  --duration-slow: 850ms;

  /* Layer Z-Indexes */
  --z-bg: 1;
  --z-canvas: 2;
  --z-mid: 5;
  --z-fg: 10;
  --z-hud: 100;
  --z-cursor: 999;
}

/* --------------------------------------------------------------------------
   Overarching Theme: Vibrant Chromatic Spectrum Cycle (16s Continuous Loop)
   Matches the signature electric drop shadows of the typography
   -------------------------------------------------------------------------- */
@keyframes vibrantColorShift {
  0% { color: #ffe600; }
  16.6% { color: #00ff66; }
  33.3% { color: #00f0ff; }
  50% { color: #b4ff00; }
  66.6% { color: #ff00aa; }
  83.3% { color: #00ffcc; }
  100% { color: #ffe600; }
}

@keyframes vibrantBgShift {
  0% { background-color: #ffe600; color: #000000; }
  16.6% { background-color: #00ff66; color: #000000; }
  33.3% { background-color: #00f0ff; color: #000000; }
  50% { background-color: #b4ff00; color: #000000; }
  66.6% { background-color: #ff00aa; color: #ffffff; }
  83.3% { background-color: #00ffcc; color: #000000; }
  100% { background-color: #ffe600; color: #000000; }
}

@keyframes vibrantBorderShift {
  0% { border-color: #ffe600; }
  16.6% { border-color: #00ff66; }
  33.3% { border-color: #00f0ff; }
  50% { border-color: #b4ff00; }
  66.6% { border-color: #ff00aa; }
  83.3% { border-color: #00ffcc; }
  100% { border-color: #ffe600; }
}

@keyframes vibrantBorderLeftShift {
  0% { border-left-color: #ffe600; }
  16.6% { border-left-color: #00ff66; }
  33.3% { border-left-color: #00f0ff; }
  50% { border-left-color: #b4ff00; }
  66.6% { border-left-color: #ff00aa; }
  83.3% { border-left-color: #00ffcc; }
  100% { border-left-color: #ffe600; }
}

@keyframes vibrantActiveGlow {
  0% {
    border-color: #ffe600;
    box-shadow: 0 0 0 1.5px #ffe600, 3px 3px 0 #ff007f, 0 16px 36px rgba(0, 0, 0, 0.7);
  }
  16.6% {
    border-color: #00ff66;
    box-shadow: 0 0 0 1.5px #00ff66, 3px 3px 0 #7928ca, 0 16px 36px rgba(0, 0, 0, 0.7);
  }
  33.3% {
    border-color: #00f0ff;
    box-shadow: 0 0 0 1.5px #00f0ff, 3px 3px 0 #ff5500, 0 16px 36px rgba(0, 0, 0, 0.7);
  }
  50% {
    border-color: #b4ff00;
    box-shadow: 0 0 0 1.5px #b4ff00, 3px 3px 0 #9d00ff, 0 16px 36px rgba(0, 0, 0, 0.7);
  }
  66.6% {
    border-color: #ff00aa;
    box-shadow: 0 0 0 1.5px #ff00aa, 3px 3px 0 #ffaa00, 0 16px 36px rgba(0, 0, 0, 0.7);
  }
  83.3% {
    border-color: #00ffcc;
    box-shadow: 0 0 0 1.5px #00ffcc, 3px 3px 0 #ff2a5f, 0 16px 36px rgba(0, 0, 0, 0.7);
  }
  100% {
    border-color: #ffe600;
    box-shadow: 0 0 0 1.5px #ffe600, 3px 3px 0 #ff007f, 0 16px 36px rgba(0, 0, 0, 0.7);
  }
}

@keyframes vibrantDropCapShift {
  0% {
    color: #ffe600;
    text-shadow: 2px 2px 0 #ff007f;
  }
  16.6% {
    color: #00ff66;
    text-shadow: 2px 2px 0 #7928ca;
  }
  33.3% {
    color: #00f0ff;
    text-shadow: 2px 2px 0 #ff5500;
  }
  50% {
    color: #b4ff00;
    text-shadow: 2px 2px 0 #9d00ff;
  }
  66.6% {
    color: #ff00aa;
    text-shadow: 2px 2px 0 #ffaa00;
  }
  83.3% {
    color: #00ffcc;
    text-shadow: 2px 2px 0 #ff2a5f;
  }
  100% {
    color: #ffe600;
    text-shadow: 2px 2px 0 #ff007f;
  }
}

@keyframes scrollGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Anything marked hidden stays hidden, even if a component sets display */
[hidden] {
  display: none !important;
}

/* Base Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--base-font-size, 16px);
  background-color: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100vw;
}

body {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  background-color: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: clip;
  position: relative;
  transition: background-color var(--duration-medium) ease;
}

/* Custom Selection */
::selection {
  background-color: var(--text-accent);
  color: var(--bg-deep);
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

/* Button Reset */
button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--text-accent);
  outline-offset: 4px;
}

/* Media Elements */
img, video {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
}

/* Ensure all elements rendered in IM Fell DW Pica SC are uniform full-height capitals (not sentence case) */
.font-title,
.heading-serif,
.photo-headline,
.experiments-headline,
.pause-video-title,
.player-title,
.thumb-title {
  text-transform: uppercase;
}

.text-editorial {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.text-mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.text-accent {
  color: var(--text-accent);
  animation: vibrantColorShift 16s linear infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-accent);
}