/**
 * Scroll-triggered & hover animations
 * =====================================
 * Sections covered:
 *  1. .js-fade-up          — generic scroll-triggered fade-in-from-bottom
 *  2. .topPageCard         — fast fade-up for the whole card section
 *  3. .topPageGallery imgs — staggered scroll-triggered fade-in-up
 *  4. .topPageNews__items  — hover background highlight
 *  5. .js-footer-entrance  — slide-up entrance for the main footer section
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. GENERIC SCROLL FADE-UP  (applied to all <img> by scroll-animations.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden / initial state */
.js-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

/* Visible / animated state */
.js-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sibling stagger for grid/row images */
.js-fade-up:nth-child(2) { transition-delay: 0.1s; }
.js-fade-up:nth-child(3) { transition-delay: 0.2s; }
.js-fade-up:nth-child(4) { transition-delay: 0.3s; }
.js-fade-up:nth-child(5) { transition-delay: 0.4s; }
.js-fade-up:nth-child(6) { transition-delay: 0.5s; }
.js-fade-up:nth-child(7) { transition-delay: 0.6s; }
.js-fade-up:nth-child(8) { transition-delay: 0.7s; }


/* ═══════════════════════════════════════════════════════════════════════════
   2. topPageCard — FAST fade-up on the text + button children
      JS adds .js-card-fade to each direct child of .topPageCard__inner.
      Duration is short (0.4 s) so it feels "snappy".
   ═══════════════════════════════════════════════════════════════════════════ */

.js-card-fade {
  opacity: 1;                              /* always visible — no fade */
  transform: translateY(30px);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.js-card-fade.is-visible {
  transform: translateY(0);
}

/* Stagger the button slightly after the text block */
.js-card-fade:nth-child(2) { transition-delay: 0.1s; }
.js-card-fade:nth-child(3) { transition-delay: 0.2s; }
.js-card-fade:nth-child(4) { transition-delay: 0.3s; }


/* ═══════════════════════════════════════════════════════════════════════════
   3. topPageGallery images — STAGGERED scroll fade-in-up
      JS adds .js-gallery-fade to each <img> inside .topPageGallery.
      Each image gets its own delay so they cascade in nicely.
   ═══════════════════════════════════════════════════════════════════════════ */

.js-gallery-fade {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js-gallery-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Individual stagger per gallery slot */
.topPageGallery .img01.js-gallery-fade { transition-delay: 0s;    }
.topPageGallery .img02.js-gallery-fade { transition-delay: 0.12s; }
.topPageGallery .img03.js-gallery-fade { transition-delay: 0.24s; }
.topPageGallery .img04.js-gallery-fade { transition-delay: 0.36s; }
.topPageGallery .img05.js-gallery-fade { transition-delay: 0.48s; }


/* ═══════════════════════════════════════════════════════════════════════════
   4. siteFooter main section — slide-up entrance on scroll into view
      JS observes .js-footer-entrance and adds .is-visible once 10 % of
      the element enters the viewport.  Uses the same cubic-bezier as the
      footer CTA reveal for a consistent feel.
   ═══════════════════════════════════════════════════════════════════════════ */

.js-footer-entrance {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-footer-entrance.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. topPageNews__items / eventsPage__items — hover background highlight
      The items are <a> tags, so we target the anchor directly.
      A soft background wash + subtle upward nudge gives it life.
   ═══════════════════════════════════════════════════════════════════════════ */

.topPageNews__items,
.eventsPage__items {
  transition: background-color 0.3s ease, transform 0.3s ease,
              box-shadow 0.3s ease;
}

.topPageNews__items:hover,
.eventsPage__items:hover {
  background-color: #F5EAE9;
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(75, 35, 45, 0.08);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — respect reduced-motion preference for all animations above
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .js-fade-up,
  .js-gallery-fade,
  .js-footer-entrance {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-card-fade {
    transform: none;
    transition: none;
  }

  .topPageNews__items,
  .eventsPage__items {
    transition: background-color 0.15s ease;
  }

  .topPageNews__items:hover,
  .eventsPage__items:hover {
    transform: none;
    box-shadow: none;
  }
}