/**
 * Scroll Chapters — helper styles (HANDOVER §6.5, §7 motion).
 * Loaded only when at least one helper that needs it is switched on.
 *
 * Tokens: Tube Pink #FF4FA3 · Argon Cyan #54DFF0 · Uranium Lime #C8F25C
 * Night Ink #0A0D1C · Night Soot #1A1D2B · Night Hairline #2A2F45
 * Control Line #6B7090 · Rice Paper #F2EBDC · Paper Muted #A9A498
 * Ease: cubic-bezier(.16,1,.3,1) ("ease-tube").
 */

:root {
	--sc-ease: cubic-bezier(.16, 1, .3, 1);
	--sc-focus-ring: 0 0 0 2px #0A0D1C, 0 0 0 4px #54DFF0;
}

/* =====================================================================
   Helper 5 — Header hide on scroll
   ===================================================================== */

.klo-header {
	transition: transform 240ms var(--sc-ease);
}
.klo-header.is-hidden {
	transform: translateY(-120%);
}

@media (prefers-reduced-motion: reduce) {
	.klo-header { transition: none; }
	.klo-header.is-hidden { transform: none; }
}

/* =====================================================================
   Helper 1 — Filter motion, count badges, status line, skeleton
   ===================================================================== */

.sc-chip-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	margin-left: 8px;
	padding: 0 6px;
	border-radius: 999px;
	background: #C8F25C;
	color: #0A0D1C;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 0 12px rgba(200, 242, 92, .55);
}

.sc-filter-status {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 21px;
	color: #A9A498;
}

/* Leaving cards fade out over 150ms. */
.sc-filter-leaving .e-loop-item {
	opacity: 0;
	transition: opacity 150ms ease;
}

/* Arriving cards rise 12px over 320ms ease-tube, 40ms stagger (--sc-d). */
@keyframes sc-enter {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}
.e-loop-item.sc-enter {
	animation: sc-enter 320ms var(--sc-ease) both;
	animation-delay: var(--sc-d, 0ms);
}

/* Loading skeleton: 8 cards, shimmer sweep 1.4s linear loop. */
.sc-skeleton {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 24px;
}
@media (max-width: 1024px) {
	.sc-skeleton { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.sc-skeleton { grid-template-columns: repeat(2, 1fr); }
}
.sc-skeleton-card {
	aspect-ratio: 2 / 3;
	border-radius: 20px;
	background: linear-gradient(100deg, #1A1D2B 40%, #2A2F45 50%, #1A1D2B 60%);
	background-size: 200% 100%;
	animation: sc-shimmer 1.4s linear infinite;
}
@keyframes sc-shimmer {
	from { background-position: 180% 0; }
	to { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-filter-leaving .e-loop-item { transition: none; }
	.e-loop-item.sc-enter { animation: none; }
	.sc-skeleton-card { animation: none; background: #1A1D2B; }
}

/* =====================================================================
   Helper 2 — Form error summary
   ===================================================================== */

.sc-form-summary {
	border: 1px solid #FF4FA3;
	border-radius: 16px;
	background: #1A1D2B;
	color: #F2EBDC;
	padding: 20px 24px;
	margin-bottom: 24px;
	box-shadow: 0 0 12px rgba(255, 79, 163, .6);
}
.sc-form-summary:focus-visible {
	outline: none;
	box-shadow: var(--sc-focus-ring);
}
.sc-form-summary-title {
	margin: 0 0 12px;
	font-size: 19px;
	line-height: 28px;
}
.sc-form-summary ul {
	margin: 0;
	padding-left: 20px;
}
.sc-form-summary li {
	margin: 4px 0;
	font-size: 14px;
	line-height: 21px;
}
.sc-form-summary a {
	color: #54DFF0;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sc-form-summary a:hover { color: #C8F25C; }
.sc-form-summary a:focus-visible {
	outline: none;
	box-shadow: var(--sc-focus-ring);
}

/* =====================================================================
   Helper 3 — Grouped search: the all-empty state container
   (revealed by SC_Helpers::search_summary_footer via a body class)
   ===================================================================== */

.sc-search-empty { display: none; }
body.sc-search-all-empty .sc-search-empty { display: block; }

/* =====================================================================
   Helper 6 — Menu motion
   Links sit risen-ready only when JS is live (html.sc-menu-js, set by
   menu.js); the open popup (.sc-menu-open) settles them with stagger.
   ===================================================================== */

html.sc-menu-js .elementor-popup-modal .sc-rise {
	opacity: 0;
	transform: translateY(24px);
}
html.sc-menu-js .elementor-popup-modal.sc-menu-open .sc-rise {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 500ms var(--sc-ease), transform 500ms var(--sc-ease);
	transition-delay: var(--sc-d, 0ms);
}

/* Reduced motion: swap the popup entrance for a 120ms fade. */
@media (prefers-reduced-motion: reduce) {
	html.sc-menu-js .elementor-popup-modal .sc-rise {
		opacity: 1;
		transform: none;
		transition: none;
	}
	@keyframes sc-menu-fade {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	.elementor-popup-modal .dialog-widget-content {
		animation: sc-menu-fade 120ms ease both;
	}
}

/* =====================================================================
   Helper 7 — Service tag boxes ([klo_tags])
   ===================================================================== */

.klo-tagbox {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 8px 16px;
	border: 1px solid #6B7090;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 16px;
}