/**
 * GT Telescope Hero Styles
 *
 * Scroll-driven gallery zoom effect with hero reveal.
 *
 * @package GT_Animations_Pro
 * @since 1.8.0
 */

/* ===========================
   CSS Custom Properties
   =========================== */

.gt-telescope-hero {
	--gt-progress: 0;
	--gt-parallax-x: 0;
	--gt-parallax-y: 0;
	--gt-split-distance: 66vw;
	--gt-aperture-blur: 2px;
	--gt-focus-color: #5046E5;
}

/* ===========================
   Base Styles
   =========================== */

/* Ensure Elementor wrapper has full height */
.elementor-widget-gt-telescope-hero {
	width: 100%;
}

.elementor-widget-gt-telescope-hero > .elementor-widget-container {
	width: 100%;
}

.gt-telescope-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
	background-color: #000;
}

/* Hero Image Disabled Mode - aperture/hero hidden, background controlled by JS */
.gt-telescope-hero[data-hero-disabled="true"] .gt-telescope-hero__aperture,
.gt-telescope-hero[data-hero-disabled="true"] .gt-telescope-hero__hero-bg {
	display: none !important;
}

/* FOUC Prevention - hide until animation is ready */
.gt-telescope-hero.gt-animation-hidden {
	opacity: 0;
}

.gt-telescope-hero.gt-animation-ready {
	opacity: 1;
}

/* ===========================
   Hero Text
   =========================== */

.gt-telescope-hero__text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	display: flex;
	white-space: nowrap;
	pointer-events: none;
	margin: 0;
	padding: 0;
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 600;
}

.gt-telescope-hero__text-left,
.gt-telescope-hero__text-right {
	display: inline-block;
	/* will-change removed to prevent GPU thrashing */
	transition: none;
}

/* Left/Right split mode (default) */
.gt-telescope-hero[data-split-mode="left_right"] .gt-telescope-hero__text-left {
	transform: translate3d(calc(var(--gt-progress) * var(--gt-split-distance) * -1), 0, 0);
	padding-right: 0.25em;
}

.gt-telescope-hero[data-split-mode="left_right"] .gt-telescope-hero__text-right {
	transform: translate3d(calc(var(--gt-progress) * var(--gt-split-distance)), 0, 0);
}

/* Top/Bottom split mode */
.gt-telescope-hero[data-split-mode="top_bottom"] .gt-telescope-hero__text {
	flex-direction: column;
	align-items: center;
}

.gt-telescope-hero[data-split-mode="top_bottom"] .gt-telescope-hero__text-left {
	transform: translate3d(0, calc(var(--gt-progress) * -50vh), 0);
	padding-right: 0;
	padding-bottom: 0.25em;
}

.gt-telescope-hero[data-split-mode="top_bottom"] .gt-telescope-hero__text-right {
	transform: translate3d(0, calc(var(--gt-progress) * 50vh), 0);
}

/* Diagonal split mode */
.gt-telescope-hero[data-split-mode="diagonal"] .gt-telescope-hero__text-left {
	transform: translate3d(
		calc(var(--gt-progress) * var(--gt-split-distance) * -1),
		calc(var(--gt-progress) * -30vh),
		0
	);
	padding-right: 0.25em;
}

.gt-telescope-hero[data-split-mode="diagonal"] .gt-telescope-hero__text-right {
	transform: translate3d(
		calc(var(--gt-progress) * var(--gt-split-distance)),
		calc(var(--gt-progress) * 30vh),
		0
	);
}

/* Fade text mode - simple opacity fade */
.gt-telescope-hero[data-text-mode="fade"] .gt-telescope-hero__text {
	opacity: calc(1 - var(--gt-progress) * 1.5);
}

.gt-telescope-hero[data-text-mode="fade"] .gt-telescope-hero__text-left,
.gt-telescope-hero[data-text-mode="fade"] .gt-telescope-hero__text-right {
	transform: none !important;
	padding-right: 0;
}

/* Remain text mode - text stays visible throughout, above video/overlay */
.gt-telescope-hero[data-text-mode="remain"] .gt-telescope-hero__text,
.gt-telescope-hero__text--remain {
	z-index: 25; /* Above overlay (20) and video (15) */
	opacity: 1 !important;
	visibility: visible !important;
	transform: translate(-50%, -50%) !important; /* Stay centered, no animation */
}

/* Remain mode - override locked state (text stays visible) */
.gt-telescope-hero.gt-telescope-locked[data-text-mode="remain"] .gt-telescope-hero__text {
	opacity: 1 !important;
	visibility: visible !important;
}

