/* ============================================================
   PROSPER — SCROLL FX & BACKGROUND VISUALS
   Cinematic scroll transitions inspired by:
   - IRONWILLED horizontal strip wipes
   - Particle runner dissolve
   - Anatomical illustration reveals
   - Film-cut flash frames
   ============================================================ */

/* ================================================================
   1. BASE STATES — all animated elements start hidden
   ================================================================ */

/* Strip wipe — elements enter from clip-path left→right reveal */
[data-fx="strip-wipe"] {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition:
    clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0.1s ease;
}
[data-fx="strip-wipe"].fx-in {
  clip-path: inset(0 0% 0 0);
  opacity: 1;
}

/* Strip wipe — right to left */
[data-fx="strip-wipe-rtl"] {
  clip-path: inset(0 0 0 100%);
  opacity: 0;
  transition:
    clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0.1s ease;
}
[data-fx="strip-wipe-rtl"].fx-in {
  clip-path: inset(0 0 0 0%);
  opacity: 1;
}

/* Slice reveal — vertical clip from top */
[data-fx="slice-down"] {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition:
    clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0.15s ease;
}
[data-fx="slice-down"].fx-in {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
}

/* Slice reveal — vertical clip from bottom */
[data-fx="slice-up"] {
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  transition:
    clip-path 0.75s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0.1s ease;
}
[data-fx="slice-up"].fx-in {
  clip-path: inset(0% 0 0 0);
  opacity: 1;
}

/* Fade up — anatomical reveal, slow and deliberate */
[data-fx="fade-up"] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-fx="fade-up"].fx-in {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in — pure opacity, no movement */
[data-fx="fade-in"] {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-fx="fade-in"].fx-in {
  opacity: 1;
}

/* Scale reveal — particle runner emerge */
[data-fx="scale-in"] {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-fx="scale-in"].fx-in {
  opacity: 1;
  transform: scale(1);
}

/* Blur resolve — emerges from soft focus like camera pull */
[data-fx="blur-in"] {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(16px);
  transition:
    opacity 1s ease,
    filter 1s ease,
    transform 1s ease;
}
[data-fx="blur-in"].fx-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Glitch pop — fast cut flash, then settle */
[data-fx="glitch-in"] {
  opacity: 0;
  transform: translateX(-6px) skewX(-1deg);
  transition: none;
}
[data-fx="glitch-in"].fx-in {
  animation: glitchReveal 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes glitchReveal {
  0%   { opacity: 0;   transform: translateX(-8px) skewX(-2deg); }
  15%  { opacity: 1;   transform: translateX(4px)  skewX(1deg); filter: brightness(1.4); }
  30%  { opacity: 0.8; transform: translateX(-3px) skewX(-0.5deg); filter: brightness(0.8); }
  50%  { opacity: 1;   transform: translateX(2px)  skewX(0.3deg); filter: brightness(1.1); }
  100% { opacity: 1;   transform: translateX(0)    skewX(0);     filter: brightness(1); }
}

/* Stagger children — each child gets delay via --i CSS var */
[data-fx="stagger"] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1) var(--stagger-delay, 0ms),
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1) var(--stagger-delay, 0ms);
}
[data-fx="stagger"].fx-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* Split text lines — each .fx-line wipes in sequentially */
.fx-line {
  display: block;
  overflow: hidden;
}
.fx-line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1);
}
.fx-line.line-in .fx-line-inner {
  transform: translateY(0);
}

/* Delay utilities */
[data-delay="0"]   { transition-delay: 0ms !important; }
[data-delay="60"]  { transition-delay: 60ms !important; }
[data-delay="80"]  { transition-delay: 80ms !important; }
[data-delay="100"] { transition-delay: 100ms !important; }
[data-delay="120"] { transition-delay: 120ms !important; }
[data-delay="150"] { transition-delay: 150ms !important; }
[data-delay="160"] { transition-delay: 160ms !important; }
[data-delay="180"] { transition-delay: 180ms !important; }
[data-delay="200"] { transition-delay: 200ms !important; }
[data-delay="240"] { transition-delay: 240ms !important; }
[data-delay="300"] { transition-delay: 300ms !important; }
[data-delay="400"] { transition-delay: 400ms !important; }
[data-delay="500"] { transition-delay: 500ms !important; }
[data-delay="600"] { transition-delay: 600ms !important; }
[data-delay="700"] { transition-delay: 700ms !important; }
[data-delay="800"] { transition-delay: 800ms !important; }

/* ================================================================
   2. FLASH CUT — hard-cut flash on section entry
   Dark sections (.section-alt) get white flash.
   Light sections get dark flash.
   ================================================================ */
.section-flash {
  position: relative;
}
.section-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0);
  pointer-events: none;
  z-index: 10;
  transition: background 0.08s ease;
}
.section-flash.flash-active::before {
  animation: flashCutDark 0.4s ease forwards;
}
/* Dark flash — for white/off-white sections */
@keyframes flashCutDark {
  0%   { background: rgba(10,10,10,0.04); }
  15%  { background: rgba(10,10,10,0.09); }
  40%  { background: rgba(10,10,10,0.03); }
  100% { background: rgba(10,10,10,0); }
}
/* White flash — for dark (.section-alt) sections */
.section-alt.section-flash.flash-active::before {
  animation: flashCutLight 0.4s ease forwards;
}
@keyframes flashCutLight {
  0%   { background: rgba(255,255,255,0.05); }
  15%  { background: rgba(255,255,255,0.10); }
  40%  { background: rgba(255,255,255,0.03); }
  100% { background: rgba(255,255,255,0); }
}

