/* =========================================
   Scroll Reveal Animation System
   Mirrors: opacity + translateY + blur pattern
   Easing:  cubic-bezier(0.16, 1, 0.3, 1)  (spring-like)
   Duration: 1050ms desktop / 800ms mobile
   Threshold: 20% visible triggers reveal
   ========================================= */

:root {
  --reveal-duration: 800ms;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-y: 50px;
  --reveal-blur: 8px;
}

/* ---- Base hidden state ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  filter: blur(var(--reveal-blur));
  transition:
    opacity   var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease),
    filter    var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform, filter;
}

/* ---- Revealed state (JS adds .is-revealed) ---- */
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---- Variants ---- */

/* fade: opacity only — for images, full-width elements */
[data-reveal="fade"] {
  --reveal-y: 0px;
  --reveal-blur: 4px;
}

/* slide-up: larger offset, no blur — for bold headings */
[data-reveal="slide-up"] {
  --reveal-y: 60px;
  --reveal-blur: 0px;
}

/* ---- Mobile: strip blur (GPU-heavy), reduce offset & speed ---- */
@media (max-width: 768px) {
  :root {
    --reveal-blur: 0px;
    --reveal-y: 32px;
    --reveal-duration: 800ms;
  }
  [data-reveal="fade"] {
    --reveal-blur: 0px;
  }
  [data-reveal="slide-up"] {
    --reveal-y: 40px;
  }
}

/* ---- Event cards: extra-slow reveal for dramatic scroll effect ---- */
.event-card[data-reveal] {
  --reveal-duration: 800ms;
  --reveal-y: 70px;
  --reveal-blur: 0px;
}

/* ---- Benefits archive: snappy reveal so 9 partner cards land fast ---- */
.benefits-archive-page .event-card[data-reveal] {
  --reveal-duration: 280ms;
  --reveal-y: 16px;
  --reveal-blur: 0px;
}

/* ---- Media archive: same snappy reveal as benefits ---- */
.media-archive-page .event-card[data-reveal] {
  --reveal-duration: 280ms;
  --reveal-y: 16px;
  --reveal-blur: 0px;
}

/* ---- Members index: snappy reveal so 50 cards don't feel slow ---- */
.members-page [data-reveal] {
  --reveal-duration: 250ms;
  --reveal-y: 16px;
  --reveal-blur: 0px;
}
.members-page .member-row[data-reveal] {
  --reveal-duration: 220ms;
  --reveal-y: 12px;
}

/* ---- Members pagination: slide between pages (Gmail-style) ---- */
.members-page .members-list {
  transition:
    opacity   220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
/* Outgoing — page fades + slides; transition is enabled, animation plays. */
.members-page .members-list.is-leaving-left  { opacity: 0; transform: translateX(-40px); }
.members-page .members-list.is-leaving-right { opacity: 0; transform: translateX( 40px); }
/* Starting position for the new page — no transition so it snaps instantly. */
.members-page .members-list.is-entering-from-right {
  opacity: 0;
  transform: translateX(40px);
  transition: none;
}
.members-page .members-list.is-entering-from-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: none;
}

/* ---- Members pagination controls ---- */
.members-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.members-pagination-status {
  font-family: 'Heebo', sans-serif;
  font-size: var(--fs-body);
  color: var(--color-text);
  min-width: 110px;
  text-align: center;
}
.members-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.15s;
  padding: 0;
}
.members-arrow:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.05);
}
.members-arrow:active:not(:disabled) { transform: scale(0.95); }
.members-arrow:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 768px) {
  .event-card[data-reveal] {
    --reveal-duration: 800ms;
    --reveal-y: 45px;
  }
}

/* ---- Accessibility: respect prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* ---- Header: smooth shadow on scroll ---- */
.site-header {
  transition: box-shadow 0.4s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.10);
}