/* ═══════════════════════════════════════════════════════════
   Pegify · Scroll Animations & Storytelling Effects
   Shared across all pages — driven by IntersectionObserver
   ═══════════════════════════════════════════════════════════ */

/* ─── Base reveal ─── */
[data-animate]{
  opacity:0;
  will-change:transform,opacity;
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1),
    filter .8s cubic-bezier(.16,1,.3,1);
}
[data-animate].in-view{opacity:1;transform:none;filter:none}

/* ─── Fade up (default) ─── */
[data-animate="fade-up"]{transform:translateY(48px)}
[data-animate="fade-up-sm"]{transform:translateY(24px)}

/* ─── Fade down ─── */
[data-animate="fade-down"]{transform:translateY(-48px)}

/* ─── Slide from sides ─── */
[data-animate="slide-left"]{transform:translateX(-60px)}
[data-animate="slide-right"]{transform:translateX(60px)}

/* ─── Scale up ─── */
[data-animate="scale-up"]{transform:scale(.88);filter:blur(4px)}
[data-animate="scale-up-sm"]{transform:scale(.94)}

/* ─── Zoom in ─── */
[data-animate="zoom"]{transform:scale(.7);filter:blur(8px)}

/* ─── Flip ─── */
[data-animate="flip-up"]{transform:perspective(800px) rotateX(8deg) translateY(40px)}

/* ─── Draw attention ─── */
[data-animate="pop"]{transform:scale(.5);opacity:0}
[data-animate="pop"].in-view{transform:scale(1);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}

/* ─── Blur in ─── */
[data-animate="blur-in"]{filter:blur(12px);transform:translateY(20px)}

/* ─── Clip reveal (bottom to top) ─── */
[data-animate="clip-up"]{
  clip-path:inset(100% 0 0 0);
  opacity:1;
  transition:clip-path .9s cubic-bezier(.16,1,.3,1);
}
[data-animate="clip-up"].in-view{clip-path:inset(0 0 0 0)}

/* ─── Stagger children ─── */
[data-stagger] > *{
  opacity:0;
  transform:translateY(32px);
  transition:
    opacity .6s cubic-bezier(.16,1,.3,1),
    transform .6s cubic-bezier(.16,1,.3,1);
}
[data-stagger].in-view > *{opacity:1;transform:none}
[data-stagger].in-view > *:nth-child(1){transition-delay:0ms}
[data-stagger].in-view > *:nth-child(2){transition-delay:80ms}
[data-stagger].in-view > *:nth-child(3){transition-delay:160ms}
[data-stagger].in-view > *:nth-child(4){transition-delay:240ms}
[data-stagger].in-view > *:nth-child(5){transition-delay:320ms}
[data-stagger].in-view > *:nth-child(6){transition-delay:400ms}
[data-stagger].in-view > *:nth-child(7){transition-delay:480ms}
[data-stagger].in-view > *:nth-child(8){transition-delay:560ms}
[data-stagger].in-view > *:nth-child(9){transition-delay:640ms}
[data-stagger].in-view > *:nth-child(10){transition-delay:720ms}
[data-stagger].in-view > *:nth-child(n+11){transition-delay:800ms}

/* ─── Stagger (fast variant) ─── */
[data-stagger="fast"].in-view > *:nth-child(1){transition-delay:0ms}
[data-stagger="fast"].in-view > *:nth-child(2){transition-delay:50ms}
[data-stagger="fast"].in-view > *:nth-child(3){transition-delay:100ms}
[data-stagger="fast"].in-view > *:nth-child(4){transition-delay:150ms}
[data-stagger="fast"].in-view > *:nth-child(5){transition-delay:200ms}
[data-stagger="fast"].in-view > *:nth-child(6){transition-delay:250ms}

/* ─── Delay modifiers ─── */
[data-delay="100"]{transition-delay:100ms!important}
[data-delay="200"]{transition-delay:200ms!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="800"]{transition-delay:800ms!important}
[data-delay="1000"]{transition-delay:1000ms!important}

/* ─── Duration modifiers ─── */
[data-duration="fast"]{transition-duration:.5s!important}
[data-duration="slow"]{transition-duration:1.2s!important}
[data-duration="slower"]{transition-duration:1.6s!important}

/* ─── Parallax layer ─── */
[data-parallax]{will-change:transform;transition:none}

/* ─── Counter (numbers that count up) ─── */
[data-count]{
  font-variant-numeric:tabular-nums;
}

/* ─── Typewriter ─── */
.typewriter{overflow:hidden;white-space:nowrap;border-right:2px solid var(--orange);width:0;transition:none}
.typewriter.typing{animation:typewrite 2s steps(40) forwards,blink-caret .6s step-end infinite}
@keyframes typewrite{from{width:0}to{width:100%}}
@keyframes blink-caret{50%{border-color:transparent}}

/* ─── Floating / bobbing ─── */
.float{animation:float 4s ease-in-out infinite}
.float-slow{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ─── Pulse glow ─── */
.pulse-glow{animation:pulseGlow 2.5s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,125,47,.25)}50%{box-shadow:0 0 32px 8px rgba(255,125,47,.15)}}

/* ─── Draw line (for SVG paths) ─── */
[data-draw]{
  stroke-dasharray:var(--path-len,1000);
  stroke-dashoffset:var(--path-len,1000);
  transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1);
}
[data-draw].in-view{stroke-dashoffset:0}

/* ─── Horizontal scroll progress bar ─── */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--orange);z-index:100;
  transition:width .1s linear;
}

/* ─── Reduce motion ─── */
@media (prefers-reduced-motion:reduce){
  [data-animate],[data-stagger]>*{
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
  }
  .float,.float-slow,.pulse-glow{animation:none!important}
  .typewriter{width:100%!important;animation:none!important}
}