/* 
 * Reading Depth Indicator
 * Subtle background color temperature shift based on scroll position
 * Reader may not consciously notice, but the page "warms" as they progress
 */

:root {
  --reading-progress: 0;
  --base-cream: #f5f1e8;
  --warm-cream: #f6f2e9;
  --cool-cream: #f4f0e7;
}

body {
  /* Very subtle color temperature shift */
  background-color: color-mix(
    in oklch,
    var(--cool-cream) calc((1 - var(--reading-progress)) * 100%),
    var(--warm-cream) calc(var(--reading-progress) * 100%)
  );
  
  /* Fallback for browsers without color-mix */
  background-color: var(--base-cream);
  
  /* Smooth transition */
  transition: background-color 0.3s ease-out;
}

/* Even more subtle: very slight letter-spacing adjustment */
.content-body {
  letter-spacing: calc(0.01em + (var(--reading-progress) * 0.005em));
  transition: letter-spacing 0.2s ease-out;
}

/* Safari fallback with filter adjustment instead of color-mix */
@supports not (background-color: color-mix(in oklch, red, blue)) {
  body {
    filter: sepia(calc(var(--reading-progress) * 0.02)) hue-rotate(calc(var(--reading-progress) * 5deg));
  }
}