/**
 * WP SOC Design System — Animations
 * ============================================================
 * A small, shared motion vocabulary. Every section should reach for
 * these utility classes and keyframes instead of writing new
 * animation rules from scratch. All durations/easings come from
 * tokens.css.
 *
 * Reveal pattern used throughout the theme:
 *   1. Element starts in a class like .wp-soc-fade-up
 *   2. JS (IntersectionObserver) adds .is-visible to a parent/self
 *   3. The animation plays once, respecting prefers-reduced-motion
 * ============================================================
 */

/* ------------------------------------------------------------ *
 * Keyframes
 * ------------------------------------------------------------ */

@keyframes wp-soc-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wp-soc-slide-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes wp-soc-slide-down {
	from { opacity: 0; transform: translateY(-20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes wp-soc-slide-left {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes wp-soc-slide-right {
	from { opacity: 0; transform: translateX(-24px); }
	to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes wp-soc-reveal-mask {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

@keyframes wp-soc-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--wp-soc-color-primary-rgb), 0.55); }
	70%  { box-shadow: 0 0 0 8px rgba(var(--wp-soc-color-primary-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--wp-soc-color-primary-rgb), 0); }
}

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

/* ------------------------------------------------------------ *
 * Entrance utilities
 * Element is hidden until an ancestor (or itself) carries
 * .is-visible — set by JS once the element enters the viewport.
 * ------------------------------------------------------------ */

.wp-soc-fade,
.wp-soc-fade-up,
.wp-soc-fade-down,
.wp-soc-slide-left,
.wp-soc-slide-right,
.wp-soc-scale-in,
.wp-soc-reveal {
	opacity: 0;
}

.wp-soc-fade-up      { transform: translateY(20px); }
.wp-soc-fade-down    { transform: translateY(-20px); }
.wp-soc-slide-left   { transform: translateX(24px); }
.wp-soc-slide-right  { transform: translateX(-24px); }
.wp-soc-scale-in     { transform: scale(0.94); }
.wp-soc-reveal       { clip-path: inset(0 100% 0 0); }

.is-visible > .wp-soc-fade,
.is-visible.wp-soc-fade {
	animation: wp-soc-fade-in var(--wp-soc-duration-slow) var(--wp-soc-ease-out) forwards;
}

.is-visible > .wp-soc-fade-up,
.is-visible.wp-soc-fade-up {
	animation: wp-soc-slide-up var(--wp-soc-duration-slow) var(--wp-soc-ease-out) forwards;
}

.is-visible > .wp-soc-fade-down,
.is-visible.wp-soc-fade-down {
	animation: wp-soc-slide-down var(--wp-soc-duration-slow) var(--wp-soc-ease-out) forwards;
}

.is-visible > .wp-soc-slide-left,
.is-visible.wp-soc-slide-left {
	animation: wp-soc-slide-left var(--wp-soc-duration-slow) var(--wp-soc-ease-out) forwards;
}

.is-visible > .wp-soc-slide-right,
.is-visible.wp-soc-slide-right {
	animation: wp-soc-slide-right var(--wp-soc-duration-slow) var(--wp-soc-ease-out) forwards;
}

.is-visible > .wp-soc-scale-in,
.is-visible.wp-soc-scale-in {
	animation: wp-soc-scale-in var(--wp-soc-duration-slow) var(--wp-soc-ease-emphasized) forwards;
}

.is-visible > .wp-soc-reveal,
.is-visible.wp-soc-reveal {
	animation: wp-soc-reveal-mask var(--wp-soc-duration-slower) var(--wp-soc-ease-emphasized) forwards;
}

/* Stagger helper: place on a group of children, each child reads
   --wp-soc-stagger-index (set inline by PHP/JS: style="--wp-soc-stagger-index: 2") */
[style*='--wp-soc-stagger-index'] {
	animation-delay: calc(var(--wp-soc-stagger-index, 0) * 80ms);
}

/* ------------------------------------------------------------ *
 * Hover utilities
 * ------------------------------------------------------------ */

.wp-soc-hover-lift {
	transition: transform var(--wp-soc-duration-base) var(--wp-soc-ease-out),
		box-shadow var(--wp-soc-duration-base) var(--wp-soc-ease-out);
}

.wp-soc-hover-lift:hover,
.wp-soc-hover-lift:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--wp-soc-shadow-lg);
}

.wp-soc-hover-glow {
	transition: box-shadow var(--wp-soc-duration-base) var(--wp-soc-ease-out),
		border-color var(--wp-soc-duration-base) var(--wp-soc-ease-out);
}

.wp-soc-hover-glow:hover,
.wp-soc-hover-glow:focus-visible {
	border-color: rgba(var(--wp-soc-color-primary-rgb), 0.4);
	box-shadow: var(--wp-soc-shadow-glow);
}

/* Combined lift + glow — the default premium card interaction */
.wp-soc-hover-premium {
	transition: transform var(--wp-soc-duration-base) var(--wp-soc-ease-out),
		box-shadow var(--wp-soc-duration-base) var(--wp-soc-ease-out),
		border-color var(--wp-soc-duration-base) var(--wp-soc-ease-out);
}

.wp-soc-hover-premium:hover,
.wp-soc-hover-premium:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(var(--wp-soc-color-primary-rgb), 0.4);
	box-shadow: var(--wp-soc-shadow-lg), var(--wp-soc-shadow-glow);
}

/* Ambient, continuous utilities */
.wp-soc-pulse {
	animation: wp-soc-pulse 2.4s ease-out infinite;
}

.wp-soc-spin {
	animation: wp-soc-spin 900ms linear infinite;
}

/* ------------------------------------------------------------ *
 * Accessibility: honor reduced-motion everywhere in the system
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.wp-soc-fade,
	.wp-soc-fade-up,
	.wp-soc-fade-down,
	.wp-soc-slide-left,
	.wp-soc-slide-right,
	.wp-soc-scale-in,
	.wp-soc-reveal {
		opacity: 1;
		transform: none;
		clip-path: none;
		animation: none;
	}

	.wp-soc-pulse,
	.wp-soc-spin {
		animation: none;
	}

	.wp-soc-hover-lift:hover,
	.wp-soc-hover-lift:focus-visible,
	.wp-soc-hover-premium:hover,
	.wp-soc-hover-premium:focus-visible {
		transform: none;
	}
}