/* When text remains with overlay - overlay is background-only, no need for content z-index adjustments */
.gt-telescope-hero__overlay--bg-only {
	pointer-events: none;
}

/* Template text mode - uses separate class to avoid conflicts with base text styles */
.gt-telescope-hero__text-template {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	/* Fade based on scroll progress */
	opacity: calc(1 - var(--gt-progress) * 1.5);
}

/* Mobile text adjustments */
@media (max-width: 768px) {
	.gt-telescope-hero__text {
		font-size: clamp(1.5rem, 9vw, 3rem);
	}

	.gt-telescope-hero[data-split-mode="left_right"] .gt-telescope-hero__text-left {
		transform: translate3d(calc(var(--gt-progress) * -100vw), 0, 0);
	}

	.gt-telescope-hero[data-split-mode="left_right"] .gt-telescope-hero__text-right {
		transform: translate3d(calc(var(--gt-progress) * 100vw), 0, 0);
	}
}

/* ===========================
   Gallery
   =========================== */

.gt-telescope-hero__gallery {
	position: absolute;
	inset: 0;
	perspective: 100vh;
	z-index: 5;
	pointer-events: none;
}

.gt-telescope-hero__gallery-item {
	position: absolute;
	/* will-change removed to prevent GPU thrashing */
	pointer-events: auto;
	overflow: hidden;
}

.gt-telescope-hero__gallery-item,
.gt-telescope-hero__gallery-item img,
.gt-telescope-hero__gallery-item a {
	border-radius: inherit;
}

.gt-telescope-hero__gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.gt-telescope-hero__gallery-item a {
	display: block;
	text-decoration: none;
}

/* Gallery item hover overlay */
.gt-telescope-hero__gallery-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: transparent;
	pointer-events: none;
	transition: background-color 0.3s ease;
	border-radius: inherit;
}

/* Focus styles for linked images */
.gt-telescope-hero__gallery-item a:focus {
	outline: 2px solid var(--gt-focus-color);
	outline-offset: 2px;
}

.gt-telescope-hero__gallery-item a:focus:not(:focus-visible) {
	outline: none;
}

.gt-telescope-hero__gallery-item a:focus-visible {
	outline: 2px solid var(--gt-focus-color);
	outline-offset: 2px;
}

/* Mouse parallax effect on gallery items */
.gt-telescope-hero--parallax .gt-telescope-hero__gallery-item {
	transform: translate3d(
		calc(var(--gt-parallax-x) * var(--z-depth, 0.5)),
		calc(var(--gt-parallax-y) * var(--z-depth, 0.5)),
		0
	);
}

/* ===========================
   Aperture (Telescope Effect)
   =========================== */

.gt-telescope-hero__aperture {
	position: absolute;
	inset: 0;
	z-index: 2;
	transform: scale(var(--gt-progress));
	/* will-change removed to prevent GPU thrashing */
	pointer-events: none;
}

.gt-telescope-hero__aperture-layer {
	position: absolute;
	inset: 0;
	/* will-change removed */
	filter: blur(calc((1 - var(--gt-progress)) * var(--gt-aperture-blur)));
}

.gt-telescope-hero__aperture-layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero background (behind aperture) - hidden until aperture reveals it */
.gt-telescope-hero__hero-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.3s ease;
	/* will-change removed */
}

/* Show hero-bg only when progress reaches ~80% */
.gt-telescope-hero.gt-hero-revealed .gt-telescope-hero__hero-bg {
	opacity: 1;
}

.gt-telescope-hero__hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===========================
   Masked Aperture Mode
   =========================== */

/*
 * Masked mode: Uses a custom PNG mask (uploaded by user) to create
 * shaped reveals like the original demo's crab silhouette effect.
 * The mask is applied via inline styles in PHP.
 */

/* No additional CSS needed - mask is applied inline via PHP */
/* The blur on layers creates visible edges around the masked shape */

/* ===========================
   Overlay
   =========================== */

.gt-telescope-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	/* will-change removed */
	pointer-events: none;
}

.gt-telescope-hero__overlay[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}

.gt-telescope-hero__overlay--blur {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Elementor templates inside overlay should be full width */
.gt-telescope-hero__overlay > .elementor {
	width: 100%;
}

.gt-telescope-hero__overlay-content {
	text-align: center;
	max-width: 800px;
	padding: 2rem;
}

.gt-telescope-hero__overlay-heading {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 5vw, 4rem);
	color: #fff;
}

.gt-telescope-hero__overlay-subheading {
	margin: 0 0 2rem;
	font-size: clamp(1rem, 2vw, 1.5rem);
	color: rgba(255, 255, 255, 0.8);
}

