/**
 * NeuroBloom overdrive — scroll-linked depth & progress.
 * Progressive enhancement: @supports + JS fallback. Respects prefers-reduced-motion.
 */

/* ─── Reading progress (extraordinary utility, calm metaphor for “the journey”) ─── */
.nb-read-progress {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    #1a237e 0%,
    #00bcd4 55%,
    #e040fb 100%
  );
  opacity: 0.95;
}

@supports (animation-timeline: scroll(root block)) {
  .nb-read-progress.nb-od-scroll-native {
    display: block;
    transform: scaleX(0);
    animation-name: nb-read-progress-fill;
    animation-timing-function: linear;
    animation-timeline: scroll(root block);
    animation-fill-mode: both;
  }
}

@keyframes nb-read-progress-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* JS-driven fallback uses same element with inline transform */
.nb-read-progress.nb-od-scroll-js {
  display: block;
  transform: scaleX(0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .nb-read-progress {
    display: none !important;
    animation: none !important;
  }
}

/* ─── Hero device: scroll-linked depth (transform-only, GPU-friendly) ─── */
@supports (animation-timeline: scroll(root block)) {
  .nb-od-parallax.nb-od-scroll-native {
    animation-name: nb-hero-device-depth;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    animation-timeline: scroll(root block);
    animation-fill-mode: both;
    will-change: transform;
  }
}

@keyframes nb-hero-device-depth {
  from {
    transform: translateY(12px) scale(1);
  }
  to {
    transform: translateY(-28px) scale(1.03);
  }
}

.nb-od-parallax.nb-od-scroll-js {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .nb-od-parallax {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}