
/* =============================================
   Elegant Fade-In & Transition System
   For Twenty Twenty-Five / FSE themes
   ============================================= */

/* --- Site header: no scroll-in styles (mobile nav, overlays, template parts) --- */
header .wp-block-image img,
header .wp-block-cover,
header .wp-block-media-text__media img,
header .wp-block-post-featured-image img,
header .wp-block-gallery .wp-block-image img,
header .wp-block-heading h1,
header .wp-block-heading h2,
header .wp-block-heading h3,
header .wp-block-heading h4,
header .wp-block-heading h5,
header .wp-block-heading h6,
header h1,
header h2,
header h3,
header h4,
header h5,
header h6,
header .wp-block-paragraph,
header .wp-block-list,
header .wp-block-quote,
header .wp-block-pullquote,
header .wp-block-verse,
header .wp-block-preformatted,
header .wp-block-column,
header .wp-block-group:not(.is-layout-constrained) {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

header a .wp-block-image img,
header .wp-block-gallery a img {
  transition: none;
}

header a:hover .wp-block-image img,
header .wp-block-gallery a:hover img {
  scale: 1;
}

/* --- Fade-in on scroll via Intersection Observer --- */
/* We'll use a class toggled by a small JS snippet */

.wp-block-image img,
.wp-block-cover,
.wp-block-media-text__media img,
.wp-block-post-featured-image img,
.wp-block-gallery .wp-block-image img {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
  will-change: opacity, transform;
}

.wp-block-image img.is-visible,
.wp-block-cover.is-visible,
.wp-block-media-text__media img.is-visible,
.wp-block-post-featured-image img.is-visible,
.wp-block-gallery .wp-block-image img.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger gallery images */
.wp-block-gallery .wp-block-image:nth-child(2) img { transition-delay: 0.1s; }
.wp-block-gallery .wp-block-image:nth-child(3) img { transition-delay: 0.2s; }
.wp-block-gallery .wp-block-image:nth-child(4) img { transition-delay: 0.3s; }
.wp-block-gallery .wp-block-image:nth-child(5) img { transition-delay: 0.4s; }
.wp-block-gallery .wp-block-image:nth-child(6) img { transition-delay: 0.5s; }

/* --- Hover refinement on linked images --- */
a .wp-block-image img,
.wp-block-gallery a img {
  transition:
    opacity 0.65s ease,
    transform 0.65s ease,
    scale 0.35s ease;
}

a:hover .wp-block-image img,
.wp-block-gallery a:hover img {
  scale: 1.03;
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .wp-block-image img,
  .wp-block-cover,
  .wp-block-media-text__media img,
  .wp-block-post-featured-image img,
  .wp-block-gallery .wp-block-image img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =============================================
   Text & Heading Fade-In Extensions
   ============================================= */

/* --- Headings --- */
.wp-block-heading h1,
.wp-block-heading h2,
.wp-block-heading h3,
.wp-block-heading h4,
.wp-block-heading h5,
.wp-block-heading h6,
h1, h2, h3, h4, h5, h6 {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
  will-change: opacity, transform;
}

/* --- Paragraph / text blocks --- */
.wp-block-paragraph,
.wp-block-list,
.wp-block-quote,
.wp-block-pullquote,
.wp-block-verse,
.wp-block-preformatted {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
  will-change: opacity, transform;
}

/* --- Group / column blocks (treat as a unit) --- */
.wp-block-column,
.wp-block-group:not(.is-layout-constrained) {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* --- Visible state (applied by JS) --- */
.wp-block-heading h1.is-visible,
.wp-block-heading h2.is-visible,
.wp-block-heading h3.is-visible,
.wp-block-heading h4.is-visible,
.wp-block-heading h5.is-visible,
.wp-block-heading h6.is-visible,
h1.is-visible, h2.is-visible, h3.is-visible,
h4.is-visible, h5.is-visible, h6.is-visible,
.wp-block-paragraph.is-visible,
.wp-block-list.is-visible,
.wp-block-quote.is-visible,
.wp-block-pullquote.is-visible,
.wp-block-verse.is-visible,
.wp-block-preformatted.is-visible,
.wp-block-column.is-visible,
.wp-block-group.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Stagger headings followed by text within the same section --- */
.wp-block-heading + .wp-block-paragraph { transition-delay: 0.1s; }
.wp-block-heading + .wp-block-list      { transition-delay: 0.1s; }
.wp-block-heading + .wp-block-buttons   { transition-delay: 0.15s; }

/* --- Stagger columns --- */
.wp-block-columns .wp-block-column:nth-child(2) { transition-delay: 0.12s; }
.wp-block-columns .wp-block-column:nth-child(3) { transition-delay: 0.24s; }
.wp-block-columns .wp-block-column:nth-child(4) { transition-delay: 0.36s; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .wp-block-heading h1,
  .wp-block-heading h2,
  .wp-block-heading h3,
  .wp-block-heading h4,
  .wp-block-heading h5,
  .wp-block-heading h6,
  h1, h2, h3, h4, h5, h6,
  .wp-block-paragraph,
  .wp-block-list,
  .wp-block-quote,
  .wp-block-pullquote,
  .wp-block-verse,
  .wp-block-preformatted,
  .wp-block-column,
  .wp-block-group {
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* --- End Elegant Fade-In & Transition System --- */