@media (prefers-reduced-motion: no-preference) {
	.hero-section,
	.bos-hero,
	.modules-hero,
	.page-hero {
		position: relative;
		overflow: hidden;
	}

	.hero-section::before,
	.bos-hero::before,
	.modules-hero::before,
	.page-hero::before {
		animation: samayGridDrift 18s linear infinite;
		background:
			linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
			linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px);
		background-size: 42px 42px;
		content: "";
		inset: 0;
		opacity: .18;
		pointer-events: none;
		position: absolute;
	}

	.cardx,
	.feature-card,
	.module-card,
	.detail-card,
	.flow-card,
	.visual-card,
	.preview-card,
	.hero-panel,
	.theme-card,
	.feature-box {
		transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
	}

	.cardx:hover,
	.feature-card:hover,
	.module-card:hover,
	.detail-card:hover,
	.flow-card:hover,
	.visual-card:hover,
	.theme-card:hover,
	.feature-box:hover {
		border-color: rgba(13,110,253,.28);
		box-shadow: 0 18px 44px rgba(15,23,42,.12);
		transform: translateY(-6px);
	}

	.cardx i,
	.feature-card i,
	.module-card i,
	.detail-card i,
	.theme-card i,
	.feature-box i {
		transition: transform .28s ease;
	}

	.cardx:hover i,
	.feature-card:hover i,
	.module-card:hover i,
	.detail-card:hover i,
	.theme-card:hover i,
	.feature-box:hover i {
		transform: translateY(-2px) scale(1.08);
	}

	.attendance-preview,
	.hero-card,
	.hero-panel {
		animation: samayFloat 7s ease-in-out infinite;
	}

	.preview-chip,
	.plan-badge,
	.brand-pill,
	.badge-soft {
		animation: samayPulseSoft 2.8s ease-in-out infinite;
	}
}

.samay-motion-chip {
	align-items: center;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.24);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	gap: 8px;
	padding: 8px 12px;
}

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

@keyframes samayPulseSoft {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(13,110,253,.0);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(13,110,253,.08);
	}
}

@keyframes samayGridDrift {
	from {
		background-position: 0 0, 0 0;
	}
	to {
		background-position: 84px 42px, 42px 84px;
	}
}