/* ========================================
   CSS Custom Properties for Animation
   ======================================== */
:root {
	--animation-duration-fast: 0.3s;
	--animation-duration-normal: 0.6s;
	--animation-duration-slow: 0.8s;
	--animation-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--animation-easing-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--transform-distance: 50px;
	--transform-distance-large: 100px;
}

/* ========================================
   Reduced Motion Support
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ========================================
   Base Animation Styles (Mobile Hidden)
   ======================================== */
.prealoder-mask {
	display: none; /* Hidden on mobile by default */
}

/* ========================================
   Desktop Animation Styles (1025px+)
   ======================================== */
@media (min-width: 1025px) {
	/* Preloader Styles - Show by default on first visits */
	.prealoder-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #fff;
		z-index: 99999;
		display: flex; /* Show by default */
		align-items: center;
		justify-content: center;
		opacity: 1; /* Visible by default */
		will-change: opacity;
		visibility: visible;
	}
	
	/* Hide preloader when data attribute indicates it was already shown */
	html[data-preloader-shown="true"] .prealoder-mask {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transform: translateX(-100vw) !important;
	}
	
	/* Ensure preloader stays hidden when marked as hidden (repeat visits) */
	.prealoder-mask.preloader-hidden {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}
	
	.prealoder-logo {
		position: relative;
		opacity: 0;
		will-change: opacity;
	}
	
	.prealoder-logo svg {
		opacity: 0;
		transform: scale(0.8);
		will-change: opacity, transform;
	}
	
	.start-icon {
		opacity: 0;
		position: absolute;
		right: 0;
		will-change: opacity, right;
	}
	/* ========================================
	   Reusable Animation Classes
	   ======================================== */
	.fx-fade-up {
		opacity: 0;
		transform: translate3d(0, var(--transform-distance), 0);
		will-change: opacity, transform;
	}
	
	.fx-fade-down {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	.fx-fade-left {
		opacity: 0;
		transform: translate3d(calc(-1 * var(--transform-distance)), 0, 0);
		will-change: opacity, transform;
	}
	
	.fx-fade-right {
		opacity: 0;
		transform: translate3d(var(--transform-distance), 0, 0);
		will-change: opacity, transform;
	}
	
	.fx-scale-in {
		opacity: 0;
		transform: scale3d(0.8, 0.8, 1);
		will-change: opacity, transform;
	}
	
	.fx-scale-out {
		opacity: 0;
		transform: scale3d(1.2, 1.2, 1);
		will-change: opacity, transform;
	}

	/* ========================================
	   Header & Masthead Animations
	   ======================================== */
	.js-header-item {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	.masthead__text h1,
	.masthead__text h2,
	.masthead__text p {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	.btn-group {
		opacity: 0;
		will-change: opacity, transform;
	}

	.masthead__btn {
		opacity: 0;
		will-change: opacity;
	}
	
	/* ========================================
	   Image & Content Animations
	   ======================================== */
	.image-card-item:not(.image-card-item--404) {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	.js-image-buttons .image-buttons__title > *,
	.js-image-buttons .image-buttons__content > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	.js-image-cards .posts-width h2 {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	.js-image-cards .blog-post__item {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	.js-image-buttons .image-button-item {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	/* Image Button Title Pseudo-element Animation */
	.image-button__title {
		--before-scale: 0;
		--before-opacity: 0;
		position: relative;
		will-change: transform;
	}
	
	.image-button__title::before {
		opacity: var(--before-opacity);
		transition: transform 0.3s ease, opacity 0.3s ease;
		will-change: transform, opacity;
		transform: translate(0,-50%);
	}
	
	.js-full-width-image-text .home-full-width-image-text__wrap .sub-heading,
	.js-full-width-image-text .home-full-width-image-text__wrap h2,
	.js-full-width-image-text .full-width-image-text__content {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	.js-full-width-image-text .history-image {
		opacity: 0;
		transform: scale3d(0.8, 0.8, 1);
		will-change: opacity, transform;
	}
	
	.js-cta-bar {
		opacity: 0;
		transform: translate3d(-200px, 0, 0);
		will-change: opacity, transform;
	}
	
	.js-apps-content .apps-content__text > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	/* ========================================
	   CTA Banner Animations
	   ======================================== */
	.js-cta-banner .cta__content {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	.js-cta-banner .cta__image {
		opacity: 0;
		transform: translate3d(var(--transform-distance), 0, 0);
		will-change: opacity, transform;
	}
	
	.js-cta-banner .cta__social-media ul {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	

	/* ========================================
	   Testimonials Animations
	   ======================================== */
	.js-testimonials-animated .testimonials__right .testimonials__headlines > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	.js-testimonials-animated .testimonials__right .testimonial-item {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	.js-testimonials-animated .testimonials__right__wrap {
		opacity: 0;
		will-change: opacity;
	}
	
	.js-testimonials-animated .testimonials__left {
		opacity: 0;
		transform: translate3d(calc(-1 * var(--transform-distance)), 0, 0);
		will-change: opacity, transform;
	}

	.image-cards__headlines > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	/* ========================================
	   CTA & Floating Elements
	   ======================================== */
	.small-image-cta-bg {
		transform: scale3d(1.5, 1.5, 1);
		will-change: transform;
	}

	.small-image-cta__overlay > * {
		opacity: 0;
		transform: translate3d(calc(-1 * var(--transform-distance)), 0, 0);
		will-change: opacity, transform;
	}

	/* ========================================
	   Image-Text Layouts
	   ======================================== */
	.image-text__text {
		opacity: 0;
		transform: translate3d(-200px, 0, 0);
		will-change: opacity, transform;
	}

	.image-text__image {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
		will-change: opacity, transform;
	}

	.flex-opposite .image-text__image {
		transform: translate3d(-200px, 0, 0);
	}

	.flex-opposite .image-text__text {
		transform: translate3d(100%, 0, 0);
	}
	
	.best_place_icon {
		opacity: 0;
		transform: scale3d(0.8, 0.8, 1);
		will-change: opacity, transform;
	}
	/* ========================================
	   Tab & Accordion Animations
	   ======================================== */
	.tab-slider-top-content > *,
	.tab-accordion__tabs,
	.fade-reveal__item > *,
	.masthead--innerpage__content > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	.masthead--innerpage__image img,
	.fade-reveal__image {
		transform: scale3d(1.5, 1.5, 1);
		will-change: transform;
	}

	.full-width-image-text {
		overflow: hidden;
	}

	/* ========================================
	   Card & Icon Animations
	   ======================================== */
	.cards-icon__top-content > *,
	.content-bottom > *,
	.half-accordion-half-image__content__wrapper > *,
	.fx-accordion__top-content > *,
	.fx-accordion__panels > *,
	.js-team-member_content > *,
	.gradient-icon-cards__top-content > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	.cards-icon-item {
		opacity: 0;
		transform: translate3d(calc(-1 * var(--transform-distance)), 0, 0);
		will-change: opacity, transform;
	}

	.quick-links-item {
		opacity: 0;
		transform: scale3d(0.5, 0.5, 1);
		will-change: opacity, transform;
	}

	.half-accordion-half-image__image {
		opacity: 0;
		transform: translate3d(calc(-1 * var(--transform-distance)), 0, 0);
		will-change: opacity, transform;
	}

	.row-reverse .half-accordion-half-image__image {
		transform: translate3d(var(--transform-distance), 0, 0);
	}

	/* ========================================
	   3D Card Animations
	   ======================================== */
	.js-card-item {
		opacity: 0;
		transform: rotateY(180deg);
		perspective: 1000px;
		transform-style: preserve-3d;
		will-change: opacity, transform;
	}

	.js-cards__text > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	/* ========================================
	   Team Member Animations
	   ======================================== */
	.js-team-item {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance-large)), 0) scale3d(0.5, 0.5, 1);
		will-change: opacity, transform;
	}

	/* ========================================
	   Logo Slider Animations (Optional)
	   ======================================== */
	/*
	.logo-slider__heading {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	.logo-slider__item {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
		will-change: opacity, transform;
	}

	.logo-slider__item img {
		transition: transform var(--animation-duration-fast) var(--animation-easing);
		will-change: transform;
	}

	.logo-slider__item:hover img {
		transform: scale3d(1.05, 1.05, 1);
	}
	*/

	/* ========================================
	   Gradient Icon Cards
	   ======================================== */
	.gradient-icon-cards__top-content > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	.gradient-icon-cards-item {
		opacity: 0;
		transform: scale3d(0.8, 1, 1);
		will-change: opacity, transform;
	}

	.gradient-icon-cards__content-bottom > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	/* ========================================
	   Tabbed Accordion Animation Styles
	   ======================================== */
	.fx-accordion__top-content > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	.fx-tabbed-accordion__tabs > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	.fx-accordion__panels > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	/* ========================================
	   Half CTA Half Form Animations
	   ======================================== */
	.js-half-cta-half-form .half-cta-half-form__heading > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	.js-half-cta-half-form .half-cta-half-form__testimonial {
		opacity: 0;
		transform: translate3d(calc(-1 * var(--transform-distance)), 0, 0);
		will-change: opacity, transform;
	}
	
	.js-half-cta-half-form .half-cta-half-form__image {
		opacity: 0;
		transform: scale3d(1.2, 1.2, 1);
		will-change: opacity, transform;
	}
	
	.js-half-cta-half-form .half-cta-half-form__title > * {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}
	
	.js-half-cta-half-form .contact-block__wrapper {
		opacity: 0;
		transform: translate3d(var(--transform-distance), 0, 0);
		will-change: opacity, transform;
	}

	/* ========================================
	   Accordion Block Animation Styles
	   ======================================== */
	.fx-accordion__panel {
		opacity: 0;
		transform: translate3d(0, calc(-1 * var(--transform-distance)), 0);
		will-change: opacity, transform;
	}

	.fx-accordion__panel__toggle {
		transition: all 0.3s ease;
		will-change: transform, background-color, color;
	}

	.fx-accordion__panel__toggle:hover {
		transform: translateY(-2px);
	}

	.fx-accordion__panel__toggle::before,
	.fx-accordion__panel__toggle::after {
		transition: all 0.3s ease;
		will-change: transform, background-color;
	}

	/* Mobile-specific accordion animations */
	@media (max-width: 1024px) {
		.fx-accordion__panel__toggle:hover {
			transform: none; /* Disable hover effects on mobile */
		}
		
		.fx-accordion__panel__toggle {
			transition: background-color 0.3s ease, color 0.3s ease;
		}
	}

	/* ========================================
	   General Section Animation Initial States
	   ======================================== */
	/* Target .section-padding elements that don't have specific js- classes */
	.section-padding:not([class*="js-"]) h1,
	.section-padding:not([class*="js-"]) h2,
	.section-padding:not([class*="js-"]) h3,
	.section-padding:not([class*="js-"]) h4,
	.section-padding:not([class*="js-"]) h5,
	.section-padding:not([class*="js-"]) h6 {
		opacity: 0;
		transform: translate3d(0, var(--transform-distance), 0);
		will-change: opacity, transform;
	}

	.section-padding:not([class*="js-"]) p,
	.section-padding:not([class*="js-"]) .text-content,
	.section-padding:not([class*="js-"]) .description,
	.section-padding:not([class*="js-"]) .content {
		opacity: 0;
		transform: translate3d(0, var(--transform-distance), 0);
		will-change: opacity, transform;
	}

	.section-padding:not([class*="js-"]) img,
	.section-padding:not([class*="js-"]) .image,
	.section-padding:not([class*="js-"]) .featured-image {
		opacity: 0;
		transform: scale3d(0.8, 0.8, 1);
		will-change: opacity, transform;
	}

	.section-padding:not([class*="js-"]) a,
	.section-padding:not([class*="js-"]) button,
	.section-padding:not([class*="js-"]) .btn,
	.section-padding:not([class*="js-"]) .link {
		opacity: 0;
		transform: translate3d(0, var(--transform-distance), 0);
		will-change: opacity, transform;
	}

	.section-padding:not([class*="js-"]) li {
		opacity: 0;
		transform: translate3d(calc(-1 * var(--transform-distance)), 0, 0);
		will-change: opacity, transform;
	}

	.section-padding:not([class*="js-"]) form,
	.section-padding:not([class*="js-"]) .form-group,
	.section-padding:not([class*="js-"]) input,
	.section-padding:not([class*="js-"]) textarea,
	.section-padding:not([class*="js-"]) select {
		opacity: 0;
		transform: translate3d(0, var(--transform-distance), 0);
		will-change: opacity, transform;
	}

	.section-padding:not([class*="js-"]) .wp-block,
	.section-padding:not([class*="js-"]) .block-content,
	.section-padding:not([class*="js-"]) .acf-block {
		opacity: 0;
		transform: translate3d(0, var(--transform-distance), 0);
		will-change: opacity, transform;
	}

	

	/* Exclude elements that are already inside animated containers */
	.section-padding:not([class*="js-"]) [class*="js-"] h1,
	.section-padding:not([class*="js-"]) [class*="js-"] h2,
	.section-padding:not([class*="js-"]) [class*="js-"] h3,
	.section-padding:not([class*="js-"]) [class*="js-"] h4,
	.section-padding:not([class*="js-"]) [class*="js-"] h5,
	.section-padding:not([class*="js-"]) [class*="js-"] h6,
	.section-padding:not([class*="js-"]) [class*="js-"] p,
	.section-padding:not([class*="js-"]) [class*="js-"] img,
	.section-padding:not([class*="js-"]) [class*="js-"] a,
	.section-padding:not([class*="js-"]) [class*="js-"] button,
	.section-padding:not([class*="js-"]) [class*="js-"] .btn,
	.section-padding:not([class*="js-"]) [class*="js-"] li,
	.section-padding:not([class*="js-"]) [class*="js-"] form,
	.section-padding:not([class*="js-"]) [class*="js-"] {
		opacity: 1 !important;
		transform: none !important;
	}
	.js-wysiwyg .wysiwyg__wrapper > * {
		opacity: 0;
		transform: translate3d(0, var(--transform-distance), 0);
		will-change: opacity, transform;
	}

	/* ========================================
	   Performance Optimizations
	   ======================================== */
	/* Force GPU acceleration for animated elements */
	[class*="js-"],
	[class*="fx-"],
	.section-padding {
		backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* Optimize rendering for transform-heavy animations */
	.js-card-item,
	.js-team-item,
	.quick-links-item {
		transform-style: preserve-3d;
	}
}