/* =====================================================================
   CHI KI PRANA — SHARED SCROLL ANIMATIONS
   Enqueued once from functions.php (ngo_theme_assets) after theme-main /
   responsive / pages, so every template — front-page, page-*, single,
   archive, home, index, 404 — gets the same reveal + nav behavior.
   Reuses the existing purple/gold tokens from main.css — no new colors.
   Driven by assets/js/scroll-animations.js (Motion library).
   ===================================================================== */

/* ===== CONTENT REVEAL (headings, cards, images, text blocks) =====
   Base hidden state + visible state. Motion's inView() toggles
   .ckp-inview on/off every time an element crosses the viewport
   (once:false), so it fades + slides up on the way down AND replays
   on the way back up. Kept as CSS transitions (not just JS-driven
   inline styles) so the motion feels identical to the site's existing
   .reveal utilities. */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.ckp-reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.75s var(--transition-smooth), transform 0.75s var(--transition-smooth);
  will-change: opacity, transform;
}
.reveal-left { transform: translateX(-52px); }
.reveal-right { transform: translateX(52px); }
.reveal-scale { transform: scale(0.92); transition: opacity 0.65s var(--transition-smooth), transform 0.65s var(--transition-bounce); }

.reveal.visible,
.reveal.ckp-inview,
.ckp-reveal.ckp-inview { opacity: 1; transform: translateY(0); }

.reveal-left.visible,
.reveal-left.ckp-inview { opacity: 1; transform: translateX(0); }

.reveal-right.visible,
.reveal-right.ckp-inview { opacity: 1; transform: translateX(0); }

.reveal-scale.visible,
.reveal-scale.ckp-inview { opacity: 1; transform: scale(1); }

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .ckp-reveal {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ===== NAVBAR SCROLL HIDE/SHOW =====
   nav.scrolled (main.js) already handles the background/height change.
   This class only handles the hide-on-scroll-down / show-on-scroll-up
   translate, driven by Motion in scroll-animations.js. The CSS
   transition here is a no-JS fallback only — Motion animates via the
   Web Animations API and overrides the timing itself. */
nav#mainNav {
  transition: transform 0.4s var(--transition-smooth), height 0.35s var(--transition-smooth), box-shadow 0.35s var(--transition-smooth);
}
nav#mainNav.nav-hidden { transform: translateY(-100%); }

/* ===== FOOTER REVEAL =====
   Footer fades + slides up the first (and every) time it enters the
   viewport, same mechanism as .reveal above. */
footer.ckp-footer-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--transition-smooth), transform 0.8s var(--transition-smooth);
}
footer.ckp-footer-reveal.ckp-inview { opacity: 1; transform: translateY(0); }

/* ===== CRISP IMAGES DURING ANIMATION =====
   Animating opacity/transform on raster images can make browsers
   drop them to a blurry intermediate mip level. Forcing GPU
   compositing on its own layer keeps them sharp throughout. */
img {
  image-rendering: -webkit-optimize-contrast;
  /*image-rendering: crisp-edges;*/
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}