/* ============================================================
   Pure North Peptides — Motion layer
   High-tier, GPU-only (transform/opacity), reduced-motion safe.
   Scroll-reveal + staggered grids + tricolor scroll progress.
   Reveal-hiding only applies to below-fold elements the JS tags
   with [data-reveal]; without JS nothing is hidden (no FOUC).
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.2,.8,.2,1),
              transform .55s cubic-bezier(.2,.8,.2,1);
}

/* tricolor scroll-progress bar (brand signature gradient) */
.pn-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #0066b1, #1c69d4, #e22718);
  z-index: 9999; pointer-events: none; will-change: transform;
}

/* subtle hero load-in */
.hero__inner > * { animation: pn-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.hero__inner > *:nth-child(2){ animation-delay:.08s }
.hero__inner > *:nth-child(3){ animation-delay:.16s }
.hero__inner > *:nth-child(4){ animation-delay:.24s }
@keyframes pn-rise { from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__inner > * { animation: none !important; }
  .pn-progress { display: none; }
}