/*
 * 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
 *                      straight down (transform: translateY). transform is used —
 *                      NOT a top/bottom offset — because Elementor's own position
 *                      rules outrank ours on those props.
 *
 *   2. Logo ↔ content  .layered-logo shrinks slightly on section hover (pure CSS).
 *                      .layered-content is collapsed at rest. section-reveal.js
 *                      adds .evora-engaged on the first real click on the Layer
 *                      Stack or a Loop widget: logo and content crossfade via
 *                      opacity only — max-height/margin/padding snap instantly
 *                      (no transition declared on them), so there is no
 *                      "accordion" box-collapse motion, just a clean fade.
 *
 *   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-y       globe downward drift on hover
 *   --evora-logo-shrink   logo scale on section hover
 *   --evora-fade-dur      opacity crossfade time
 */

.unique-section {
	--evora-globe-y: 20%; /* translateY on hover — positive = down (of the globe's own height) */
	--evora-logo-shrink: 0.85;
	--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-fade-dur) var(--evora-ease);
	will-change: transform;
}

.unique-section:hover .layered-globe {
	transform: translateY( var(--evora-globe-y) );
}

/* ─── 2. Logo shrink + logo ↔ content crossfade ───────────────────────────── */

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

.unique-section .layered-logo {
	overflow: hidden;
	transition:
		transform var(--evora-fade-dur) var(--evora-ease),
		opacity var(--evora-fade-dur) ease;
}

.unique-section:hover .layered-logo {
	transform: scale( var(--evora-logo-shrink) );
}

/* 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's footprint and content's footprint snap instantly (no transition
   declared on max-height/margin/padding) while only opacity crossfades. */
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;
	pointer-events: none;
}

body:not(.elementor-editor-active) .unique-section.evora-engaged .layered-content {
	max-height: none;
	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 {
		transition: none;
	}

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