/*!
Theme Name: Vault Child
Theme URI: https://uicore.co
Description: Multi-Purpose Elementor WordPress Theme
Author: UiCore
Author URI: https://uicore.co
Template: vault
Version: 1.0.0
Text Domain: vault
*/
/* Add your custom style here */

/* ==========================================================================
   TEC Dynamic Product Catalog v4.0
   — v3.0 base kept intact; added staggered item entrance, render containment,
     will-change hygiene, and a low-end/touch duration guard.
   ========================================================================== */

:root {
	--tec-navy: #0C1A3D;
	--tec-red: #B81D1B;
	--tec-badge: #f2295b;
	--tec-ease: cubic-bezier(.4, 0, .2, 1);
	--tec-spring: cubic-bezier(.34, 1.56, .64, 1); /* left indicator "pop" */
	--tec-dur: .3s;
	--tec-stagger: 22ms; /* per-item entrance delay step */
}

/* Container: one-shot fade, opacity/transform only, plays once */
@keyframes tec-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Item entrance — separate from container fade so rows cascade in, not just pop together */
@keyframes tec-item-in {
	from { opacity: 0; transform: translate3d(-4px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.tec-w {
	margin: 0 0 8px;
	content-visibility: auto;              /* defers rendering until near viewport; safe no-op on Safari */
	contain-intrinsic-size: auto 400px;    /* reserves space to avoid layout shift */
	contain: layout style;                 /* isolates recalcs to this subtree only */
	animation: tec-fade-in .4s var(--tec-ease) both;
}

.tec-w h3 {
	font-size: 18px;
	color: var(--tec-navy);
	border-bottom: 2px solid var(--tec-red);
	padding-bottom: 6px;
	margin: 24px 0 12px;
}

.tec-cols {
	display: flex;
	position: relative;
}

/* Gap fallback for browsers without flexbox gap support (~8% global, mainly old Safari) */
.tec-cols > .tec-l:not(:last-child) { margin-right: 40px; }
@supports (gap: 1rem) {
	.tec-cols { gap: 40px; }
	.tec-cols > .tec-l:not(:last-child) { margin-right: 0; }
}

.tec-cols::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 10%;
	height: 80%;
	width: 1px;
	background: linear-gradient(to bottom, transparent 0%, #e0e0e0 25%, #e0e0e0 75%, transparent 100%);
	pointer-events: none;
}

.tec-l {
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1;
	min-width: 0;
}

.tec-i {
	padding: 0;
	opacity: 0;
	animation: tec-item-in .32s var(--tec-ease) both;
	animation-delay: calc(var(--tec-stagger) * 1);
}
/* Stagger cap at 14 rows/column — beyond that, delay differences are imperceptible
   and just delay LCP-adjacent content for no visual gain. */
.tec-l > .tec-i:nth-child(1) { animation-delay: calc(var(--tec-stagger) * 1); }
.tec-l > .tec-i:nth-child(2) { animation-delay: calc(var(--tec-stagger) * 2); }
.tec-l > .tec-i:nth-child(3) { animation-delay: calc(var(--tec-stagger) * 3); }
.tec-l > .tec-i:nth-child(4) { animation-delay: calc(var(--tec-stagger) * 4); }
.tec-l > .tec-i:nth-child(5) { animation-delay: calc(var(--tec-stagger) * 5); }
.tec-l > .tec-i:nth-child(6) { animation-delay: calc(var(--tec-stagger) * 6); }
.tec-l > .tec-i:nth-child(7) { animation-delay: calc(var(--tec-stagger) * 7); }
.tec-l > .tec-i:nth-child(8) { animation-delay: calc(var(--tec-stagger) * 8); }
.tec-l > .tec-i:nth-child(9) { animation-delay: calc(var(--tec-stagger) * 9); }
.tec-l > .tec-i:nth-child(10) { animation-delay: calc(var(--tec-stagger) * 10); }
.tec-l > .tec-i:nth-child(11) { animation-delay: calc(var(--tec-stagger) * 11); }
.tec-l > .tec-i:nth-child(12) { animation-delay: calc(var(--tec-stagger) * 12); }
.tec-l > .tec-i:nth-child(13) { animation-delay: calc(var(--tec-stagger) * 13); }
.tec-l > .tec-i:nth-child(n+14) { animation-delay: calc(var(--tec-stagger) * 14); }

.tec-a {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 34px;
	padding: 5px 8px 5px 16px;
	margin: 0 -8px;
	border-radius: 6px;
	color: var(--tec-navy);
	text-decoration: none;
	font-size: 15px;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	/* No permanent transform/will-change here — a persistent GPU layer per item
	   is wasted memory across 60+ products. Layers are promoted only on
	   interaction (see :hover below), which is enough for smooth animation. */
	transition: color var(--tec-dur) var(--tec-ease),
	            transform var(--tec-dur) var(--tec-ease) !important; /* !important guards against theme/Elementor overrides */
}

/* Left indicator bar — smooth "pop" via spring easing, the core visual cue for hover/focus */
.tec-a::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 20%;
	bottom: 20%;
	width: 3px;
	border-radius: 2px;
	background: var(--tec-red);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform .35s var(--tec-spring) !important;
}

/* Row highlight — a separate opacity-only layer, cheaper than animating background-color directly */
.tec-a::after {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	border-radius: 6px;
	background: rgba(184, 29, 27, .06);
	opacity: 0;
	transition: opacity var(--tec-dur) var(--tec-ease) !important;
}

.tec-a:hover,
.tec-a:focus-visible {
	color: var(--tec-red);
	transform: translate3d(6px, 0, 0) !important;
	will-change: transform; /* promoted only during interaction, released after */
}

.tec-a:hover::before,
.tec-a:focus-visible::before { transform: scaleY(1); }

.tec-a:hover::after,
.tec-a:focus-visible::after { opacity: 1; }

/* Release the interaction-only GPU layer once the pointer/focus leaves —
   without this, will-change: transform persists and every row keeps its
   own compositor layer indefinitely after first hover. */
.tec-a:not(:hover):not(:focus-visible) { will-change: auto; }

.tec-a:active {
	transform: translate3d(3px, 0, 0) !important;
	transition-duration: .1s !important;
}

.tec-a:focus-visible {
	outline: 2px solid var(--tec-red);
	outline-offset: 2px;
}

/* :focus-visible fallback for older browsers (Safari <15.4, Firefox <85) */
@supports not selector(:focus-visible) {
	.tec-a:focus {
		outline: 2px solid var(--tec-red);
		outline-offset: 2px;
		color: var(--tec-red);
	}
	.tec-a:focus::before { transform: scaleY(1); }
	.tec-a:focus::after { opacity: 1; }
	.tec-a:focus { will-change: transform; }
}

.tec-badge {
	display: inline-block;
	background: var(--tec-badge);
	color: #fff;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: bold;
	white-space: nowrap;
	margin-left: 8px;
	transform: translate3d(0, 0, 0); /* own compositor layer for the pulse, isolated from row hover transform */
	animation: tec-badge-pulse 2.6s var(--tec-ease) infinite;
}
@keyframes tec-badge-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(242, 41, 91, .35); }
	50%      { box-shadow: 0 0 0 3px rgba(242, 41, 91, 0); }
}

.tec-empty {
	color: #999;
	font-size: 13px;
	opacity: 0;
	animation: tec-fade-in .3s var(--tec-ease) forwards;
}

@media (max-width: 600px) {
	.tec-cols { flex-direction: column; gap: 0; }
	.tec-cols > .tec-l:not(:last-child) { margin-right: 0; }
	.tec-cols::before { display: none; }
}

/* Touch/low-end devices: no hover state ever fires, so skip the entrance
   cascade cost and settle content faster; also drop the badge pulse loop
   (an infinite animation on a device with no compositor headroom is pure waste). */
@media (hover: none) and (pointer: coarse) {
	.tec-i { animation-duration: .18s; }
	.tec-l > .tec-i { animation-delay: 0ms !important; }
	.tec-badge { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tec-w, .tec-i, .tec-empty, .tec-badge {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.tec-a, .tec-a::before, .tec-a::after { transition: none !important; }
}