/**
 * Estilos frontend para las secciones de la geometría MedCircle (enlaces y hover zoom).
 *
 * @package MedCircle_Geometry_Customizer
 */

/* Contenedor de cada sección: zoom suave al hacer hover; z-index para quedar encima al hacer hover */
.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section {
	position: relative;
	z-index: 0;
}

.medcircle-geometry-section {
	transform-origin: 50% 50%;
	cursor: default;
}

.medcircle-geometry-section-link {
	cursor: pointer;
}

.medcircle-geometry-section-link:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Fuente Montserrat solo para los textos del plugin */
.medcircle-geometry-wrap .medcircle-geometry-section-text,
.medcircle-geometry-wrap .medcircle-geometry-center-text {
	font-family: 'Montserrat', sans-serif;
}

/* Texto en secciones: varias líneas por <br>, legibilidad; sin recorte para que el texto se vea completo */
.medcircle-geometry-svg .medcircle-geometry-section-text {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	width: 100% !important;
	min-width: 100%;
	max-width: none;
	box-sizing: border-box;
	overflow: visible;
	min-height: 100%;
}

.medcircle-geometry-svg .medcircle-geometry-section-text-line {
	display: block;
	text-align: center;
}

.medcircle-geometry-svg .medcircle-geometry-section-content .dashicons {
	color: #fff;
}

/* Área central: texto en varias líneas; cada línea en su propio bloque */
.medcircle-geometry-svg .medcircle-geometry-center-text {
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.medcircle-geometry-svg .medcircle-geometry-center-text-line {
	display: block;
	text-align: center;
}

/* Animación al entrar/salir del viewport: fade suave y escalonado por sección */
.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section,
.medcircle-geometry-wrap .medcircle-geometry-svg > .medcircle-geometry-center-block {
	opacity: 0;
	/* opacity con delay escalonado; transform sin delay para hover zoom inmediato */
	transition: opacity 0.5s ease, transform 0.35s ease 0s;
}

.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section:nth-child(2) { transition-delay: 0s, 0s; }
.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section:nth-child(3) { transition-delay: 0.12s, 0s; }
.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section:nth-child(4) { transition-delay: 0.24s, 0s; }
.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section:nth-child(5) { transition-delay: 0.36s, 0s; }
.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section:nth-child(6) { transition-delay: 0.48s, 0s; }
.medcircle-geometry-wrap .medcircle-geometry-svg > .medcircle-geometry-center-block { transition-delay: 0.6s, 0s; }

.medcircle-geometry-wrap.medcircle-geometry-inview .medcircle-geometry-svg > g.medcircle-geometry-section,
.medcircle-geometry-wrap.medcircle-geometry-inview .medcircle-geometry-svg > .medcircle-geometry-center-block {
	opacity: 1;
}

/* Zoom suave al hacer hover sobre cada sección (las 5 cuñas) */
.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section:hover,
.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section:has(.medcircle-geometry-section-link:hover),
.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section:has(path:hover) {
	transform: scale(1.02);
}

/* Zoom automático en secuencia (tras 2 s de viewport quieto) */
.medcircle-geometry-wrap .medcircle-geometry-svg > g.medcircle-geometry-section.medcircle-geometry-section-auto-zoom {
	transform: scale(1.02);
}

/* Al salir del viewport se quita .medcircle-geometry-inview y las secciones vuelven a opacity 0 (transición suave) */