/*
- The look Coloreka and Flying Colors share: the app feel, the sights with their shapes and advance effects, the rainbow, and the ripples of light.
- Each page links this stylesheet before its own styles, so a page's own rules can build on these.
*/




/* #region The app feel */
/* The page fills the screen with nothing to scroll. */
html, body
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* - Nothing on the page selects as text, and a tap shows no highlight, so the page feels like an app rather than a web page.
- `touch-action: manipulation` turns off pinch-zoom and double-tap zoom on every element. */
body
{
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}

*
{
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}
/* #endregion */




/* #region Sights */
/* - The near-black backdrop behind a shape, on a sight and on a shape tile alike. */
:root
{
	--sight-backdrop: #111;
}

/* - A sight frame is the box one sight shows in, such as one half of Coloreka's screen.
- `container-type: size` lets a shape size itself by its own frame. */
.sight-frame
{
	position: relative;
	overflow: hidden;
	container-type: size;
}

/* A color layer fills its frame with one color, and fades when it leaves. */
.colorLayer
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.5s ease;
}

/* A new color layer arrives as a wipe transition, moving and fading into place (see `applyTransition` in `sights.js`). */
.wipe-transition
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.5s ease, opacity 0.5s ease;
	backface-visibility: hidden;
}

@keyframes zoomIn
{
	from { transform: scale(0); }
	to { transform: scale(1); }
}

@keyframes rotateIn
{
	from { transform: rotate(-180deg) scale(0); }
	to { transform: rotate(0) scale(1); }
}

/* - Rainbow is an animated gradient rather than a flat color. */
.rainbow-color
{
	background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
	background-size: 200% 100%;
	animation: rainbowMove 10s linear infinite;
}

@keyframes rainbowMove
{
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
/* #endregion */




/* #region Shapes */
/* - With the "shape-mode" class on <html>, each color fills one big shape on the dark backdrop instead of its whole frame.
- A single sight frame with the "shaped" class does the same on its own, such as one tile among others.
- The shape is a mask on the color layer, so the rainbow and every advance transition work on it as they are.
- A shape is 70% of the shorter side of its own frame, so two frames side by side each get one full-size shape. */
.shape-mode .sight-frame, .sight-frame.shaped
{
	background-color: var(--sight-backdrop);
}

.shape-mode .colorLayer, .shape-mode .wipe-transition, .shaped .colorLayer, .shaped .wipe-transition
{
	-webkit-mask-image: var(--shape-mask);
	mask-image: var(--shape-mask);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 70vmin 70vmin;
	mask-size: 70vmin 70vmin;
}

/* A browser that knows container sizes measures the shape by its own frame rather than by the screen. */
@supports (width: 1cqmin)
{
	.shape-mode .colorLayer, .shape-mode .wipe-transition, .shaped .colorLayer, .shaped .wipe-transition
	{
		-webkit-mask-size: 70cqmin 70cqmin;
		mask-size: 70cqmin 70cqmin;
	}
}

/* - Each shape is a small inline SVG, used as the mask of whatever carries its `data-shape`. */
[data-shape="circle"]
{
	--shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/svg%3E");
}

[data-shape="square"]
{
	--shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='7' y='7' width='86' height='86' rx='4'/%3E%3C/svg%3E");
}

[data-shape="triangle"]
{
	--shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,7 100,93 0,93'/%3E%3C/svg%3E");
}

[data-shape="star"]
{
	--shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4.8 61.2,39.3 97.6,39.3 68.2,60.7 79.4,95.2 50,73.9 20.6,95.2 31.8,60.7 2.4,39.3 38.8,39.3'/%3E%3C/svg%3E");
}

[data-shape="heart"]
{
	--shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 95C20 73 0 55 0 33C0 16 13 5 28 5C38 5 46 11 50 19C54 11 62 5 72 5C87 5 100 16 100 33C100 55 80 73 50 95Z'/%3E%3C/svg%3E");
}
/* #endregion */




/* #region The pastel rainbow */
/* - The pastel rainbow that drifts slowly behind a menu, such as Coloreka's. */
.rainbow-backdrop
{
	background: linear-gradient(to right, #FFB3BA, #FFDFBA, #FFFFBA, #BAFFC9, #BAE1FF, #E0BBE4, #FFB3BA);
	background-size: 200% 100%;
	animation: moveGradient 10s linear infinite;
}

/* - A title written in the same pastel rainbow, drifting through its letters, in the rounded "Baloo 2" font. */
.rainbow-title
{
	font-family: "Baloo 2", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
	background: linear-gradient(to right, #FFB3BA, #E0BBE4, #BAE1FF, #BAFFC9, #FFFFBA, #FFDFBA, #FFB3BA);
	background-size: 200% auto;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	animation: rainbow 10s linear infinite;
}

/* Drifts a gradient across text, such as a rainbow title. */
@keyframes rainbow
{
	0%
	{
		background-position: 0% center;
	}
	100%
	{
		background-position: -200% center;
	}
}

/* Drifts a gradient across a backdrop. */
@keyframes moveGradient
{
	0%
	{
		background-position: 0% 50%;
	}
	100%
	{
		background-position: -200% 50%;
	}
}

@keyframes fadeIn
{
	from { opacity: 0; }
	to { opacity: 1; }
}
/* #endregion */




/* #region Ripples of light */
/* - A soft white ripple of light that grows and fades where a click or a lifted finger landed (see `createRipple` in `ripples.js`).
- Its light adds to the colors beneath it on a screen with a mouse. */
.ripple
{
	position: fixed;
	pointer-events: none;
	border-radius: 50%;
	transform: scale(0);
	opacity: 0;
	animation: rippleExpand 800ms ease-out forwards;
	z-index: 1100;
	mix-blend-mode: screen;
	will-change: transform, opacity;
}

@media (hover: none) and (pointer: coarse)
{
	.ripple
	{
		mix-blend-mode: normal;
	}
}

@keyframes rippleExpand
{
	0%
	{
		opacity: 0;
		transform: scale(0.15);
		filter: blur(2px);
	}
	20%
	{
		opacity: 1;
		transform: scale(1.3);
		filter: blur(0);
	}
	100%
	{
		opacity: 0;
		transform: scale(9);
		filter: blur(2px);
	}
}

/* A touch screen draws the ripple without its blur, which keeps it smooth on phones. */
@media (hover: none) and (pointer: coarse)
{
	@keyframes rippleExpand
	{
		0%
		{
			opacity: 0;
			transform: scale(0.15);
		}
		20%
		{
			opacity: 1;
			transform: scale(1.3);
		}
		100%
		{
			opacity: 0;
			transform: scale(9);
		}
	}
}
/* #endregion */