/**
 * Divi Page Transitions Frontend Styles
 * With Performance Optimizations
 */

/* Performance Optimizations */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	#gsap-pt-loader,
	#gsap-pt-loader-element {
		transition-duration: 0.1s !important;
		animation-duration: 0.1s !important;
		/* Disable transforms for better performance */
		transform: none !important;
	}

	body.gsap-pt-awaiting-animation,
	html.gsap-pt-awaiting-animation body {
		opacity: 1 !important;
		transition: none !important;
		transform: none !important;
	}
}

/* Save Data Mode - Minimal animations */
@media (prefers-reduced-data: reduce) {
	#gsap-pt-loader {
		display: none !important;
	}

	body.gsap-pt-awaiting-animation,
	html.gsap-pt-awaiting-animation body {
		opacity: 1 !important;
	}
}

/* High Contrast Mode Support */

/* Enhanced Critical CSS for Performance */
#gsap-pt-loader {
	/* Hardware acceleration */
	will-change: opacity, visibility;
	/* Improved rendering */
	backface-visibility: hidden;
	perspective: 1000px;
}

#gsap-pt-loader-element {
	/* Hardware acceleration */
	will-change: transform, opacity, clip-path;
	/* Improved rendering */
	backface-visibility: hidden;
	/* Better performance on mobile */
	transform-style: preserve-3d;
}

/* Performance-optimized body states */
body.gsap-pt-awaiting-animation {
	/* Prevent layout shifts */
	overflow: hidden;
	/* Hardware acceleration */
	will-change: opacity;
}

/* Low-end device optimizations */
@media (max-width: 768px) and (max-height: 1024px) {
	body.gsap-pt-low-end-device #gsap-pt-loader {
		display: none !important;
	}

	body.gsap-pt-low-end-device.gsap-pt-awaiting-animation {
		opacity: 1 !important;
	}
}

/* Loader Container */
#gsap-pt-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2147483647; /* Max z-index to sit above any theme element */
	display: block;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	/* Hardware acceleration */
	will-change: auto;
	backface-visibility: hidden;
	perspective: 1000px;
}

/* Loader Element - Base Styles */
#gsap-pt-loader-element {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, #667eea, #764ba2);
	/* Hardware acceleration */
	will-change: transform, opacity;
	backface-visibility: hidden;
	/* GPU compositing */
	transform-style: preserve-3d;
}

/* Animation Type: Slide (Horizontal) - DEFAULT */
#gsap-pt-loader-element.gsap-pt-slide {
	transform-origin: center right;
	transform: scaleX(0) translate3d(0,0,0);
}

/* Animation Type: Slide (Vertical) */
#gsap-pt-loader-element.gsap-pt-slide-vertical {
	transform-origin: top center;
	transform: scaleY(0) translate3d(0,0,0);
}

/* Animation Type: Fade */
#gsap-pt-loader-element.gsap-pt-fade {
	opacity: 0;
	transform: translate3d(0,0,0);
	will-change: opacity;
}

/* Animation Type: Radial Wipe */
#gsap-pt-loader-element.gsap-pt-radial {
	/* start hidden as a small circle at center */
	-webkit-clip-path: circle(0% at 50% 50%);
	clip-path: circle(0% at 50% 50%);
	will-change: clip-path;
}

/* Fallback overlay circle for radial wipe */
#gsap-pt-radial-circle {
	border-radius: 50%;
	will-change: transform;
	pointer-events: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0) scale(0);
	backface-visibility: hidden;
	z-index: 2;
	contain: layout paint size style;
}

/* Removed: Scale and Circle animation types for cleaner implementation */

/* Page Loading States */
body.gsap-pt-loading {
	overflow: hidden;
	/* Prevent layout shifts */
	position: relative;
}

body.gsap-pt-loaded {
	/* Normal state - animations complete */
	position: relative;
}

/* Hide content initially if animation is expected */
body.gsap-pt-awaiting-animation,
html.gsap-pt-awaiting-animation body {
	opacity: 0;
	/* Hardware acceleration for body */
	will-change: opacity;
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
}

body.gsap-pt-awaiting-animation .site-content,
body.gsap-pt-awaiting-animation .main-content,
body.gsap-pt-awaiting-animation #main,
body.gsap-pt-awaiting-animation #content,
body.gsap-pt-awaiting-animation .main,
body.gsap-pt-awaiting-animation .content,
body.gsap-pt-awaiting-animation #primary,
body.gsap-pt-awaiting-animation .et-main-area,
html.gsap-pt-awaiting-animation .site-content,
html.gsap-pt-awaiting-animation .main-content,
html.gsap-pt-awaiting-animation #main,
html.gsap-pt-awaiting-animation #content,
html.gsap-pt-awaiting-animation .main,
html.gsap-pt-awaiting-animation .content,
html.gsap-pt-awaiting-animation #primary,
html.gsap-pt-awaiting-animation .et-main-area {
	opacity: 0;
	visibility: hidden;
}

