/* This file MUST NOT refer to any CSS variables defined in vars.css because it is parsed before Angular is starting to bootstrap! */

/********************   tango-dancr   ********************/
#tango-dancr.spiritual {
	display: none;
}

#tango-dancr {
	/* display: block; */
	display: grid;
	place-items: center;

	/* Sits where a dialog sits, not where the viewport's middle is: ".modal.is-active.centered" in
	   "@tango-ui/styles/dialog.component.css" splits the free space 0.4 above / 0.6 below, so a centered
	   dialog's middle is ~0.1 * viewport height ABOVE the page middle -- and the dancr used to hide under
	   the dialog rather than behind its center. Mirroring the split here needs no knowledge of the dialog's
	   height; the dancr's own box stands in for it, which leaves 0.1 * (256px - dialogHeight) of error, i.e.
	   a few px. KEEP THE RATIO IN SYNC with that file. */
	grid-template-rows: 0.4fr auto 0.6fr;

	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;

	animation: fade-in 500ms;
	z-index: 100; /* for some reason this needs to be >3 or the arrows in breadcrumbs won't fade out smoothly */
	--trail-color: #ff8800;
}

@keyframes blur-in {
	from {
		background: unset;
		backdrop-filter: unset;
	}

	to {
		background: var(--tango-dancr-backdrop);
		backdrop-filter: blur(1.5px);
	}
}
#tango-dancr .fade-background {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	animation: blur-in 500ms forwards;
	z-index: 8000;
}

#tango-dancr svg {
	z-index: 9001; /* over nine thousand */
	grid-row: 2; /* the dialog-height row -- the two flanking fr tracks are what lift it off the page middle */
}

#tango-dancr .dancing-text {
	position: absolute;
	/* Still 8rem below the artwork, which is no longer at the page middle: 0.4 * (100% - 256px) + 128px is
	   where the grid above puts the svg's center, and that folds to 40% + 25.6px. 256 is the svg's fixed
	   intrinsic size, as spelled out on the element in index.html. */
	top: calc(40% + 25.6px + 8rem);
	left: calc(50% - 6rem);
	width: 12rem;
	height: 12rem;
	z-index: 8001;
	text-align: center;
	font-size: xx-large;
	color: var(--trail-color);
}