/*
**
**
**
**
**
** Home Screen Wallpapers
** =================================
**
** Every wallpaper is pure CSS: a base gradient with four soft color fields slowly
** drifting across it, a light sheen and a fine grain on top. A wallpaper only defines
** its colors - the motion and layers are shared - so adding one is a single block of
** custom properties for light and one for dark, plus an entry in TL.HomeScreen.Wallpapers.
**
**   --HS-WP-Base     The background gradient, tinted with the wallpaper's own color
**   --HS-WP-1 .. 4   The four drifting color fields
**   --HS-WP-Sheen    The diagonal light laid over everything
**
** The same markup renders the full screen wallpaper and the picker thumbnails, so a
** wallpaper's colors and theme are read from its own element.
*/

/*
**
**
**
**
**
** Layers
** =================================
*/

#TL-Home > .HS-Wallpaper-Host {
	position: fixed;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.HS-Wallpaper {
	--HS-WP-Sheen: linear-gradient(125deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.16) 100%);
	--HS-WP-Grain-Opacity: 0.05;

	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--HS-WP-Base);
	isolation: isolate;
	transition: opacity 800ms ease;
}

.HS-Wallpaper[data-hs-theme="dark"] {
	--HS-WP-Sheen: linear-gradient(125deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.03) 100%);
	--HS-WP-Grain-Opacity: 0.08;
}

/* A new wallpaper fades in over the old one */
.HS-Wallpaper.is-entering,
.HS-Wallpaper.is-leaving {
	opacity: 0;
}

.HS-Wallpaper-Blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	will-change: transform;
	animation: HS-Drift-1 38s ease-in-out infinite alternate;
}

.HS-Wallpaper-Blob.blob-1 {
	top: -22%;
	left: -18%;
	width: 78%;
	height: 86%;
	background: radial-gradient(closest-side, var(--HS-WP-1), transparent);
}

.HS-Wallpaper-Blob.blob-2 {
	top: 4%;
	right: -24%;
	width: 72%;
	height: 82%;
	background: radial-gradient(closest-side, var(--HS-WP-2), transparent);
	animation-name: HS-Drift-2;
	animation-duration: 46s;
}

.HS-Wallpaper-Blob.blob-3 {
	bottom: -34%;
	left: 8%;
	width: 84%;
	height: 78%;
	background: radial-gradient(closest-side, var(--HS-WP-3), transparent);
	animation-name: HS-Drift-3;
	animation-duration: 54s;
}

.HS-Wallpaper-Blob.blob-4 {
	top: 30%;
	left: 32%;
	width: 46%;
	height: 52%;
	background: radial-gradient(closest-side, var(--HS-WP-4), transparent);
	opacity: 0.8;
	animation-name: HS-Drift-4;
	animation-duration: 31s;
}

.HS-Wallpaper-Sheen,
.HS-Wallpaper-Grain {
	position: absolute;
	display: block;
	inset: 0;
}

.HS-Wallpaper-Sheen {
	background: var(--HS-WP-Sheen);
}

/* Fine film grain keeps the gradients from banding and gives them a printed feel */
.HS-Wallpaper-Grain {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
	opacity: var(--HS-WP-Grain-Opacity);
	mix-blend-mode: overlay;
}

/* Slow, overlapping drifts so the wallpaper never visibly loops */
@keyframes HS-Drift-1 {
	to {
		transform: translate3d(18%, 14%, 0) scale(1.12);
	}
}

@keyframes HS-Drift-2 {
	to {
		transform: translate3d(-20%, 12%, 0) scale(0.92);
	}
}

@keyframes HS-Drift-3 {
	to {
		transform: translate3d(12%, -18%, 0) scale(1.08);
	}
}

@keyframes HS-Drift-4 {
	to {
		transform: translate3d(-24%, -10%, 0) scale(1.25);
	}
}

/*
** The wallpaper holds still whenever its drift can't be enjoyed: under an open app, while
** editing (so the jiggling tiles have the GPU to themselves), and under a sheet (so its
** backdrop blur doesn't have to be redrawn every frame)
*/
body:not([data-home="true"]) #TL-Home > .HS-Wallpaper-Host > .HS-Wallpaper > .HS-Wallpaper-Blob,
#TL-Home.HS-Editing > .HS-Wallpaper-Host > .HS-Wallpaper > .HS-Wallpaper-Blob,
#TL-Home.HS-Sheet-Open > .HS-Wallpaper-Host > .HS-Wallpaper > .HS-Wallpaper-Blob {
	animation-play-state: paused;
}

/*
** Thumbnails hold still until they're hovered, and don't keep sixteen sets of GPU layers
** alive meanwhile. Film grain is invisible at this size, so its blend layers are skipped.
*/
.HS-Wallpaper-Preview > .HS-Wallpaper > .HS-Wallpaper-Blob {
	will-change: auto;
	animation-play-state: paused;
}

