/**
 * TK Brizy Effects — styles.
 *
 * Class-based effects for any Brizy element:
 *   tk-reveal, tk-reveal-up, tk-reveal-left, tk-reveal-right, tk-zoom
 *   tk-reveal-children, tk-reveal-up-children, tk-zoom-children
 *   tk-parallax, tk-parallax-fast, tk-tilt, tk-counter, tk-marquee
 * Modifiers: tk-delay-1…5, tk-speed-fast, tk-speed-slow
 */

/* -------------------------------------------------------------------- */
/* Scroll reveals                                                       */
/* -------------------------------------------------------------------- */

.tk-reveal,
.tk-reveal-up,
.tk-reveal-left,
.tk-reveal-right,
.tk-zoom {
	transition:
		opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.tk-reveal { opacity: 0; }
.tk-reveal.tk-in { opacity: 1; }

.tk-reveal-up { opacity: 0; transform: translate3d(0, 48px, 0); }
.tk-reveal-up.tk-in { opacity: 1; transform: none; }

.tk-reveal-left { opacity: 0; transform: translate3d(-56px, 0, 0); }
.tk-reveal-left.tk-in { opacity: 1; transform: none; }

.tk-reveal-right { opacity: 0; transform: translate3d(56px, 0, 0); }
.tk-reveal-right.tk-in { opacity: 1; transform: none; }

.tk-zoom { opacity: 0; transform: scale(0.92); }
.tk-zoom.tk-in { opacity: 1; transform: none; }

/* Children variants — the JS applies the single effect to each child
   with a staggered transitionDelay. */
.tk-reveal-children > *,
.tk-reveal-up-children > *,
.tk-zoom-children > * {
	transition:
		opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------- */
/* Parallax                                                             */
/* -------------------------------------------------------------------- */

.tk-parallax,
.tk-parallax-fast {
	will-change: transform;
}

/* -------------------------------------------------------------------- */
/* Tilt                                                                 */
/* -------------------------------------------------------------------- */

.tk-tilt {
	transition: transform 0.25s ease-out;
}

/* -------------------------------------------------------------------- */
/* Marquee                                                              */
/* -------------------------------------------------------------------- */

.tk-marquee {
	overflow: hidden;
	white-space: nowrap;
}

.tk-marquee__inner {
	display: inline-flex;
	animation: tk-marquee-scroll linear infinite;
}

.tk-marquee__group {
	display: inline-flex;
	align-items: center;
	padding-right: 0;
}

.tk-marquee__group > * {
	margin-right: 3rem;
}

@keyframes tk-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* -------------------------------------------------------------------- */
/* Reduced motion — everything visible, no movement                     */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tk-reveal,
	.tk-reveal-up,
	.tk-reveal-left,
	.tk-reveal-right,
	.tk-zoom {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.tk-reveal-children > *,
	.tk-reveal-up-children > *,
	.tk-zoom-children > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.tk-marquee__inner {
		animation: none !important;
	}

	.tk-parallax,
	.tk-parallax-fast {
		transform: none !important;
	}
}

/* -------------------------------------------------------------------- */
/* Effects guide widget (editor helper)                                 */
/* -------------------------------------------------------------------- */

.tk-effects-info__card {
	max-width: 720px;
	padding: 40px;
	background: #F6F0EB;
	border: 1px solid rgba(17, 17, 17, 0.12);
	color: #111111;
	font-family: Inter, sans-serif;
}

.tk-effects-info__title {
	margin: 0 0 16px;
	font-family: "Cormorant Garamond", "Times New Roman", serif;
	font-size: 2rem;
	font-weight: 500;
}

.tk-effects-info__text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(17, 17, 17, 0.75);
}

.tk-effects-info__list {
	margin: 16px 0 16px;
	padding-left: 20px;
	font-size: 14px;
	line-height: 2;
	color: rgba(17, 17, 17, 0.85);
}

.tk-effects-info__list code {
	padding: 2px 8px;
	background: #E8D9CF;
	border-radius: 2px;
	font-size: 12.5px;
}