/* TC Motion & Interaction 0.3.1
   Performance rule: animate transforms/opacity/masks; avoid layout animation.
*/

:root {
	--tc-motion-fast: 180ms;
	--tc-motion-normal: 280ms;
	--tc-motion-slow: 420ms;
	--tc-motion-ease: cubic-bezier(.2,.8,.2,1);
	--tc-lens-size: 340px;
	--tc-spotlight-size: 360px;
}

/* 01 COUNT --------------------------------------------------------------- */
.tc-count-loader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	background: var(--tc-loader-bg, #fff);
	color: var(--tc-loader-color, #111);
	transition: opacity var(--tc-motion-fast) ease, visibility var(--tc-motion-fast) ease;
}

.tc-count-loader.is-done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.tc-count-loader__number {
	font: inherit;
	font-size: clamp(7rem, 28vw, 30rem);
	font-weight: 600;
	line-height: .8;
	letter-spacing: -.06em;
	font-variant-numeric: tabular-nums;
}

.tc-count-loader__percent {
	font-size: .22em;
	vertical-align: top;
	margin-left: .05em;
}

/* 02 REVEAL -------------------------------------------------------------- */
.tc-reveal {
	--tc-reveal-y: 1.1em;
	opacity: 0;
	transform: translate3d(0, var(--tc-reveal-y), 0);
	clip-path: inset(0 0 100% 0);
	will-change: transform, opacity, clip-path;
}

.tc-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	clip-path: inset(0 0 0 0);
	transition:
		transform var(--tc-motion-normal) var(--tc-motion-ease),
		opacity var(--tc-motion-fast) ease,
		clip-path var(--tc-motion-normal) var(--tc-motion-ease);
}

