/* Allow dots to render outside the viewBox on edge-hugging paths */
.stat-info__left-pattern {
	overflow: visible;
}

/* Glowing dot that travels along each circuit-trace path — styled as a
   live GPS/tracking beacon: white hot core, wide cyan halo. */
.stat-dot {
	fill: #4ec3fa;
	filter: drop-shadow( 0 0 2px #fff ) drop-shadow( 0 0 5px #4ec3fa ) drop-shadow( 0 0 14px rgba( 78, 195, 250, 0.7 ) );
	pointer-events: none;
	opacity: 0;
}

/* Utility: pulsing signal ring — apply to live-tracking node elements. */
@keyframes signal-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba( 78, 195, 250, 0.45 );
	}
	50% {
		box-shadow: 0 0 0 14px rgba( 78, 195, 250, 0 );
	}
}


.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--darkest-navy);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media ( max-width: 767px ) {
	.preloader {
		display: none;
	}
}

.preloader__logo {
	position: relative;
}

.preloader__robot-image {
	position: absolute;
	bottom: 30px;
	right: 30px;
	width: 120px;
	rotate: -8deg;
	opacity: 0;
}

/* Logo starts fully clipped so it never flashes before GSAP initialises */
@media ( min-width: 768px ) {
	.preloader svg {
		clip-path: inset(0 100% 0 0);
		will-change: clip-path;
	}
}

/* Prevent scroll while the preloader is active */
body.preloader-active {
	overflow: hidden;
}

@media ( min-width: 768px ) {
	.cta__robot-image {
		animation: ai-hover 3s ease-in-out infinite;
		animation-play-state: paused;
		transform-origin: center center;
	}

	.cta__robot-image.is-visible {
		animation-play-state: running;
	}
}

/* Controlled AI hover — subtle positional drift simulating an autonomous unit
   maintaining precise position while micro-adjusting, like a TMS routing AI. */
@keyframes ai-hover {
	0%, 100% {
		rotate: -2deg;
		translate: 0px 0px;
	}
	35% {
		rotate: 0.5deg;
		translate: 2px -5px;
	}
	65% {
		rotate: -0.5deg;
		translate: -2px -2px;
	}
}

/* -------------------------------------------------------------------------
   Initial hidden states for scroll-reveal animations.
   Desktop-only (768px+) and respects prefers-reduced-motion so mobile
   users and users who prefer reduced motion always see content immediately.
   The JS animation module also bails out on mobile and reduced-motion.
   ----------------------------------------------------------------------- */
@media ( min-width: 768px ) and ( prefers-reduced-motion: no-preference ) {

	/* Masthead — homepage */
	.masthead--homepage .masthead__text > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 24px );
	}

	/* Masthead — innerpage */
	.masthead--innerpage .masthead--innerpage__text > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 24px );
	}

	/* Stats section */
	.stats-section .stat-item {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 40px );
	}

	.stats-section .stat-image {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 16px );
	}

	/* Stat info text */
	.stat-info .stat-info__text > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	/* Half logo / half text */
	.half-logo-half-text__logo {
		opacity: 0;
		visibility: hidden;
		transform: translateX( -60px );
	}

	.half-logo-half-text__text__wrapper > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	/* Logo showcase */
	.logo-showcase--half-text-half-logo .logo-showcase__logos-col {
		opacity: 0;
		visibility: hidden;
		transform: translateX( 80px );
	}

	.logo-showcase--half-text-half-logo .logo-content__text > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	/* Tabbed content — headings and panel items use visibility: hidden;
	   tab buttons use opacity-only to stay layout- and keyboard-accessible. */
	.tabbed-content h2 {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	.tabbed-content .tab-accordion__tab {
		opacity: 0;
		transform: translateY( -20px );
	}

	.tabbed-content .tab-accordion__panel.is-active .tabbed-item {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 24px );
	}

	/* Image cards — .image-card initial offsets are random so they stay in JS */
	.image-cards .image-cards__title > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	.image-cards .image-cards__headlines .btn-group {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 20px );
	}

	/* Image collage — img03/04/05 offsets are random so they stay in JS */
	.image-collage-text .image-collage__image01,
	.image-collage-text .image-collage__image02 {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 40px );
	}

	.image-collage-text .image-collage__shape {
		opacity: 0;
		visibility: hidden;
		transform: scale( 0.88 );
		transform-origin: center center;
	}

	.image-collage-text .image-collage__content > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	/* Testimonials — slider uses opacity-only so Slick can measure layout */
	.testimonials .testimonials__heading > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	.testimonials .testimonials-slider {
		opacity: 0;
		transform: translateY( 40px );
	}

	/* Cards (news / blog) */
	.cards .cards__heading > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	.cards .cards-slide:not( .slick-cloned ) {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 40px );
	}

	.cards .cards-grid > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( -40px );
	}

	.cards .cards__bottom-content {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 20px );
	}

	/* Event cards */
	.event-cards .event-cards__heading > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	.event-cards .event-card-slider-for {
		opacity: 0;
		visibility: hidden;
		transform: translateX( -50px );
	}

	.event-cards .event-card-slider-nav {
		opacity: 0;
		visibility: hidden;
	}

	/* WYSIWYG */
	.wysiwyg .wysiwyg__wrapper > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 28px );
	}

	/* Image buttons — headline elements; card offsets are random so they stay in JS */
	.image-buttons .image-buttons__title > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	.image-buttons .image-buttons__headlines .btn {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 20px );
	}

	/* Tabbed icons buttons */
	.tabbed-icons-buttons .tabbed-icons-buttons__heading > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 24px );
	}

	/* Image text */
	.image-text .image-text__text {
		opacity: 0;
		visibility: hidden;
		transform: translateX( -60px );
	}

	.image-text .image-text__img,
	.image-text .image-text__top-img,
	.image-text .image-text__bottom-img {
		opacity: 0;
		visibility: hidden;
		transform: translateX( 60px );
	}

	/* CTA Banner */
	.cta-banner .cta__wrapper > :not( .cta-graphic-left ):not( .cta-graphic-right ) {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	.cta-banner .cta-graphic-left {
		opacity: 0;
		visibility: hidden;
		transform: translateX( -50px );
	}

	.cta-banner .cta-graphic-right {
		opacity: 0;
		visibility: hidden;
		transform: translateX( 50px );
	}

	/* Accordion */
	.fx-accordion .fx-accordion__heading > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	.fx-accordion .fx-accordion__panel {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 28px );
	}

	/* Contact block */
	.contact-block .contact-block__heading > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	.contact-block .gform_wrapper {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 28px );
	}

	/* CTA */
	.cta .cta__circle-logo {
		opacity: 0;
		visibility: hidden;
		transform: scale( 0.75 );
		transform-origin: center center;
	}

	.cta .cta__mobile-image {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 48px );
	}

	.cta .cta__circle-image {
		opacity: 0;
		visibility: hidden;
		transform: scale( 0.8 );
		transform-origin: center center;
	}

	.cta .cta__circle-icon {
		opacity: 0;
		visibility: hidden;
		transform: scale( 0.65 ) rotate( -25deg );
		transform-origin: center center;
	}

	.cta .cta__robot-image {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 40px );
	}

	.cta .cta__content > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

	/* Cards icons — top-content heading; card offsets are random so they stay in JS */
	.cards-icons .cards-icons__top-content > * {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 32px );
	}

}