/* Hero J — Elementor widget styles.
   Transparent background: the widget sits on top of any section. */

.hero-j {
	/* Default sizes (approved prototype): overridable via Elementor controls
	   through inline style (CSS variables). */
	--jew-central-size:      72%;
	--jew-left-size:         20%;
	--jew-right-size:        20%;
	--jew-bottom-right-size: 20%;

	position: relative;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	perspective: 900px;
}

.hero-j__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.hero-j__letter {
	position: absolute;
	/* The PNG visual centroid falls at ~(60.7%, 53.5%):
	   offset left/top to optically center it in the container. */
	left: 45%;
	top: 48%;
	width: var(--jew-central-size, 72%);
	transform: translate(-50%, -50%);
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}

.hero-j__icon {
	position: absolute;
	left: 0;
	top: 0;
	width: 20%;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
	transform-style: preserve-3d;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
}

/* Per-icon size (overridable via CSS variables from the widget) */
.hero-j__icon[data-icon="left"]         { width: var(--jew-left-size,         20%); }
.hero-j__icon[data-icon="right"]        { width: var(--jew-right-size,        20%); }
.hero-j__icon[data-icon="bottom-right"] { width: var(--jew-bottom-right-size, 20%); }

@media (prefers-reduced-motion: reduce) {
	.hero-j__icon { transition: none !important; }
}

/* =====================================================================
   ENTRY ANIMATION (scroll reveal)
   Sequenza:
     1. Compare l'icona centrale (J) con fade + scale (0 → 0.7s)
     2. Le 3 linee si "disegnano" (stroke-dashoffset: 100 → 0)  (0.55s → 1.55s)
     3. I dot e le 3 icone compaiono a fine linea, staggered (1.5s → 2.1s)
   ===================================================================== */

/* Stato iniziale: nascondo tutto. Per gli icon usiamo solo opacity
   perché il loro transform viene continuamente scritto dal JS (idle float + magnete). */
.hero-j .hero-j__letter {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.85);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-j .hero-j__lines polyline {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 1s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: 0.55s;
}

.hero-j .hero-j__lines circle {
	opacity: 0;
	transition: opacity 0.35s ease;
}

.hero-j .hero-j__icon {
	opacity: 0;
	transition: opacity 0.5s ease;
}

/* Stato "visibile" */
.hero-j.is-visible .hero-j__letter {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.hero-j.is-visible .hero-j__lines polyline {
	stroke-dashoffset: 0;
}

/* Dot: appaiono al termine del disegno della linea (~1.55s) */
.hero-j.is-visible .hero-j__lines g[data-conn="left"] circle {
	opacity: 1;
	transition-delay: 1.45s;
}
.hero-j.is-visible .hero-j__lines g[data-conn="right"] circle {
	opacity: 1;
	transition-delay: 1.65s;
}
.hero-j.is-visible .hero-j__lines g[data-conn="bottom-right"] circle {
	opacity: 1;
	transition-delay: 1.85s;
}

/* Icone: appaiono subito dopo i rispettivi dot, staggered */
.hero-j.is-visible .hero-j__icon[data-icon="left"] {
	opacity: 1;
	transition-delay: 1.5s;
}
.hero-j.is-visible .hero-j__icon[data-icon="right"] {
	opacity: 1;
	transition-delay: 1.7s;
}
.hero-j.is-visible .hero-j__icon[data-icon="bottom-right"] {
	opacity: 1;
	transition-delay: 1.9s;
}

/* Editor Elementor: salto l'animazione, tutto subito visibile */
.elementor-editor-active .hero-j .hero-j__letter {
	opacity: 1 !important;
	transform: translate(-50%, -50%) scale(1) !important;
	transition: none !important;
}
.elementor-editor-active .hero-j .hero-j__lines polyline {
	stroke-dashoffset: 0 !important;
	transition: none !important;
}
.elementor-editor-active .hero-j .hero-j__lines circle,
.elementor-editor-active .hero-j .hero-j__icon {
	opacity: 1 !important;
	transition: none !important;
}

/* Reduced motion: tutto subito visibile */
@media (prefers-reduced-motion: reduce) {
	.hero-j .hero-j__letter {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	.hero-j .hero-j__lines polyline {
		stroke-dashoffset: 0;
	}
	.hero-j .hero-j__lines circle,
	.hero-j .hero-j__icon {
		opacity: 1;
	}
}