/* chshlab/css/base.css */

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

html {
  font-size: 18px;
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background:
    radial-gradient(circle at top center, rgba(201, 169, 77, 0.08), transparent 28%),
    radial-gradient(circle at 78% 8%, rgba(201, 64, 64, 0.08), transparent 20%),
    linear-gradient(180deg, #12131a 0%, #0e1016 34%, #11151d 100%);
  color: var(--text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}

body.nav-open {
  overflow: hidden;
}

/* Film grain overlay — high-frequency noise */
body::before {
  content: '';
  position: fixed;
  inset: -4px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  animation: grainShift 0.4s steps(3) infinite;
  will-change: auto;
}

/* Textile weave overlay — low-frequency directional linen */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.015,0.08' numOctaves='2' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.48;
  animation: textileBreath 10s ease-in-out infinite alternate;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2px, 1px); }
  66%  { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes textileBreath {
  0%   { opacity: 0.5; }
  100% { opacity: 0.7; }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 300; }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); }

p { max-width: 68ch; }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.03em;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection {
  background: rgba(96, 165, 250, 0.25);
  color: #e2e8f0;
}

/* Global focus-visible baseline */
:focus-visible {
  outline: 2px solid var(--blue, #60a5fa);
  outline-offset: 3px;
}

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

.katex {
  color: var(--text);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.katex-display { overflow-x: auto; max-width: 100%; padding: var(--space-2) 0; }

hr { border: none; border-top: 1px solid var(--rule); margin: var(--space-4) 0; }

/* ── Starfield canvas ── */
#starfield {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* ── Section atmosphere wash ── */
.atmosphere-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  body::before { animation: none; }
  body::after { animation: none; opacity: 0.5; }
  .ambient-glow { animation: none; opacity: 0.5; }
  .section-rule { transform: scaleX(1); }
  .figure-card__image-wrap { clip-path: none; }
  .theorem-card__number { clip-path: none; }
  .figure-card__label { clip-path: none; }
  body { opacity: 1; }
  #starfield { display: none; }
  .atmosphere-layer { display: none; }
  .timeline-node { opacity: 1; transform: none; }
  .figure-wrap canvas { animation: none; }
  .beat .reveal { opacity: 1; transform: none; }
}