/**
 * CSS base per al Header Rotatiu DMS3.
 *
 * Aquest fitxer defineix els estils genèrics i les animacions.
 * El PHP només inyecta les imatges de fons per pàgina via CSS inline.
 */

/* Contenidor de la secció del header rotatiu. */
.hero-fons-rotatiu {
	position: relative;
	overflow: hidden;
}

.hero-fons-rotatiu > * {
	position: relative;
	z-index: 1;
}

/* Capa comuna als pseudoelements. */
.hero-fons-rotatiu::before,
.hero-fons-rotatiu::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	transition: opacity 1s ease-in-out;
	opacity: 0;
}
.hero-fons-rotatiu::before,
.hero-fons-rotatiu::after,
.hero-fons-rotatiu {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: rgb(0 0 0 / 40%);
	background-blend-mode: overlay;
}

/* Assignació de les animacions als pseudoelements. */
.hero-fons-rotatiu::before {
	animation: dms3-hr-fade-before 30s infinite linear;
}

.hero-fons-rotatiu::after {
	animation: dms3-hr-fade-after 30s infinite linear;
}

@keyframes dms3-hr-fade-before {
	/* Tram 1: només fons base (1,0,0) -> ::before ocult. */
	0%    { opacity: 0; }
	13%   { opacity: 0; }

	/* Transició base -> ::before (tram 1 -> 2). */
	17%   { opacity: 1; }

	/* Tram 2: només ::before (0,1,0). */
	30%   { opacity: 1; }
	33%   { opacity: 0.8; }

	/* Transició ::before -> ::after (tram 2 -> 3) -> ::before baixa suaument. */
	36%   { opacity: 0; }

	/* Tram 3: només ::after (0,0,1) -> ::before a 0. */
	50%   { opacity: 0; }

	/* Tram 4: només fons base (1,0,0) -> ::before encara a 0. */
	63%   { opacity: 0; }

	/* Transició base -> ::before (tram 4 -> 5). */
	67%   { opacity: 1; }

	/* Tram 5: només ::before (0,1,0). */
	80%   { opacity: 1; }
	83%   { opacity: 0.8; }

	/* Transició ::before -> ::after (tram 5 -> 6). */
	86%   { opacity: 0; }

	/* Tram 6: només ::after (0,0,1) -> ::before a 0. */
	100%  { opacity: 0; }
}

@keyframes dms3-hr-fade-after {
	/* Trams 1 i 2: base / ::before -> ::after ocult. */
	0%    { opacity: 0; }
	30%   { opacity: 0; }

	/* Transició ::before -> ::after (tram 2 -> 3). */
	34%   { opacity: 1; }

	/* Tram 3: només ::after (0,0,1). */
	46%   { opacity: 1; }
	49%   { opacity: 0.8; }

	/* Transició ::after -> base (tram 3 -> 4). */
	52%   { opacity: 0; }

	/* Trams 4 i 5: base / ::before -> ::after ocult. */
	83%   { opacity: 0; }

	/* Transició ::before -> ::after (tram 5 -> 6). */
	87%   { opacity: 1; }

	/* Tram 6: només ::after (0,0,1). */
	96%   { opacity: 1; }

	/* Tancament suau del cicle: ::after torna a 0 per l'inici. */
	100%  { opacity: 0; }
}