/* =========================================================================
   YACHIGA PROFESSIONAL - ANIMATIONS
   One orchestrated hero entrance on load, a restrained scroll-reveal
   system elsewhere, and full respect for prefers-reduced-motion.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero entrance (orchestrated, staggered by the --d custom property set
   inline on each piece in patterns/hero.php)
   ----------------------------------------------------------------------- */
[data-animate="hero-item"] {
	opacity: 0;
	transform: translateY(22px);
	animation: yachiga-hero-in 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: calc(var(--d, 0) * 160ms + 120ms);
}
.yachiga-hero__content > * {
	opacity: 0;
	transform: translateY(14px);
	animation: yachiga-hero-in 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.yachiga-hero__content > *:nth-child(1) { animation-delay: 180ms; }
.yachiga-hero__content > *:nth-child(2) { animation-delay: 300ms; }
.yachiga-hero__content > *:nth-child(3) { animation-delay: 400ms; }
.yachiga-hero__content > *:nth-child(4) { animation-delay: 480ms; }
.yachiga-hero__content > *:nth-child(5) { animation-delay: 580ms; }

@keyframes yachiga-hero-in {
	to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
   Scroll reveal: a small, consistent fade-and-rise applied via
   IntersectionObserver in assets/js/animations.js. Elements start in
   their revealed state so content is never hidden if JS fails to load;
   JS adds .yachiga-observe first, then .is-visible on intersection.
   ----------------------------------------------------------------------- */
[data-animate="fade-up"].yachiga-observe,
[data-animate="stagger-child"].yachiga-observe {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 720ms cubic-bezier(0.16, 1, 0.3, 1), transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-up"].yachiga-observe.is-visible,
[data-animate="stagger-child"].yachiga-observe.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.yachiga-pillars .yachiga-pillar.yachiga-observe { transition-delay: calc(var(--i, 0) * 90ms); }
.yachiga-icon-grid__item.yachiga-observe { transition-delay: calc(var(--i, 0) * 70ms); }
.yachiga-process__step.yachiga-observe { transition-delay: calc(var(--i, 0) * 120ms); }

/* -------------------------------------------------------------------------
   Smooth, small hover motion (kept subtle and consistent; component
   files set the specific transform/colour, these just centralise timing)
   ----------------------------------------------------------------------- */
.yachiga-card, .yachiga-pillar, .wp-block-button__link, .yachiga-btn {
	will-change: transform;
}

/* Image zoom on hover (cards, related posts) already declared alongside
   each component in main.css; this file only adds the keyframes and
   reveal system shared across them. */

@keyframes yachiga-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.yachiga-lightbox:not([hidden]) { animation: yachiga-fade-in 220ms ease; }
.yachiga-mobile-nav.is-open { animation: yachiga-fade-in 1ms; }

/* -------------------------------------------------------------------------
   Reduced motion: disable every animation and transition above, and let
   scroll-reveal content simply be visible immediately.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	[data-animate="hero-item"],
	.yachiga-hero__content > *,
	[data-animate="fade-up"].yachiga-observe,
	[data-animate="stagger-child"].yachiga-observe {
		opacity: 1 !important;
		transform: none !important;
	}
	.yachiga-hero__scroll-cue span { animation: none; }
}