/**
 * Voveo Animation System
 *
 * All animations are driven by CSS custom properties injected inline by
 * inc/animations.php. This means durations, delays, and easings are
 * configurable per-block from the editor with no additional CSS needed.
 *
 * Custom property defaults (overridden inline per block):
 *   --vo-anim-duration  transition/animation duration
 *   --vo-anim-delay     transition/animation delay
 *   --vo-anim-easing    transition easing function
 */

/* ── Base ──────────────────────────────────────────────────────────────── */

/* No shared duration default here — each animation sets its own sensible
   fallback inside var() so ambient and entrance don't clobber each other.
   The PHP render_block filter injects the correct value inline per block. */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.vo-anim,
	.vo-anim::before,
	.vo-anim::after {
		animation-duration:   0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:  0.01ms !important;
	}
}

/* ── Entrance animations (scroll-triggered via IntersectionObserver) ───── */
/* Pre-trigger state: elements are hidden/offset.                           */
/* .vo-anim--triggered is added by animations-frontend.js on intersection.  */

.vo-anim--fade-up,
.vo-anim--fade-down,
.vo-anim--fade-left,
.vo-anim--fade-right,
.vo-anim--fade-in,
.vo-anim--scale-in {
	transition:
		opacity   var(--vo-anim-duration, 0.5s) var(--vo-anim-easing, ease) var(--vo-anim-delay, 0s),
		transform var(--vo-anim-duration, 0.5s) var(--vo-anim-easing, ease) var(--vo-anim-delay, 0s);
}

.vo-anim--fade-up    { opacity: 0; transform: translateY(24px);  }
.vo-anim--fade-down  { opacity: 0; transform: translateY(-24px); }
.vo-anim--fade-left  { opacity: 0; transform: translateX(24px);  }
.vo-anim--fade-right { opacity: 0; transform: translateX(-24px); }
.vo-anim--fade-in    { opacity: 0; }
.vo-anim--scale-in   { opacity: 0; transform: scale(0.92);       }

.vo-anim--blur-to-focus {
	opacity:    0;
	filter:     blur(var(--vo-blur-start, 8px));
	will-change: filter;
}

@keyframes vo-blur-to-focus {
	from { filter: blur(var(--vo-blur-start, 8px)); opacity: 0; }
	to   { filter: blur(0);                         opacity: 1; }
}

.vo-anim--blur-to-focus.vo-anim--triggered {
	animation: vo-blur-to-focus var(--vo-anim-duration, 1s) ease forwards;
	animation-delay: var(--vo-anim-delay, 0s);
}

.vo-anim--fade-up.vo-anim--triggered,
.vo-anim--fade-down.vo-anim--triggered,
.vo-anim--fade-left.vo-anim--triggered,
.vo-anim--fade-right.vo-anim--triggered,
.vo-anim--fade-in.vo-anim--triggered,
.vo-anim--scale-in.vo-anim--triggered {
	opacity:   1;
	transform: none;
}

/* ── Ambient animations (always running) ───────────────────────────────── */

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

@keyframes vo-pulse {
	0%, 100% { opacity: 1;   }
	50%       { opacity: 0.5; }
}

@keyframes vo-wiggle {
	0%, 100% { transform: rotate(0deg);   }
	20%       { transform: rotate(-4deg);  }
	40%       { transform: rotate(4deg);   }
	60%       { transform: rotate(-2deg);  }
	80%       { transform: rotate(2deg);   }
}

.vo-anim--float {
	animation: vo-float var(--vo-anim-duration, 6s) ease-in-out infinite;
}

