/**
 * The Void-Sync Codex: Stylesheet V1.0
 * Project: Learning, Reinvented
 *
 * "If it can be removed without destroying the core message, it must be gone."
 */

/* ============================================
   00. Design Tokens (The Chromatic Silence)
   ============================================ */

:root {
  /* Color System */
  --cognitive-canvas: #F2F0E9;
  --structural-intent: #1A1A1A;
  --progress-inactive: rgba(26, 26, 26, 0.1);
  --progress-glow-start: rgba(180, 220, 255, 0.8);
  --progress-glow-end: rgba(255, 255, 255, 0.9);

  /* Typography Scale */
  --headline-size: clamp(2.5rem, 10vw, 8rem);
  --subtext-size: clamp(1rem, 1.2rem, 1.25rem);

  /* Typography Rhythm */
  --headline-leading: 0.95;
  --headline-tracking: -0.02em;
  --subtext-leading: 1.5;

  /* Spatial System (Cognitive Breath) */
  --breath-vertical: 30vh;
  --breath-section: 50vh;

  /* Progress Bar */
  --progress-height: 2px;
  --progress-bottom: 5vh;
}


/* ============================================
   01. Reset (Philosophical Purity)
   ============================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================
   02. The Voice of Structure (Typography)
   ============================================ */

body {
  font-family:
    "Helvetica Neue",
    "Neue Haas Grotesk",
    "Aktiv Grotesk",
    Helvetica,
    Arial,
    system-ui,
    -apple-system,
    sans-serif;
  font-weight: 400;
  background-color: var(--cognitive-canvas);
  color: var(--structural-intent);
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2 {
  font-weight: 500;
  line-height: var(--headline-leading);
  letter-spacing: var(--headline-tracking);
  font-size: var(--headline-size);
  text-transform: lowercase;
}

.subtext {
  font-size: var(--subtext-size);
  font-weight: 400;
  line-height: var(--subtext-leading);
  max-width: 36em;
  margin-inline: auto;
  opacity: 0.85;
}


/* ============================================
   03. The Architecture of Absence (Layout)
   ============================================ */

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: 1.5rem;
}

section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: var(--breath-vertical);
}

.hero {
  min-height: 100vh;
  padding-bottom: var(--breath-section);
}

.hero h1 {
  margin-bottom: 2rem;
}

.manifesto article {
  max-width: 90vw;
}

.manifesto h2 {
  margin-bottom: 1.5rem;
}

.manifesto.closing {
  min-height: 80vh;
}

.manifesto.closing h2 {
  margin-bottom: 0;
}


/* ============================================
   04. The Kinetic Whisper (Progress Bar)
   ============================================ */

.progress-track {
  position: fixed;
  bottom: var(--progress-bottom);
  left: 50%;
  transform: translateX(-50%);
  width: min(200px, 25vw);
  height: var(--progress-height);
  background-color: var(--progress-inactive);
  border-radius: 1px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--progress-glow-start),
    var(--progress-glow-end)
  );
  border-radius: 1px;
  box-shadow:
    0 0 8px var(--progress-glow-start),
    0 0 16px rgba(180, 220, 255, 0.4);

  /* Scroll-driven animation (modern browsers) */
  animation: progress-fill linear forwards;
  animation-timeline: scroll();
  animation-duration: 1ms; /* Firefox requirement */
}

@keyframes progress-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}


/* ============================================
   05. The Anchor (Decorative Element)
   ============================================ */

.anchor {
  position: fixed;
  bottom: calc(var(--progress-bottom) - 1.5vh);
  right: 3vw;
  width: 24px;
  height: 24px;
  opacity: 0.15;
}

.anchor::before,
.anchor::after {
  content: '';
  position: absolute;
  background-color: var(--structural-intent);
}

.anchor::before {
  width: 12px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.anchor::after {
  width: 6px;
  height: 6px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: var(--cognitive-canvas);
}


/* ============================================
   06. Responsive Calibrations
   ============================================ */

@media (max-width: 768px) {
  :root {
    --headline-size: clamp(2rem, 12vw, 4rem);
    --breath-vertical: 20vh;
  }

  .progress-track {
    width: min(150px, 40vw);
  }

  .anchor {
    width: 18px;
    height: 18px;
    right: 5vw;
  }
}

@media (max-width: 480px) {
  :root {
    --headline-size: clamp(1.75rem, 10vw, 3rem);
    --subtext-size: 1rem;
  }

  main {
    padding-inline: 1rem;
  }
}


/* ============================================
   07. Fallback for browsers without
       scroll-driven animation support
   ============================================ */

@supports not (animation-timeline: scroll()) {
  .progress-bar {
    animation: none;
    /* Width will be controlled via JavaScript */
  }
}


/* ============================================
   08. Accessibility & Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .progress-bar {
    animation: none;
    transition: width 0.1s linear;
  }
}

/* Focus styles for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--structural-intent);
  outline-offset: 4px;
}