/* Scroll-driven animations where supported; IntersectionObserver is the fallback */
@supports (animation-timeline: view()) {
  .reveal {
    animation: revealIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}
@keyframes revealIn {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}

/* Essay frame progressive fade-in on horizontal scroll */
.essay__frame {
  view-timeline: --frame inline;
  animation: essayIn linear both;
  animation-timeline: --frame;
  animation-range: cover 0% cover 40%;
}
@keyframes essayIn {
  from { opacity: 0.1; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll progress bar */
.scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 300;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .scroll-bar {
    animation: scrollBar linear both;
    animation-timeline: scroll();
  }
}
@keyframes scrollBar {
  to { transform: scaleX(1); }
}