/*    51. HOMEPAGE v2.3.1 — ALIVE: looping motion for other sections
   ------------------------------------------- */

/* --- Section label shimmer (applies to all sections) --- */
.section-label {
	background: linear-gradient(90deg, var(--color-accent) 0%, #ffe066 50%, var(--color-accent) 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: label-shimmer 5s linear infinite;
}

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

/* --- Shared ambient section orbs (drift + scale) --- */
.services-section,
.prototype-preview-section,
.portal-cta-section,
.faq-section,
.wp-powered-section,
.wp-reasons-section {
	overflow: hidden;
}

.services-section::before,
.prototype-preview-section::before,
.portal-cta-section::before,
.faq-section::before,
.wp-powered-section::before,
.wp-reasons-section::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 210, 30, 0.12) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
	animation: orb-drift-1 12s ease-in-out infinite alternate;
}

.services-section::after,
.prototype-preview-section::after,
.wp-reasons-section::after {
	content: '';
	position: absolute;
	top: 40%;
	left: -140px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 91, 219, 0.1) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
	animation: orb-drift-1 15s ease-in-out infinite alternate-reverse;
}

.custom-plugin-section::after {
	content: '';
	position: absolute;
	bottom: -140px;
	left: -120px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 91, 219, 0.12) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
	animation: orb-drift-2 14s ease-in-out infinite alternate;
}

@keyframes orb-drift-1 {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(-40px, 40px) scale(1.15); }
}

@keyframes orb-drift-2 {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(50px, -30px) scale(1.2); }
}

/* --- WP Powered: floating icons + breathing card glow --- */
.wp-powered-icon {
	animation: icon-bob 4.5s ease-in-out infinite;
}

.wp-powered-card:nth-child(2n) .wp-powered-icon { animation-delay: 0.7s; }
.wp-powered-card:nth-child(3n) .wp-powered-icon { animation-delay: 1.4s; }
.wp-powered-card:nth-child(4n) .wp-powered-icon { animation-delay: 2.1s; }

.wp-powered-card {
	animation: card-breathe 5s ease-in-out infinite;
}

.wp-powered-card:nth-child(2n) { animation-delay: 0.8s; }
.wp-powered-card:nth-child(3n) { animation-delay: 1.6s; }
.wp-powered-card:nth-child(4n) { animation-delay: 2.4s; }

@keyframes card-breathe {
	0%, 100% { box-shadow: 0 0 0 rgba(255, 210, 30, 0); }
	50% { box-shadow: 0 0 22px rgba(255, 210, 30, 0.08); }
}

/* --- 5 Reasons: flowing accent bar + pulsing number --- */
.reason-card::before {
	background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-purple-light) 50%, var(--color-accent) 100%);
	background-size: 100% 300%;
	opacity: 0.55;
	animation: reason-bar-flow 6s ease-in-out infinite;
}

@keyframes reason-bar-flow {
	0% { background-position: 0 0; }
	100% { background-position: 0 100%; }
}

.reason-num {
	animation: reason-num-pulse 4s ease-in-out infinite;
}

@keyframes reason-num-pulse {
	0%, 100% { opacity: 0.3; transform: translateY(0); }
	50% { opacity: 0.7; transform: translateY(-3px); }
}

/* --- Custom Plugin: code typing loop + blinking caret --- */
.plugin-code-line {
	opacity: 0.35;
	animation: code-line-in 8s ease-in-out infinite;
}

.plugin-code-line:nth-child(1) { animation-delay: 0s; }
.plugin-code-line:nth-child(2) { animation-delay: 0.45s; }
.plugin-code-line:nth-child(3) { animation-delay: 0.9s; }
.plugin-code-line:nth-child(4) { animation-delay: 1.35s; }
.plugin-code-line:nth-child(5) { animation-delay: 1.8s; }
.plugin-code-line:nth-child(6) { animation-delay: 2.25s; }
.plugin-code-line:nth-child(7) { animation-delay: 2.7s; }
.plugin-code-line:nth-child(8) { animation-delay: 3.15s; }
.plugin-code-line:nth-child(9) { animation-delay: 3.6s; }
.plugin-code-line:nth-child(10) { animation-delay: 4.05s; }

@keyframes code-line-in {
	0%, 4% { opacity: 0; transform: translateX(-10px); }
	9%, 74% { opacity: 1; transform: translateX(0); }
	90%, 100% { opacity: 0.35; transform: translateX(0); }
}

.plugin-code-body::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 13px;
	margin-top: 5px;
	background: var(--color-accent);
	border-radius: 2px;
	animation: code-caret 1s steps(1) infinite;
}

@keyframes code-caret {
	0%, 45% { opacity: 1; }
	50%, 95% { opacity: 0; }
	100% { opacity: 1; }
}

.plugin-code-card {
	animation: card-glow-breathe 4.5s ease-in-out infinite;
}

