/* ============================================================
   Elementor Hotspot LADICO — v1.4.0
   Autore: Gabriele Tentori — LAboratorio DI COmunicazione SRL
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
.ehl-wrapper {
	--ehl-marker-color:      #1d1d1f;
	--ehl-connector-color:   var(--ehl-marker-color);
	--ehl-marker-size:       26px;
	--ehl-stroke-width:      1.5;
	--ehl-dot-r:             4;
	--ehl-connector-h:       60;
	--ehl-connector-v:       50;
	--ehl-corner-r:          12;
	--ehl-anim-duration:     0.55s;
	--ehl-panel-delay:       calc(var(--ehl-anim-duration) * 0.88);
	--ehl-panel-delay-override: 0s;

	/* Easing system (Apple-inspired) */
	--ehl-ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
	--ehl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ehl-ease-enter:  cubic-bezier(0, 0, 0.2, 1);
	--ehl-ease-exit:   cubic-bezier(0.4, 0, 1, 1);

	/* Panel defaults */
	--ehl-panel-tx: 0;
	--ehl-panel-ty: 0;
}

/* ── Layout wrapper ─────────────────────────────────────────── */
.ehl-wrapper {
	position: relative;
	display: flex;
}

/* ── Image container ─────────────────────────────────────────── */
.ehl-image-container {
	position: relative;
	display: block;
	overflow: visible;
	line-height: 0;
	flex-shrink: 0;
}

/* La proprietà `filter` di questa immagine è generata da Elementor a partire dai
   controlli Contorno e Rilievo: non dichiararla qui, sovrascriverebbe gli effetti. */
.ehl-image-container img {
	display: block;
	width: 100%;
	height: auto;
}

/* ══════════════════════════════════════════════════════════════
   HOTSPOT ROOT
══════════════════════════════════════════════════════════════ */

.ehl-hotspot {
	position: absolute;
	width:  var(--ehl-marker-size);
	height: var(--ehl-marker-size);
	transform: translate(-50%, -50%);
	z-index: 10;
	overflow: visible;
	outline: none;
}

/* L'hotspot attivo (pannello aperto) deve stare sopra gli altri hotspot,
   altrimenti i marker vicini coprono la card aperta. */
.ehl-hotspot.is-active {
	z-index: 30;
}

/* ══════════════════════════════════════════════════════════════
   MARKER
══════════════════════════════════════════════════════════════ */

.ehl-marker {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: var(--ehl-marker-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background-color 0.25s var(--ehl-ease-out),
	            transform        0.35s var(--ehl-ease-spring),
	            box-shadow       0.25s var(--ehl-ease-out);
	will-change: transform;
}

.ehl-hotspot:hover .ehl-marker,
.ehl-hotspot.is-active .ehl-marker {
	transform: scale(1.12);
}

.ehl-marker-dot {
	width:  38%;
	height: 38%;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.88);
	pointer-events: none;
}

.ehl-marker-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--ehl-marker-size) * 0.45);
	color: #ffffff;
	line-height: 1;
}

.ehl-marker-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* ── Pulsazione ──────────────────────────────────────────────── */

.ehl-pulse-ring {
	position: absolute;
	inset: -4px;
	border-radius: inherit;
	border: 1.5px solid var(--ehl-marker-color);
	animation: ehl-pulse 2.5s ease-out infinite;
	pointer-events: none;
	will-change: transform, opacity;
}

.ehl-pulse-ring--delay { animation-delay: 1.25s; }

.ehl-wrapper:not(.has-pulse) .ehl-pulse-ring { display: none; }

.ehl-hotspot.is-active .ehl-pulse-ring {
	animation-play-state: paused;
	transition: opacity 0.2s;
	opacity: 0;
}

@keyframes ehl-pulse {
	0%   { transform: scale(1);   opacity: 0.6; }
	65%  { transform: scale(2.6); opacity: 0;   }
	100% { transform: scale(2.6); opacity: 0;   }
}

/* ══════════════════════════════════════════════════════════════
   CONNETTORE SVG
══════════════════════════════════════════════════════════════ */