/* Always keep navigation visible */
body.gsap-pt-awaiting-animation .site-header,
body.gsap-pt-awaiting-animation .main-header,
body.gsap-pt-awaiting-animation .navigation,
body.gsap-pt-awaiting-animation #masthead,
body.gsap-pt-awaiting-animation .et_pb_menu,
html.gsap-pt-awaiting-animation .site-header,
html.gsap-pt-awaiting-animation .main-header,
html.gsap-pt-awaiting-animation .navigation,
html.gsap-pt-awaiting-animation #masthead,
html.gsap-pt-awaiting-animation .et_pb_menu {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Show content after animation starts */
body.gsap-pt-animation-active {
	opacity: 1;
}

body.gsap-pt-animation-active .site-content,
body.gsap-pt-animation-active .main-content,
body.gsap-pt-animation-active #main,
body.gsap-pt-animation-active #content,
body.gsap-pt-animation-active .main,
body.gsap-pt-animation-active .content,
body.gsap-pt-animation-active #primary,
body.gsap-pt-animation-active .et-main-area {
	opacity: 1;
	visibility: visible;
}

/* WordPress admin bar compatibility */
body.admin-bar #gsap-pt-loader {
	top: 32px;
	height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar #gsap-pt-loader {
		top: 46px;
		height: calc(100% - 46px);
	}
}

/* Transition Button Styles */
.gsap-pt-button {
	display: inline-block;
	padding: 12px 24px;
	background: linear-gradient(45deg, #667eea, #764ba2);
	color: white;
	text-decoration: none;
	border-radius: 25px;
	font-weight: 600;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.gsap-pt-button:hover {
	background: linear-gradient(45deg, #5a6fd8, #6b4d94);
	color: white;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.gsap-pt-button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

/* WordPress Theme Compatibility */

/* Twenty Twenty-One */
.wp-block-navigation__responsive-container-open body.gsap-pt-loading,
.wp-block-navigation__responsive-container-open body.gsap-pt-loaded {
	overflow: visible;
}

/* Elementor */
.elementor-kit-6 #gsap-pt-loader {
	z-index: 999999;
}

/* Gutenberg Block Editor Compatibility */
.wp-block {
	position: relative;
}

/* Ensure menu items trigger transitions correctly */
.menu-item a,
.nav-menu a,
.wp-block-navigation-item__content {
	position: relative;
}

/* Spinner element (masked by overlay via clip-path in JS) */
#gsap-pt-spinner {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border: 3px solid transparent;
	border-color: color-mix(in srgb, var(--gsap-pt-spinner-color, #ffffff), transparent 70%);
	border-top-color: var(--gsap-pt-spinner-color, #ffffff);
	border-radius: 50%;
	animation: gsapPTSpin 1s linear infinite;
	opacity: 0; /* will be controlled via JS */
	visibility: hidden; /* will be controlled via JS */
	z-index: 2147483647;
	pointer-events: none;
	will-change: clip-path, opacity, transform;
}

/* Hide spinner when disabled in settings */
#gsap-pt-loader.no-spinner #gsap-pt-spinner {
	display: none !important;
}

@keyframes gsapPTSpin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* WooCommerce Compatibility */
.woocommerce-page #gsap-pt-loader,
.woocommerce #gsap-pt-loader {
	z-index: 999999;
}

.woocommerce-cart #gsap-pt-loader,
.woocommerce-checkout #gsap-pt-loader {
	/* Lower z-index for cart/checkout to avoid interfering with modals */
	z-index: 99999;
}

/* Contact Form 7 compatibility */
.wpcf7-form {
	position: relative;
}

/* Yoast SEO breadcrumbs */
.yoast-breadcrumb {
	position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	#gsap-pt-loader-element {
		/* Ensure smooth performance on mobile */
		will-change: transform;
	}

	.gsap-pt-button {
		padding: 10px 20px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.gsap-pt-button {
		padding: 8px 16px;
		font-size: 13px;
	}
}

/* High contrast mode */
@media (prefers-contrast: high) {
	#gsap-pt-loader-element {
		background: #000000;
	}

	.gsap-pt-button {
		background: #000000;
		border: 2px solid #ffffff;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	#gsap-pt-loader-element {
		transition: transform 0.3s linear;
	}

	.gsap-pt-button {
		transition: none;
	}

	.gsap-pt-button:hover {
		transform: none;
	}
}

/* Print styles */
@media print {
	#gsap-pt-loader {
		display: none !important;
	}
}

/* RTL Support */
body.rtl #gsap-pt-loader-element {
	transform-origin: center left;
}

body.rtl #gsap-pt-loader-element[data-direction="outro"] {
	transform-origin: center left;
}

body.rtl #gsap-pt-loader-element[data-direction="intro"] {
	transform-origin: center right;
}

/* Accessibility improvements */
#gsap-pt-loader[aria-hidden="false"] {
	/* Announce to screen readers when transitioning */
	position: fixed;
	z-index: 999999;
}

.gsap-pt-button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* WordPress specific fixes */

/* Fix for sticky headers */
.sticky-header {
	z-index: 1000;
}

/* Fix for floating elements */
.floating-element,
.fixed-element {
	z-index: 1000;
}

/* Smooth font rendering during transitions */
body.gsap-pt-loading * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Prevent layout shift during loading */
body.gsap-pt-loading img,
body.gsap-pt-loading iframe,
body.gsap-pt-loading video {
	opacity: 1;
}

/* Custom property for dynamic backgrounds */
:root {
	--gsap-pt-bg-color: linear-gradient(45deg, #667eea, #764ba2);
}

#gsap-pt-loader-element {
	background: var(--gsap-pt-bg-color);
}