/* 03 SNAP ----------------------------------------------------------------
   Markup:
   <span class="tc-snap" data-tc-snap="NOISE.|SENSE.|WOW.">NOISE.</span>
*/
.tc-snap {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.tc-snap__word {
	display: inline-block;
	will-change: transform, opacity;
}

.tc-snap.is-out .tc-snap__word {
	transform: translate3d(0,-110%,0);
	opacity: 0;
	transition: transform var(--tc-motion-fast) var(--tc-motion-ease), opacity 100ms ease;
}

.tc-snap.is-in .tc-snap__word {
	animation: tc-snap-in var(--tc-motion-fast) var(--tc-motion-ease) both;
}

@keyframes tc-snap-in {
	from { transform: translate3d(0,110%,0); opacity: 0; }
	to   { transform: translate3d(0,0,0); opacity: 1; }
}

/* 04 SLICE ---------------------------------------------------------------
   Apply .tc-slice to an Elementor image wrapper/container.
   JS creates visual slices only after the image is loaded.
*/
.tc-slice {
	position: relative;
	overflow: hidden;
}

.tc-slice.tc-slice-ready > img,
.tc-slice.tc-slice-ready .elementor-widget-container > img {
	opacity: 0;
}

.tc-slice-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.tc-slice-piece {
	position: absolute;
	inset: 0;
	background-image: var(--tc-slice-image);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transform: translate3d(0,var(--tc-slice-offset,18px),0);
	will-change: transform, opacity;
}

.tc-slice.is-visible .tc-slice-piece {
	opacity: 1;
	transform: translate3d(0,0,0);
	transition:
		transform var(--tc-motion-normal) var(--tc-motion-ease),
		opacity var(--tc-motion-fast) ease;
	transition-delay: calc(var(--tc-slice-index) * 22ms);
}

/* 05 LENS ---------------------------------------------------------------- */
.tc-lens,
.tc-text-lens,
.tc-content-lens,
.tc-spotlight {
	position: relative;
	overflow: hidden;
	--tc-x: 50%;
	--tc-y: 50%;
	--tc-lens-size: 340px;
	--tc-lens-softness: 0px;
}

.tc-lens__alt,
.tc-text-lens__alt,
.tc-spotlight__hidden {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	-webkit-mask-image: radial-gradient(
		circle calc(var(--tc-lens-size) * .5) at var(--tc-x) var(--tc-y),
		#000 0,
		#000 calc((var(--tc-lens-size) * .5) - var(--tc-lens-softness)),
		transparent calc(var(--tc-lens-size) * .5)
	);
	mask-image: radial-gradient(
		circle calc(var(--tc-lens-size) * .5) at var(--tc-x) var(--tc-y),
		#000 0,
		#000 calc((var(--tc-lens-size) * .5) - var(--tc-lens-softness)),
		transparent calc(var(--tc-lens-size) * .5)
	);
	transition: opacity 450ms var(--tc-motion-ease);
	will-change: opacity, -webkit-mask-image, mask-image;
}

.tc-lens__alt {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tc-text-lens__base,
.tc-text-lens__alt {
	position: relative;
}
.tc-text-lens__alt { position: absolute; }

.tc-lens.is-active .tc-lens__alt,
.tc-text-lens.is-active .tc-text-lens__alt,
.tc-spotlight.is-active .tc-spotlight__hidden {
	opacity: 1;
	transition-duration: 350ms;
}

/* 06 SPOTLIGHT: uses same soft circular mask; own default size */
.tc-spotlight { --tc-lens-size: var(--tc-spotlight-size, 360px); }

/* 07 TEXT LENS: same soft mask/fade as image lens */

/* 08 WIPE ---------------------------------------------------------------- */
.tc-wipe {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.tc-wipe::after {
	content: "";
	position: absolute;
	z-index: 10;
	top: -12%;
	bottom: -12%;
	left: -8%;
	width: 125%;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		var(--tc-wipe-color, #fff) 0%,
		var(--tc-wipe-color, #fff) 78%,
		rgba(255,255,255,.98) 82%,
		rgba(255,255,255,.86) 87%,
		rgba(255,255,255,.58) 92%,
		rgba(255,255,255,.22) 97%,
		rgba(255,255,255,0) 100%
	);
	transform: translate3d(0,0,0);
	will-change: transform;
}
.tc-wipe.is-visible::after {
	transform: translate3d(112%,0,0);
	transition: transform 1500ms var(--tc-motion-ease);
}
.tc-wipe.tc-wipe-fast.is-visible::after { transition-duration: 750ms; }

/* 09 CONTENT LENS ---------------------------------------------------------
   Parent: .tc-content-lens
   Children: .tc-content-lens__base + .tc-content-lens__alt
   Forms: .tc-lens-circle (default), .tc-lens-square, .tc-lens-rect
*/
.tc-content-lens {
	isolation: isolate;
	--tc-content-lens-size: 340px;
	--tc-content-lens-width: 520px;
	--tc-content-lens-height: 240px;
	--tc-content-lens-softness: 0px;
}
.tc-content-lens__base { position: relative; z-index: 1; }
.tc-content-lens__alt {
	position: absolute !important;
	inset: 0 !important;
	z-index: 2;
	margin: 0 !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity 450ms var(--tc-motion-ease);
	will-change: opacity, -webkit-mask-image, mask-image;
}

/* Circle: deliberately uses multiplication instead of CSS division for Chrome compatibility. */
.tc-content-lens:not(.tc-lens-square):not(.tc-lens-rect) .tc-content-lens__alt,
.tc-content-lens.tc-lens-circle .tc-content-lens__alt {
	-webkit-mask-image: radial-gradient(
		circle calc(var(--tc-content-lens-size) * .5) at var(--tc-x) var(--tc-y),
		#000 0,
		#000 calc((var(--tc-content-lens-size) * .5) - var(--tc-content-lens-softness)),
		transparent calc(var(--tc-content-lens-size) * .5)
	);
	mask-image: radial-gradient(
		circle calc(var(--tc-content-lens-size) * .5) at var(--tc-x) var(--tc-y),
		#000 0,
		#000 calc((var(--tc-content-lens-size) * .5) - var(--tc-content-lens-softness)),
		transparent calc(var(--tc-content-lens-size) * .5)
	);
}

/* Rectangle/square: JS supplies pixel edges; avoids fragile CSS division and mask-composite. */
.tc-content-lens.tc-lens-square .tc-content-lens__alt,
.tc-content-lens.tc-lens-rect .tc-content-lens__alt {
	-webkit-mask-image: radial-gradient(
		ellipse var(--tc-mask-rx, 170px) var(--tc-mask-ry, 170px) at var(--tc-x) var(--tc-y),
		#000 0,
		#000 calc(100% - var(--tc-content-lens-softness)),
		transparent 100%
	);
	mask-image: radial-gradient(
		ellipse var(--tc-mask-rx, 170px) var(--tc-mask-ry, 170px) at var(--tc-x) var(--tc-y),
		#000 0,
		#000 calc(100% - var(--tc-content-lens-softness)),
		transparent 100%
	);
}
.tc-content-lens.is-active .tc-content-lens__alt {
	opacity: 1;
	transition-duration: 350ms;
}

/* Accessibility / reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tc-count-loader { display: none !important; }

	.tc-reveal {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.tc-snap__word,
	.tc-slice-piece {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.tc-lens__alt,
	.tc-text-lens__alt,
	.tc-content-lens__alt,
	.tc-spotlight__hidden {
		transition: none !important;
	}

	.tc-wipe::after {
		display: none !important;
	}
}

@media (hover: none), (pointer: coarse) {
	:root {
		--tc-lens-size: min(58vw, 320px);
		--tc-spotlight-size: min(62vw, 340px);
	}
}