/**
 * Case Studies — Shared Utilities & Animations
 *
 * Reusable layout/utility classes (containers, sections, badges, buttons,
 * cards, animations) shared across the single, archive and widget styles.
 *
 * @package Case_Studies_Portfolio
 */

/* ═══════════════════════════════════════════
   Modern Animations (keyframes)
   ═══════════════════════════════════════════ */

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

@keyframes csp-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes csp-fade-in-down {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@keyframes csp-slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes csp-slide-in-right {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes csp-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

@keyframes csp-pulse-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
	50%      { box-shadow: 0 0 0 12px rgba(14, 165, 233, 0); }
}

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

@keyframes csp-gradient-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes csp-spin-slow {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes csp-bounce-in {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { transform: scale(1.05); }
	70%  { transform: scale(0.9); }
	100% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════
   Animation Classes
   ═══════════════════════════════════════════ */

.csp-animate-fade-in       { animation: csp-fade-in 0.6s ease-out both; }
.csp-animate-fade-in-up    { animation: csp-fade-in-up 0.6s ease-out both; }
.csp-animate-fade-in-down  { animation: csp-fade-in-down 0.5s ease-out both; }
.csp-animate-scale-in      { animation: csp-scale-in 0.4s ease-out both; }
.csp-animate-slide-left    { animation: csp-slide-in-left 0.6s ease-out both; }
.csp-animate-slide-right   { animation: csp-slide-in-right 0.6s ease-out both; }
.csp-animate-bounce-in     { animation: csp-bounce-in 0.8s ease-out both; }
.csp-animate-float         { animation: csp-float 3s ease-in-out infinite; }
.csp-animate-pulse-glow    { animation: csp-pulse-glow 2s ease-in-out infinite; }

/* Stagger delays */
.csp-delay-100 { animation-delay: 0.1s; }
.csp-delay-200 { animation-delay: 0.2s; }
.csp-delay-300 { animation-delay: 0.3s; }
.csp-delay-400 { animation-delay: 0.4s; }
.csp-delay-500 { animation-delay: 0.5s; }
.csp-delay-600 { animation-delay: 0.6s; }

/* ═══════════════════════════════════════════
   Gradient Backgrounds
   ═══════════════════════════════════════════ */

.csp-gradient-primary {
	background: linear-gradient(135deg, var(--csp-primary) 0%, var(--csp-primary-dark) 50%, var(--csp-secondary-dark) 100%);
	background-size: 200% 200%;
	animation: csp-gradient-shift 8s ease infinite;
}

.csp-gradient-hero {
	background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 50%, #0a2540 100%);
	background-size: 200% 200%;
	animation: csp-gradient-shift 12s ease infinite;
}

.csp-gradient-accent {
	background: linear-gradient(135deg, var(--csp-secondary) 0%, var(--csp-secondary-dark) 100%);
}

.csp-gradient-warm {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.csp-gradient-cool {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* ═══════════════════════════════════════════
   Glass Morphism
   ═══════════════════════════════════════════ */

.csp-glass {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.csp-glass-dark {
	background: rgba(10, 37, 64, 0.6);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════
   Modern Shadows
   ═══════════════════════════════════════════ */

.csp-shadow-modern {
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.08),
		0 4px 12px rgba(0, 0, 0, 0.04);
}

.csp-shadow-lifted {
	box-shadow:
		0 4px 6px rgba(0, 0, 0, 0.05),
		0 10px 24px rgba(0, 0, 0, 0.08);
}

.csp-shadow-floating {
	box-shadow:
		0 8px 16px rgba(0, 0, 0, 0.06),
		0 20px 48px rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════
   Hover Effects
   ═══════════════════════════════════════════ */

.csp-hover-lift {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.csp-hover-lift:hover {
	transform: translateY(-6px);
	box-shadow:
		0 12px 24px rgba(0, 0, 0, 0.08),
		0 24px 48px rgba(0, 0, 0, 0.12);
}

.csp-hover-glow:hover {
	box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
}

.csp-hover-scale {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.csp-hover-scale:hover {
	transform: scale(1.03);
}

.csp-hover-rotate {
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.csp-hover-rotate:hover {
	transform: rotate(2deg) scale(1.02);
}

.csp-hover-border-glow {
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.csp-hover-border-glow:hover {
	border-color: var(--csp-primary);
	box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* ═══════════════════════════════════════════
   Button Styles
   ═══════════════════════════════════════════ */

.csp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	font-size: var(--csp-font-size-md);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--csp-radius-sm);
	border: none;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.csp-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.6s ease, height 0.6s ease;
}

.csp-btn:hover::before {
	width: 300px;
	height: 300px;
}

.csp-btn-primary {
	background-color: var(--csp-primary);
	color: var(--csp-text-white);
}

.csp-btn-primary:hover {
	background-color: var(--csp-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35);
}

.csp-btn-secondary {
	background-color: transparent;
	color: var(--csp-primary);
	border: 2px solid var(--csp-primary);
}

.csp-btn-secondary:hover {
	background-color: var(--csp-primary);
	color: var(--csp-text-white);
	transform: translateY(-2px);
}

.csp-btn-icon {
	position: relative;
	z-index: 1;
}

/* ═══════════════════════════════════════════
   Badge / Pill
   ═══════════════════════════════════════════ */

.csp-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	font-size: var(--csp-font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 9999px;
}

.csp-badge-primary {
	background-color: rgba(14, 165, 233, 0.15);
	color: var(--csp-primary);
}

.csp-badge-accent {
	background: linear-gradient(135deg, var(--csp-secondary) 0%, var(--csp-secondary-dark) 100%);
	color: var(--csp-text-white);
}

.csp-badge-glow {
	background-color: rgba(14, 165, 233, 0.9);
	color: var(--csp-text-white);
	box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
}

/* ═══════════════════════════════════════════
   Card Base
   ═══════════════════════════════════════════ */

.csp-card-modern {
	border-radius: var(--csp-radius-lg);
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.csp-card-modern:hover {
	transform: translateY(-8px);
	box-shadow:
		0 12px 24px rgba(0, 0, 0, 0.06),
		0 24px 48px rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════
   Text Utilities
   ═══════════════════════════════════════════ */

.csp-gradient-text {
	background: linear-gradient(135deg, var(--csp-primary) 0%, var(--csp-primary-dark) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.csp-gradient-text-accent {
	background: linear-gradient(135deg, var(--csp-secondary) 0%, var(--csp-secondary-dark) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.csp-text-balance {
	text-wrap: balance;
}

/* ═══════════════════════════════════════════
   Scroll Reveal (JS-triggered)
   ═══════════════════════════════════════════ */

/* Visible by default so content never disappears if the reveal script
   doesn't run (JS error, jQuery conflict, etc.). The JS-driven .js-reveal
   variant below opts into the hide/animate behaviour only once JS confirms
   it is running. */
.csp-reveal {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

html.csp-js .csp-reveal {
	opacity: 0;
	transform: translateY(30px);
}

html.csp-js .csp-reveal.csp-revealed {
	opacity: 1;
	transform: translateY(0);
}

.csp-reveal-delay-1 { transition-delay: 0.1s; }
.csp-reveal-delay-2 { transition-delay: 0.2s; }
.csp-reveal-delay-3 { transition-delay: 0.3s; }
.csp-reveal-delay-4 { transition-delay: 0.4s; }

/* ═══════════════════════════════════════════
   Responsive Utilities
   ═══════════════════════════════════════════ */

@media (max-width: 640px) {
	.csp-hidden-sm { display: none !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
	.csp-hidden-md { display: none !important; }
}

@media (min-width: 1025px) {
	.csp-hidden-lg { display: none !important; }
}

/* ═══════════════════════════════════════════
   Loading Skeleton
   ═══════════════════════════════════════════ */

.csp-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: csp-shimmer 1.5s ease-in-out infinite;
	border-radius: var(--csp-radius-sm);
}

/* ═══════════════════════════════════════════
   Icon Utilities
   ═══════════════════════════════════════════ */

.csp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.csp-icon-spin {
	animation: csp-spin-slow 2s linear infinite;
}

.csp-icon-pulse {
	animation: csp-float 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════
   Divider / Separator
   ═══════════════════════════════════════════ */

.csp-divider {
	height: 1px;
	background: linear-gradient(to right, transparent, var(--csp-border), transparent);
	margin: var(--csp-space-xxl) 0;
}

.csp-divider-gradient {
	height: 3px;
	background: linear-gradient(90deg, var(--csp-primary), var(--csp-secondary), var(--csp-primary));
	background-size: 200% 100%;
	animation: csp-gradient-shift 4s ease infinite;
	border: none;
	border-radius: 2px;
	margin: var(--csp-space-xxl) 0;
}

/* ═══════════════════════════════════════════
   Container Utilities
   ═══════════════════════════════════════════ */

.csp-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--csp-space-lg);
}

.csp-section {
	padding: var(--csp-space-xxxl) 0;
}

.csp-section-sm {
	padding: var(--csp-space-xxl) 0;
}