/* =============================================================================
   SCROLL REVEAL — sohanamohanty.com
   Reusable soft-reveal system. Link this stylesheet in every HTML page.

   Classes:
     .reveal          — fade in + slide up 24px (standard)
     .reveal-up       — fade in + slide up 32px (slightly more emphasis)
     .reveal-stagger  — parent wrapper; children auto-stagger via JS

   Activated state (added by scroll-reveal.js via IntersectionObserver):
     .is-visible

   Notes:
   - animation: none !important overrides any pre-existing CSS keyframe
     animations on .reveal so there's no conflict with pages that had a
     load-time fadeUp animation before this system was added.
   - prefers-reduced-motion: everything is shown instantly, no motion at all.
   ============================================================================= */

/* ---- Hidden / initial state ------------------------------------------- */

.reveal,
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  animation: none !important;   /* prevent any inherited load-time keyframes */
  will-change: opacity, transform;
}

.reveal-up {
  transform: translateY(32px);
}

/* Children of a .reveal-stagger parent (delays applied per-child by JS) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  animation: none !important;
  will-change: opacity, transform;
}


/* ---- Visible / activated state ---------------------------------------- */

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

.reveal-stagger > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---- Accessibility: honour prefers-reduced-motion --------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up,
  .reveal-stagger > * {
    opacity:    1        !important;
    transform:  none     !important;
    transition: none     !important;
    animation:  none     !important;
  }
}