/* ================================================================
   ANIMATIONS.CSS — Scroll reveals, bar fills, hover states
   Adjust timing and distance here.
================================================================ */

/* ── SCROLL REVEAL ──
   Add class="rv" to any element to make it fade up on scroll.
   Control delay with style="--rv-delay: .1s"
── */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity  var(--ease-slow),
    transform var(--ease-slow);
  transition-delay: var(--rv-delay, 0s);
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* ── SKILL BAR FILL ──
   Bars start at 0 width, animate to --bar-w when .in is added
── */
.bar__fill {
  transition: width .9s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--rv-delay, .1s);
}
.bar__fill.in {
  width: var(--bar-w, 0%);
}

/* ── NAV SCROLL STATE ── */
.nav.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.35);
}

/* ── REEL PULSE (idle animation on play button) ── */
@keyframes reelPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,34,26,0); }
  50%       { box-shadow: 0 0 0 8px rgba(200,34,26,.18); }
}
.reel__play {
  animation: reelPulse 2.8s ease-in-out infinite;
}
.reel__play:hover {
  animation: none;
}

/* ── CURSOR FLASH on CTA hover ── */
.btn--solid:active,
.btn--contact:active {
  transform: scale(.97);
}