/* ==========================================================================
   SCA - Logo del header animado
   Las posiciones están medidas sobre el PNG del logo (540 × 302):
   centro del sol = 27,4 % / 49,3 %; anillos ≈ 32 % del ancho.
   ========================================================================== */

.site-branding .custom-logo-link {
	--sol-x: 27.4%;
	--sol-y: 49.3%;
	--mx: 0;
	--my: 0;
	position: relative;
	display: inline-block;
	isolation: isolate;
	line-height: 0;
	perspective: 900px;
}

.site-branding .custom-logo-link img.custom-logo {
	position: relative;
	z-index: 2;
	transform: rotateX(calc(var(--my) * -7deg)) rotateY(calc(var(--mx) * 9deg));
	transition: transform .5s cubic-bezier(.22, .61, .36, 1), filter .4s ease;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
	animation: sca-logo-entrada 1.1s cubic-bezier(.22, .61, .36, 1) both;
}

.site-branding .custom-logo-link.sca-logo--mouse img.custom-logo {
	transition-duration: .12s;
}

/* 2) Halo del sol que respira */
.site-branding .custom-logo-link::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: var(--sol-x);
	top: var(--sol-y);
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	background: radial-gradient(circle, rgba(255, 220, 70, .9) 0%, rgba(221, 232, 39, .55) 22%, rgba(149, 209, 8, .28) 45%, rgba(149, 209, 8, 0) 68%);
	filter: blur(4px);
	animation: sca-logo-sol 4.5s ease-in-out infinite;
	pointer-events: none;
	transition: opacity .4s ease;
}

.site-branding .custom-logo-link:hover::before {
	animation-duration: 2.2s;
	opacity: 1;
}

/* 4) Destello que recorre solo la forma del logo */
.site-branding .custom-logo-link::after {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
	background-size: 250% 100%;
	background-position: 150% 0;
	-webkit-mask: var(--sca-logo-url) center / 100% 100% no-repeat;
	mask: var(--sca-logo-url) center / 100% 100% no-repeat;
	mix-blend-mode: overlay;
	opacity: 0;
	transform: rotateX(calc(var(--my) * -7deg)) rotateY(calc(var(--mx) * 9deg));
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.site-branding .custom-logo-link.sca-logo--listo::after {
	opacity: 1;
	animation: sca-logo-brillo 7s ease-in-out 1.4s infinite;
}

.site-branding .custom-logo-link:hover::after {
	animation: sca-logo-brillo-rapido 1.1s ease-out;
}

/* 3) Órbita con señal alrededor de los anillos */
.sca-logo-orbita {
	position: absolute;
	z-index: 1;
	left: var(--sol-x);
	top: var(--sol-y);
	width: 40%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(221, 232, 39, .14);
	pointer-events: none;
	opacity: 0;
	animation: sca-logo-aparecer .8s ease 1s forwards;
}

.sca-logo-orbita::before {
	/* arco fino que gira */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(221, 232, 39, 0) 0deg, rgba(221, 232, 39, 0) 160deg, rgba(221, 232, 39, .95) 300deg, rgba(149, 209, 8, 0) 301deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
	filter: drop-shadow(0 0 4px rgba(221, 232, 39, .8));
	animation: sca-logo-girar 6s linear infinite;
}

.sca-logo-orbita::after {
	/* punto de luz ("señal") que viaja con el arco */
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: #f4ff7a;
	box-shadow: 0 0 6px 2px rgba(221, 232, 39, .9), 0 0 16px 4px rgba(149, 209, 8, .6);
	transform: rotate(0deg) translateY(calc(var(--orbita-r, 100px) * -1));
	animation: sca-logo-punto 6s linear infinite;
}

.site-branding .custom-logo-link:hover .sca-logo-orbita::before,
.site-branding .custom-logo-link:hover .sca-logo-orbita::after {
	animation-duration: 2.4s;
}

/* 6) Red de puntos en el fondo del header */
.site-branding-section {
	position: relative;
}

.sca-red-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.sca-red-fondo.visible {
	opacity: 1;
}

.site-branding-section > .pubnews-container {
	position: relative;
	z-index: 1;
}

/* ---------- Animaciones ---------- */
@keyframes sca-logo-entrada {
	from { opacity: 0; transform: scale(.9); filter: blur(8px) drop-shadow(0 6px 18px rgba(0, 0, 0, 0)); }
	to   { opacity: 1; }
}

@keyframes sca-logo-sol {
	0%, 100% { transform: translate(-50%, -50%) scale(.8); opacity: .45; }
	50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

@keyframes sca-logo-brillo {
	0%, 70%  { background-position: 150% 0; }
	85%, 100% { background-position: -50% 0; }
}

@keyframes sca-logo-brillo-rapido {
	from { background-position: 150% 0; }
	to   { background-position: -50% 0; }
}

@keyframes sca-logo-girar {
	to { transform: rotate(360deg); }
}

@keyframes sca-logo-punto {
	/* 300° = donde el arco es más intenso */
	from { transform: rotate(300deg) translateY(calc(var(--orbita-r, 100px) * -1)); }
	to   { transform: rotate(660deg) translateY(calc(var(--orbita-r, 100px) * -1)); }
}

@keyframes sca-logo-aparecer {
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.site-branding .custom-logo-link img.custom-logo,
	.site-branding .custom-logo-link::before,
	.site-branding .custom-logo-link::after,
	.sca-logo-orbita,
	.sca-logo-orbita::before,
	.sca-logo-orbita::after {
		animation: none !important;
	}
	.sca-logo-orbita { opacity: 1; }
	.sca-red-fondo { display: none; }
}