/* TTST Dynamic Content Hub — Original TTST template style.
   Elementor style controls can override these defaults per widget instance. */

.ttst-dch-strip {
	--ttst-panel: rgba(10, 12, 10, 0.92);
	--ttst-panel-2: rgba(16, 19, 15, 0.92);
	--ttst-gold: #d6a738;
	--ttst-gold-soft: #ffe6a0;
	--ttst-green: #7cff00;
	--ttst-line: rgba(214, 167, 56, 0.24);
	--ttst-white: rgba(255, 255, 255, 0.92);
	--ttst-muted: rgba(255, 255, 255, 0.68);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	padding: 0;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ttst-dch-strip--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ttst-dch-strip--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ttst-dch-strip--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ttst-dch-strip--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ttst-dch-strip--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ttst-dch-strip--cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }

.ttst-dch-card {
	position: relative;
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	min-height: 112px;
	overflow: hidden;
	border: 1px solid var(--ttst-line);
	border-radius: 10px;
	background:
		radial-gradient(circle at 20% 20%, rgba(124, 255, 0, 0.11), transparent 30%),
		linear-gradient(135deg, rgba(214, 167, 56, 0.08), transparent 45%),
		var(--ttst-panel);
	box-shadow: 0 0 0 1px rgba(124, 255, 0, 0.03), 0 14px 38px rgba(0, 0, 0, 0.35);
}

.ttst-dch-strip--mode-universal .ttst-dch-card {
	background:
		radial-gradient(circle at 85% 12%, rgba(124, 255, 0, 0.13), transparent 31%),
		linear-gradient(135deg, rgba(214, 167, 56, 0.10), transparent 46%),
		var(--ttst-panel-2);
}

.ttst-dch-card::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(124, 255, 0, 0.12), transparent 30%, rgba(214, 167, 56, 0.09));
	opacity: 0.6;
}

.ttst-dch-card__media {
	position: relative;
	min-height: 112px;
	background: #080908;
	border-right: 1px solid rgba(214, 167, 56, 0.18);
}

.ttst-dch-card__image {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	filter: saturate(1.12) contrast(1.04);
}

.ttst-dch-card__fallback-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: Orbitron, Rajdhani, sans-serif;
	font-size: 74px;
	font-weight: 800;
	line-height: 1;
	color: var(--ttst-gold-soft);
	text-shadow: 0 0 6px rgba(255, 230, 160, 0.35), 0 0 18px rgba(214, 167, 56, 0.32), 0 2px 0 rgba(0, 0, 0, 0.9);
	background: radial-gradient(circle at center, rgba(214, 167, 56, 0.18), transparent 58%), linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 45%), #050505;
}

.ttst-dch-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 14px 15px;
}

.ttst-dch-card__label {
	margin: 0 0 5px;
	font-family: Rajdhani, Orbitron, sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.13em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ttst-green);
	text-shadow: 0 0 10px rgba(124, 255, 0, 0.35);
}

