/* TAVOFIGURA Instagram Carousel — infinite marquee */

/* Oxygen wraps every shortcode's output in a generic ".oxy-shortcode" div.
   The section this carousel sits in lays its children out as a
   flex-direction: column row with align-items: center — meaning width is
   the *cross* axis, and without an explicit stretch a flex item's cross
   size defaults to fit-content of its own content. Our track's slides are
   fixed-width and non-shrinking, so "fit-content" for the wrapper equals
   the track's full, un-looped width (thousands of pixels) — the wrapper
   (and the carousel inside it) end up sized to their own content instead
   of the section, and only clip visually at that oversized edge instead
   of the section's edge. That's what showed up as a dead gap partway
   across the strip. Forcing the wrapper to stretch to the column's width
   fixes it at the root. Scoped to instances that contain our carousel, so
   it can't affect any of Oxygen's other shortcode wrappers on the site.
*/
.oxy-shortcode:has(.tf-ig-carousel) {
	align-self: stretch;
	width: 100%;
	min-width: 0;
}

.tf-ig-carousel {
	--tf-ig-gap: 6px;
	--tf-ig-slide-width: 260px;

	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;

	position: relative;
	overflow: hidden;
	background: transparent;
}

.tf-ig-track {
	display: flex;
	gap: var(--tf-ig-gap);
	width: max-content;
	will-change: transform;
}

/* Pure CSS marquee — runs on the compositor thread, so it keeps animating
   smoothly even while the page is being scrolled or the main thread is
   otherwise busy (unlike a JS/rAF-driven tween, which visibly stutters
   under that load, especially on mobile). JS measures slide widths,
   duplicates the track into two identical, contiguous halves, and sets
   --tf-ig-duration — translateX(-50%) always lands exactly on the seam
   between the two halves, so the loop is seamless regardless of the
   exact pixel widths involved. */
.tf-ig-track.tf-ig-anim-left {
	animation: tf-ig-marquee-left var(--tf-ig-duration, 30s) linear infinite;
}
.tf-ig-track.tf-ig-anim-right {
	animation: tf-ig-marquee-right var(--tf-ig-duration, 30s) linear infinite;
}
@keyframes tf-ig-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes tf-ig-marquee-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}
.tf-ig-carousel[data-pause-hover="1"]:hover .tf-ig-track {
	animation-play-state: paused;
}

.tf-ig-slide {
	position: relative;
	flex: 0 0 auto;
	width: var(--tf-ig-slide-width);
	display: block;
	overflow: hidden;
	background: #111;
	aspect-ratio: 1 / 1;
	text-decoration: none;
}

.tf-ig-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease, opacity .35s ease;
}

a.tf-ig-slide:hover img {
	transform: scale(1.04);
	opacity: .85;
}

.tf-ig-icon {
	position: absolute;
	top: 10px;
	right: 10px;
	color: #fff;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}
a.tf-ig-slide:hover .tf-ig-icon,
a.tf-ig-slide:focus-visible .tf-ig-icon {
	opacity: 1;
}

/* Responsive slide size — actual pixel widths are what the JS measures to
   build a seamless loop, so any CSS sizing approach works here. */
@media (max-width: 900px) {
	.tf-ig-carousel {
		--tf-ig-slide-width: 200px;
	}
}
@media (max-width: 560px) {
	.tf-ig-carousel {
		--tf-ig-slide-width: 150px;
	}
}

/* Applied by JS when the visitor has requested reduced motion, or before
   the marquee has finished setting up — lets the strip scroll natively
   instead. */
.tf-ig-carousel.tf-ig-static {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.tf-ig-carousel.tf-ig-static .tf-ig-track {
	width: max-content;
	transform: none !important;
	animation: none !important;
}