.vo-anim--pulse {
	animation: vo-pulse var(--vo-anim-duration, 4s) cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.vo-anim--wiggle {
	animation: vo-wiggle 0.6s ease-in-out var(--vo-anim-delay, 0s) 1;
}

/* ── Hover animations (no scroll trigger — pure :hover transitions) ─────── */

.vo-anim--hover-border {
	--vo-hover-color:    rgba(122, 136, 227, 0.5);
	--vo-hover-duration: 0.3s;
	border:             1px solid transparent;
	transition:         border-color var(--vo-hover-duration) ease,
	                    box-shadow   var(--vo-hover-duration) ease;
}

.vo-anim--hover-border:hover {
	border-color: var(--vo-hover-color);
	box-shadow:   0 0 0 1px var(--vo-hover-color);
}

.vo-anim--hover-lift {
	--vo-hover-distance: 4px;
	--vo-hover-duration: 0.3s;
	transition: transform  var(--vo-hover-duration) cubic-bezier(.34,1.56,.64,1),
	            box-shadow var(--vo-hover-duration) ease;
}

.vo-anim--hover-lift:hover {
	transform:  translateY(calc(var(--vo-hover-distance) * -1));
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.vo-anim--hover-scale {
	--vo-hover-scale:    1.05;
	--vo-hover-duration: 0.3s;
	transition: transform var(--vo-hover-duration) cubic-bezier(.34,1.56,.64,1);
}

.vo-anim--hover-scale:hover {
	transform: scale(var(--vo-hover-scale));
}

/* Flare sweeps diagonally across the top of the element via ::before.
   Requires the block to not have overflow:hidden already set against it. */

@keyframes vo-flare {
	from { transform: translateX(-150%) skewX(-15deg); }
	to   { transform: translateX(350%)  skewX(-15deg); }
}

.vo-anim--hover-flare {
	--vo-flare-color:    rgba(255, 255, 255, 0.12);
	--vo-hover-duration: 0.6s;
	position: relative;
	overflow: hidden;
}

.vo-anim--hover-flare::before {
	content:          '';
	position:         absolute;
	top:              0;
	left:             0;
	width:            40%;
	height:           100%;
	background:       linear-gradient(
		180deg,
		var(--vo-flare-color) 0%,
		transparent 60%
	);
	transform:        translateX(-150%) skewX(-15deg);
	pointer-events:   none;
	z-index:          1;
}

.vo-anim--hover-flare:hover::before {
	animation: vo-flare var(--vo-hover-duration) ease forwards;
}

/* ── Glass Glow ─────────────────────────────────────────────────────────── */

.vo-anim--hover-glass {
	--vo-glass-blur:     12px;
	--vo-hover-color:    rgba(0, 102, 204, 0.07);
	--vo-hover-spread:   30px;
	--vo-hover-duration: 0.3s;
	backdrop-filter:     blur(var(--vo-glass-blur));
	-webkit-backdrop-filter: blur(var(--vo-glass-blur));
	transition:          box-shadow var(--vo-hover-duration) ease;
}

.vo-anim--hover-glass:hover {
	box-shadow: 0 0 var(--vo-hover-spread) var(--vo-hover-color);
}

.vo-anim--hover-glow {
	--vo-hover-color:    rgba(122, 136, 227, 0.4);
	--vo-hover-spread:   16px;
	--vo-hover-duration: 0.3s;
	transition: box-shadow var(--vo-hover-duration) ease;
}

.vo-anim--hover-glow:hover {
	box-shadow: 0 0 var(--vo-hover-spread) var(--vo-hover-color);
}

/* ── Spotlight (mouse-follow radial gradient) ───────────────────────────── */

.vo-spotlight-wrapper {
	--vo-spotlight-color: rgba(122, 136, 227, 0.3);
	--vo-spotlight-size:  70%;
	--vo-spotlight-blur:  20px;
	position: relative;
	overflow: hidden;
}

.vo-spotlight-overlay {
	position:       absolute;
	inset:          0;
	pointer-events: none;
	border-radius:  inherit;
	filter:         blur(var(--vo-spotlight-blur));
	background:     transparent;
	opacity:        0;
	transition:     opacity 0.3s ease;
	z-index:        1;
}

.vo-spotlight-wrapper:hover .vo-spotlight-overlay {
	opacity: 1;
}