/**
 * Subtle entrance animations for section headers and hero/text-image imagery.
 *
 * Targets rely on the project-wide "__eyebrow" / "__title" / "__description"
 * class suffix convention shared by every Pinxel component, so new blocks
 * inherit the effect without extra wiring.
 */

.pinxel-anim-active [class^="pinxel-"][class*="__eyebrow"],
.pinxel-anim-active [class^="pinxel-"][class*="__title"],
.pinxel-anim-active [class^="pinxel-"][class*="__description"],
.pinxel-anim-active .pinxel-hero__image,
.pinxel-anim-active .pinxel-text-image__image {
	opacity: 0;
	transition: opacity 700ms cubic-bezier(0.16, 0.84, 0.44, 1), transform 700ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.pinxel-anim-active [class^="pinxel-"][class*="__title"] {
	transition-delay: 90ms;
}

.pinxel-anim-active [class^="pinxel-"][class*="__description"] {
	transition-delay: 180ms;
}

.pinxel-anim-style-rise [class^="pinxel-"][class*="__eyebrow"],
.pinxel-anim-style-rise [class^="pinxel-"][class*="__title"],
.pinxel-anim-style-rise [class^="pinxel-"][class*="__description"],
.pinxel-anim-style-rise .pinxel-hero__image,
.pinxel-anim-style-rise .pinxel-text-image__image {
	transform: translateY(22px);
}

.pinxel-anim-active [class^="pinxel-"][class*="__eyebrow"].is-in-view,
.pinxel-anim-active [class^="pinxel-"][class*="__title"].is-in-view,
.pinxel-anim-active [class^="pinxel-"][class*="__description"].is-in-view,
.pinxel-anim-active .pinxel-hero__image.is-in-view,
.pinxel-anim-active .pinxel-text-image__image.is-in-view {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.pinxel-anim-active [class^="pinxel-"][class*="__eyebrow"],
	.pinxel-anim-active [class^="pinxel-"][class*="__title"],
	.pinxel-anim-active [class^="pinxel-"][class*="__description"],
	.pinxel-anim-active .pinxel-hero__image,
	.pinxel-anim-active .pinxel-text-image__image {
		opacity: 1;
		transform: none;
		transition: none;
	}
}