/* Anchor point = marker center */
.ehl-connector {
	position: absolute;
	top:  50%;
	left: 50%;
	width: 0;
	height: 0;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

.ehl-connector svg {
	position: absolute;
	overflow: visible;
	pointer-events: none;
}

/* Path: hidden until active (JS manages stroke-dashoffset) */
.ehl-path {
	stroke:         var(--ehl-connector-color);
	stroke-width:   var(--ehl-stroke-width);
	stroke-linecap: round;
	stroke-linejoin: round;
	fill:           none;
	/* dasharray / dashoffset set by JS per-hotspot */
}

/* Dots: hidden, transition to visible when active */
.ehl-svg-dot {
	fill:    var(--ehl-connector-color);
	opacity: 0;
	transition: opacity 0.18s ease, transform 0.3s var(--ehl-ease-spring);
	transform-origin: center;
	transform-box: fill-box;
	transform: scale(0);
}

.ehl-hotspot.is-active .ehl-svg-dot--start {
	opacity: 1;
	transform: scale(1);
	transition-delay: 0s;
}

.ehl-hotspot.is-active .ehl-svg-dot--end {
	opacity: 1;
	transform: scale(1);
	/* delay computed by JS as CSS custom property */
	transition-delay: var(--ehl-dot-end-delay, var(--ehl-anim-duration));
}

/* ══════════════════════════════════════════════════════════════
   PANNELLO DESCRITTIVO
══════════════════════════════════════════════════════════════ */

.ehl-panel {
	position: absolute;
	width: 240px;
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: #1d1d1f;
	border-radius: 14px;
	padding: 20px 24px;
	box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.18);

	/* Hidden state */
	opacity: 0;
	pointer-events: none;
	z-index: 20;

	/* Position set by JS; transform = entry animation */
	transform: translate(var(--ehl-panel-tx, 0), var(--ehl-panel-ty, 0)) scale(var(--ehl-panel-scale, 1));
	filter: blur(var(--ehl-panel-blur, 0px));

	transition:
		opacity   var(--ehl-panel-dur, 0.32s) var(--ehl-panel-delay, 0.48s) var(--ehl-ease-enter),
		transform var(--ehl-panel-dur, 0.32s) var(--ehl-panel-delay, 0.48s) var(--ehl-ease-spring),
		filter    var(--ehl-panel-dur, 0.32s) var(--ehl-panel-delay, 0.48s) var(--ehl-ease-out);
}

.ehl-hotspot.is-active .ehl-panel {
	opacity: 1;
	pointer-events: auto;
	--ehl-panel-tx: 0;
	--ehl-panel-ty: 0;
	--ehl-panel-scale: 1;
	--ehl-panel-blur: 0px;
}

/* Close on exit: snappier */
.ehl-hotspot:not(.is-active) .ehl-panel {
	transition:
		opacity   0.2s 0s var(--ehl-ease-exit),
		transform 0.2s 0s var(--ehl-ease-exit),
		filter    0.2s 0s var(--ehl-ease-exit);
}

/* Pulsante chiudi */
.ehl-panel-close {
	position:        absolute;
	top:             8px;
	right:           8px;
	width:           22px;
	height:          22px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      rgba(0, 0, 0, 0.06);
	border:          none;
	border-radius:   50%;
	font-size:       15px;
	line-height:     1;
	cursor:          pointer;
	color:           #6e6e73;
	padding:         0;
	transition:      background-color 0.15s, color 0.15s, transform 0.2s var(--ehl-ease-spring);
}

.ehl-panel-close:hover {
	background-color: rgba(0, 0, 0, 0.12);
	color: #1d1d1f;
	transform: scale(1.1);
}

/* Badge */
.ehl-badge {
	display:         inline-flex;
	align-items:     center;
	background-color: var(--ehl-marker-color);
	color:           #fff;
	font-size:       10px;
	font-weight:     600;
	letter-spacing:  0.08em;
	text-transform:  uppercase;
	padding:         3px 9px;
	border-radius:   20px;
	margin-bottom:   10px;
}

