/*
 * Scroll-reveal: individual elements — headings, cards, chips, logos, CTAs —
 * fade/slide into view as they cross into the viewport, each on its own,
 * rather than an entire section fading in as one block.
 * assets/js/scroll-reveal.js toggles ".is-visible" via IntersectionObserver.
 *
 * These selectors key off classes the elements already carry for their own
 * styling (see patterns/homepage.php and assets/css/homepage.css) rather
 * than a dedicated marker class, so this works on the live front-page
 * content too: that page's blocks were inserted from the pattern and then
 * customized in the editor, so its className attributes still match the
 * pattern file even though its markup otherwise no longer does.
 * solea/hero-panels is deliberately excluded — it's the first thing painted
 * above the fold and should never be hidden pre-scroll.
 *
 * Repeated-item lists (chips, service rows, partner logos, contact rows,
 * post cards) stagger their children in one after another via the same
 * known, stable classNames/tags.
 *
 * Everything here lives behind prefers-reduced-motion: no-preference so that
 * reduced-motion users — and anyone whose JS hasn't run yet (no-JS, or the
 * script hasn't executed) — always see the fully visible, static layout:
 * nothing is opacity:0 outside this query.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	:is(
		.solea-reveal,
		.solea-quick-links__label,
		.solea-quick-links__cta,
		.solea-chip,
		.solea-news-section__heading,
		.solea-service-showcase__heading,
		.solea-service-showcase__subtext,
		.solea-cta-banner__heading,
		.solea-cta-banner .wp-block-buttons,
		.solea-faq-cta,
		.solea-home-contact-column > .wp-block-heading,
		.solea-home-contact-column > .wp-block-paragraph,
		.solea-partners-section__label,
		.solea-partners-section__description,
		.solea-section-heading,
		.solea-pricing-tabs__eyebrow,
		.solea-pricing-tabs__heading,
		.solea-pricing-tabs__subtext,
		.solea-pricing-tabs__tablist,
		.solea-faq-accordion__eyebrow,
		.solea-faq-accordion__heading,
		.solea-faq-accordion__subtext,
		.solea-faq-accordion__link
	) {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	}

	:is(
		.solea-reveal,
		.solea-quick-links__label,
		.solea-quick-links__cta,
		.solea-chip,
		.solea-news-section__heading,
		.solea-service-showcase__heading,
		.solea-service-showcase__subtext,
		.solea-cta-banner__heading,
		.solea-cta-banner .wp-block-buttons,
		.solea-faq-cta,
		.solea-home-contact-column > .wp-block-heading,
		.solea-home-contact-column > .wp-block-paragraph,
		.solea-partners-section__label,
		.solea-partners-section__description,
		.solea-section-heading,
		.solea-pricing-tabs__eyebrow,
		.solea-pricing-tabs__heading,
		.solea-pricing-tabs__subtext,
		.solea-pricing-tabs__tablist,
		.solea-faq-accordion__eyebrow,
		.solea-faq-accordion__heading,
		.solea-faq-accordion__subtext,
		.solea-faq-accordion__link
	).is-visible {
		opacity: 1;
		transform: none;
	}

	:is(
		.solea-reveal-group,
		.solea-service-showcase__list,
		.solea-partners-section__logos,
		.solea-contact-methods,
		.solea-post-list .wp-block-post-template,
		.solea-operator-intro,
		.solea-icon-grid,
		.solea-pricing-tabs__grid,
		.solea-faq-accordion__list,
		.solea-faq-category-list,
		.solea-faq-question-grid .wp-block-post-template,
		.solea-faq-related__list,
		.solea-itinerary-media-text .wp-block-media-text__content
	) > * {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: var(--solea-reveal-delay, 0s);
	}

	:is(
		.solea-reveal-group,
		.solea-service-showcase__list,
		.solea-partners-section__logos,
		.solea-contact-methods,
		.solea-post-list .wp-block-post-template,
		.solea-operator-intro,
		.solea-icon-grid,
		.solea-pricing-tabs__grid,
		.solea-faq-accordion__list,
		.solea-faq-category-list,
		.solea-faq-question-grid .wp-block-post-template,
		.solea-faq-related__list,
		.solea-itinerary-media-text .wp-block-media-text__content
	) > *.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Chips (solea/chip) sit as siblings in a plain flex row with no shared
	   wrapper class to key a group selector off — nth-of-type instead, since
	   every sibling there is the same <a class="solea-chip"> tag. */
	.solea-chip:nth-of-type(1) {
		transition-delay: 0s;
	}

	.solea-chip:nth-of-type(2) {
		transition-delay: 0.06s;
	}

	.solea-chip:nth-of-type(3) {
		transition-delay: 0.12s;
	}

	.solea-chip:nth-of-type(4) {
		transition-delay: 0.18s;
	}

	.solea-chip:nth-of-type(5) {
		transition-delay: 0.24s;
	}

	.solea-chip:nth-of-type(n + 6) {
		transition-delay: 0.3s;
	}

	/*
	 * Stagger repeated items in a group: each child's transition-delay steps
	 * up, capped at the 6th item so long lists (e.g. the FAQ/blog card grids)
	 * don't leave trailing items waiting a long time to appear.
	 */
	:is(
		.solea-reveal-group,
		.solea-service-showcase__list,
		.solea-partners-section__logos,
		.solea-contact-methods,
		.solea-post-list .wp-block-post-template,
		.solea-operator-intro,
		.solea-icon-grid,
		.solea-pricing-tabs__grid,
		.solea-faq-accordion__list,
		.solea-faq-category-list,
		.solea-faq-question-grid .wp-block-post-template,
		.solea-faq-related__list,
		.solea-itinerary-media-text .wp-block-media-text__content
	) > *:nth-child(1) {
		--solea-reveal-delay: 0s;
	}

	:is(
		.solea-reveal-group,
		.solea-service-showcase__list,
		.solea-partners-section__logos,
		.solea-contact-methods,
		.solea-post-list .wp-block-post-template,
		.solea-operator-intro,
		.solea-icon-grid,
		.solea-pricing-tabs__grid,
		.solea-faq-accordion__list,
		.solea-faq-category-list,
		.solea-faq-question-grid .wp-block-post-template,
		.solea-faq-related__list,
		.solea-itinerary-media-text .wp-block-media-text__content
	) > *:nth-child(2) {
		--solea-reveal-delay: 0.08s;
	}

	:is(
		.solea-reveal-group,
		.solea-service-showcase__list,
		.solea-partners-section__logos,
		.solea-contact-methods,
		.solea-post-list .wp-block-post-template,
		.solea-operator-intro,
		.solea-icon-grid,
		.solea-pricing-tabs__grid,
		.solea-faq-accordion__list,
		.solea-faq-category-list,
		.solea-faq-question-grid .wp-block-post-template,
		.solea-faq-related__list,
		.solea-itinerary-media-text .wp-block-media-text__content
	) > *:nth-child(3) {
		--solea-reveal-delay: 0.16s;
	}

	:is(
		.solea-reveal-group,
		.solea-service-showcase__list,
		.solea-partners-section__logos,
		.solea-contact-methods,
		.solea-post-list .wp-block-post-template,
		.solea-operator-intro,
		.solea-icon-grid,
		.solea-pricing-tabs__grid,
		.solea-faq-accordion__list,
		.solea-faq-category-list,
		.solea-faq-question-grid .wp-block-post-template,
		.solea-faq-related__list,
		.solea-itinerary-media-text .wp-block-media-text__content
	) > *:nth-child(4) {
		--solea-reveal-delay: 0.24s;
	}

	:is(
		.solea-reveal-group,
		.solea-service-showcase__list,
		.solea-partners-section__logos,
		.solea-contact-methods,
		.solea-post-list .wp-block-post-template,
		.solea-operator-intro,
		.solea-icon-grid,
		.solea-pricing-tabs__grid,
		.solea-faq-accordion__list,
		.solea-faq-category-list,
		.solea-faq-question-grid .wp-block-post-template,
		.solea-faq-related__list,
		.solea-itinerary-media-text .wp-block-media-text__content
	) > *:nth-child(5) {
		--solea-reveal-delay: 0.32s;
	}

	:is(
		.solea-reveal-group,
		.solea-service-showcase__list,
		.solea-partners-section__logos,
		.solea-contact-methods,
		.solea-post-list .wp-block-post-template,
		.solea-operator-intro,
		.solea-icon-grid,
		.solea-pricing-tabs__grid,
		.solea-faq-accordion__list,
		.solea-faq-category-list,
		.solea-faq-question-grid .wp-block-post-template,
		.solea-faq-related__list,
		.solea-itinerary-media-text .wp-block-media-text__content
	) > *:nth-child(n + 6) {
		--solea-reveal-delay: 0.4s;
	}
}