/* =========================================================
   AIDO UI CORE
   Shared visual effects for AIDO Elements.
   ========================================================= */

:root {
	--aido-fx-accent: #4687ff;
	--aido-fx-light: #ffffff;
}

@keyframes aidoCornerTrimIn {
	0% {
		background-size: 0 1px, 1px 0, 0 0, 0 1px, 1px 0, 0 0;
	}
	45% {
		background-size: 8px 1px, 1px 0, 6px 6px, 8px 1px, 1px 0, 6px 6px;
	}
	100% {
		background-size: 8px 1px, 1px 8px, 6px 6px, 8px 1px, 1px 8px, 6px 6px;
	}
}

.aido-fx {
	position: relative;
}

/* Esquinas tomadas del lenguaje visual aprobado del menú Alto Energy. */
.aido-fx--corners {
	background-image:
		linear-gradient(90deg, color-mix(in srgb, var(--aido-fx-light) 95%, transparent), color-mix(in srgb, var(--aido-fx-accent) 68%, transparent)),
		linear-gradient(180deg, color-mix(in srgb, var(--aido-fx-light) 95%, transparent), color-mix(in srgb, var(--aido-fx-accent) 68%, transparent)),
		radial-gradient(circle at 6px 6px, transparent 4.7px, color-mix(in srgb, var(--aido-fx-light) 95%, transparent) 5px, color-mix(in srgb, var(--aido-fx-accent) 68%, transparent) 6px, transparent 6.3px),
		linear-gradient(270deg, color-mix(in srgb, var(--aido-fx-light) 95%, transparent), color-mix(in srgb, var(--aido-fx-accent) 68%, transparent)),
		linear-gradient(0deg, color-mix(in srgb, var(--aido-fx-light) 95%, transparent), color-mix(in srgb, var(--aido-fx-accent) 68%, transparent)),
		radial-gradient(circle at 0 0, transparent 4.7px, color-mix(in srgb, var(--aido-fx-light) 95%, transparent) 5px, color-mix(in srgb, var(--aido-fx-accent) 68%, transparent) 6px, transparent 6.3px);
	background-repeat: no-repeat;
	background-position: left 6px top 0, left 0 top 6px, left top, right 6px bottom 0, right 0 bottom 6px, right bottom;
	background-size: 0 1px, 1px 0, 0 0, 0 1px, 1px 0, 0 0;
}

.aido-fx--corners:hover,
.aido-fx--corners:focus-visible,
.aido-fx--corners:active,
.aido-fx--corners.is-active {
	background-size: 8px 1px, 1px 8px, 6px 6px, 8px 1px, 1px 8px, 6px 6px;
	animation: aidoCornerTrimIn .34s cubic-bezier(.22,.61,.36,1) both;
	background-image:
		linear-gradient(90deg, var(--aido-fx-light), var(--aido-fx-accent)),
		linear-gradient(180deg, var(--aido-fx-light), var(--aido-fx-accent)),
		radial-gradient(circle at 6px 6px, transparent 4.7px, var(--aido-fx-light) 5px, var(--aido-fx-accent) 6px, transparent 6.3px),
		linear-gradient(270deg, var(--aido-fx-light), var(--aido-fx-accent)),
		linear-gradient(0deg, var(--aido-fx-light), var(--aido-fx-accent)),
		radial-gradient(circle at 0 0, transparent 4.7px, var(--aido-fx-light) 5px, var(--aido-fx-accent) 6px, transparent 6.3px);
}

/* Encuadre completo opcional. Se mantiene separado de las esquinas. */
.aido-fx--frame {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aido-fx-accent) 48%, transparent);
}

.aido-fx--frame:hover,
.aido-fx--frame:focus-visible,
.aido-fx--frame:active,
.aido-fx--frame.is-active {
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--aido-fx-light) 78%, var(--aido-fx-accent)),
		0 0 10px color-mix(in srgb, var(--aido-fx-accent) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.aido-fx,
	.aido-fx::before,
	.aido-fx::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}