/* ==========================================================================
   MANXEL — animations.css
   All keyframes + scroll/reveal utility classes. Applied via JS
   (see js/animations.js) by toggling the .in-view class, or used
   directly for hover/transition micro-interactions.
   ========================================================================== */

/* ---- Scroll reveal base classes -------------------------------------- */
.reveal {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.fade-up    { transform: translateY(28px); }
.reveal.fade-down   { transform: translateY(-28px); }
.reveal.fade-right { transform: translateX(-28px); }
.reveal.fade-left  { transform: translateX(28px); }
.reveal.zoom-in    { transform: scale(0.92); }
.reveal.scale-in   { transform: scale(0.96); }

.reveal.in-view { opacity: 1; transform: translate(0, 0) scale(1); }

/* ---- Staggered children (apply data-delay in HTML, read by JS) -------- */
/* JS sets transition-delay inline based on data-delay attribute. */

/* ---- Text reveal (used for hero heading lines) ------------------------ */
.text-reveal-line { overflow: hidden; display: block; }
.text-reveal-line span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.text-reveal-line.in-view span { transform: translateY(0); }

/* ---- Hero slide content animation (re-triggered on slide change) ------ */
.carousel-item .hero-copy > * ,
.carousel-item .hero-panel {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.carousel-item.active .hero-copy > * ,
.carousel-item.active .hero-panel { opacity: 1; transform: translateY(0); }

.carousel-item.active .hero-kicker      { transition-delay: 0.05s; }
.carousel-item.active .hero-copy h1     { transition-delay: 0.15s; }
.carousel-item.active .hero-lead        { transition-delay: 0.25s; }
.carousel-item.active .hero-actions     { transition-delay: 0.35s; }
.carousel-item.active .hero-panel       { transition-delay: 0.3s; }

/* ---- Counter number ticking (JS drives the actual number) ------------- */
@keyframes pulseOnce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.num.counted { animation: pulseOnce 0.4s ease; }

/* ---- Scroll cue on hero (subtle, non-parallax) ------------------------ */
@keyframes cueMove {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: 0.3; }
}
.hero-scroll-cue span { animation: cueMove 1.8s ease-in-out infinite; }

/* ---- Timeline progressive line (height set by JS via --fill) ---------- */
.timeline-fill { height: var(--fill, 0%); }

/* ---- Button micro-interactions (in addition to hover states in style.css) */
.btn-cta, .btn-ghost, .btn-outline-dark-pill, .filter-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-cta:active, .btn-outline-dark-pill:active { transform: scale(0.97); }

/* ---- Navbar background transition (base rule lives in style.css) ------ */
#mainNav { transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease; }

/* ---- Portfolio card hover (zoom + overlay slide, base rules in style.css) */
.portfolio-thumb, .portfolio-info, .portfolio-view {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Service editorial image crossfade --------------------------------- */
.service-visual-img { transition: opacity 0.5s ease; }

/* ---- Generic fade for tab panels (technologies section) --------------- */
.tab-pane { transition: opacity 0.3s ease; }

/* ---- Reduced motion: disable everything non-essential ------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .text-reveal-line span,
  .carousel-item .hero-copy > *,
  .carousel-item .hero-panel,
  .portfolio-thumb,
  .service-visual-img,
  #mainNav {
    transition: none !important;
    animation: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .text-reveal-line span { transform: none !important; }
  .carousel-item .hero-copy > *, .carousel-item .hero-panel { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  .hero-scroll-cue span { animation: none; }
}