/**
 * Operational Environments Cards (demo-skin #environments canonical shell).
 *
 * Last modified: 2026-05-02 (zones → operational stack: collapse top padding + border)
 *
 * @package CW_Elementor_Widgets
 */

/* Elementor flex containers often use overflow:hidden — clips 3D perspective and can trap hit-testing. */
.elementor-widget-cw-operational-environments,
.elementor-widget-cw-operational-environments .elementor-widget-container {
	overflow: visible;
}

/*
 * Card copy hover — scoped to this widget only (plain Environment cards widget keeps cw-environment-cards.css timings).
 * Section-intro lede parity: opacity 0 + y 24px → visible, ~0.8s, power3.out-style ease, 0.1s stagger (CTA after excerpt).
 */
.elementor-widget-cw-operational-environments .cw-env-card__excerpt {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	will-change: opacity, transform;
	transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
		transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay: 0s;
}

.elementor-widget-cw-operational-environments .cw-env-parallax:hover .cw-env-card__excerpt,
.elementor-widget-cw-operational-environments .cw-env-parallax:focus-within .cw-env-card__excerpt {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition-delay: 0s;
}

.elementor-widget-cw-operational-environments .cw-env-card__cta {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	will-change: opacity, transform;
	transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
		transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition-delay: 0s;
}

.elementor-widget-cw-operational-environments .cw-env-parallax:hover .cw-env-card__cta,
.elementor-widget-cw-operational-environments .cw-env-parallax:focus-within .cw-env-card__cta {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition-delay: 0.1s;
}

@media (max-width: 767px) {
	.elementor-widget-cw-operational-environments .cw-environment-section .gsap-env-card.is-content-revealed .cw-env-card__excerpt,
	.elementor-widget-cw-operational-environments .cw-environment-section .gsap-env-card.is-content-revealed .cw-env-card__cta {
		opacity: 1 !important;
		transform: translate3d(0, 0, 0) !important;
	}

	.elementor-widget-cw-operational-environments .cw-environment-section .gsap-env-card.is-content-revealed .cw-env-card__excerpt {
		transition-delay: 0s;
	}

	.elementor-widget-cw-operational-environments .cw-environment-section .gsap-env-card.is-content-revealed .cw-env-card__cta {
		transition-delay: 0.1s;
	}
}

/* opacity:0 cards do not receive pointer events; ensure full-card hit target once painted (GSAP sets opacity). */
.cw-operational-env-section .gsap-env-card {
	pointer-events: auto;
}

/* bg-novaDark parity: solid primary surface (demo rgb(var(--bg1)) → theme --cw-bg) */
.cw-operational-env-section.cw-environment-section {
	--cw-env-section-bg: var(--cw-bg, #0c0c0c);
	background: var(--cw-bg, #0c0c0c);
}

/* Subtle top/bottom tint (::before) — demo .section-premium-depth */
.cw-operational-env-section.section-premium-depth {
	position: relative;
}

.cw-operational-env-section.section-premium-depth::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 2%, transparent) 0%,
		transparent 45%,
		transparent 55%,
		color-mix(in srgb, var(--cw-accent, #ff4b55) 2%, transparent) 100%
	);
}

.cw-operational-env-section.section-premium-depth .cw-environment-inner {
	position: relative;
	z-index: 1;
}

/* Same rhythm as legacy .cw-environment-intro — guarantees gap above cards if Elementor CSS is stale. */
.cw-operational-env-section .cw-environment-inner > .cw-section-intro-outer {
	width: 100%;
	margin-bottom: var(--cw-env-intro-mb, clamp(3.5rem, 8vw, 5rem));
}

/* Card entrance: demo-skin y 100px + ST top 75% (scroll-reveal initOperationalEnvironmentCards) */
.cw-operational-env-section.cw-environment-section .gsap-env-card {
	opacity: 0;
	transform: translate3d(0, 100px, 0);
}

/* prefers-reduced-motion: Operational opts out via data-cw-ignore-reduced-motion (see cw-environment-cards.css). */

/*
 * Nested Section intro: cw-section-intro.css shows copy at reduce globally; this widget ignores reduce on the section,
 * so restore hidden start states for GSAP (matches non-reduce block in cw-section-intro.css).
 */
@media (prefers-reduced-motion: reduce) {
	.cw-operational-env-section[data-cw-ignore-reduced-motion="1"]
		.cw-section-intro.gsap-section-header
		.cw-section-intro__heading.split-reveal-heading
		.split-word {
		opacity: 0;
		transform: translate3d(0, 115%, 0);
	}

	.cw-operational-env-section[data-cw-ignore-reduced-motion="1"]
		.cw-section-intro.gsap-section-header
		.cw-section-intro__description
		p,
	.cw-operational-env-section[data-cw-ignore-reduced-motion="1"]
		.cw-section-intro.gsap-section-header
		.cw-section-intro__description
		a,
	.cw-operational-env-section[data-cw-ignore-reduced-motion="1"]
		.cw-section-intro.gsap-section-header
		.cw-section-intro__description
		button {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}
}

.elementor-editor-active .cw-operational-env-section.cw-environment-section .gsap-env-card {
	opacity: 1;
	transform: none;
}

div.cw-env-card--modal-trigger:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 70%, #fff);
	border-radius: 26px;
	outline-offset: 4px;
}

/*
 * Pair with cw-zones-device above: strip double 8rem rhythm + redundant top rule line.
 */
.elementor-widget.elementor-widget-cw-zones-device + .elementor-widget-cw-operational-environments .cw-environment-section.cw-operational-env-section {
	--cw-env-section-pt: clamp(1.5rem, 3vw, 2.25rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: none;
}