/**
 * JMOTO Works — Animations Stylesheet
 * All motion lives here — main.css and responsive.css stay static.
 * Reveal-on-scroll classes (.jmoto-reveal, .jmoto-in-view) are added to
 * elements at runtime by animations.js via IntersectionObserver — no
 * locked template file needed a new class for this, since the observer
 * targets existing selectors directly.
 *
 * @package JMOTO_Works
 * @since   1.0.0
 */

/* ============================================================
   1. Keyframes
   ============================================================ */
@keyframes jmoto-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes jmoto-slide-up {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes jmoto-slide-left {
	from { opacity: 0; transform: translateX(28px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes jmoto-slide-right {
	from { opacity: 0; transform: translateX(-28px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes jmoto-scale-in {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes jmoto-scroll-cue {
	0% { transform: scaleY(0); transform-origin: top; }
	50% { transform: scaleY(1); transform-origin: top; }
	51% { transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes jmoto-ripple {
	from { transform: scale(0); opacity: 0.45; }
	to { transform: scale(2.2); opacity: 0; }
}

/* ============================================================
   2. Reveal on Scroll
   Base hidden state applied directly to the real component classes;
   animations.js adds .jmoto-in-view when each element enters the
   viewport via IntersectionObserver.
   ============================================================ */
.jmoto-section-head,
.jmoto-category-card,
.jmoto-product-card,
.jmoto-service-card,
.jmoto-post-card,
.jmoto-brand-box,
.jmoto-reviews__inner,
.jmoto-need-a-part__inner > *,
.jmoto-contact__details,
.jmoto-contact__map {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.9, 0.32, 1), transform 0.7s cubic-bezier(0.22, 0.9, 0.32, 1);
}

.jmoto-section-head.jmoto-in-view,
.jmoto-category-card.jmoto-in-view,
.jmoto-product-card.jmoto-in-view,
.jmoto-service-card.jmoto-in-view,
.jmoto-post-card.jmoto-in-view,
.jmoto-brand-box.jmoto-in-view,
.jmoto-reviews__inner.jmoto-in-view,
.jmoto-need-a-part__inner > *.jmoto-in-view,
.jmoto-contact__details.jmoto-in-view,
.jmoto-contact__map.jmoto-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered delay for grid siblings — set inline by animations.js via --jmoto-reveal-delay */
.jmoto-category-card,
.jmoto-product-card,
.jmoto-service-card,
.jmoto-post-card,
.jmoto-brand-box {
	transition-delay: var(--jmoto-reveal-delay, 0s);
}

/* Hero content always visible immediately — it is the first thing a
   visitor sees and must never wait on a scroll trigger. */
.jmoto-hero__content,
.jmoto-hero__location,
.jmoto-hero__title,
.jmoto-hero__subtitle,
.jmoto-hero__description,
.jmoto-hero__actions {
	opacity: 1;
	transform: none;
	animation: jmoto-slide-up 0.8s cubic-bezier(0.22, 0.9, 0.32, 1) both;
}

.jmoto-hero__location { animation-delay: 0.05s; }
.jmoto-hero__title { animation-delay: 0.1s; }
.jmoto-hero__subtitle { animation-delay: 0.2s; }
.jmoto-hero__description { animation-delay: 0.3s; }
.jmoto-hero__actions { animation-delay: 0.4s; }

/* ============================================================
   3. Card / Interactive Hover Polish
   ============================================================ */
.jmoto-category-card:hover {
	transform: translateY(-6px);
	border-color: var(--jmoto-color-accent);
	box-shadow: var(--jmoto-shadow-md);
}

.jmoto-category-card:hover .jmoto-category-card__icon {
	background: var(--jmoto-color-accent);
	color: var(--jmoto-color-white);
}

.jmoto-category-card:hover .jmoto-category-card__cta svg {
	transform: translateX(4px);
}

.jmoto-product-card:hover,
.jmoto-post-card:hover,
.jmoto-service-card:hover {
	transform: translateY(-6px);
	border-color: rgba(215, 25, 32, 0.5);
	box-shadow: var(--jmoto-shadow-md);
}

.jmoto-product-card:hover .jmoto-product-card__media img {
	transform: scale(1.06);
}

.jmoto-brand-box:hover {
	color: var(--jmoto-color-white);
	border-color: var(--jmoto-color-accent);
	transform: translateY(-3px);
}

/* Button hover — three variants, driven by the jmoto-btn-hover-* body class */
body.jmoto-btn-hover-lift .jmoto-btn:hover {
	transform: translateY(-2px);
}

body.jmoto-btn-hover-lift .jmoto-btn--primary:hover {
	box-shadow: 0 14px 30px -8px rgba(215, 25, 32, 0.7);
}

body.jmoto-btn-hover-fade .jmoto-btn:hover {
	opacity: 0.85;
}

body.jmoto-btn-hover-none .jmoto-btn:hover {
	/* Intentionally no transform/shadow change. */
	opacity: 1;
}

.jmoto-btn--outline:hover {
	border-color: var(--jmoto-color-white);
}

/* Button ripple */
.jmoto-btn {
	position: relative;
	overflow: hidden;
}

.jmoto-btn__ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	pointer-events: none;
	animation: jmoto-ripple 0.6s ease-out;
}

/* ============================================================
   4. Header / Navigation Motion
   ============================================================ */
.jmoto-hero__scroll-cue span {
	position: relative;
	overflow: hidden;
}

.jmoto-hero__scroll-cue span::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--jmoto-color-white);
	animation: jmoto-scroll-cue 2.2s ease-in-out infinite;
}

/* ============================================================
   5. Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.jmoto-section-head,
	.jmoto-category-card,
	.jmoto-product-card,
	.jmoto-service-card,
	.jmoto-post-card,
	.jmoto-brand-box,
	.jmoto-reviews__inner,
	.jmoto-need-a-part__inner > *,
	.jmoto-contact__details,
	.jmoto-contact__map,
	.jmoto-hero__content,
	.jmoto-hero__location,
	.jmoto-hero__title,
	.jmoto-hero__subtitle,
	.jmoto-hero__description,
	.jmoto-hero__actions {
		opacity: 1 !important;
		transform: none !important;
	}

	.jmoto-category-card:hover,
	.jmoto-product-card:hover,
	.jmoto-post-card:hover,
	.jmoto-service-card:hover,
	.jmoto-brand-box:hover,
	body.jmoto-btn-hover-lift .jmoto-btn:hover {
		transform: none !important;
	}
}