/* --- Font Face --- */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Design Tokens (Mobile-First) --- */

:root {
  color-scheme: dark;

  /* Color */
  --color-void: #000000;
  --color-signal: #FFFFFF;

  /* Typography */
  --type-philosophy: 14px;
  --type-question: 14px;
  --type-input: 16px;
  --type-submit: 12px;

  /* Weight */
  --weight-regular: 400;
  --weight-medium: 500;

  /* Leading & Tracking */
  --leading-text: 1.6;
  --tracking-text: 0.01em;

  /* Timing */
  --timing-atmospheric: 1200ms;
  --timing-responsive: 200ms;
  --pulse-cycle: 2000ms;
  --pulse-duration: 2s;
  --transition-base: 0.3s;

  /* Easing */
  --ease-reveal: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-primary: ease-out;

  /* Opacity */
  --opacity-hint: 0.04;
  --opacity-subtle: 0.4;
  --opacity-emerging: 0.6;
  --opacity-full: 1.0;

  /* Thresholds */
  --threshold-animation-start: 0.05;
  --threshold-philosophy-appear: 0.40;
  --threshold-philosophy-dismiss: 0.25;
  --threshold-form-appear: 0.60;
  --threshold-form-dismiss: 0.45;

  /* Content Layout */
  --content-max-width: 280px;
  --content-padding-x: 24px;
  --content-position-y: 40vh;
  --content-align: center;
}

/* --- Desktop Overrides --- */

@media (min-width: 768px) {
  :root {
    --content-max-width: 400px;
    --type-philosophy: 16px;
    --type-question: 16px;
    --type-submit: 14px;
  }
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --pulse-duration: 0s;
    --transition-base: 0.01s;
    --timing-atmospheric: 0ms;
  }
}

/* --- Base Reset --- */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-void);
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--color-signal);
  line-height: var(--leading-text);
  letter-spacing: var(--tracking-text);
}

/* --- Canvas --- */

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

/* --- Accessibility --- */

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* --- Content Containers --- */

main {
  position: relative;
  width: 100%;
  height: 100%;
}

[aria-live="polite"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

section[aria-label="Philosophy"],
form {
  display: none;
  position: fixed;
  top: var(--content-position-y);
  left: 50%;
  transform: translateX(-50%);
  max-width: var(--content-max-width);
  padding: 0 var(--content-padding-x);
  text-align: var(--content-align);
  z-index: 1;
}