/* ------------------------------------------------------------------ *
 * HeeBoo.org - habillage CRT partage par index.html et wallpaper/
 *
 * Les chaines content: ci-dessous contiennent des espaces insecables
 * (U+00A0) repris tels quels de l'original : ce sont eux qui donnent
 * l'indentation des marqueurs " - " / " + ". Ne pas les remplacer par
 * des espaces ordinaires, l'inline-block les rognerait.
 * ------------------------------------------------------------------ */

body {
	font-size: 120%;
	/* scanlines + vignette : statiques, rasterisees une seule fois */
	background: linear-gradient(rgba(64,64,64,.1), rgba(64,64,64,.4),rgba(64,64,64,.1)), radial-gradient(#201E1C ,#000);
	background-size: auto .15em, 100vw 100vh;
	color: rgba(255,160,0,.5);
	font-family: monospace;
	margin: 0;
	animation: power_stability 30s linear infinite;
}

/* --- balayage CRT ------------------------------------------------- *
 * Etait une 3e couche de background sur body animee en
 * background-position. Cette propriete n'est pas compositable : chaque
 * frame re-rasterisait tout le fond du canvas, scanlines tuilees et
 * vignette comprises. C'est maintenant une couche plein viewport animee
 * uniquement en transform -> l'animation tourne sur le compositeur et
 * plus rien ne se repeint.
 *
 * Sur html et non sur body : l'original etait une couche de background
 * *propagee* au canvas, donc jamais attenuee par le flicker d'opacity
 * de body. body::before le serait. z-index: -1 le place a l'etape 2 du
 * contexte d'empilement racine : au-dessus du fond du canvas, sous tous
 * les descendants de body (CSS 2.1 Appendix E).
 *
 * Ne jamais donner de background a html (la propagation du fond de body
 * s'arreterait), ni transform / will-change (html deviendrait le bloc
 * conteneur et la boite tomberait a ~0px de haut).
 * Pas de will-change ici : l'animation de transform suffit a faire
 * promouvoir la couche, et sous prefers-reduced-motion will-change
 * epinglerait une texture plein ecran en memoire GPU pour rien.
 * ------------------------------------------------------------------ */
html::before {
	content: "";
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
	transform: translate3d(0,-100%,0);
	animation: crt_sweep 25s linear infinite;
}

@keyframes crt_sweep {
	from { transform: translate3d(0,-100%,0) }
	to   { transform: translate3d(0,100%,0) }
}

* {
	margin:0;
	padding: 0;
	text-decoration: none;
	font-family: monospace;
	line-height: 1.25em;
}
h1:before{
  content: " ";
}

h1 {
	font-size: inherit;
	display:block;
	width: 100%;
	color: #100E0C;
	background-color: rgba(255,160,0,.5);
}

a {
	color: inherit;
}

img {
	max-width: 100%;
}
span {
	cursor: pointer;
}
li:first-child>a:before{
	content: " - ";
}
li[data-type='img']{
	line-height: inherit;
	list-style: none;
	margin: 0;
	padding: 0;
}

li[data-type='img']>span:before {
	text-align: center;
	line-height: inherit;
	display: inline-block;
  content: " + ";
}

li[data-type='img'][data-open='true']>span:before {
  content: " - ";
}

li[data-type='img'][data-open='true'][data-loading='true']>span:before{
  content: " | ";
	animation: loading 1s linear infinite;
}


@keyframes loading {
	0%{ 	  content: " | ";}
	12.5%{ 	  content: " / ";}
	25%{ 	  content: " — ";}
	37.5%{ 	  content: " \\ ";}
	50%{ 	  content: " | ";}
	62.5%{ 	  content: " / ";}
	75%{ 	  content: " — ";}
	87.5%{ 	  content: " \\ ";}
}
@keyframes power_stability {
	11% {
		opacity: 1;
	}
	11.1% {
		opacity: .8;
	}
	11.2% {
		opacity: 1;
	}
	11.3% {
		opacity: .8;
	}
	11.4% {
		opacity: 1;
	}
	11.5% {
		opacity: .8;
	}
	11.7%{
		opacity: 1;
	}
	13% {
		opacity: 1;
	}
	13.1% {
		opacity: .8;
	}
	13.3% {
		opacity: 1;
	}
	13.6% {
		opacity: .8;
	}
	13.8% {
		opacity: 1;
	}
	13.9% {
		opacity: .8;
	}
	14%{
		opacity: 1;
	}
	31% {
		opacity: 1;
	}
	31.3% {
		opacity: .8;
	}
	31.6% {
		opacity: 1;
	}
	31.7% {
		opacity: .8;
	}
	31.9% {
		opacity: 1;
	}
	32% {
		opacity: .8;
	}
	32.7%{
		opacity: 1;
	}
	33% {
		opacity: 1;
	}
	33.1% {
		opacity: .8;
	}
	33.3% {
		opacity: 1;
	}
	33.6% {
		opacity: .8;
	}
	33.8% {
		opacity: 1;
	}
	33.9% {
		opacity: .8;
	}
	34%{
		opacity: 1;
	}
}

/* --- economies ---------------------------------------------------- */

/* onglet cache : crt.js pose .crt-paused sur <html> */
.crt-paused::before,
.crt-paused body {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	body { animation: none }
	html::before { animation: none }
}