/*
 * Evora Widgets – Section Reveal
 * ─────────────────────────────────────────────────────────────────────────────
 * Everything here is scoped to .unique-section, so it stays inert anywhere that
 * class is not present. Three effects:
 *
 *   1. Globe drift     Hovering anywhere in .unique-section pushes .layered-globe
 *                      right + down (transform: translate) and rotates it left.
 *                      transform is used — NOT the right/left offset — because
 *                      Elementor's own position rules outrank ours on those props.
 *
 *   2. Logo ↔ content  .layered-logo shows first; .layered-content is collapsed.
 *                      section-reveal.js adds .evora-engaged on the first real
 *                      click on the Layer Stack or a Loop widget: the logo
 *                      collapses (pure CSS, below) and the content expands (the
 *                      JS sets its measured height inline for an exact landing).
 *
 *   3. Button text     Off-white loop buttons get #0f0f0f text on hover / focus /
 *                      selected so they read on the light fill.
 *
 * Editor note: the swap is gated behind body:not(.elementor-editor-active) so the
 * Elementor editor preview shows BOTH logo and content for easy editing.
 *
 * Tunables — override on .unique-section (Elementor → Advanced → Custom CSS):
 *   --evora-globe-x | --evora-globe-y | --evora-globe-rot   globe drift + rotation
 *   --evora-reveal-dur                                       collapse / expand time
 *   --evora-fade-dur                                         opacity crossfade time
 */

.unique-section {
	--evora-globe-x: 20%; /* translateX on hover — positive = right (of the globe's own width) */
	--evora-globe-y: 20%; /* translateY on hover — positive = down  (of the globe's own height) */
	--evora-globe-rot: -15deg;
	--evora-reveal-dur: 600ms;
	--evora-fade-dur: 400ms;
	--evora-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── 1. Globe drift on section hover ─────────────────────────────────────── */

.unique-section .layered-globe {
	transition: transform var(--evora-reveal-dur) var(--evora-ease);
	will-change: transform;
}

.unique-section:hover .layered-globe {
	transform: translate( var(--evora-globe-x), var(--evora-globe-y) ) rotate( var(--evora-globe-rot) );
}

/* ─── 2. Logo ↔ content swap ──────────────────────────────────────────────── */

.unique-section .layered-content {
	overflow: hidden;
	transition:
		max-height var(--evora-reveal-dur) var(--evora-ease),
		opacity var(--evora-fade-dur) ease;
}

/* The logo rests at a definite height so its collapse animates from a real value
   (a max-height transition needs a definite start, not `auto`) and fires purely
   from the .evora-engaged class — no JS measuring, so it can't silently no-op.
   Margin + padding are transitioned too so the logo's FULL vertical footprint
   collapses; on mobile a residual margin/padding was leaving a gap above the
   content. */
.unique-section .layered-logo {
	overflow: hidden;
	max-height: 240px;
	transition:
		max-height var(--evora-reveal-dur) var(--evora-ease),
		margin var(--evora-reveal-dur) var(--evora-ease),
		padding var(--evora-reveal-dur) var(--evora-ease),
		opacity var(--evora-fade-dur) ease;
}

/* The logo's flex parent collapses its gap when engaged, so the space between the
   collapsed logo and the content closes smoothly instead of lingering. */
.unique-section :has( > .layered-logo ) {
	transition:
		gap var(--evora-reveal-dur) var(--evora-ease),
		row-gap var(--evora-reveal-dur) var(--evora-ease);
}

/* Resting frontend state: content collapsed (logo stays open until engaged). */
body:not(.elementor-editor-active) .unique-section .layered-content {
	max-height: 0;
	opacity: 0;
}

/* Engaged: logo collapses its full footprint + fades (CSS); content fades in (JS
   also sets its measured max-height inline, then max-height:none + overflow:visible). */
body:not(.elementor-editor-active) .unique-section.evora-engaged .layered-logo {
	max-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

body:not(.elementor-editor-active) .unique-section.evora-engaged :has( > .layered-logo ) {
	gap: 0;
	row-gap: 0;
}

body:not(.elementor-editor-active) .unique-section.evora-engaged .layered-content {
	opacity: 1;
}

/* ─── 3. Off-white loop button — dark text on hover / focus / selected ────── */

.unique-section .evora-btn-scope .bk-animated-button--offwhite .elementor-button:hover,
.unique-section .evora-btn-scope .bk-animated-button--offwhite .elementor-button:focus,
.unique-section .evora-btn-scope .bk-animated-button--offwhite.btn-active .elementor-button {
	color: #0f0f0f;
}

.unique-section .evora-btn-scope .bk-animated-button--offwhite .elementor-button:hover svg,
.unique-section .evora-btn-scope .bk-animated-button--offwhite .elementor-button:focus svg,
.unique-section .evora-btn-scope .bk-animated-button--offwhite.btn-active .elementor-button svg {
	fill: #0f0f0f;
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.unique-section .layered-globe,
	.unique-section .layered-logo,
	.unique-section .layered-content,
	.unique-section :has( > .layered-logo ) {
		transition: none;
	}

	.unique-section:hover .layered-globe {
		transform: none;
	}
}