/**
 * Block muduex/tiempo, section «Sol»: arc, daylight left and the times of the day. Task 9.
 *
 * Only this section's classes. Colours come from the --tiempo-* variables of
 * tiempo.css and the fixed colours of the spec; every state shown only by
 * colour has its rule inside @media (forced-colors: active).
 *
 * The arc is aria-hidden: «Quedan … de luz» and the <dl> say the same in
 * text. Full width on a phone; from 40rem it takes one of the two columns
 * (tiempo.css) when «Luna» sits beside it.
 */

/* Without a scene (the page without forecast) the glass and its caption
   follow the theme tokens; on the sky the variables are white. */
.muduex-tiempo--sin-datos .muduex-sol {
	border-color: var(--tiempo-trazo);
	background-color: var(--tiempo-vidrio);
	color: var(--tiempo-texto);
}

.muduex-sol .muduex-vidrio__rotulo {
	color: var(--tiempo-texto);
}

/* ---- The arc ---------------------------------------------------------- */

.muduex-sol__arco {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 0.5rem;
	overflow: visible;
}

.muduex-sol__horizonte {
	stroke: var(--tiempo-texto);
	stroke-width: 1.5;
	stroke-opacity: 0.6;
}

.muduex-sol__camino {
	fill: none;
	stroke: var(--tiempo-texto);
	stroke-width: 2;
	stroke-opacity: 0.5;
	stroke-dasharray: 4 6;
	stroke-linecap: round;
}

.muduex-sol__extremo {
	fill: var(--tiempo-texto);
}

/* The stretch already travelled (pathLength="1": a dash of 1 is all of it). */
.muduex-sol__hecho {
	fill: none;
	stroke: var(--tiempo-texto);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
}

.muduex-sol__astro {
	fill: #ffd60a;
	stroke: #fff;
	stroke-width: 2;
}

/* On the light card of the page without forecast the yellow disc would
   barely show: outline it with the text colour, and a deeper amber halo. */
.muduex-tiempo--sin-datos .muduex-sol__astro {
	stroke: var(--tiempo-texto);
}

.muduex-tiempo--sin-datos .muduex-sol__halo {
	fill: #c77700;
}

.muduex-sol__halo {
	fill: #ffd60a;
	opacity: 0.3;
	transform-box: fill-box;
	transform-origin: center;
}

/* ---- Text -------------------------------------------------------------- */

.muduex-tiempo .muduex-sol__luz {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.muduex-sol__datos {
	margin: 0;
}

.muduex-sol__datos > div {
	padding: 0.5rem 0;
	border-top: 1px solid var(--tiempo-trazo);
}

.muduex-sol__datos dt {
	font-size: 1.125rem;
	line-height: 1.3;
}

.muduex-sol__datos dd {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/* ---- Movement (spec §5.5) --------------------------------------------- */

/* The Sun travels from sunrise to its place in 1.5 s, once, when the arc
   comes into view (.is-entrada, tiempo.js), and its halo breathes over 6 s.
   The stops --x0…--x5 / --y0…--y5 are offsets to its place at equal
   lengths of the travelled stretch, which draws itself at the same pace.
   The hidden start only applies once tiempo.js has marked the section
   live (.is-vivo, region «sol»): without JavaScript, with reduced motion or
   if tiempo.js never runs, all of it is in place. */
@media (prefers-reduced-motion: no-preference) {
	.muduex-sol.is-vivo .muduex-sol__arco:not(.is-entrada) .muduex-sol__sol {
		opacity: 0;
	}

	.muduex-sol.is-vivo .muduex-sol__arco:not(.is-entrada) .muduex-sol__hecho {
		stroke-dashoffset: 1;
	}

	.muduex-sol__arco.is-entrada .muduex-sol__sol {
		animation: muduex-sol-recorre 1.5s linear;
	}

	.muduex-sol__arco.is-entrada .muduex-sol__hecho {
		animation: muduex-sol-traza 1.5s linear;
	}

	.muduex-sol__halo {
		animation: muduex-sol-halo 6s ease-in-out infinite;
		animation-play-state: var(--muduex-juego, running);
	}
}

@keyframes muduex-sol-recorre {
	0% {
		transform: translate(var(--x0), var(--y0));
	}

	20% {
		transform: translate(var(--x1), var(--y1));
	}

	40% {
		transform: translate(var(--x2), var(--y2));
	}

	60% {
		transform: translate(var(--x3), var(--y3));
	}

	80% {
		transform: translate(var(--x4), var(--y4));
	}

	100% {
		transform: translate(var(--x5), var(--y5));
	}
}

@keyframes muduex-sol-traza {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes muduex-sol-halo {
	0%,
	100% {
		opacity: 0.3;
		transform: scale(1);
	}

	50% {
		opacity: 0.12;
		transform: scale(1.25);
	}
}

/* ---- Forced colours ------------------------------------------------------ */

/* The Sun is shown by its fill only: keep it, the path and the travelled
   stretch in system colours. */
@media (forced-colors: active) {
	.muduex-sol__arco {
		forced-color-adjust: none;
	}

	.muduex-sol__horizonte,
	.muduex-sol__camino {
		stroke: CanvasText;
	}

	.muduex-sol__extremo {
		fill: CanvasText;
	}

	.muduex-sol__hecho {
		stroke: Highlight;
	}

	.muduex-sol__astro {
		fill: Highlight;
		stroke: CanvasText;
	}

	.muduex-sol__halo {
		display: none;
	}
}

/* ---- Print: no arc, black text --------------------------------------- */

@media print {
	.muduex-sol__arco {
		display: none !important;
	}

	.muduex-sol,
	.muduex-sol .muduex-vidrio__rotulo {
		color: #000 !important;
	}

	.muduex-sol__datos > div {
		border-top-color: #000;
	}
}