/**
 * WPminty Animation System — Frontend & Editor Stylesheet
 *
 * Provides @keyframes, base animation classes and state modifiers for the
 * WPminty animation engine. All class names use the `wpminty-animate-*`
 * prefix and CSS custom properties use the `--wpminty-anim-*` /
 * `--wpminty-*` prefixes to avoid collisions with third-party themes
 * and plugins.
 *
 * The JS frontend adds runtime state classes:
 *   .wpminty-animate-ready  — element measured, will-change armed
 *   .wpminty-animated       — animation triggered
 *   .wpminty-animation-done — animation finished, will-change released
 *   .wpminty-word           — per-word <span> for fadeInWords
 *   .wpminty-no-motion      — applied under prefers-reduced-motion:reduce
 */

/* ---------------------------------------------------------------------------
 * 1. Base class — CSS variable defaults
 * ------------------------------------------------------------------------- */
.wpminty-animate {
	--wpminty-anim-duration: 1s;
	--wpminty-anim-delay: 0s;
	--wpminty-anim-distance: 30px;
	--wpminty-anim-scale: 1.05;
}

/* Non-scroll (immediate) animations get compositor hints upfront. */
.wpminty-animate:not(.wpminty-animate-on-scroll) {
	will-change: transform, opacity;
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* ---------------------------------------------------------------------------
 * 2. @keyframes definitions
 * ------------------------------------------------------------------------- */
@keyframes wpmintyFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wpmintyFadeInUp {
	from { opacity: 0; transform: translateY(var(--wpminty-anim-distance)); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes wpmintyFadeInDown {
	from { opacity: 0; transform: translateY(calc(var(--wpminty-anim-distance) * -1)); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes wpmintyFadeInLeft {
	from { opacity: 0; transform: translateX(var(--wpminty-anim-distance)); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes wpmintyFadeInRight {
	from { opacity: 0; transform: translateX(calc(var(--wpminty-anim-distance) * -1)); }
	to   { opacity: 1; transform: translateX(0); }
}

/* slideUp / slideDown — pure transform, NO opacity change. */
@keyframes wpmintySlideUp {
	from { transform: translateY(var(--wpminty-anim-distance)); }
	to   { transform: translateY(0); }
}

@keyframes wpmintySlideDown {
	from { transform: translateY(calc(var(--wpminty-anim-distance) * -1)); }
	to   { transform: translateY(0); }
}

@keyframes wpmintyZoomIn {
	from { opacity: 0; transform: scale(calc(2 - var(--wpminty-anim-scale))); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes wpmintyZoomOut {
	from { opacity: 0; transform: scale(var(--wpminty-anim-scale)); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes wpmintyPulse {
	from { transform: scale3d(1, 1, 1); }
	50%  { transform: scale3d(var(--wpminty-anim-scale), var(--wpminty-anim-scale), var(--wpminty-anim-scale)); }
	to   { transform: scale3d(1, 1, 1); }
}

@keyframes wpmintyFadeInWords {
	from { opacity: 0; transform: translateY(0.25em); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
 * 3. Hover animations — transition based (no keyframes needed on parent)
 * ------------------------------------------------------------------------- */
.wpminty-animate-scaleOnHover {
	transform-origin: center center;
	transform: scale(1);
	transition: transform var(--wpminty-anim-duration, 1s) ease;
}

.wpminty-animate-scaleOnHover:hover {
	transform: scale(var(--wpminty-anim-scale, 1.05));
}

/* Zoom background image/video on hover — scoped to Cover block. */
.wp-block-cover.wpminty-animate-zoomBackgroundOnHover {
	overflow: hidden;
}

.wp-block-cover.wpminty-animate-zoomBackgroundOnHover .wp-block-cover__image-background,
.wp-block-cover.wpminty-animate-zoomBackgroundOnHover .wp-block-cover__video-background {
	transition: transform var(--wpminty-anim-duration, 1s) ease;
}

.wp-block-cover.wpminty-animate-zoomBackgroundOnHover:hover .wp-block-cover__image-background,
.wp-block-cover.wpminty-animate-zoomBackgroundOnHover:hover .wp-block-cover__video-background {
	transform: scale(var(--wpminty-anim-scale, 1.05));
}

/* ---------------------------------------------------------------------------
 * 4. Non-scroll (immediate) animation selectors
 *    Excludes on-scroll and hover animations.
 * ------------------------------------------------------------------------- */
.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover) {
	animation-fill-mode: both;
}

.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover).wpminty-animate-fadeIn {
	animation: wpmintyFadeIn var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}

.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover).wpminty-animate-fadeInUp {
	animation: wpmintyFadeInUp var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}

.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover).wpminty-animate-fadeInDown {
	animation: wpmintyFadeInDown var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}

.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover).wpminty-animate-fadeInLeft {
	animation: wpmintyFadeInLeft var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}

.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover).wpminty-animate-fadeInRight {
	animation: wpmintyFadeInRight var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}

.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover).wpminty-animate-slideUp {
	animation: wpmintySlideUp var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}

.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover).wpminty-animate-slideDown {
	animation: wpmintySlideDown var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}

.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover).wpminty-animate-zoomIn {
	animation: wpmintyZoomIn var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}

.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover).wpminty-animate-zoomOut {
	animation: wpmintyZoomOut var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}

.wpminty-animate:not(.wpminty-animate-on-scroll):not(.wpminty-animate-scaleOnHover):not(.wpminty-animate-zoomBackgroundOnHover).wpminty-animate-pulse {
	animation: wpmintyPulse var(--wpminty-anim-duration) ease-in-out var(--wpminty-anim-delay) both;
}

/* ---------------------------------------------------------------------------
 * 5. fadeInWords — per-word stagger animation
 *    The JS frontend splits text into .wpminty-word spans with
 *    --wpminty-word-index set per word.
 * ------------------------------------------------------------------------- */
.wpminty-animate-fadeInWords {
	--wpminty-word-delay: 0.2s;
}

.wpminty-animate-fadeInWords .wpminty-word {
	display: inline-block;
	opacity: 0;
	will-change: transform, opacity;
}

/* Non-scroll: words animate immediately. */
.wpminty-animate:not(.wpminty-animate-on-scroll).wpminty-animate-fadeInWords .wpminty-word {
	animation: wpmintyFadeInWords var(--wpminty-anim-duration) ease-out
		calc(var(--wpminty-anim-delay, 0s) + var(--wpminty-word-index, 0) * var(--wpminty-word-delay)) both;
}

/* Scroll: parent stays visible; words animate when .wpminty-animated is added. */
.wpminty-animate-on-scroll.wpminty-animate-fadeInWords {
	opacity: 1;
}

.wpminty-animate-on-scroll.wpminty-animate-fadeInWords.wpminty-animated .wpminty-word {
	animation: wpmintyFadeInWords var(--wpminty-anim-duration) ease-out
		calc(var(--wpminty-anim-delay, 0s) + var(--wpminty-word-index, 0) * var(--wpminty-word-delay)) both;
}

/* ---------------------------------------------------------------------------
 * 6. Scroll-based animation states
 * ------------------------------------------------------------------------- */

/* Initial state: hidden until JS triggers. */
.wpminty-animate-on-scroll {
	opacity: 0;
}

/* Pulse and slide animations don't use opacity in their keyframes,
   so keep them visible while waiting for the scroll trigger. */
.wpminty-animate-on-scroll.wpminty-animate-pulse,
.wpminty-animate-on-scroll.wpminty-animate-slideUp,
.wpminty-animate-on-scroll.wpminty-animate-slideDown {
	opacity: 1;
}

/* Ready: JS has measured the element, arm compositor hints. */
.wpminty-animate-on-scroll.wpminty-animate-ready {
	will-change: transform, opacity;
}

/* Animated: JS triggered the animation. */
.wpminty-animate-on-scroll.wpminty-animated {
	opacity: 1;
	transition: opacity 0.1s ease-out;
}

/* Done: release compositor hints to save resources. */
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animation-done {
	will-change: auto;
}

/* Per-type animation rules for scroll-triggered elements. */
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animate-fadeIn {
	animation: wpmintyFadeIn var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animate-fadeInUp {
	animation: wpmintyFadeInUp var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animate-fadeInDown {
	animation: wpmintyFadeInDown var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animate-fadeInLeft {
	animation: wpmintyFadeInLeft var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animate-fadeInRight {
	animation: wpmintyFadeInRight var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animate-slideUp {
	animation: wpmintySlideUp var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animate-slideDown {
	animation: wpmintySlideDown var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animate-zoomIn {
	animation: wpmintyZoomIn var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animate-zoomOut {
	animation: wpmintyZoomOut var(--wpminty-anim-duration) ease-out var(--wpminty-anim-delay) both;
}
.wpminty-animate-on-scroll.wpminty-animated.wpminty-animate-pulse {
	animation: wpmintyPulse var(--wpminty-anim-duration) ease-in-out var(--wpminty-anim-delay) both;
}

/* ---------------------------------------------------------------------------
 * 7. Sequential animation — children animate in sequence
 *    JS adds inline --wpminty-child-index per child; CSS computes the
 *    staggered delay. The parent's own animation is suppressed.
 * ------------------------------------------------------------------------- */
.wpminty-animate-sequentially.wpminty-animate {
	animation: none !important;
}

/* Keep parent visible while children animate. */
.wpminty-animate-sequentially.wpminty-animate-on-scroll:not(.wpminty-animated) {
	opacity: 1 !important;
	transform: none !important;
}

.wpminty-animate-sequentially:not(.wpminty-animate-on-scroll) {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: no-preference) {
	.wpminty-animate-sequentially > *:not(.wpminty-animate) {
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 8. Reduced motion — disable all animations
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wpminty-no-motion,
	.wpminty-no-motion * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}