/**
 * @file wasa_animations.css
 * Scroll-triggered entrance animations — editorial / blog style.
 * Philosophy: subtle, calm, professional. No bouncing, no scaling, no drama.
 * Elements fade upward softly as the reader scrolls through the page.
 */

/* ─── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes wFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes wFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wSlideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes wSlideLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes wAccentGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ─── Initial hidden state ──────────────────────────────────────────────── */
/* JS adds .w-anim before first paint; .w-visible triggers the animation */

.w-anim {
  opacity: 0;
  will-change: opacity, transform;
}

.w-anim.w-visible {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-duration: 0.65s;
}

/* Variants */
.w-anim[data-anim="fade-up"].w-visible    { animation-name: wFadeUp;     }
.w-anim[data-anim="fade-in"].w-visible    { animation-name: wFadeIn;     }
.w-anim[data-anim="slide-r"].w-visible    { animation-name: wSlideRight; }
.w-anim[data-anim="slide-l"].w-visible    { animation-name: wSlideLeft;  }
.w-anim[data-anim="accent"].w-visible     {
  animation-name: wAccentGrow;
  animation-duration: 0.4s;
  transform-origin: top center;
}

/* Stagger delays */
.w-anim[data-delay="1"].w-visible  { animation-delay: 0.07s;  }
.w-anim[data-delay="2"].w-visible  { animation-delay: 0.14s;  }
.w-anim[data-delay="3"].w-visible  { animation-delay: 0.21s;  }
.w-anim[data-delay="4"].w-visible  { animation-delay: 0.28s;  }
.w-anim[data-delay="5"].w-visible  { animation-delay: 0.35s;  }
.w-anim[data-delay="6"].w-visible  { animation-delay: 0.42s;  }
.w-anim[data-delay="7"].w-visible  { animation-delay: 0.49s;  }
.w-anim[data-delay="8"].w-visible  { animation-delay: 0.56s;  }

/* ─── Hover micro-interactions – Latest Articles cards ──────────────────── */

.wla-card {
  transition: box-shadow 0.38s ease, transform 0.38s ease;
}
.wla-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.13);
}
.wla-card-image img {
  transition: transform 0.7s ease;
}
.wla-card:hover .wla-card-image img {
  transform: scale(1.06);
}

/* ─── Hover – Scholars slider cards ────────────────────────────────────── */

.wss-card {
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.wss-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}
.wss-avatar {
  transition: box-shadow 0.32s ease;
}
.wss-card:hover .wss-avatar {
  box-shadow: 0 0 0 3px rgba(26, 160, 110, 0.5);
}

/* ─── Hover – Journal slider cards ─────────────────────────────────────── */

.wjs-card {
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.wjs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

/* ─── Hover – Media Hub items ───────────────────────────────────────────── */

.wmh-item {
  transition: background 0.22s ease;
}
.wmh-item:hover {
  background: rgba(201, 168, 76, 0.06);
}
.wmh-mosaic-item img {
  transition: transform 0.45s ease;
}
.wmh-mosaic-item:hover img {
  transform: scale(1.06);
}
.wmh-video-item {
  transition: background 0.22s ease;
}
.wmh-video-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ─── Hover – Stats cards ───────────────────────────────────────────────── */

.wss-stat {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wss-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* Social buttons */
.wss-social-btn {
  transition: transform 0.25s ease, background 0.22s ease, box-shadow 0.25s ease;
}
.wss-social-btn:hover {
  transform: translateY(-3px) scale(1.15);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25);
}

/* ─── Hover – Featured block ────────────────────────────────────────────── */

.wfb-card {
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.wfb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

/* ─── Section header accent bar ─────────────────────────────────────────── */

.wla-accent {
  transform-origin: top center;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .w-anim,
  .w-anim.w-visible {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
}