/* _reveal.css — MY addition, not part of the capture.
 * Per-section fade from blur + transparent. Quick and subtle by intent.
 * Delete this file and its <link> to get the raw capture back. */

:root {
  --sec-dur: 640ms;
  --sec-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sec-blur: 5px;
}

/* Hidden only once JS has confirmed it can reveal it again — no JS, no blank page. */
html.sec-reveal section[data-sec-reveal] {
  opacity: 0;
  will-change: opacity;
}

/* Sections containing position:fixed descendants get opacity only — a filter
   would become their containing block and break the fixed positioning. */
html.sec-reveal section[data-sec-reveal="opacity-only"] {
  filter: none;
}

/* Specificity: (0,3,2) beats the hide rule's (0,2,2). */
html.sec-reveal section[data-sec-reveal].is-in {
  opacity: 1;
  transition: opacity var(--sec-dur) var(--sec-ease);
}

html.sec-reveal section[data-sec-reveal].is-settled {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.sec-reveal section[data-sec-reveal] {
    opacity: 1;
    filter: none;
    will-change: auto;
  }
  html.sec-reveal section[data-sec-reveal].is-in { transition: none; }
}

/* Small screens: opacity only. blur() on 14 full-width sections is expensive on
   a mobile GPU and can visibly stutter on a long page; at this size the blur
   reads almost identically to a plain fade anyway. */
@media (max-width: 767px) {
  html.sec-reveal section[data-sec-reveal] { filter: none; }
  html.sec-reveal section[data-sec-reveal].is-in {
    filter: none;
    transition: opacity var(--sec-dur) var(--sec-ease);
  }
}