/* Titolo */
.ehl-panel-title {
	margin:      0 0 6px;
	font-size:   15px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Descrizione */
.ehl-panel-description {
	font-size:   13px;
	line-height: 1.6;
	margin:      0 0 12px;
	color:       inherit;
	opacity:     0.8;
}

.ehl-panel-description:last-child { margin-bottom: 0; }
.ehl-panel-description p { margin: 0 0 6px; }
.ehl-panel-description p:last-child { margin: 0; }

/* Link CTA */
.ehl-panel-link {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	font-size:       12px;
	font-weight:     600;
	color:           #0071e3;
	text-decoration: none;
	letter-spacing:  0.01em;
	transition:      opacity 0.15s;
}

.ehl-panel-link:hover { opacity: 0.72; }

/* ══════════════════════════════════════════════════════════════
   PANNELLO — entry direction (set via JS data-panel-from attr)
   Questi valori definiscono lo stato CHIUSO del pannello.
   Quando .is-active li azzera tramite custom properties.
══════════════════════════════════════════════════════════════ */

.ehl-panel[data-panel-from="right"]  { --ehl-panel-tx:  10px; }
.ehl-panel[data-panel-from="left"]   { --ehl-panel-tx: -10px; }
.ehl-panel[data-panel-from="top"]    { --ehl-panel-ty: -10px; }
.ehl-panel[data-panel-from="bottom"] { --ehl-panel-ty:  10px; }

/* ══════════════════════════════════════════════════════════════
   STILI ANIMAZIONE — 1. ARROW-SLIDE (freccia fluida)
   Linea solida, easing standard Apple, panel slide-in
══════════════════════════════════════════════════════════════ */

[data-animation="arrow-slide"] {
	--ehl-ease-path:   cubic-bezier(0.4, 0, 0.2, 1);
	--ehl-panel-dur:   0.3s;
}

/* Il path transition è applicato da JS (usa --ehl-ease-path via CSS var) */
[data-animation="arrow-slide"] .ehl-panel[data-panel-from] {
	--ehl-panel-scale: 1; /* no scale per arrow-slide */
}

/* ══════════════════════════════════════════════════════════════
   STILI ANIMAZIONE — 2. DOT-TRAIL (percorso puntini)
   Stroke tratteggiato, effetto "disegno" progressivo
══════════════════════════════════════════════════════════════ */

[data-animation="dot-trail"] {
	--ehl-ease-path: linear;
}

/* Il JS imposta stroke-dasharray = "5 9" per il tratteggio */
[data-animation="dot-trail"] .ehl-path {
	stroke-linecap: round;
}

[data-animation="dot-trail"] .ehl-hotspot.is-active .ehl-path {
	animation: ehl-march 0.45s linear infinite;
}

@keyframes ehl-march {
	to { stroke-dashoffset: -14; }
}

/* ══════════════════════════════════════════════════════════════
   STILI ANIMAZIONE — 3. BEAM (raggio luminoso)
   Linea con glow, disegno rapido snap, panel scale-in
══════════════════════════════════════════════════════════════ */

[data-animation="beam"] {
	--ehl-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
	--ehl-panel-dur: 0.28s;
}

[data-animation="beam"] .ehl-path {
	filter: drop-shadow(0 0 3px var(--ehl-connector-color));
}

[data-animation="beam"] .ehl-svg-dot {
	filter: drop-shadow(0 0 4px var(--ehl-connector-color));
}

[data-animation="beam"] .ehl-panel[data-panel-from] {
	--ehl-panel-scale: 0.92;
}

/* ══════════════════════════════════════════════════════════════
   STILI ANIMAZIONE — 4. FOLD (sfoglia / origami)
   Il pannello si "apre" come una piega: scaleX da transform-origin lato connettore
══════════════════════════════════════════════════════════════ */

[data-animation="fold"] {
	--ehl-ease-path: cubic-bezier(0.4, 0, 0.2, 1);
	--ehl-panel-dur: 0.38s;
}

/* transform-origin dipende dal lato; JS aggiunge data-fold-origin */
.ehl-panel[data-fold-origin="left"]   { transform-origin: left center; }
.ehl-panel[data-fold-origin="right"]  { transform-origin: right center; }
.ehl-panel[data-fold-origin="top"]    { transform-origin: center top; }
.ehl-panel[data-fold-origin="bottom"] { transform-origin: center bottom; }

[data-animation="fold"] .ehl-panel[data-panel-from] {
	--ehl-panel-scale: 0;
	--ehl-panel-tx: 0;
	--ehl-panel-ty: 0;
}

[data-animation="fold"] .ehl-hotspot.is-active .ehl-panel {
	--ehl-panel-scale: 1;
}

[data-animation="fold"] .ehl-panel {
	transition:
		opacity   var(--ehl-panel-dur) var(--ehl-panel-delay, 0.48s) var(--ehl-ease-enter),
		transform var(--ehl-panel-dur) var(--ehl-panel-delay, 0.48s) var(--ehl-ease-spring);
}

/* ══════════════════════════════════════════════════════════════
   STILI ANIMAZIONE — 5. MATERIALIZE ★ (Apple)
   Il pannello si materializza dal nulla: scale(0.94→1) + blur(6px→0)
   Connettore: disegno lento e deliberato, easing premium
══════════════════════════════════════════════════════════════ */

[data-animation="materialize"] {
	--ehl-ease-path: cubic-bezier(0.4, 0, 0.2, 1);
	--ehl-panel-dur: 0.45s;
}

[data-animation="materialize"] .ehl-panel[data-panel-from] {
	--ehl-panel-scale: 0.94;
	--ehl-panel-blur:  6px;
}

[data-animation="materialize"] .ehl-hotspot.is-active .ehl-panel {
	--ehl-panel-scale: 1;
	--ehl-panel-blur:  0px;
}

[data-animation="materialize"] .ehl-panel {
	transition:
		opacity   var(--ehl-panel-dur) var(--ehl-panel-delay, 0.48s) var(--ehl-ease-enter),
		transform var(--ehl-panel-dur) var(--ehl-panel-delay, 0.48s) var(--ehl-ease-out),
		filter    var(--ehl-panel-dur) var(--ehl-panel-delay, 0.48s) var(--ehl-ease-out);
}

/* Path con stroke più sottile per look raffinato */
[data-animation="materialize"] .ehl-path {
	opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════
   STILI ANIMAZIONE — 6. SPRING ★ (Apple)
   Il connettore "scatta" con overshoot (spring cubic-bezier).
   Il pannello rimbalza nel punto finale con scala elastica.
══════════════════════════════════════════════════════════════ */

[data-animation="spring"] {
	--ehl-ease-path: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ehl-panel-dur: 0.5s;
}

[data-animation="spring"] .ehl-panel[data-panel-from="right"]  { --ehl-panel-tx:  22px; }
[data-animation="spring"] .ehl-panel[data-panel-from="left"]   { --ehl-panel-tx: -22px; }
[data-animation="spring"] .ehl-panel[data-panel-from="top"]    { --ehl-panel-ty: -22px; }
[data-animation="spring"] .ehl-panel[data-panel-from="bottom"] { --ehl-panel-ty:  22px; }

[data-animation="spring"] .ehl-panel[data-panel-from] {
	--ehl-panel-scale: 0.88;
}

[data-animation="spring"] .ehl-panel {
	transition:
		opacity   var(--ehl-panel-dur) var(--ehl-panel-delay, 0.48s) var(--ehl-ease-enter),
		transform var(--ehl-panel-dur) var(--ehl-panel-delay, 0.48s) var(--ehl-ease-spring);
}

[data-animation="spring"] .ehl-svg-dot {
	transform: scale(0) !important;
	transition: opacity 0.18s ease, transform 0.45s var(--ehl-ease-spring) !important;
}

[data-animation="spring"] .ehl-hotspot.is-active .ehl-svg-dot {
	transform: scale(1) !important;
	opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITÀ
══════════════════════════════════════════════════════════════ */

.ehl-hotspot:focus-visible .ehl-marker {
	outline:        3px solid var(--ehl-marker-color);
	outline-offset: 5px;
	border-radius:  inherit;
}

/* ══════════════════════════════════════════════════════════════
   EDITOR ELEMENTOR — ghost panels visibili in preview
══════════════════════════════════════════════════════════════ */

.elementor-editor-active .ehl-panel {
	opacity: 0.15;
	pointer-events: none;
	transform: translate(0, 0) scale(1) !important;
	filter: none !important;
}

.elementor-editor-active .ehl-hotspot.is-active .ehl-panel {
	opacity: 1;
	pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.ehl-panel { max-width: min(85vw, 240px); }
}