/**
 * Unlimited Elements — Parallax 3D Content Card: demo-skin #environments hover parity.
 *
 * UE script (ue-parallax-3d-content-card.js) sets inline transform on
 * .ue-3d-content-card-content and .ue-3d-content-card-img — do not override those
 * with CSS transform on the same nodes. Lift + reveals use children / filter / opacity.
 *
 * Optional Advanced → CSS classes on the Elementor widget:
 * - cw-ue-env--accent-red  → title + overlay tint use primary red
 * - cw-ue-env--accent-cyan → title + overlay use secondary cyan (default if neither)
 * - gsap-env-card          → include in mobile scroll reveal (see cw-motion.js)
 *
 * Created: 2026-03-27 · Last modified: 2026-03-27 (focus ring + title balance parity with native env cards)
 *
 * @package Compression_Works
 */

/* --- Card shell + full-bleed image (demo #environments) --- */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-wrap {
	position: relative;
	min-height: 450px;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.4s ease;
	isolation: isolate;
}

/* Photo fills the tile (UE may output class on img or a bare <img> child). */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-wrap > .ue-3d-content-card-img,
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-wrap > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	z-index: 0;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-wrap > div.ue-3d-content-card-img {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Vertical scrim so type stays readable (under mix overlay) */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(
		to top,
		var(--cw-surface-2, #1c1c1c) 0%,
		color-mix(in srgb, var(--cw-surface-2, #1c1c1c) 50%, transparent) 50%,
		transparent 100%
	);
}

/* Copy column over the image */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2rem;
	z-index: 5;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 40%;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .ue-3d-content-card-wrap {
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3),
		inset 0 0 60px color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 6%, transparent);
}

/* Color mix overlay — demo ~700ms (above scrim, below text) */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.7s ease;
	mix-blend-mode: overlay;
	border-radius: inherit;
	background: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 20%, transparent);
}

.elementor-widget-ucaddon_parallax_3d_content_card.cw-ue-env--accent-red .ue-3d-content-card-wrap::before {
	background: color-mix(in srgb, var(--cw-accent-primary, #dc2626) 20%, transparent);
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .ue-3d-content-card-wrap::before {
	opacity: 1;
}

/* Image: grayscale + zoom on hover — avoid `transform` on the same node if UE sets inline translate;
   scale via separate wrapper when possible; here we only filter/opacity on img. */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-wrap > .ue-3d-content-card-img,
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-wrap > img {
	transition: filter 0.5s ease, opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
	filter: grayscale(1);
	opacity: 0.6;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .ue-3d-content-card-wrap > .ue-3d-content-card-img,
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .ue-3d-content-card-wrap > img {
	filter: grayscale(0);
	opacity: 0.9;
}

/* Content stack: lift each direct child (demo group-hover:-translate-y-4 on whole column) */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content > * {
	transition: transform 0.5s ease-out, opacity 0.5s ease, color 0.5s ease;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .ue-3d-content-card-content > * {
	transform: translateY(-1rem);
}

/* Title always visible; hover accent — demo title color transition */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-widget-heading {
	opacity: 1;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-heading-title {
	color: #fff;
	transition: color 0.5s ease;
}

.elementor-widget-ucaddon_parallax_3d_content_card:not(.cw-ue-env--accent-red):not(.cw-ue-env--accent-cyan)
	.ue-3d-content-card:hover
	.elementor-heading-title {
	color: var(--cw-accent-secondary, #00b7fa);
}

.elementor-widget-ucaddon_parallax_3d_content_card.cw-ue-env--accent-red .ue-3d-content-card:hover .elementor-heading-title {
	color: var(--cw-accent-primary, #dc2626);
}

.elementor-widget-ucaddon_parallax_3d_content_card.cw-ue-env--accent-cyan .ue-3d-content-card:hover .elementor-heading-title {
	color: var(--cw-accent-secondary, #00b7fa);
}

/* Icon box (optional Elementor icon widget) — demo keeps icon visible; gradient fill on hover */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-widget-icon {
	opacity: 1;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-icon-box-icon,
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-view-stacked .elementor-icon {
	transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .ue-3d-content-card-content .elementor-view-stacked .elementor-icon {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--cw-accent-primary, #dc2626) 35%, transparent),
		color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 35%, transparent)
	);
	border-color: transparent;
	color: #fff;
}

/* Subtitle / body — hidden until hover (demo opacity-0 → 100, 500ms) */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-widget-text-editor {
	opacity: 0;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .ue-3d-content-card-content .elementor-widget-text-editor {
	opacity: 1;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-widget-text-editor p {
	color: var(--cw-text-muted, #8090a8);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Plain <p> / <div> siblings if not in a text-editor widget */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content > p {
	margin: 0;
	opacity: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--cw-text-muted, #8090a8);
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .ue-3d-content-card-content > p {
	opacity: 1;
}

/* CTA */
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-widget-button {
	opacity: 0;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .ue-3d-content-card-content .elementor-widget-button {
	opacity: 1;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-button {
	font-weight: 700;
	font-size: 0.875rem;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-button-icon,
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card-content .elementor-button .elementor-icon {
	transition: transform 0.5s ease;
}

.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .elementor-button-icon,
.elementor-widget-ucaddon_parallax_3d_content_card .ue-3d-content-card:hover .elementor-button .elementor-icon {
	transform: translateX(4px);
}

/* Mobile “tap to reveal” — requires class gsap-env-card + cw-motion IntersectionObserver */
@media (max-width: 767px) {
	.ue-3d-content-card.gsap-env-card.is-content-revealed .ue-3d-content-card-wrap::before {
		opacity: 1;
	}

	.ue-3d-content-card.gsap-env-card.is-content-revealed .ue-3d-content-card-img,
	.ue-3d-content-card.gsap-env-card.is-content-revealed img.ue-3d-content-card-img {
		filter: grayscale(0);
		opacity: 0.9;
	}

	.ue-3d-content-card.gsap-env-card.is-content-revealed .ue-3d-content-card-content > * {
		transform: translateY(-1rem);
	}

	.ue-3d-content-card.gsap-env-card.is-content-revealed .ue-3d-content-card-content .elementor-widget-text-editor,
	.ue-3d-content-card.gsap-env-card.is-content-revealed .ue-3d-content-card-content .elementor-widget-button,
	.ue-3d-content-card.gsap-env-card.is-content-revealed .ue-3d-content-card-content > p {
		opacity: 1;
	}

	.ue-3d-content-card.gsap-env-card.is-content-revealed .ue-3d-content-card-wrap {
		box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3),
			inset 0 0 60px color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 6%, transparent);
	}
}