/*
 * Motiv „Linkin Park“ z přepínače vzhledu (parts.latte themeSwitch, early.js, theme.js; docs/design.md, Vzhled).
 * Celý web v barvách alba, ze kterého je skladba dne (data-album na <html> ze serveru, LinkinPark::albumSlug),
 * pomalu plující barvy v pozadí (.lp-ambient v @layout.latte) a výrazná mezihra (lp.css). Barvy jsou vytažené
 * z obalů alb (k-means nad obalem, jen barvy – obaly samotné na webu nejsou), upravené na kontrast: text ≥ 7 : 1,
 * tlumený text a akcent ≥ 4,5 : 1 proti papíru. Většina obalů je skoro černobílá (Minutes to Midnight, A Thousand
 * Suns, Living Things, The Hunting Party), barevné jsou From Zero (duhová tekutina do fialova) a One More Light.
 *
 * Proměnné navíc k tokenům (tokens.css):
 *   --fx-1..3        barvy efektů (meteora, pozadí motivu); pro světlý/tmavý vzhled odstíny modré akcentu,
 *   --lp-band(-ink)  podklad a text mezihry, --lp-label(-ink) štítek desky v mezihře,
 *   --lp-amb         síla plujících barev v pozadí (světlé palety slaběji, tmavé víc).
 * Světlá/tmavá paleta = hodnota v LinkinPark::AlbumSchemes (early.js podle ní nastaví data-scheme).
 * Paletu dostane i jakýkoli prvek s data-palette="<album>" (vzorky alb v přepínači, převinutí do jiného alba
 * v theme.js), takže se barvy nikde neopakují.
 * Pohyb pozadí jen bez prefers-reduced-motion; motiv si člověk zapíná sám a vypne ho stejným přepínačem.
 */