@media (hover: hover) {
	.HS-Wallpaper-Option:hover > .HS-Wallpaper-Preview > .HS-Wallpaper > .HS-Wallpaper-Blob {
		animation-play-state: running;
	}
}

.HS-Wallpaper-Preview > .HS-Wallpaper > .HS-Wallpaper-Grain {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.HS-Wallpaper-Blob {
		animation: none !important;
	}
}

/*
**
**
**
**
**
** Mist - cool silver blue with a touch of blush (the default)
** =================================
*/

.HS-Wallpaper[data-wallpaper="mist"] {
	--HS-WP-Base: linear-gradient(160deg, #eef2fa 0%, #e6ebf6 55%, #f4eef3 100%);
	--HS-WP-1: #c9d6fb;
	--HS-WP-2: #dcd2f3;
	--HS-WP-3: #c8e3ee;
	--HS-WP-4: #f6d6e1;
}

.HS-Wallpaper[data-wallpaper="mist"][data-hs-theme="dark"] {
	--HS-WP-Base: linear-gradient(160deg, #0c0e15 0%, #11141f 60%, #15111b 100%);
	--HS-WP-1: #1f2c58;
	--HS-WP-2: #2d2149;
	--HS-WP-3: #113442;
	--HS-WP-4: #3b1f30;
}

/*
**
**
**
**
**
** Aurora - indigo and violet with a ribbon of teal
** =================================
*/

.HS-Wallpaper[data-wallpaper="aurora"] {
	--HS-WP-Base: linear-gradient(160deg, #e5e7ff 0%, #ebe2ff 55%, #ddf3ee 100%);
	--HS-WP-1: #9fb0ff;
	--HS-WP-2: #c09cff;
	--HS-WP-3: #86dcc9;
	--HS-WP-4: #ffb8da;
}

.HS-Wallpaper[data-wallpaper="aurora"][data-hs-theme="dark"] {
	--HS-WP-Base: linear-gradient(160deg, #07091a 0%, #0b0a1e 60%, #061317 100%);
	--HS-WP-1: #2e42c0;
	--HS-WP-2: #6529b8;
	--HS-WP-3: #0e8070;
	--HS-WP-4: #9a2d6e;
}

/*
**
**
**
**
**
** Lagoon - clear ocean blue and aqua
** =================================
*/

.HS-Wallpaper[data-wallpaper="lagoon"] {
	--HS-WP-Base: linear-gradient(160deg, #ddf1fa 0%, #e1ebff 55%, #daf5eb 100%);
	--HS-WP-1: #8fd0ee;
	--HS-WP-2: #9fb9ff;
	--HS-WP-3: #a5ead2;
	--HS-WP-4: #c4e3ff;
}

.HS-Wallpaper[data-wallpaper="lagoon"][data-hs-theme="dark"] {
	--HS-WP-Base: linear-gradient(160deg, #04111a 0%, #061426 60%, #04151a 100%);
	--HS-WP-1: #0c5373;
	--HS-WP-2: #1d3f94;
	--HS-WP-3: #0c6a59;
	--HS-WP-4: #133c60;
}

/*
**
**
**
**
**
** Bloom - petal pink and lilac
** =================================
*/

.HS-Wallpaper[data-wallpaper="bloom"] {
	--HS-WP-Base: linear-gradient(160deg, #fde5ee 0%, #f3e3fb 55%, #ffe9e3 100%);
	--HS-WP-1: #ffb3d0;
	--HS-WP-2: #dab7ff;
	--HS-WP-3: #ffcdbd;
	--HS-WP-4: #f5a9c8;
}

.HS-Wallpaper[data-wallpaper="bloom"][data-hs-theme="dark"] {
	--HS-WP-Base: linear-gradient(160deg, #160a11 0%, #130b1c 60%, #170d0d 100%);
	--HS-WP-1: #7a1f4e;
	--HS-WP-2: #502a88;
	--HS-WP-3: #793a2c;
	--HS-WP-4: #8a2a5c;
}

/*
**
**
**
**
**
** Sunrise - warm peach, coral and gold
** =================================
*/

.HS-Wallpaper[data-wallpaper="sunrise"] {
	--HS-WP-Base: linear-gradient(160deg, #ffeddc 0%, #ffe4e0 55%, #fff1d5 100%);
	--HS-WP-1: #ffc48f;
	--HS-WP-2: #ffa898;
	--HS-WP-3: #ffdc85;
	--HS-WP-4: #ffbcc6;
}

.HS-Wallpaper[data-wallpaper="sunrise"][data-hs-theme="dark"] {
	--HS-WP-Base: linear-gradient(160deg, #150b07 0%, #190c0f 60%, #141006 100%);
	--HS-WP-1: #873c12;
	--HS-WP-2: #7d1f2a;
	--HS-WP-3: #7a5810;
	--HS-WP-4: #6a1f3a;
}

/*
**
**
**
**
**
** Meadow - sage, fresh mint and a little sunshine
** =================================
*/

.HS-Wallpaper[data-wallpaper="meadow"] {
	--HS-WP-Base: linear-gradient(160deg, #e6f3e2 0%, #e2f1e9 55%, #f2f4da 100%);
	--HS-WP-1: #b5e0ab;
	--HS-WP-2: #a8dccb;
	--HS-WP-3: #e4ec9c;
	--HS-WP-4: #c6e6b9;
}

.HS-Wallpaper[data-wallpaper="meadow"][data-hs-theme="dark"] {
	--HS-WP-Base: linear-gradient(160deg, #08110b 0%, #091310 60%, #0f1208 100%);
	--HS-WP-1: #1f5a2c;
	--HS-WP-2: #145347;
	--HS-WP-3: #515a12;
	--HS-WP-4: #24472a;
}

/*
**
**
**
**
**
** Dusk - lavender sky fading down into apricot
** =================================
*/

.HS-Wallpaper[data-wallpaper="dusk"] {
	--HS-WP-Base: linear-gradient(180deg, #e8e1fa 0%, #f3e3ee 50%, #fde5d7 100%);
	--HS-WP-1: #c2acf2;
	--HS-WP-2: #f5b9a3;
	--HS-WP-3: #a9b8f2;
	--HS-WP-4: #eeaecb;
}

.HS-Wallpaper[data-wallpaper="dusk"][data-hs-theme="dark"] {
	--HS-WP-Base: linear-gradient(180deg, #0d0a18 0%, #130c18 50%, #180f12 100%);
	--HS-WP-1: #3f2a7c;
	--HS-WP-2: #7a3a2a;
	--HS-WP-3: #263a7c;
	--HS-WP-4: #6a284e;
}

/*
**
**
**
**
**
** Graphite - quiet greys for people who like it calm
** =================================
*/

.HS-Wallpaper[data-wallpaper="graphite"] {
	--HS-WP-Base: linear-gradient(160deg, #eeeef1 0%, #e4e4e8 55%, #ececef 100%);
	--HS-WP-1: #d2d2da;
	--HS-WP-2: #e2e2e7;
	--HS-WP-3: #c8cad3;
	--HS-WP-4: #ebebef;
}

.HS-Wallpaper[data-wallpaper="graphite"][data-hs-theme="dark"] {
	--HS-WP-Base: linear-gradient(160deg, #0d0d0f 0%, #131315 55%, #0f0f11 100%);
	--HS-WP-1: #26262c;
	--HS-WP-2: #1f1f23;
	--HS-WP-3: #2c2c34;
	--HS-WP-4: #1a1a1e;
}

/*
**
**
**
**
**
** Slate - muted steel blue and charcoal, for a more buttoned-up home screen
** =================================
*/

.HS-Wallpaper[data-wallpaper="slate"] {
	--HS-WP-Base: linear-gradient(160deg, #e4e8ed 0%, #dde2e9 55%, #e6e8eb 100%);
	--HS-WP-1: #b8c3d1;
	--HS-WP-2: #c9d0da;
	--HS-WP-3: #a9b5c4;
	--HS-WP-4: #d3d8df;
}

.HS-Wallpaper[data-wallpaper="slate"][data-hs-theme="dark"] {
	--HS-WP-Base: linear-gradient(160deg, #0a0d12 0%, #0e1218 55%, #0c0e12 100%);
	--HS-WP-1: #1c2a3c;
	--HS-WP-2: #222c38;
	--HS-WP-3: #15243a;
	--HS-WP-4: #283442;
}

/*
**
**
**
**
**
** Stone - warm taupe and greige, calm and understated
** =================================
*/

.HS-Wallpaper[data-wallpaper="stone"] {
	--HS-WP-Base: linear-gradient(160deg, #efebe6 0%, #e8e3dd 55%, #edeae5 100%);
	--HS-WP-1: #d7cdc1;
	--HS-WP-2: #e1d9cf;
	--HS-WP-3: #cbc2b6;
	--HS-WP-4: #e6dfd6;
}

.HS-Wallpaper[data-wallpaper="stone"][data-hs-theme="dark"] {
	--HS-WP-Base: linear-gradient(160deg, #100e0c 0%, #14120f 55%, #110f0d 100%);
	--HS-WP-1: #2f271f;
	--HS-WP-2: #26211b;
	--HS-WP-3: #382e24;
	--HS-WP-4: #201c17;
}