/* ============================================================
   SCROLL REVEAL SYSTEM — Stylish, varied, editorial
   ============================================================ */

/* scrollbar */
::-webkit-scrollbar { width: 0; height: 0; }
::selection { background: var(--blue); color: var(--paper); }

/* ── progress bar ── */
#scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; background: #2F4BFF;
  z-index: 200; width: 0%;
  transition: width 80ms linear;
}

/* ── section label ── */
#section-label {
  position: fixed; bottom: 24px; left: 32px; z-index: 50;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(180,180,180,0.7);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* ─────────────────────────────────────────────────
   sr-fade  — basic fade up
   ───────────────────────────────────────────────── */
.sr-fade {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms cubic-bezier(0.16,1,0.3,1),
              transform 900ms cubic-bezier(0.16,1,0.3,1);
}
.sr-fade.in { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────
   sr-clip  — title clip from bottom (premium feel)
   ───────────────────────────────────────────────── */
.sr-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms cubic-bezier(0.16,1,0.3,1);
}
.sr-clip.in { clip-path: inset(0 0 0% 0); }

/* ─────────────────────────────────────────────────
   sr-skew  — slide up + skew correction (editorial)
   ───────────────────────────────────────────────── */
.sr-skew {
  opacity: 0;
  transform: translateY(40px) skewY(3deg);
  transition: opacity 1000ms cubic-bezier(0.16,1,0.3,1),
              transform 1000ms cubic-bezier(0.16,1,0.3,1);
}
.sr-skew.in { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────
   sr-left / sr-right — horizontal slide
   ───────────────────────────────────────────────── */
.sr-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 1000ms cubic-bezier(0.16,1,0.3,1),
              transform 1000ms cubic-bezier(0.16,1,0.3,1);
}
.sr-right {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 1000ms cubic-bezier(0.16,1,0.3,1),
              transform 1000ms cubic-bezier(0.16,1,0.3,1);
}
.sr-left.in, .sr-right.in { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────
   sr-scale  — scale up from 0.9 (for images/cards)
   ───────────────────────────────────────────────── */
.sr-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1000ms cubic-bezier(0.16,1,0.3,1),
              transform 1000ms cubic-bezier(0.16,1,0.3,1);
}
.sr-scale.in { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────
   sr-blur  — blur + fade (for portraits/images)
   ───────────────────────────────────────────────── */
.sr-blur {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.04);
  transition: opacity 1200ms cubic-bezier(0.16,1,0.3,1),
              filter 1200ms cubic-bezier(0.16,1,0.3,1),
              transform 1200ms cubic-bezier(0.16,1,0.3,1);
}
.sr-blur.in { opacity: 1; filter: blur(0); transform: none; }

/* ─────────────────────────────────────────────────
   sr-line  — horizontal rule draw
   ───────────────────────────────────────────────── */
.sr-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1400ms cubic-bezier(0.16,1,0.3,1);
}
.sr-line.in { transform: scaleX(1); }

/* ─────────────────────────────────────────────────
   [data-stagger] inside [data-stagger-parent]
   ───────────────────────────────────────────────── */
[data-stagger] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(0.16,1,0.3,1),
              transform 800ms cubic-bezier(0.16,1,0.3,1);
}
[data-stagger].in { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────
   [data-stagger-h] — horizontal stagger variant
   ───────────────────────────────────────────────── */
[data-stagger-h] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 800ms cubic-bezier(0.16,1,0.3,1),
              transform 800ms cubic-bezier(0.16,1,0.3,1);
}
[data-stagger-h].in { opacity: 1; transform: none; }

/* delay utilities */
.d100 { transition-delay: 100ms !important; }
.d200 { transition-delay: 200ms !important; }
.d300 { transition-delay: 300ms !important; }
.d400 { transition-delay: 400ms !important; }
.d500 { transition-delay: 500ms !important; }
.d600 { transition-delay: 600ms !important; }
.d800 { transition-delay: 800ms !important; }