/* ================================================================
   3. HORIZONTAL PANEL SCAN LINE
   Thin line that sweeps down a section on scroll enter.
   Dark sections: white line. Light sections: dark line.
   ================================================================ */
.section-scan {
  position: relative;
  overflow: hidden;
}
/* Default scan line — dark, for light/off-white sections */
.scan-line {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(10,10,10,0.45) 50%, transparent 100%);
  transform: translateY(-2px);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: none;
}
/* Override for dark sections — white line */
.section-alt .scan-line {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
}
.section-scan.scan-active .scan-line {
  animation: scanDown 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes scanDown {
  0%   { transform: translateY(0);    opacity: 0; }
  5%   { opacity: 0.8; }
  95%  { opacity: 0.6; }
  100% { transform: translateY(var(--section-h, 500px)); opacity: 0; }
}

/* ================================================================
   4. PARALLAX LAYERS
   Background elements scroll at different rates
   ================================================================ */
.parallax-bg {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ================================================================
   5. BACKGROUND VISUAL — PARTICLE RUNNER SVG
   Dissolving figure silhouette — placed as section BG
   ================================================================ */
.bg-visual-wrap {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.bg-visual-wrap svg {
  opacity: 0;
  transition: opacity 1.8s ease;
}
.bg-visual-wrap.vis-in svg {
  opacity: 1;
}

/* Hero particle runner — right side */
.bg-runner {
  right: -4vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 38vw, 560px);
  height: auto;
}

/* About — anatomical figure, left side */
.bg-anatomy {
  left: -4vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 28vw, 420px);
  height: auto;
  opacity: 0;
  transition: opacity 2s ease 0.3s;
}
.bg-anatomy.vis-in {
  opacity: 1 !important;
}

/* Programs — silhouette, right side */
.bg-silhouette {
  right: -2vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 26vw, 400px);
  height: auto;
}

/* ================================================================
   6. SECTION REVEAL CURTAIN
   A dark panel wipes away to reveal content — like an edit cut
   ================================================================ */
.reveal-curtain {
  position: relative;
  overflow: hidden;
}
.reveal-curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black);
  transform: translateX(0);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 2;
  pointer-events: none;
}
.reveal-curtain.curtain-open::after {
  transform: translateX(101%);
}
.reveal-curtain > * { position: relative; z-index: 1; }

/* ================================================================
   7. COUNTER ANIMATE — numbers count up when visible
   ================================================================ */
.count-up {
  display: inline-block;
}

/* ================================================================
   8. SCROLL PROGRESS LINE
   Thin dark line across the top of the viewport showing scroll %
   ================================================================ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 1px;
  background: var(--black, #0a0a0a);
  width: 0%;
  z-index: 10000;
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ================================================================
   9. SECTION TITLE — BIG TEXT CLIP REVEAL
   Title text clips in from bottom — editorial magazine style
   ================================================================ */
.title-clip {
  overflow: hidden;
  display: block;
}
.title-clip-inner {
  display: block;
  transform: translateY(105%);
  transition: transform 0.95s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}
.title-clip.clip-in .title-clip-inner {
  transform: translateY(0);
}

/* ================================================================
   10. STRIP TRANSITION OVERLAY
   Full-screen strip wipe between sections on deep scroll
   ================================================================ */
#strip-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}
.strip-overlay-bar {
  flex: 1;
  background: #0a0a0a;
  transform: scaleX(0);
  transform-origin: left;
}
.strip-overlay-bar.wipe-in {
  animation: stripWipeIn 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.strip-overlay-bar.wipe-out {
  animation: stripWipeOut 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes stripWipeIn  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stripWipeOut { from { transform: scaleX(1); } to { transform: scaleX(0); transform-origin: right; } }
.strip-overlay-bar:nth-child(1) { animation-delay: 0ms; }
.strip-overlay-bar:nth-child(2) { animation-delay: 30ms; }
.strip-overlay-bar:nth-child(3) { animation-delay: 60ms; }
.strip-overlay-bar:nth-child(4) { animation-delay: 90ms; }
.strip-overlay-bar:nth-child(5) { animation-delay: 120ms; }

/* ================================================================
   11. HORIZONTAL WIPE DIVIDERS between sections
   ================================================================ */
.wipe-divider {
  height: 1px;
  background: var(--border);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.wipe-divider.wipe-in {
  transform: scaleX(1);
}

/* ================================================================
   12. MOTION BLUR — elements arrive with horizontal blur
   ================================================================ */
[data-fx="motion-blur"] {
  opacity: 0;
  filter: blur(20px);
  transform: translateX(-20px);
  transition:
    opacity 0.7s ease,
    filter 0.7s ease,
    transform 0.7s ease;
}
[data-fx="motion-blur"].fx-in {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

/* ================================================================
   13. RESPONSIVE — disable heavy effects on mobile
   ================================================================ */
@media (max-width: 600px) {
  [data-fx="glitch-in"].fx-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .scan-line { display: none; }
  .bg-runner, .bg-anatomy, .bg-silhouette {
    display: none;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-fx], .fx-line-inner, .title-clip-inner,
  .reveal-curtain::after, .wipe-divider,
  .scan-line, .strip-overlay-bar {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
  }
}