:root { --fx-1: #2440d6; --fx-2: #8fa2ff; --fx-3: #ffffff; }
:root[data-scheme="dark"] { --fx-1: #8fa2ff; --fx-2: #2440d6; --fx-3: #f1efe8; }


/* ---------- palety alb ---------- */

:root[data-theme="lp"] {
	--danger: #b42318;
	--lp-amb: 0.24;
}
:root[data-theme="lp"][data-album-scheme="dark"] { --danger: #ff8a80; --lp-amb: 0.42; }

/* Hybrid Theory (2000): teple šedý papír, kresba do černa, tmavá vínová. */
:root[data-theme="lp"][data-album="hybrid-theory"],
[data-palette="hybrid-theory"] {
	color-scheme: light;
	--paper: #d4cfc6;
	--paper-raised: #e2ded6;
	--ink: #1d1414;
	--ink-muted: #4d4540;
	--line: #b4ada3;
	--line-strong: #1d1414;
	--accent: #7a1d1d;
	--accent-ink: #f4f0e8;
	--accent-soft: #c9bdb5;
	--focus: #7a1d1d;
	--fx-1: #7a1d1d;
	--fx-2: #7b766d;
	--fx-3: #f1ede6;
	--lp-band: #291111;
	--lp-band-ink: #ece7de;
	--lp-label: #c5c1b9;
	--lp-label-ink: #291111;
}

/* Meteora (2003) a trezor (Meteora 20): černá, khaki a hnědé tóny. */
:root[data-theme="lp"][data-album="meteora"],
[data-palette="meteora"] {
	color-scheme: dark;
	--paper: #0f0c08;
	--paper-raised: #1b1610;
	--ink: #ece4d4;
	--ink-muted: #a99d87;
	--line: #3b3127;
	--line-strong: #ece4d4;
	--accent: #cbb68f;
	--accent-ink: #0f0c08;
	--accent-soft: #2e261c;
	--focus: #cbb68f;
	--fx-1: #a2937b;
	--fx-2: #6b5d4c;
	--fx-3: #d2c3a5;
	--lp-band: #221c15;
	--lp-band-ink: #f1eadc;
	--lp-label: #a2937b;
	--lp-label-ink: #0f0c08;
}

/* Minutes to Midnight (2007): bílá obloha, černé postavy. */
:root[data-theme="lp"][data-album="minutes-to-midnight"],
[data-palette="minutes-to-midnight"] {
	color-scheme: light;
	--paper: #f3f3f1;
	--paper-raised: #ffffff;
	--ink: #0c0c0c;
	--ink-muted: #545454;
	--line: #d5d5d3;
	--line-strong: #0c0c0c;
	--accent: #0c0c0c;
	--accent-ink: #ffffff;
	--accent-soft: #e2e2e0;
	--focus: #0c0c0c;
	--fx-1: #9d9d9d;
	--fx-2: #595959;
	--fx-3: #cdcdcd;
	--lp-band: #0c0c0c;
	--lp-band-ink: #f3f3f1;
	--lp-label: #e9e9e9;
	--lp-label-ink: #0c0c0c;
}

/* A Thousand Suns (2010): bílá a černé „světlo“, které z ní prorůstá (v pozadí pomalu se točící paprsky). */
:root[data-theme="lp"][data-album="a-thousand-suns"],
[data-palette="a-thousand-suns"] {
	color-scheme: light;
	--paper: #f2f2f2;
	--paper-raised: #fbfbfb;
	--ink: #0f0f0f;
	--ink-muted: #555555;
	--line: #d2d2d2;
	--line-strong: #0f0f0f;
	--accent: #0f0f0f;
	--accent-ink: #f2f2f2;
	--accent-soft: #e0e0e0;
	--focus: #0f0f0f;
	--fx-1: #0f0f0f;
	--fx-2: #555555;
	--fx-3: #c0c0c0;
	--lp-band: #0f0f0f;
	--lp-band-ink: #f2f2f2;
	--lp-label: #f2f2f2;
	--lp-label-ink: #0f0f0f;
}

/* Living Things (2012): studené šedé a tmavá do hněda. */
:root[data-theme="lp"][data-album="living-things"],
[data-palette="living-things"] {
	color-scheme: light;
	--paper: #d4d8d7;
	--paper-raised: #e3e6e5;
	--ink: #1f1818;
	--ink-muted: #4a4648;
	--line: #b3b8b9;
	--line-strong: #1f1818;
	--accent: #4a3434;
	--accent-ink: #eef0f0;
	--accent-soft: #c3c7c7;
	--focus: #4a3434;
	--fx-1: #392c2c;
	--fx-2: #949597;
	--fx-3: #f4f6f6;
	--lp-band: #2a2121;
	--lp-band-ink: #e9ecec;
	--lp-label: #c3c8c8;
	--lp-label-ink: #2a2121;
}

/* The Hunting Party (2014): světle šedá kresba, tmavě šedé linky. */
:root[data-theme="lp"][data-album="the-hunting-party"],
[data-palette="the-hunting-party"] {
	color-scheme: light;
	--paper: #ebebeb;
	--paper-raised: #f6f6f6;
	--ink: #1c1a1b;
	--ink-muted: #555355;
	--line: #cfcecf;
	--line-strong: #1c1a1b;
	--accent: #302d2e;
	--accent-ink: #f6f6f6;
	--accent-soft: #dcdbdc;
	--focus: #302d2e;
	--fx-1: #676667;
	--fx-2: #9c9c9e;
	--fx-3: #302d2e;
	--lp-band: #1f1d1e;
	--lp-band-ink: #eeeeee;
	--lp-label: #dddcdd;
	--lp-label-ink: #1f1d1e;
}

/* One More Light (2017): teplé světlo, tmavá růžovohnědá a broskvová. */
:root[data-theme="lp"][data-album="one-more-light"],
[data-palette="one-more-light"] {
	color-scheme: dark;
	--paper: #2a2326;
	--paper-raised: #352c30;
	--ink: #f6e3d0;
	--ink-muted: #cbae9f;
	--line: #4d3d40;
	--line-strong: #f6e3d0;
	--accent: #eab09b;
	--accent-ink: #2a2326;
	--accent-soft: #46353a;
	--focus: #eab09b;
	--fx-1: #c19689;
	--fx-2: #8f6563;
	--fx-3: #f4dec9;
	--lp-band: #362e31;
	--lp-band-ink: #fbeadb;
	--lp-label: #f4dec9;
	--lp-label-ink: #362e31;
}

/* From Zero (2024): duhová tekutina do fialova a růžova nad tmavou šedozelenou. */
:root[data-theme="lp"][data-album="from-zero"],
[data-palette="from-zero"] {
	color-scheme: dark;
	--paper: #1a1e1d;
	--paper-raised: #242928;
	--ink: #f4eaf8;
	--ink-muted: #bba8c1;
	--line: #393f3e;
	--line-strong: #f4eaf8;
	--accent: #dcaae4;
	--accent-ink: #1a1e1d;
	--accent-soft: #3a2f3e;
	--focus: #de78d3;
	--fx-1: #de78d3;
	--fx-2: #b583b4;
	--fx-3: #e9d1f6;
	--lp-band: #2d3231;
	--lp-band-ink: #f7effa;
	--lp-label: #e9d1f6;
	--lp-label-ink: #2d3231;
}

/* 20. 7.: tichá šedá, bez barev a bez pohybu. */
:root[data-theme="lp"][data-album="quiet"],
[data-palette="quiet"] {
	color-scheme: dark;
	--paper: #1c1c1b;
	--paper-raised: #252524;
	--ink: #e8e6e1;
	--ink-muted: #a4a29c;
	--line: #383735;
	--line-strong: #e8e6e1;
	--accent: #c9c7c1;
	--accent-ink: #1c1c1b;
	--accent-soft: #2f2f2d;
	--focus: #c9c7c1;
	--fx-1: #5a5955;
	--fx-2: #3b3a37;
	--fx-3: #8a8883;
	--lp-band: #2b2b29;
	--lp-band-ink: #ecebe7;
	--lp-label: #8a8883;
	--lp-label-ink: #1c1c1b;
	--lp-amb: 0;
}


/* ---------- převinutí do jiného alba (theme.js) ----------
 * Pět pruhů přes celé okno v barvách cílového alba (vrstva má data-palette): přitečou zleva, když zakryjí okno,
 * vymění se barvy webu, a odtečou doprava v opačném pořadí. Oba konce pruhů jsou oblé (tekutý okraj), proto jsou
 * pruhy širší než okno. Nad vším kromě dialogů (top layer), kliky nechytá.
 */
.theme-wipe { position: fixed; inset: 0; z-index: 99; overflow: hidden; pointer-events: none; }
.theme-wipe__band {
	position: absolute;
	top: -8vh;
	bottom: -8vh;
	left: -34vw;
	width: 168vw;
	border-radius: 34vw / 50%;
	/* Tekutý vzhled: uvnitř pruhu lesk (světlejší pás), na čele stín na pruh pod ním, ať jsou vrstvy vidět. */
	background: linear-gradient(100deg, var(--wipe) 30%, color-mix(in oklab, var(--wipe) 78%, #fff) 62%, var(--wipe) 82%);
	box-shadow: 1.5vw 0 5vw rgba(0, 0, 0, 0.22), inset -1.2vw 0 2vw -1vw rgba(255, 255, 255, 0.25);
	will-change: transform;
}
.theme-wipe__band--1 { --wipe: var(--fx-1); }
.theme-wipe__band--2 { --wipe: var(--fx-2); }
.theme-wipe__band--3 { --wipe: var(--lp-band); }
.theme-wipe__band--4 { --wipe: var(--fx-3); }
.theme-wipe__band--5 { --wipe: var(--paper); background: var(--paper); }


/* ---------- pozadí motivu: pomalu plující barvy alba ----------
 * Pevná vrstva za obsahem (z-index -1; body je v motivu průhledné, papír kreslí <html>). Tři velké měkké skvrny
 * v barvách --fx-1..3, každá pluje po svém (40 s tam a zpátky), takže se barvy pořád jinak přelévají.
 * Jen transform (GPU), žádný filtr. Karty mají vlastní papír, takže čitelnost textu nemění.
 */

.lp-ambient { display: none; }
:root[data-theme="lp"] body { background: transparent; }
:root[data-theme="lp"] .lp-ambient {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: block;
	overflow: hidden;
	pointer-events: none;
}
.lp-ambient span {
	position: absolute;
	width: 78vmax;
	height: 78vmax;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--lp-blob), transparent);
	opacity: var(--lp-amb);
	will-change: transform;
}
.lp-ambient span:nth-child(1) { --lp-blob: var(--fx-1); top: -32vmax; left: -24vmax; }
.lp-ambient span:nth-child(2) { --lp-blob: var(--fx-2); right: -30vmax; bottom: -36vmax; width: 86vmax; height: 86vmax; }
.lp-ambient span:nth-child(3) { --lp-blob: var(--fx-3); top: 24%; left: 38%; width: 56vmax; height: 56vmax; }

/* A Thousand Suns: z rohu prorůstají tmavé paprsky a pomalu se otáčí. */
:root[data-theme="lp"][data-album="a-thousand-suns"] .lp-ambient::before {
	content: "";
	position: absolute;
	inset: -60vmax;
	background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(15, 15, 15, 0.07) 0deg 5deg, transparent 5deg 17deg);
	-webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 75%);
	mask-image: radial-gradient(closest-side, #000 20%, transparent 75%);
	translate: 32vw -28vh;
	will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
	.lp-ambient span:nth-child(1) { animation: lp-drift-a 40s ease-in-out infinite alternate; }
	.lp-ambient span:nth-child(2) { animation: lp-drift-b 46s ease-in-out infinite alternate; }
	.lp-ambient span:nth-child(3) { animation: lp-drift-c 34s ease-in-out infinite alternate; }
	:root[data-theme="lp"][data-album="a-thousand-suns"] .lp-ambient::before { animation: lp-turn 140s linear infinite; }
	:root[data-theme="lp"][data-album="quiet"] .lp-ambient span { animation: none; }
}
@keyframes lp-drift-a {
	50% { transform: translate(22vw, 18vh) scale(1.15); }
	to { transform: translate(8vw, 46vh) scale(0.92); }
}
@keyframes lp-drift-b {
	50% { transform: translate(-26vw, -14vh) scale(0.88); }
	to { transform: translate(-10vw, -40vh) scale(1.12); }
}
@keyframes lp-drift-c {
	50% { transform: translate(-30vw, 16vh) scale(1.25); }
	to { transform: translate(14vw, -22vh) scale(0.9); }
}
@keyframes lp-turn { to { transform: rotate(360deg); } }