/* ==========
   Reveal system (scroll-in animations)
   Plug-and-play CSS
   ========== */

/* base */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--reveal-duration, .6s) ease,
    transform var(--reveal-duration, .6s) ease,
    filter var(--reveal-duration, .6s) ease;
  will-change: opacity, transform, filter;
}

/* becomes visible when JS adds the class */
.reveal.is-visible{
  opacity: 1;
  transform: none;
  filter: none;
}

/* variants (set via data-anim="…") */
.reveal[data-anim="fade-in"]{
  transform: none;
}

.reveal[data-anim="fade-up"]{
  transform: translateY(20px);
}

.reveal[data-anim="slide-left"]{
  transform: translateX(24px);
}

.reveal[data-anim="slide-right"]{
  transform: translateX(-24px);
}

.reveal[data-anim="zoom-in"]{
  transform: scale(.96);
}

.reveal[data-anim="blur-in"]{
  filter: blur(6px);
  transform: none;
}

/* when visible, all transforms/filters reset */
.reveal.is-visible[data-anim],
.reveal.is-visible[data-anim="zoom-in"],
.reveal.is-visible[data-anim="blur-in"]{
  transform: none;
  filter: none;
}

/* optional stagger list:
   <ul class="reveal-list reveal" data-anim="fade-up" data-stagger=".08">… */
.reveal-list > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--reveal-duration, .5s) ease,
              transform var(--reveal-duration, .5s) ease;
}
.reveal.is-visible.reveal-list > *{
  opacity: 1;
  transform: none;
}

/* per-element delay from data-delay */
.reveal{ transition-delay: var(--reveal-delay, 0s); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-list > *,
  .reveal[data-anim="stagger-words"] .w{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

@keyframes fadeUp{
  to { opacity: 1; transform: translateY(0); }
}

/* word-by-word staggering (use only on plain-text elements) */
.reveal[data-anim="stagger-words"] .w{
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em);
  transition: opacity var(--reveal-duration, .45s) ease,
              transform var(--reveal-duration, .45s) ease;
}
.reveal.is-visible[data-anim="stagger-words"] .w.in{
  opacity: 1;
  transform: none;
}