/**
 * JasaPanda Theme Child — Animations Library
 *
 * Reusable CSS keyframes and scroll-reveal system.
 * Zero JavaScript dependency for the animation itself —
 * JS only adds `.jp-aos-animate` class when element enters viewport.
 *
 * Usage:
 *   <div data-jp-aos="fade-up">...</div>
 *   <div data-jp-aos="fade-left" data-jp-aos-delay="200">...</div>
 *   <div data-jp-aos="scale" data-jp-aos-duration="1000">...</div>
 *
 * @package JasaPanda_Theme_Child
 * @since   1.0.0
 */

/* ==========================================================================
   1. KEYFRAMES — the raw animations
   ========================================================================== */

/* --- Fade --- */
@keyframes jp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes jp-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* --- Fade + Direction --- */
@keyframes jp-fade-up {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes jp-fade-down {
	from { opacity: 0; transform: translateY(-40px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes jp-fade-left {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes jp-fade-right {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* --- Scale --- */
@keyframes jp-scale-in {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes jp-scale-up {
	from { opacity: 0; transform: scale(0.8) translateY(20px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes jp-zoom-in {
	from { opacity: 0; transform: scale(1.15); }
	to   { opacity: 1; transform: scale(1); }
}

/* --- Slide (no fade) --- */
@keyframes jp-slide-up {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@keyframes jp-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@keyframes jp-slide-left {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

@keyframes jp-slide-right {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

/* --- Rotate --- */
@keyframes jp-rotate-in {
	from { opacity: 0; transform: rotate(-8deg) scale(0.95); }
	to   { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes jp-spin {
	to { transform: rotate(360deg); }
}

@keyframes jp-spin-reverse {
	to { transform: rotate(-360deg); }
}

/* --- Pulse / Attention --- */
@keyframes jp-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

@keyframes jp-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

@keyframes jp-shake {
	0%, 100%       { transform: translateX(0); }
	20%, 60%       { transform: translateX(-6px); }
	40%, 80%       { transform: translateX(6px); }
}

@keyframes jp-heartbeat {
	0%, 100% { transform: scale(1); }
	10%      { transform: scale(1.12); }
	20%      { transform: scale(1); }
	30%      { transform: scale(1.1); }
	40%      { transform: scale(1); }
}

/* --- Loading dots --- */
@keyframes jp-loading-dot {
	0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
	40%           { transform: scale(1);  opacity: 1; }
}

/* --- Blur reveal --- */
@keyframes jp-blur-in {
	from { opacity: 0; filter: blur(12px); }
	to   { opacity: 1; filter: blur(0); }
}

/* --- Text shine / gradient sweep --- */
@keyframes jp-shine {
	from { background-position: 200% center; }
	to   { background-position: -200% center; }
}

/* --- Underline draw (for headlines) --- */
@keyframes jp-underline-draw {
	from { transform: scaleX(0); transform-origin: left center; }
	to   { transform: scaleX(1); transform-origin: left center; }
}

/* --- Skeleton shimmer --- */
@keyframes jp-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* --- Ripple (for click feedback) --- */
@keyframes jp-ripple {
	0%   { transform: scale(0); opacity: 0.5; }
	100% { transform: scale(4); opacity: 0; }
}


/* ==========================================================================
   2. SCROLL REVEAL — data-attribute based
   ========================================================================== */

/* --- Base: initial hidden state --- */
[data-jp-aos] {
	opacity: 0;
	transition-property: opacity, transform, filter;
	transition-duration: var(--jp-aos-duration, 700ms);
	transition-timing-function: var(--jp-ease-smooth);
	transition-delay: var(--jp-aos-delay, 0ms);
	will-change: opacity, transform;
}

/* --- Directional initial transforms --- */
[data-jp-aos="fade-up"]      { transform: translateY(40px); }
[data-jp-aos="fade-down"]    { transform: translateY(-40px); }
[data-jp-aos="fade-left"]    { transform: translateX(-40px); }
[data-jp-aos="fade-right"]   { transform: translateX(40px); }
[data-jp-aos="fade"]         { transform: none; }
[data-jp-aos="scale"]        { transform: scale(0.9); }
[data-jp-aos="scale-up"]     { transform: scale(0.85) translateY(20px); }
[data-jp-aos="zoom-in"]      { transform: scale(1.15); }
[data-jp-aos="zoom-out"]     { transform: scale(0.85); }
[data-jp-aos="rotate"]       { transform: rotate(-6deg) scale(0.95); }
[data-jp-aos="blur"]         { filter: blur(12px); }

/* --- Animated state (added by JS when in viewport) --- */
[data-jp-aos].jp-aos-animate {
	opacity: 1;
	transform: none;
	filter: none;
}

/* --- Animate ONCE — no reset when leaving viewport --- */
[data-jp-aos].jp-aos-animate.jp-aos-once {
	transition-duration: var(--jp-aos-duration, 700ms);
}


/* ==========================================================================
   3. UTILITY ANIMATION CLASSES
   Use directly without JS.
   ========================================================================== */

.jp-anim-fade-in    { animation: jp-fade-in    var(--jp-duration-slow) var(--jp-ease-out) both; }
.jp-anim-fade-up    { animation: jp-fade-up    var(--jp-duration-slow) var(--jp-ease-smooth) both; }
.jp-anim-fade-down  { animation: jp-fade-down  var(--jp-duration-slow) var(--jp-ease-smooth) both; }
.jp-anim-fade-left  { animation: jp-fade-left  var(--jp-duration-slow) var(--jp-ease-smooth) both; }
.jp-anim-fade-right { animation: jp-fade-right var(--jp-duration-slow) var(--jp-ease-smooth) both; }
.jp-anim-scale-in   { animation: jp-scale-in   var(--jp-duration-slow) var(--jp-ease-spring) both; }
.jp-anim-zoom-in    { animation: jp-zoom-in    var(--jp-duration-slow) var(--jp-ease-out) both; }
.jp-anim-blur-in    { animation: jp-blur-in    var(--jp-duration-slower) var(--jp-ease-out) both; }
.jp-anim-rotate-in  { animation: jp-rotate-in  var(--jp-duration-slow) var(--jp-ease-spring) both; }

.jp-anim-pulse      { animation: jp-pulse     2s var(--jp-ease-in-out) infinite; }
.jp-anim-bounce     { animation: jp-bounce    1.6s var(--jp-ease-in-out) infinite; }
.jp-anim-shake      { animation: jp-shake     0.6s var(--jp-ease-out); }
.jp-anim-heartbeat  { animation: jp-heartbeat 1.4s var(--jp-ease-in-out) infinite; }
.jp-anim-spin       { animation: jp-spin      1s linear infinite; }
.jp-anim-spin-slow  { animation: jp-spin      6s linear infinite; }


/* ==========================================================================
   4. STAGGER DELAYS
   For sequenced reveals (e.g. list of cards).
   Usage: <div data-jp-aos="fade-up" class="jp-aos-delay-200">
   ========================================================================== */

.jp-aos-delay-0    { --jp-aos-delay: 0ms; }
.jp-aos-delay-100  { --jp-aos-delay: 100ms; }
.jp-aos-delay-200  { --jp-aos-delay: 200ms; }
.jp-aos-delay-300  { --jp-aos-delay: 300ms; }
.jp-aos-delay-400  { --jp-aos-delay: 400ms; }
.jp-aos-delay-500  { --jp-aos-delay: 500ms; }
.jp-aos-delay-600  { --jp-aos-delay: 600ms; }
.jp-aos-delay-800  { --jp-aos-delay: 800ms; }
.jp-aos-delay-1000 { --jp-aos-delay: 1000ms; }

.jp-aos-duration-300  { --jp-aos-duration: 300ms; }
.jp-aos-duration-500  { --jp-aos-duration: 500ms; }
.jp-aos-duration-700  { --jp-aos-duration: 700ms; }
.jp-aos-duration-1000 { --jp-aos-duration: 1000ms; }
.jp-aos-duration-1500 { --jp-aos-duration: 1500ms; }


/* ==========================================================================
   5. LOADING SPINNER & DOTS
   ========================================================================== */

.jp-spinner {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid var(--jp-color-border);
	border-top-color: var(--jp-color-primary);
	border-radius: var(--jp-radius-full);
	animation: jp-spin 0.8s linear infinite;
}

.jp-spinner--sm { width: 20px; height: 20px; border-width: 2px; }
.jp-spinner--lg { width: 48px; height: 48px; border-width: 4px; }

/* --- Three dots loader --- */
.jp-dots {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.jp-dots__dot {
	width: 8px;
	height: 8px;
	background-color: var(--jp-color-primary);
	border-radius: var(--jp-radius-full);
	animation: jp-loading-dot 1.4s ease-in-out infinite both;
}

.jp-dots__dot:nth-child(1) { animation-delay: -0.32s; }
.jp-dots__dot:nth-child(2) { animation-delay: -0.16s; }
.jp-dots__dot:nth-child(3) { animation-delay: 0s; }


/* ==========================================================================
   6. TEXT EFFECTS
   ========================================================================== */

/* --- Gradient shine text --- */
.jp-text-shine {
	background: linear-gradient(
		90deg,
		var(--jp-color-text) 0%,
		var(--jp-color-text) 40%,
		var(--jp-color-primary) 50%,
		var(--jp-color-text) 60%,
		var(--jp-color-text) 100%
	);
	background-size: 200% auto;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	animation: jp-shine 3s linear infinite;
}

/* --- Outlined display text (for hero-style headings) --- */
.jp-text-outline {
	color: transparent;
	-webkit-text-stroke: 1.5px currentColor;
	text-stroke: 1.5px currentColor;
}

/* --- Underline draw on hover (for links / headlines) --- */
.jp-text-underline {
	position: relative;
	display: inline-block;
}

.jp-text-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--jp-duration-slow) var(--jp-ease-smooth);
}

.jp-text-underline:hover::after,
.jp-text-underline.is-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}


/* ==========================================================================
   7. IMAGE HOVER EFFECTS
   ========================================================================== */

.jp-img-zoom {
	overflow: hidden;
	border-radius: var(--jp-radius-lg);
}

.jp-img-zoom img {
	display: block;
	width: 100%;
	transition: transform var(--jp-duration-slower) var(--jp-ease-smooth);
}

.jp-img-zoom:hover img {
	transform: scale(1.08);
}

/* --- Reveal image (clip-path) --- */
.jp-img-reveal {
	position: relative;
	overflow: hidden;
}

.jp-img-reveal img {
	transform: scale(1.15);
	filter: blur(8px);
	transition: transform 1.2s var(--jp-ease-smooth),
	            filter 0.8s var(--jp-ease-out);
}

.jp-img-reveal.is-visible img {
	transform: scale(1);
	filter: blur(0);
}


/* ==========================================================================
   8. SKELETON PLACEHOLDER
   ========================================================================== */

.jp-skeleton {
	display: block;
	background: linear-gradient(
		90deg,
		var(--jp-color-gray-100) 0%,
		var(--jp-color-gray-200) 50%,
		var(--jp-color-gray-100) 100%
	);
	background-size: 200% 100%;
	animation: jp-shimmer 1.6s ease-in-out infinite;
	border-radius: var(--jp-radius-sm);
	height: 1em;
	width: 100%;
}


/* ==========================================================================
   9. RIPPLE EFFECT (click feedback)
   ========================================================================== */

.jp-ripple {
	position: relative;
	overflow: hidden;
}

.jp-ripple__wave {
	position: absolute;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.4);
	transform: scale(0);
	animation: jp-ripple 0.6s var(--jp-ease-out);
	pointer-events: none;
}


/* ==========================================================================
   10. PAGE ENTER ANIMATION
   Wraps the whole page for a subtle entry effect.
   ========================================================================== */

.jp-page-enter {
	animation: jp-fade-in var(--jp-duration-slow) var(--jp-ease-out) both;
}


/* ==========================================================================
   11. HEADER ENTER (on page load)
   ========================================================================== */

.jp-header {
	animation: jp-fade-down 600ms var(--jp-ease-smooth) both;
}


/* ==========================================================================
   12. REDUCED MOTION — Accessibility
   Disable all animations for users who prefer reduced motion.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	/* Universal accessibility override (standard pattern, matches WordPress
	   core & W3C guidance) -- !important is intentional here so this can't be
	   silently defeated by any of the many animation/transition rules across
	   the theme. This is the one place site-wide motion gets disabled. */
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	[data-jp-aos] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	.jp-marquee__track {
		animation: none !important;
	}

	.jp-anim-pulse,
	.jp-anim-bounce,
	.jp-anim-heartbeat,
	.jp-anim-spin,
	.jp-anim-spin-slow,
	.jp-spinner,
	.jp-dots__dot,
	.jp-text-shine,
	.jp-skeleton {
		animation: none !important;
	}
}