.ttst-dch-card__title {
	margin: 0;
	font-family: Orbitron, Rajdhani, sans-serif;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--ttst-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ttst-dch-card__meta {
	margin: 4px 0 12px;
	font-size: 12px;
	line-height: 1.25;
	color: var(--ttst-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ttst-dch-card__button {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 7px 16px;
	border: 1px solid rgba(214, 167, 56, 0.72);
	border-radius: 3px;
	background: rgba(214, 167, 56, 0.10);
	color: var(--ttst-gold-soft);
	font-family: Rajdhani, Orbitron, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.10em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.ttst-dch-card__button:hover,
.ttst-dch-card__button:focus {
	transform: translateY(-1px) scale(1.02);
	border-color: var(--ttst-green);
	background: rgba(124, 255, 0, 0.10);
	color: #ffffff;
	box-shadow: 0 0 18px rgba(124, 255, 0, 0.20);
}

.ttst-dch-card__button--disabled {
	opacity: 0.65;
	pointer-events: none;
}

@media (max-width: 1200px) {
	.ttst-dch-strip,
	.ttst-dch-strip--cols-3,
	.ttst-dch-strip--cols-4,
	.ttst-dch-strip--cols-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ttst-dch-strip,
	.ttst-dch-strip--cols-2,
	.ttst-dch-strip--cols-3,
	.ttst-dch-strip--cols-4,
	.ttst-dch-strip--cols-5 {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.ttst-dch-card { grid-template-columns: 96px minmax(0, 1fr); }
	.ttst-dch-card__title { font-size: 16px; }
}


/* v1.4.0 — Layout customization.
   Horizontal remains the original default. Vertical creates a TTST cinematic poster-card layout inspired by artist feature cards. */

.ttst-dch-strip--layout-horizontal .ttst-dch-card {
	grid-template-columns: 112px minmax(0, 1fr);
}

.ttst-dch-strip--layout-vertical {
	gap: 18px;
}

.ttst-dch-strip--layout-vertical .ttst-dch-card {
	isolation: isolate;
	display: block;
	min-height: 560px;
	border-radius: 14px;
	background:
		radial-gradient(circle at 85% 12%, rgba(124, 255, 0, 0.14), transparent 32%),
		radial-gradient(circle at 15% 90%, rgba(214, 167, 56, 0.22), transparent 38%),
		linear-gradient(145deg, rgba(214, 167, 56, 0.10), rgba(5, 5, 5, 0.97) 42%, rgba(15, 38, 7, 0.72) 100%),
		#050505;
	box-shadow:
		0 0 0 1px rgba(124, 255, 0, 0.04),
		0 24px 62px rgba(0, 0, 0, 0.48),
		inset 0 0 38px rgba(214, 167, 56, 0.045);
}

.ttst-dch-strip--layout-vertical .ttst-dch-card::before {
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.10) 28%, rgba(0, 0, 0, 0.76) 100%),
		radial-gradient(circle at 78% 40%, rgba(255, 230, 160, 0.13), transparent 36%),
		linear-gradient(115deg, transparent 0%, transparent 48%, rgba(255, 255, 255, 0.08) 49%, transparent 72%);
	opacity: 1;
}

.ttst-dch-strip--layout-vertical .ttst-dch-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	background:
		linear-gradient(180deg, rgba(5, 5, 5, 0.18) 0%, rgba(5, 5, 5, 0.05) 35%, rgba(5, 5, 5, 0.82) 100%),
		linear-gradient(90deg, rgba(124, 255, 0, 0.10), transparent 30%, rgba(214, 167, 56, 0.16));
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	min-height: 100%;
	border-right: 0;
	background:
		radial-gradient(circle at center, rgba(214, 167, 56, 0.20), transparent 58%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 52%),
		#050505;
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__image {
	width: 100%;
	height: 100% !important;
	aspect-ratio: auto;
	object-fit: cover;
	opacity: 0.55;
	filter: saturate(1.08) contrast(1.12) brightness(0.58);
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__fallback-logo {
	height: 100%;
	font-size: clamp(140px, 16vw, 240px);
	opacity: 0.28;
	color: rgba(255, 230, 160, 0.68);
	text-shadow:
		0 0 22px rgba(214, 167, 56, 0.34),
		0 0 48px rgba(124, 255, 0, 0.10);
	background:
		radial-gradient(circle at center, rgba(214, 167, 56, 0.20), transparent 55%),
		radial-gradient(circle at 70% 18%, rgba(124, 255, 0, 0.10), transparent 34%),
		#050505;
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__body {
	position: relative;
	z-index: 2;
	min-height: 560px;
	padding: 36px 20px 34px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background: transparent;
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__label {
	margin: 0 0 auto;
	font-family: Orbitron, Rajdhani, sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.36em;
	line-height: 1.1;
	color: rgba(255, 255, 255, 0.92);
	text-shadow:
		0 0 12px rgba(255, 255, 255, 0.18),
		0 0 20px rgba(124, 255, 0, 0.16);
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__title {
	margin: auto 0 0;
	max-width: 92%;
	font-size: clamp(38px, 5vw, 68px);
	letter-spacing: -0.025em;
	line-height: 0.98;
	text-transform: none;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	color: #ffffff;
	text-shadow:
		0 0 18px rgba(0, 0, 0, 0.55),
		0 0 28px rgba(214, 167, 56, 0.18);
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__title::after {
	content: "";
	display: block;
	width: min(100%, 340px);
	height: 3px;
	margin: 22px 0 0;
	background: linear-gradient(90deg, #ffffff 0%, rgba(255, 230, 160, 0.92) 45%, transparent 100%);
	box-shadow: 0 0 16px rgba(214, 167, 56, 0.30);
	opacity: 0.92;
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__meta {
	margin: 28px 0 32px;
	font-family: Orbitron, Rajdhani, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1.25;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.90);
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__button {
	align-self: center;
	min-height: 58px;
	padding: 18px 44px;
	border-radius: 10px;
	border-color: rgba(124, 255, 0, 0.56);
	background:
		linear-gradient(180deg, rgba(5, 11, 10, 0.94), rgba(0, 0, 0, 0.92));
	color: #ffffff;
	font-family: Orbitron, Rajdhani, sans-serif;
	font-size: 13px;
	letter-spacing: 0.24em;
	box-shadow:
		0 0 22px rgba(124, 255, 0, 0.12),
		inset 0 0 18px rgba(214, 167, 56, 0.045);
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__button::after {
	content: "›";
	display: inline-block;
	margin-left: 14px;
	font-size: 22px;
	line-height: 0;
	color: var(--ttst-green);
	transform: translateY(1px);
}

.ttst-dch-strip--layout-vertical .ttst-dch-card__button:hover,
.ttst-dch-strip--layout-vertical .ttst-dch-card__button:focus {
	transform: translateY(-2px) scale(1.025);
	border-color: var(--ttst-gold-soft);
	background:
		linear-gradient(180deg, rgba(124, 255, 0, 0.13), rgba(5, 5, 5, 0.94));
	box-shadow:
		0 0 28px rgba(124, 255, 0, 0.20),
		0 0 18px rgba(214, 167, 56, 0.14);
}

@media (max-width: 1200px) {
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-3,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-4,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ttst-dch-strip--layout-horizontal .ttst-dch-card {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	.ttst-dch-strip--layout-vertical .ttst-dch-card,
	.ttst-dch-strip--layout-vertical .ttst-dch-card__body {
		min-height: 520px;
	}

	.ttst-dch-strip--layout-vertical .ttst-dch-card__body {
		padding: 30px 20px 32px;
	}

	.ttst-dch-strip--layout-vertical .ttst-dch-card__label {
		font-size: 12px;
		letter-spacing: 0.28em;
	}

	.ttst-dch-strip--layout-vertical .ttst-dch-card__title {
		font-size: clamp(36px, 13vw, 58px);
	}

	.ttst-dch-strip--layout-vertical .ttst-dch-card__meta {
		font-size: 13px;
		letter-spacing: 0.18em;
	}

	.ttst-dch-strip--layout-vertical .ttst-dch-card__button {
		width: min(100%, 220px);
		padding: 17px 28px;
	}
}


/* v1.5.2 — Vertical max 7 columns. */
.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }

@media (max-width: 1500px) {
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-7 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1200px) {
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-7 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-7 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-7 {
		grid-template-columns: 1fr;
	}
}


/* v1.5.4 — TTST column/card hover-motion effect. */
.ttst-dch-strip {
	--ttst-dch-hover-y: -8px;
	--ttst-dch-hover-scale: 1.025;
	--ttst-dch-hover-speed: 260ms;
	--ttst-dch-hover-glow: rgba(124, 255, 0, 0.20);
}

.ttst-dch-card {
	transform: translateY(0) scale(1);
	transform-origin: center center;
	transition:
		transform var(--ttst-dch-hover-speed) ease,
		border-color var(--ttst-dch-hover-speed) ease,
		box-shadow var(--ttst-dch-hover-speed) ease,
		filter var(--ttst-dch-hover-speed) ease;
	will-change: transform;
}

.ttst-dch-card__media,
.ttst-dch-card__image,
.ttst-dch-card__fallback-logo,
.ttst-dch-card__button {
	transition:
		transform var(--ttst-dch-hover-speed) ease,
		filter var(--ttst-dch-hover-speed) ease,
		opacity var(--ttst-dch-hover-speed) ease,
		box-shadow var(--ttst-dch-hover-speed) ease,
		border-color var(--ttst-dch-hover-speed) ease,
		background var(--ttst-dch-hover-speed) ease;
}

.ttst-dch-hover-motion-yes .ttst-dch-card:hover,
.ttst-dch-hover-motion-yes .ttst-dch-card:focus-within {
	transform: translateY(var(--ttst-dch-hover-y)) scale(var(--ttst-dch-hover-scale));
	border-color: rgba(124, 255, 0, 0.42);
	box-shadow:
		0 28px 68px rgba(0, 0, 0, 0.56),
		0 0 28px var(--ttst-dch-hover-glow),
		inset 0 0 34px rgba(214, 167, 56, 0.06);
	filter: saturate(1.08);
}

.ttst-dch-hover-motion-yes .ttst-dch-card:hover .ttst-dch-card__image,
.ttst-dch-hover-motion-yes .ttst-dch-card:focus-within .ttst-dch-card__image {
	transform: scale(1.06);
	filter: saturate(1.16) contrast(1.08) brightness(0.86);
}

.ttst-dch-hover-motion-yes .ttst-dch-card:hover .ttst-dch-card__fallback-logo,
.ttst-dch-hover-motion-yes .ttst-dch-card:focus-within .ttst-dch-card__fallback-logo {
	transform: scale(1.05) rotate(-2deg);
	text-shadow:
		0 0 18px rgba(214, 167, 56, 0.50),
		0 0 38px rgba(124, 255, 0, 0.22);
}

.ttst-dch-hover-motion-yes .ttst-dch-card:hover .ttst-dch-card__button,
.ttst-dch-hover-motion-yes .ttst-dch-card:focus-within .ttst-dch-card__button {
	transform: translateY(-2px);
	box-shadow:
		0 0 22px rgba(124, 255, 0, 0.22),
		0 0 14px rgba(214, 167, 56, 0.16);
}

.ttst-dch-hover-motion-yes .ttst-dch-strip--layout-vertical .ttst-dch-card:hover::after,
.ttst-dch-hover-motion-yes .ttst-dch-strip--layout-vertical .ttst-dch-card:focus-within::after {
	background:
		linear-gradient(180deg, rgba(5, 5, 5, 0.10) 0%, rgba(5, 5, 5, 0.02) 35%, rgba(5, 5, 5, 0.80) 100%),
		linear-gradient(90deg, rgba(124, 255, 0, 0.16), transparent 30%, rgba(214, 167, 56, 0.22));
}

@media (prefers-reduced-motion: reduce) {
	.ttst-dch-card,
	.ttst-dch-card__media,
	.ttst-dch-card__image,
	.ttst-dch-card__fallback-logo,
	.ttst-dch-card__button {
		transition: none !important;
	}

	.ttst-dch-hover-motion-yes .ttst-dch-card:hover,
	.ttst-dch-hover-motion-yes .ttst-dch-card:focus-within {
		transform: none;
	}
}


/* v1.5.5 — Desktop max 7 columns for horizontal and vertical layouts. */
.ttst-dch-strip--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ttst-dch-strip--cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }

.ttst-dch-strip--layout-horizontal.ttst-dch-strip--cols-6,
.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ttst-dch-strip--layout-horizontal.ttst-dch-strip--cols-7,
.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-7 {
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

@media (max-width: 1500px) {
	.ttst-dch-strip--layout-horizontal.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-horizontal.ttst-dch-strip--cols-7,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-7 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1200px) {
	.ttst-dch-strip--layout-horizontal.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-horizontal.ttst-dch-strip--cols-7,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-7 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.ttst-dch-strip--layout-horizontal.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-horizontal.ttst-dch-strip--cols-7,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-7 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.ttst-dch-strip--layout-horizontal.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-horizontal.ttst-dch-strip--cols-7,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-6,
	.ttst-dch-strip--layout-vertical.ttst-dch-strip--cols-7 {
		grid-template-columns: 1fr;
	}
}


/* v1.5.6 — Delay fade-in customization for each column/card. */
.ttst-dch-strip {
	--ttst-dch-fade-initial-delay: 100ms;
	--ttst-dch-fade-step: 120ms;
	--ttst-dch-fade-duration: 650ms;
	--ttst-dch-fade-y: 24px;
	--ttst-dch-fade-blur: 0px;
	--ttst-dch-fade-easing: cubic-bezier(.16, 1, .3, 1);
}

.ttst-dch-fade-in-yes .ttst-dch-card {
	opacity: 0;
	transform: translateY(var(--ttst-dch-fade-y)) scale(.985);
	filter: blur(var(--ttst-dch-fade-blur));
	animation-name: ttst-dch-column-fade-in;
	animation-duration: var(--ttst-dch-fade-duration);
	animation-timing-function: var(--ttst-dch-fade-easing);
	animation-fill-mode: forwards;
	animation-delay: calc(var(--ttst-dch-fade-initial-delay) + (var(--ttst-dch-column-index, 0) * var(--ttst-dch-fade-step)));
	will-change: transform, opacity, filter;
}

.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(1) { --ttst-dch-column-index: 0; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(2) { --ttst-dch-column-index: 1; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(3) { --ttst-dch-column-index: 2; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(4) { --ttst-dch-column-index: 3; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(5) { --ttst-dch-column-index: 4; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(6) { --ttst-dch-column-index: 5; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(7) { --ttst-dch-column-index: 6; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(8) { --ttst-dch-column-index: 7; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(9) { --ttst-dch-column-index: 8; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(10) { --ttst-dch-column-index: 9; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(11) { --ttst-dch-column-index: 10; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(12) { --ttst-dch-column-index: 11; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(13) { --ttst-dch-column-index: 12; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(14) { --ttst-dch-column-index: 13; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(15) { --ttst-dch-column-index: 14; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(16) { --ttst-dch-column-index: 15; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(17) { --ttst-dch-column-index: 16; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(18) { --ttst-dch-column-index: 17; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(19) { --ttst-dch-column-index: 18; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(20) { --ttst-dch-column-index: 19; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(21) { --ttst-dch-column-index: 20; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(22) { --ttst-dch-column-index: 21; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(23) { --ttst-dch-column-index: 22; }
.ttst-dch-fade-in-yes .ttst-dch-card:nth-child(24) { --ttst-dch-column-index: 23; }

@keyframes ttst-dch-column-fade-in {
	0% {
		opacity: 0;
		transform: translateY(var(--ttst-dch-fade-y)) scale(.985);
		filter: blur(var(--ttst-dch-fade-blur));
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ttst-dch-fade-in-yes .ttst-dch-card {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none;
	}
}


/* v1.5.7 — TTST flash animation customization for columns/cards. */
.ttst-dch-strip {
	--ttst-dch-flash-color: #99FF00;
	--ttst-dch-flash-secondary-color: #D4AF37;
	--ttst-dch-flash-opacity: .28;
	--ttst-dch-flash-duration: 1100ms;
	--ttst-dch-flash-initial-delay: 350ms;
	--ttst-dch-flash-step: 120ms;
	--ttst-dch-flash-loop-duration: 4800ms;
}

.ttst-dch-card {
	--ttst-dch-flash-index: 0;
}

.ttst-dch-flash-animation-yes .ttst-dch-card {
	position: relative;
	overflow: hidden;
}

.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(1) { --ttst-dch-flash-index: 0; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(2) { --ttst-dch-flash-index: 1; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(3) { --ttst-dch-flash-index: 2; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(4) { --ttst-dch-flash-index: 3; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(5) { --ttst-dch-flash-index: 4; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(6) { --ttst-dch-flash-index: 5; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(7) { --ttst-dch-flash-index: 6; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(8) { --ttst-dch-flash-index: 7; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(9) { --ttst-dch-flash-index: 8; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(10) { --ttst-dch-flash-index: 9; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(11) { --ttst-dch-flash-index: 10; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(12) { --ttst-dch-flash-index: 11; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(13) { --ttst-dch-flash-index: 12; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(14) { --ttst-dch-flash-index: 13; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(15) { --ttst-dch-flash-index: 14; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(16) { --ttst-dch-flash-index: 15; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(17) { --ttst-dch-flash-index: 16; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(18) { --ttst-dch-flash-index: 17; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(19) { --ttst-dch-flash-index: 18; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(20) { --ttst-dch-flash-index: 19; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(21) { --ttst-dch-flash-index: 20; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(22) { --ttst-dch-flash-index: 21; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(23) { --ttst-dch-flash-index: 22; }
.ttst-dch-flash-animation-yes .ttst-dch-card:nth-child(24) { --ttst-dch-flash-index: 23; }

.ttst-dch-flash-animation-yes .ttst-dch-card::before {
	content: "";
	position: absolute;
	inset: -55% -85%;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	background:
		linear-gradient(
			115deg,
			transparent 0%,
			transparent 38%,
			color-mix(in srgb, var(--ttst-dch-flash-color) calc(var(--ttst-dch-flash-opacity) * 100%), transparent) 46%,
			color-mix(in srgb, #ffffff calc(var(--ttst-dch-flash-opacity) * 72%), transparent) 50%,
			color-mix(in srgb, var(--ttst-dch-flash-secondary-color) calc(var(--ttst-dch-flash-opacity) * 100%), transparent) 54%,
			transparent 62%,
			transparent 100%
		);
	transform: translateX(-75%) rotate(0.001deg);
	mix-blend-mode: screen;
	filter: blur(1px);
	animation-name: ttst-dch-flash-sheen;
	animation-duration: var(--ttst-dch-flash-duration);
	animation-timing-function: cubic-bezier(.16, 1, .3, 1);
	animation-fill-mode: both;
	animation-delay: calc(var(--ttst-dch-flash-initial-delay) + (var(--ttst-dch-flash-index) * var(--ttst-dch-flash-step)));
}

.ttst-dch-flash-animation-yes .ttst-dch-card::after {
	transition:
		box-shadow var(--ttst-dch-flash-duration) ease,
		opacity var(--ttst-dch-flash-duration) ease,
		background var(--ttst-dch-flash-duration) ease;
}

.ttst-dch-flash-style-glow .ttst-dch-card::before,
.ttst-dch-flash-style-border .ttst-dch-card::before {
	background: transparent;
	inset: 0;
	transform: none;
	filter: none;
	animation-name: ttst-dch-flash-glow;
}

.ttst-dch-flash-style-border .ttst-dch-card::before {
	border-radius: inherit;
	box-shadow:
		inset 0 0 0 1px var(--ttst-dch-flash-color),
		0 0 0 1px color-mix(in srgb, var(--ttst-dch-flash-secondary-color) 58%, transparent);
	animation-name: ttst-dch-flash-border;
}

.ttst-dch-flash-style-combo .ttst-dch-card {
	animation-name: ttst-dch-flash-card-glow;
	animation-duration: var(--ttst-dch-flash-duration);
	animation-timing-function: cubic-bezier(.16, 1, .3, 1);
	animation-fill-mode: both;
	animation-delay: calc(var(--ttst-dch-flash-initial-delay) + (var(--ttst-dch-flash-index) * var(--ttst-dch-flash-step)));
}

.ttst-dch-flash-loop-yes .ttst-dch-card::before,
.ttst-dch-flash-loop-yes.ttst-dch-flash-style-combo .ttst-dch-card {
	animation-iteration-count: infinite;
	animation-duration: var(--ttst-dch-flash-loop-duration);
}

.ttst-dch-flash-hover-only-yes .ttst-dch-card::before,
.ttst-dch-flash-hover-only-yes.ttst-dch-flash-style-combo .ttst-dch-card {
	animation: none;
	opacity: 0;
}

.ttst-dch-flash-hover-only-yes .ttst-dch-card:hover::before,
.ttst-dch-flash-hover-only-yes .ttst-dch-card:focus-within::before {
	animation-name: ttst-dch-flash-sheen;
	animation-duration: var(--ttst-dch-flash-duration);
	animation-timing-function: cubic-bezier(.16, 1, .3, 1);
	animation-fill-mode: both;
	animation-delay: 0ms;
}

.ttst-dch-flash-hover-only-yes.ttst-dch-flash-style-glow .ttst-dch-card:hover::before,
.ttst-dch-flash-hover-only-yes.ttst-dch-flash-style-glow .ttst-dch-card:focus-within::before {
	animation-name: ttst-dch-flash-glow;
}

.ttst-dch-flash-hover-only-yes.ttst-dch-flash-style-border .ttst-dch-card:hover::before,
.ttst-dch-flash-hover-only-yes.ttst-dch-flash-style-border .ttst-dch-card:focus-within::before {
	animation-name: ttst-dch-flash-border;
}

.ttst-dch-flash-hover-only-yes.ttst-dch-flash-style-combo .ttst-dch-card:hover,
.ttst-dch-flash-hover-only-yes.ttst-dch-flash-style-combo .ttst-dch-card:focus-within {
	animation-name: ttst-dch-flash-card-glow;
	animation-duration: var(--ttst-dch-flash-duration);
	animation-timing-function: cubic-bezier(.16, 1, .3, 1);
	animation-fill-mode: both;
	animation-delay: 0ms;
}

@keyframes ttst-dch-flash-sheen {
	0% {
		opacity: 0;
		transform: translateX(-75%) rotate(0.001deg);
	}
	18% {
		opacity: 1;
	}
	54% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateX(75%) rotate(0.001deg);
	}
}

@keyframes ttst-dch-flash-glow {
	0% {
		opacity: 0;
		box-shadow: none;
	}
	35% {
		opacity: 1;
		box-shadow:
			0 0 24px color-mix(in srgb, var(--ttst-dch-flash-color) calc(var(--ttst-dch-flash-opacity) * 100%), transparent),
			inset 0 0 30px color-mix(in srgb, var(--ttst-dch-flash-secondary-color) calc(var(--ttst-dch-flash-opacity) * 72%), transparent);
	}
	100% {
		opacity: 0;
		box-shadow: none;
	}
}

@keyframes ttst-dch-flash-border {
	0% {
		opacity: 0;
		box-shadow:
			inset 0 0 0 0 transparent,
			0 0 0 0 transparent;
	}
	35% {
		opacity: 1;
		box-shadow:
			inset 0 0 0 1px var(--ttst-dch-flash-color),
			0 0 18px color-mix(in srgb, var(--ttst-dch-flash-secondary-color) calc(var(--ttst-dch-flash-opacity) * 100%), transparent);
	}
	100% {
		opacity: 0;
		box-shadow:
			inset 0 0 0 0 transparent,
			0 0 0 0 transparent;
	}
}

@keyframes ttst-dch-flash-card-glow {
	0% {
		box-shadow: var(--ttst-dch-card-shadow, 0 18px 44px rgba(0, 0, 0, 0.42));
	}
	42% {
		box-shadow:
			0 28px 72px rgba(0, 0, 0, 0.58),
			0 0 30px color-mix(in srgb, var(--ttst-dch-flash-color) calc(var(--ttst-dch-flash-opacity) * 100%), transparent),
			inset 0 0 38px color-mix(in srgb, var(--ttst-dch-flash-secondary-color) calc(var(--ttst-dch-flash-opacity) * 58%), transparent);
	}
	100% {
		box-shadow: var(--ttst-dch-card-shadow, 0 18px 44px rgba(0, 0, 0, 0.42));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ttst-dch-flash-animation-yes .ttst-dch-card,
	.ttst-dch-flash-animation-yes .ttst-dch-card::before {
		animation: none !important;
	}

	.ttst-dch-flash-animation-yes .ttst-dch-card::before {
		opacity: 0 !important;
	}
}


/* v1.5.8 — TTST column/card scrolling effect customization. */
.ttst-dch-strip {
	--ttst-dch-scroll-duration: 700ms;
	--ttst-dch-scroll-step: 110ms;
	--ttst-dch-scroll-y: 36px;
	--ttst-dch-scroll-x: 46px;
	--ttst-dch-scroll-scale: .96;
	--ttst-dch-scroll-blur: 0px;
	--ttst-dch-scroll-threshold: .18;
	--ttst-dch-scroll-root-margin: -40px;
	--ttst-dch-scroll-easing: cubic-bezier(.16, 1, .3, 1);
}

.ttst-dch-scroll-effect-yes .ttst-dch-card {
	opacity: 0;
	transform: translate3d(0, var(--ttst-dch-scroll-y), 0) scale(var(--ttst-dch-scroll-scale));
	filter: blur(var(--ttst-dch-scroll-blur));
	transition:
		opacity var(--ttst-dch-scroll-duration) var(--ttst-dch-scroll-easing),
		transform var(--ttst-dch-scroll-duration) var(--ttst-dch-scroll-easing),
		filter var(--ttst-dch-scroll-duration) var(--ttst-dch-scroll-easing),
		border-color var(--ttst-dch-hover-speed, 260ms) ease,
		box-shadow var(--ttst-dch-hover-speed, 260ms) ease;
	transition-delay: calc(var(--ttst-dch-scroll-index, 0) * var(--ttst-dch-scroll-step));
	will-change: transform, opacity, filter;
}

.ttst-dch-scroll-type-fade-down .ttst-dch-card {
	transform: translate3d(0, calc(var(--ttst-dch-scroll-y) * -1), 0) scale(var(--ttst-dch-scroll-scale));
}

.ttst-dch-scroll-type-slide-left .ttst-dch-card {
	transform: translate3d(var(--ttst-dch-scroll-x), 0, 0) scale(var(--ttst-dch-scroll-scale));
}

.ttst-dch-scroll-type-slide-right .ttst-dch-card {
	transform: translate3d(calc(var(--ttst-dch-scroll-x) * -1), 0, 0) scale(var(--ttst-dch-scroll-scale));
}

.ttst-dch-scroll-type-zoom-in .ttst-dch-card {
	transform: scale(var(--ttst-dch-scroll-scale));
}

.ttst-dch-scroll-type-blur-rise .ttst-dch-card {
	transform: translate3d(0, var(--ttst-dch-scroll-y), 0) scale(.985);
	filter: blur(max(var(--ttst-dch-scroll-blur), 6px));
}

.ttst-dch-scroll-type-tilt-up .ttst-dch-card {
	transform:
		perspective(900px)
		translate3d(0, var(--ttst-dch-scroll-y), 0)
		rotateX(10deg)
		scale(var(--ttst-dch-scroll-scale));
	transform-origin: center bottom;
}

.ttst-dch-scroll-effect-yes .ttst-dch-card.is-ttst-dch-scroll-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	filter: blur(0);
}

.ttst-dch-scroll-type-tilt-up .ttst-dch-card.is-ttst-dch-scroll-visible {
	transform:
		perspective(900px)
		translate3d(0, 0, 0)
		rotateX(0deg)
		scale(1);
}

/* Keep hover motion active after scroll reveal. */
.ttst-dch-scroll-effect-yes.ttst-dch-hover-motion-yes .ttst-dch-card.is-ttst-dch-scroll-visible:hover,
.ttst-dch-scroll-effect-yes.ttst-dch-hover-motion-yes .ttst-dch-card.is-ttst-dch-scroll-visible:focus-within {
	transform: translateY(var(--ttst-dch-hover-y, -8px)) scale(var(--ttst-dch-hover-scale, 1.025));
}

@media (prefers-reduced-motion: reduce) {
	.ttst-dch-scroll-effect-yes .ttst-dch-card {
		opacity: 1;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}
