/*
 * Evora Widgets – Layer Stack
 * ─────────────────────────────────────────────────────────────────────────────
 * Renders N copies of a single SVG shape spread diagonally.
 *
 * CSS custom properties (set via Elementor controls):
 *   --ls-shape-size        Width/height of each shape      (default: 160px)
 *   --ls-fill-color        Shape fill color                (default: #ffffff)
 *   --ls-default-opacity   Resting opacity (25% in design) (default: 25%)
 *   --ls-active-opacity    Clicked-layer opacity            (default: 100%)
 *
 * State classes managed by layer-stack.js:
 *   .is-visible      Layer has animated to its spread position
 *   .is-active       Layer was clicked — stays fully opaque
 *   .is-interactive  Entrance complete; fast hover transitions are live
 */

/* ─── Widget root ─────────────────────────────────────────────────────────── */

.evora-layer-stack {
	--ls-shape-size: 160px;
	--ls-fill-color: #ffffff;
	--ls-default-opacity: 25%;
	--ls-active-opacity: 100%;

	display: inline-block;
	position: relative;
}

/* ─── Stage ──────────────────────────────────────────────────────────────── */

.evora-layer-stack__stage {
	position: relative;
	overflow: visible; /* Spread layers overflow — parent can add padding */
}

/* ─── Layers ─────────────────────────────────────────────────────────────── */

/*
 * Layer 0 (back, never offset) is position:relative — it anchors stage height.
 * All other layers are position:absolute stacked on top of it.
 * JS sets transform and opacity directly; CSS drives the transition timing.
 */
.evora-layer-stack__layer {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none; /* Disabled until layer is visible */
	will-change: transform, opacity;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
}

/* Back layer — position:relative so the stage adopts its height */
.evora-layer-stack__layer:first-child {
	position: relative;
}

/* ─── Visible state (post-entrance) ──────────────────────────────────────── */

.evora-layer-stack__layer.is-visible {
	opacity: var(--ls-default-opacity, 25%);
	pointer-events: auto;
}

/* ─── Active (clicked) ───────────────────────────────────────────────────── */

.evora-layer-stack__layer.is-active {
	opacity: var(--ls-active-opacity, 100%) !important;
}

/* ─── SVG shape ──────────────────────────────────────────────────────────── */

.evora-ls-shape {
	display: block;
	width: var(--ls-shape-size, 160px);
	height: var(--ls-shape-size, 160px);
	pointer-events: none; /* Parent layer element owns hit-testing */
}