/*
 * Titan Amino — Theme-level visual fixes (v1.8.2).
 *
 * Currently focused on the homepage video strip (.ta-video-strip):
 *
 *  - Native video is 1920×1080 but the strip renders at ~1905×533, so
 *    `object-fit: cover` crops the top + bottom 50% of every frame.
 *    On desktop the cropped band can read soft because the compressed
 *    bitrate (the 5.7 MB H.264 / 4.3 MB WebM / 3.3 MB AV1 reencodes are
 *    aggressive for size) shows artifacts at large viewport widths.
 *
 *  - We can't increase the source resolution, so instead we mask the
 *    edges with a radial vignette that fades to the page background +
 *    apply a gentle contrast/saturation lift to compensate for the
 *    compression softness. The effect masks crop boundaries AND makes
 *    the visible center read crisper.
 *
 *  - `image-rendering: high-quality` + `transform: translateZ(0)` force
 *    GPU compositing so the browser uses its high-quality downscaler.
 */

/* Strip wrapper background MUST match the surrounding sections (pure
 * black) so the vignette fade lands seamlessly. The sections above
 * (.ta-hero) and below (.ta-section--tight) are both rgb(0,0,0). */
.ta-video-strip {
	position: relative;
	overflow: hidden;
	background: #000000;
}

/* Subtle contrast + saturation lift to compensate for compression. */
.ta-video-strip__video,
.ta-video-strip video {
	filter: contrast(1.06) saturate(1.08);
	-webkit-filter: contrast(1.06) saturate(1.08);
	image-rendering: -webkit-optimize-contrast;
	image-rendering: high-quality;
	transform: translateZ(0);
	will-change: transform;
}

/* Top + bottom seamless fade — pure black at the very edge, fully clear
 * by ~15% in. ONLY the top/bottom edges fade — left/right + center stay
 * untouched so the video stays bright and readable. */
.ta-video-strip::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 1)    0%,
		rgba(0, 0, 0, 0.55) 5%,
		rgba(0, 0, 0, 0.18) 11%,
		rgba(0, 0, 0, 0)    18%,
		rgba(0, 0, 0, 0)    82%,
		rgba(0, 0, 0, 0.18) 89%,
		rgba(0, 0, 0, 0.55) 95%,
		rgba(0, 0, 0, 1)    100%
	);
}

/* Wide desktop — push the fade slightly deeper since the crop band is
 * shorter (more of the video is hidden at the top/bottom). */
@media (min-width: 1200px) {
	.ta-video-strip::after {
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 1)    0%,
			rgba(0, 0, 0, 0.65) 4%,
			rgba(0, 0, 0, 0.25) 10%,
			rgba(0, 0, 0, 0)    18%,
			rgba(0, 0, 0, 0)    82%,
			rgba(0, 0, 0, 0.25) 90%,
			rgba(0, 0, 0, 0.65) 96%,
			rgba(0, 0, 0, 1)    100%
		);
	}
}

/* Mobile — narrower viewport, lighter top/bottom fade. */
@media (max-width: 640px) {
	.ta-video-strip__video,
	.ta-video-strip video {
		filter: contrast(1.04) saturate(1.05);
		-webkit-filter: contrast(1.04) saturate(1.05);
	}
	.ta-video-strip::after {
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 1)   0%,
			rgba(0, 0, 0, 0.4) 6%,
			rgba(0, 0, 0, 0.1) 14%,
			rgba(0, 0, 0, 0)   22%,
			rgba(0, 0, 0, 0)   78%,
			rgba(0, 0, 0, 0.1) 86%,
			rgba(0, 0, 0, 0.4) 94%,
			rgba(0, 0, 0, 1)   100%
		);
	}
}

/* Ensure foreground text/elements stay above the vignette. */
.ta-video-strip__inner > *:not(video),
.ta-video-strip__content,
.ta-video-strip__overlay {
	position: relative;
	z-index: 3;
}