@keyframes card-glow-breathe {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 30, 0); }
	50% { box-shadow: 0 0 26px 0 rgba(255, 210, 30, 0.16); }
}

.plugin-benefit-icon {
	animation: icon-bob 4s ease-in-out infinite;
}

.plugin-benefit:nth-child(2) .plugin-benefit-icon { animation-delay: 0.8s; }
.plugin-benefit:nth-child(3) .plugin-benefit-icon { animation-delay: 1.6s; }

/* --- Services: floating icons + always-on flowing accent line --- */
.service-icon svg {
	animation: icon-bob 4s ease-in-out infinite;
}

.service-card:nth-child(2n) .service-icon svg { animation-delay: 0.7s; }
.service-card:nth-child(3n) .service-icon svg { animation-delay: 1.4s; }

.service-card::before {
	opacity: 0.12;
	background: linear-gradient(90deg, var(--color-accent), var(--color-purple-light), var(--color-accent));
	background-size: 200% 100%;
	animation: card-accent-flow 5s linear infinite;
}

/* --- Prototype: hover lift, sliding overlay, floating icon --- */
.prototype-card {
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.prototype-card:hover {
	transform: translateY(-8px);
	border-color: color-mix(in srgb, var(--demo-color, var(--color-accent)) 45%, transparent);
	box-shadow: 0 24px 60px color-mix(in srgb, var(--demo-color, var(--color-accent)) 20%, transparent);
}

.prototype-overlay {
	transform: translateY(100%);
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.prototype-card:hover .prototype-overlay {
	transform: translateY(0);
	opacity: 1;
}

.placeholder-icon {
	animation: icon-bob 4.5s ease-in-out infinite;
}

.prototype-card:nth-child(2n) .placeholder-icon { animation-delay: 0.8s; }
.prototype-card:nth-child(3n) .placeholder-icon { animation-delay: 1.6s; }

/* --- Client Portal CTA: floating stage, live progress, notification chips --- */
.portal-cta-stage {
	position: relative;
	animation: portal-card-float 6s ease-in-out infinite;
}

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

.portal-cta-card {
	animation: card-glow-breathe 5s ease-in-out infinite;
}

.portal-cta-card-fill {
	background: linear-gradient(90deg, var(--color-accent), var(--color-purple), var(--color-accent));
	background-size: 200% 100%;
	animation: progress-shimmer 2.8s linear infinite;
}

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

.portal-cta-card-dot:nth-child(3) {
	animation: online-pulse 1.8s ease-in-out infinite;
}

@keyframes online-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
	50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

.portal-cta-float {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 12px;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-primary);
	background: rgba(26, 10, 46, 0.85);
	border: 1px solid var(--color-glass-border);
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	white-space: nowrap;
	z-index: 2;
	animation: float-chip 6s ease-in-out infinite;
}

.portal-cta-float-1 { top: -24px; right: -34px; border-color: rgba(74, 222, 128, 0.35); }
.portal-cta-float-2 { bottom: 40px; left: -52px; animation-delay: 1.2s; }
.portal-cta-float-3 { bottom: -20px; right: 16px; animation-delay: 2.4s; }

.portal-cta-float-icon { font-size: 0.95rem; }
.portal-cta-float-1 .portal-cta-float-icon { color: #ffd21e; font-weight: 800; }

.portal-cta-float-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffd21e;
	box-shadow: 0 0 8px #ffd21e;
	animation: online-pulse 1.6s ease-in-out infinite;
}

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

/* --- FAQ: animated accent bar on hover/active --- */
.faq-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--color-accent), var(--color-purple-light));
	opacity: 0;
	transition: opacity var(--transition-base);
}

.faq-item:hover::before,
.faq-item.active::before {
	opacity: 1;
}

.faq-question:hover {
	color: var(--color-accent-light);
}

/* --- Responsive: keep the new motion tidy on small screens --- */
@media (max-width: 768px) {
	.portal-cta-float-1 { right: -8px; }
	.portal-cta-float-2 { left: -8px; }
}

@media (max-width: 480px) {
	.portal-cta-float {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.section-label,
	.services-section::before,
	.services-section::after,
	.prototype-preview-section::before,
	.prototype-preview-section::after,
	.portal-cta-section::before,
	.faq-section::before,
	.wp-powered-section::before,
	.wp-reasons-section::before,
	.wp-reasons-section::after,
	.custom-plugin-section::after,
	.wp-powered-icon,
	.wp-powered-card,
	.reason-card::before,
	.reason-num,
	.plugin-code-line,
	.plugin-code-body::after,
	.plugin-code-card,
	.plugin-benefit-icon,
	.service-icon svg,
	.service-card::before,
	.placeholder-icon,
	.portal-cta-stage,
	.portal-cta-card,
	.portal-cta-card-fill,
	.portal-cta-card-dot:nth-child(3),
	.portal-cta-float,
	.portal-cta-float-dot {
		animation: none !important;
	}
}