.gt-telescope-hero__overlay-button {
	display: inline-block;
	padding: 1rem 2.5rem;
	background-color: #fff;
	color: #000;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gt-telescope-hero__overlay-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.gt-telescope-hero__overlay-button:focus {
	outline: 2px solid var(--gt-focus-color);
	outline-offset: 2px;
}

/* ===========================
   Video
   =========================== */

.gt-telescope-hero__video-container {
	position: absolute;
	inset: 0;
	z-index: 15;
}

.gt-telescope-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gt-telescope-hero__video-embed {
	position: relative;
	width: 100%;
	height: 100%;
}

.gt-telescope-hero__video-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* ===========================
   Hover Effects
   =========================== */

/* Scale hover */
.gt-telescope-hero[data-hover="scale"] .gt-telescope-hero__gallery-item {
	transition: transform 0.3s ease;
}

.gt-telescope-hero[data-hover="scale"] .gt-telescope-hero__gallery-item:hover {
	transform: scale(var(--gt-hover-scale, 1.1));
	z-index: 10;
}

/* Lift hover */
.gt-telescope-hero[data-hover="lift"] .gt-telescope-hero__gallery-item {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gt-telescope-hero[data-hover="lift"] .gt-telescope-hero__gallery-item:hover {
	transform: translateY(calc(var(--gt-hover-lift, -10px) * -1));
	z-index: 10;
}

.gt-telescope-hero[data-hover="lift"] .gt-telescope-hero__gallery-item:hover img {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Glow hover */
.gt-telescope-hero[data-hover="glow"] .gt-telescope-hero__gallery-item {
	transition: filter 0.3s ease;
}

.gt-telescope-hero[data-hover="glow"] .gt-telescope-hero__gallery-item:hover img {
	filter: brightness(1.1);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* 3D Tilt hover - handled by JS */
.gt-telescope-hero[data-hover="tilt"] .gt-telescope-hero__gallery-item {
	transition: transform 0.1s ease-out;
}

/* ===========================
   Accessibility
   =========================== */

/* Screen reader only */
.gt-sr-only,
.gt-telescope-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus indicator for keyboard nav */
.gt-telescope-hero:focus {
	outline: none;
}

.gt-telescope-hero:focus-visible {
	outline: 3px solid var(--gt-focus-color);
	outline-offset: -3px;
}

/* Live region for announcements */
#gt-telescope-live-region {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ===========================
   Reduced Motion
   =========================== */

@media (prefers-reduced-motion: reduce) {
	.gt-telescope-hero,
	.gt-telescope-hero *,
	.gt-telescope-hero *::before,
	.gt-telescope-hero *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	/* Show final state immediately */
	.gt-telescope-hero.gt-reduced-motion {
		--gt-progress: 1;
	}

	.gt-telescope-hero.gt-reduced-motion .gt-telescope-hero__gallery {
		display: none;
	}

	.gt-telescope-hero.gt-reduced-motion .gt-telescope-hero__aperture {
		transform: scale(1);
	}

	.gt-telescope-hero.gt-reduced-motion .gt-telescope-hero__aperture-layer {
		filter: blur(0);
	}
}

/* ===========================
   Responsive Visibility
   =========================== */

/*
 * Hide gallery items per device
 * Breakpoint values are generated dynamically from Elementor settings
 * via get_responsive_visibility_css() in widget.php
 */

/* Elementor Editor Preview Support - All Breakpoints */
.elementor-device-desktop .gt-telescope-hero__gallery-item.gt-hide-desktop {
	display: none !important;
}

.elementor-device-widescreen .gt-telescope-hero__gallery-item.gt-hide-widescreen {
	display: none !important;
}

.elementor-device-laptop .gt-telescope-hero__gallery-item.gt-hide-laptop {
	display: none !important;
}

.elementor-device-tablet_extra .gt-telescope-hero__gallery-item.gt-hide-tablet_extra {
	display: none !important;
}

.elementor-device-tablet .gt-telescope-hero__gallery-item.gt-hide-tablet {
	display: none !important;
}

.elementor-device-mobile_extra .gt-telescope-hero__gallery-item.gt-hide-mobile_extra {
	display: none !important;
}

.elementor-device-mobile .gt-telescope-hero__gallery-item.gt-hide-mobile {
	display: none !important;
}

/* ===========================
   Mobile Behaviors
   =========================== */

/* Hide widget on mobile */
.gt-telescope-hero.gt-mobile-hide {
	display: none;
}

/* Static hero on mobile */
.gt-telescope-hero.gt-mobile-static {
	--gt-progress: 1;
}

.gt-telescope-hero.gt-mobile-static .gt-telescope-hero__gallery {
	display: none;
}

.gt-telescope-hero.gt-mobile-static .gt-telescope-hero__text,
.gt-telescope-hero.gt-mobile-static .gt-telescope-hero__text-template {
	display: none;
}

.gt-telescope-hero.gt-mobile-static .gt-telescope-hero__aperture {
	transform: scale(1);
}

.gt-telescope-hero.gt-mobile-static .gt-telescope-hero__aperture-layer {
	filter: blur(0);
}

/* Tap to reveal indicator */
.gt-telescope-hero.gt-mobile-tap::after {
	content: '';
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 40px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	animation: gt-tap-pulse 2s infinite;
	z-index: 100;
	pointer-events: none;
}

@keyframes gt-tap-pulse {
	0%, 100% {
		transform: translateX(-50%) scale(1);
		opacity: 1;
	}
	50% {
		transform: translateX(-50%) scale(1.2);
		opacity: 0.5;
	}
}

/* ===========================
   Locked State (after reveal)
   =========================== */

.gt-telescope-hero.gt-telescope-locked .gt-telescope-hero__gallery-item {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.gt-telescope-hero.gt-telescope-locked:not([data-text-mode="remain"]) .gt-telescope-hero__text-left,
.gt-telescope-hero.gt-telescope-locked:not([data-text-mode="remain"]) .gt-telescope-hero__text-right {
	opacity: 0 !important;
}

/* Locked state for fade/template text modes (not remain) */
.gt-telescope-hero.gt-telescope-locked:not([data-text-mode="remain"]) .gt-telescope-hero__text,
.gt-telescope-hero.gt-telescope-locked .gt-telescope-hero__text-template {
	opacity: 0 !important;
}

.gt-telescope-hero.gt-telescope-locked .gt-telescope-hero__hero-bg {
	opacity: 1 !important;
	clip-path: inset(0% 0 0 0) !important;
	transform: scale(1) !important;
}

.gt-telescope-hero.gt-telescope-locked .gt-telescope-hero__aperture-layer {
	transform: scale(1) !important;
	filter: blur(0px) !important;
}

.gt-telescope-hero.gt-telescope-locked .gt-telescope-hero__aperture {
	transform: scale(1) !important;
}

.gt-telescope-hero.gt-telescope-locked .gt-telescope-hero__overlay {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}

/* ===========================
   Debug Mode
   =========================== */

.gt-telescope-hero[data-gt-show-progress]::before {
	content: 'Progress: ' attr(data-progress);
	position: fixed;
	bottom: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	padding: 8px 12px;
	font-size: 12px;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	z-index: 9999;
	border-radius: 4px;
	pointer-events: none;
}

/* Progress bar indicator */
.gt-telescope-hero[data-gt-show-progress]::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: calc(var(--gt-progress) * 100%);
	background: linear-gradient(90deg, #5046E5, #8B80FF);
	z-index: 9999;
	pointer-events: none;
}

/* ===========================
   Page Transitions
   =========================== */

.gt-page-transition-fade {
	transition: opacity 0.5s ease;
}

.gt-page-transition-slide {
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.gt-page-transition-zoom {
	transition: transform 0.5s ease, opacity 0.5s ease;
}

/* ===========================
   Editor Preview
   =========================== */

.elementor-editor-active .gt-telescope-hero {
	/* Static preview in editor */
	--gt-progress: 0;
}

.elementor-editor-active .gt-telescope-hero .gt-telescope-hero__gallery-item {
	/* Make items visible for positioning */
	opacity: 1 !important;
	visibility: visible !important;
}

.elementor-editor-active .gt-telescope-hero .gt-telescope-hero__aperture {
	/* Hide aperture in editor to focus on gallery positioning */
	opacity: 0.3;
}

/* Editor info tooltip */
.elementor-editor-active .gt-telescope-hero::after {
	content: 'Preview animation on frontend';
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 8px 16px;
	font-size: 12px;
	border-radius: 4px;
	z-index: 100;
	pointer-events: none;
}

/* ===========================
   T5b FIX: Mobile Tap Trigger
   Offset tap area up 40px
   =========================== */

.gt-telescope-hero.gt-tap-to-reveal {
	cursor: pointer;
}

/* Create tap indicator with offset */
.gt-telescope-hero.gt-tap-to-reveal::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 40px; /* Shrink bottom by 40px to move effective tap area up */
	z-index: 50;
	pointer-events: auto;
}