/*
 * Linkin Park pro fanoušky (linkinpark.latte, fx/lp.js; docs/design.md, Linkin Park): páska s výročím, setlist,
 * oznámení a efekty slov, „Teď hraje“ v patičce a mezihra na úvodu.
 * Vlastní vizuál z tokenů webu – žádná loga, obaly ani fotky.
 * Setlist je „věc na stole“ (vytištěný list), takže zůstává světlý i v tmavém režimu.
 */


/* ---------- páska s výročím (jen ten den, ze serveru) ---------- */

.lp-band {
	background: var(--accent-soft);
	color: var(--ink);
}
.lp-band__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 12px;
	min-height: 34px;
	padding-block: 6px;
	font: 500 12px/1.4 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.lp-band__mark { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lp-band__date { color: var(--ink-muted); }
.lp-band__open {
	position: relative;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}
/* Páska je nízká, dotykový cíl tlačítka sahá přes její okraje (44 px). */
.lp-band__open::after { content: ""; position: absolute; inset: -14px -10px; }
.lp-band__open:hover { color: var(--ink); }
.lp-band__open[hidden] { display: none; }

/* 20. 7.: tichá vzpomínka. Šedá, bez ozdob, bez odkazu (tečky ten den šedé – pravidla na konci souboru). */
.lp-band--quiet { background: var(--line); color: var(--ink-muted); }
.lp-band--quiet .lp-band__in { letter-spacing: 0.04em; text-transform: none; }

@media (max-width: 480px) {
	.lp-band__in { letter-spacing: 0.04em; }
}


/* ---------- setlist (dialog) ---------- */

.lp-setlist {
	--sl-paper: #fbfaf6;
	--sl-ink: #121212;
	--sl-muted: #5a574f;
	--sl-line: #d9d5ca;
	--sl-accent: #2440d6;
	--sl-tape: rgba(232, 222, 190, 0.82);
	width: min(1120px, calc(100% - 2 * var(--gutter)));
	max-width: none;
	max-height: calc(100% - 24px);
	padding: 22px 12px 28px;
	border: 0;
	background: transparent;
	color: var(--sl-ink);
	/* Natočený papír přesahuje do stran o pár pixelů: do strany se nesmí dát posunout. */
	overflow: hidden auto;
	overscroll-behavior: contain;
	/* List se na počítači vejde celý (tři sloupce, písmo podle výšky okna); kde ne (telefon), jde posunout
	   prstem nebo kolečkem, ale bez posuvníku přes papír. */
	scrollbar-width: none;
}
.lp-setlist::-webkit-scrollbar { display: none; }
.lp-setlist::backdrop { background: rgba(18, 18, 18, 0.6); }
.lp-setlist__sheet {
	position: relative;
	padding: clamp(24px, 4vh, 34px) 44px clamp(16px, 2.6vh, 22px);
	background: var(--sl-paper);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 22px 44px -14px rgba(0, 0, 0, 0.45);
	transform: rotate(-0.8deg);
}
.lp-setlist ::selection { background: var(--sl-accent); color: #fff; }

/* Kousky lepicí pásky přes horní okraj listu: průsvitné, s natrženými konci. */
.lp-tape {
	position: absolute;
	top: -16px;
	width: clamp(84px, 16vw, 132px);
	height: 34px;
	background: var(--sl-tape);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	clip-path: polygon(3% 0, 97% 0, 100% 14%, 96% 30%, 100% 47%, 97% 63%, 100% 80%, 96% 100%, 4% 100%, 0 86%, 3% 70%, 0 53%, 4% 38%, 0 22%);
}
.lp-tape--left { left: 30px; transform: rotate(-7deg); }
.lp-tape--right { right: 30px; transform: rotate(5deg); }

.lp-setlist__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: var(--rule) solid var(--sl-ink);
}
.lp-setlist__kicker {
	margin-bottom: 10px;
	color: var(--sl-muted);
	font: 500 12px/1.4 var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.lp-setlist__title { font: 700 clamp(44px, min(7vw, 8.5vh), 72px)/0.86 var(--font-display); letter-spacing: -0.055em; }
.lp-setlist .dot { color: var(--sl-accent); }

.lp-close {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: -8px -12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.lp-close:hover { color: var(--sl-accent); }
.lp-close:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 0; }

.lp-setlist__albums { columns: 3 240px; column-gap: 40px; margin-top: clamp(12px, 2vh, 18px); }
.lp-album { break-inside: avoid; padding-bottom: clamp(8px, 1.6vh, 14px); }
.lp-album__title {
	margin-bottom: 4px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--sl-line);
	color: var(--sl-muted);
	font: 500 11.5px/1.4 var(--font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.lp-album__songs { list-style: none; }
.lp-song {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 2px 0;
	font: 700 clamp(15px, min(1.9vw, 2.4vh), 20px)/1.18 var(--font-display);
	letter-spacing: -0.015em;
	text-transform: uppercase;
}
/* Davidovy srdcovky (LinkinPark::Hearts): plný štítek v akcentu listu. */
.lp-song__heart {
	align-self: center;
	padding: 3px 6px 2px;
	background: var(--sl-accent);
	color: #fff;
	font: 500 10px/1 var(--font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
/* Celý řádek je tlačítko (vybrat skladbu): vypadá jako text listu, při najetí a fokusu modře s posunem. */
.lp-song__pick {
	display: flex;
	flex: 1;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
	margin: 0 -6px;
	padding: 0 6px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out), translate var(--dur) var(--ease-out);
}
.lp-song__pick:hover,
.lp-song__pick:focus-visible { color: var(--sl-accent); translate: 4px 0; }
.lp-song__pick:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 0; }
.lp-song--playing .lp-song__pick { color: var(--sl-accent); }
/* Nápověda k výběru skladby: na počítači vpravo vedle nadpisu (list se tak vejde i do 640 px výšky), úzce pod ním. */
.lp-setlist__pick {
	align-self: flex-end;
	max-width: 46ch;
	margin-left: auto;
	color: var(--sl-muted);
	font: 500 12px/1.5 var(--font-mono);
	letter-spacing: 0.04em;
	text-align: right;
}
@media (max-width: 720px) {
	.lp-setlist__head { flex-wrap: wrap; }
	.lp-setlist__pick { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; text-align: left; }
}
.lp-song__no {
	flex: none;
	width: 2ch;
	color: var(--sl-muted);
	font: 500 11px/1 var(--font-mono);
	letter-spacing: 0;
}
/* Z trezoru: jako přídavek na konci setlistu, oddělený čárkovanou linkou. */
.lp-album--vault { margin-top: 6px; padding-top: 12px; border-top: 1.5px dashed var(--sl-ink); }
.lp-album--vault .lp-album__title { color: var(--sl-accent); border-bottom-color: transparent; }
.lp-setlist__chester {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--sl-line);
	color: var(--sl-muted);
	font: 500 12px/1.5 var(--font-mono);
	letter-spacing: 0.04em;
}

@media (max-width: 560px) {
	.lp-setlist { padding-inline: 6px; }
	.lp-setlist__sheet { padding: 34px 20px 22px; transform: rotate(-0.5deg); }
	.lp-tape--left { left: 16px; }
	.lp-tape--right { right: 16px; }
	.lp-song { font-size: 18px; }
}


/* ---------- oznámení k tajným slovům (vizuální; čtečky dostanou text přes aria-live) ---------- */

.lp-toast {
	position: fixed;
	left: var(--gutter);
	bottom: var(--gutter);
	z-index: 98;
	max-width: min(440px, calc(100% - 2 * var(--gutter)));
	padding: 14px 18px 16px;
	border-left: 4px solid var(--accent);
	background: var(--ink);
	color: var(--paper);
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.35s ease, transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.lp-toast.is-shown { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.lp-toast__kicker { margin-bottom: 6px; font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.78; }
.lp-toast__title { margin-bottom: 4px; font: 700 20px/1.15 var(--font-display); letter-spacing: -0.02em; }
.lp-toast__text { font-size: 15px; line-height: 1.5; }


/* ---------- efekty tajných slov (vytváří fx/lp.js, jen bez prefers-reduced-motion) ---------- */

.lp-fx { position: fixed; inset: 0; z-index: 96; pointer-events: none; }
.lp-fx svg { display: block; width: 100%; height: 100%; }

/* papercut: přes stránku se roztrhne papír, pod trhlinou je modrá vrstva se vzkazem. */
.lp-tear__hole { fill: var(--accent); }
.lp-tear__shade { fill: rgba(0, 0, 0, 0.24); }
.lp-tear__edge { fill: none; stroke: var(--paper-raised); stroke-width: 3; stroke-linejoin: miter; }
.lp-tear__title { fill: var(--accent-ink); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; }
.lp-tear__meta { fill: var(--accent-ink); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.1em; }
:root[data-scheme="dark"] .lp-tear__edge { stroke: var(--line); }

/* faint: víčka se zavřou (stránka omdlí) a zase otevřou. */
.lp-faint { z-index: 97; }
.lp-faint__lid {
	position: absolute;
	left: -5%;
	right: -5%;
	height: 66%;
	background: #050505;
	box-shadow: 0 0 60px 30px #050505;
	transform: scaleY(0);
}
.lp-faint__lid--top { top: 0; border-radius: 0 0 50% 50% / 0 0 22% 22%; transform-origin: 50% 0; }
.lp-faint__lid--bottom { bottom: 0; border-radius: 50% 50% 0 0 / 22% 22% 0 0; transform-origin: 50% 100%; }

/* numb: web otupí – CSS přechody (najetí na odkazy, tlačítka) se na tu chvíli zpomalí. */
html.lp-numb { --dur: 1100ms; --dur-fast: 900ms; }
html.lp-numb .cursor { filter: grayscale(1); }

/* meteora: obloha, roj meteorů, dopad na tečku za jménem a přeliv v barvách From Zero. Všechno kreslí fx/lp.js
   do jednoho plátna přes okno (klikům nepřekáží, viz .lp-fx) a po efektu ho odstraní; barvy meteorů bere z --fx-1
   až --fx-3 (jinak akcent, bílá a teplá žlutá). Pod oznámením (z-index 98), aby šlo číst. */
.lp-meteora { width: 100%; height: 100%; }

/* fromzero: kopie jména, která se rozjede od nuly (originál je mezitím skrytý a nic se v něm nemění). */
.lp-clone { position: absolute; z-index: 5; margin: 0; pointer-events: none; }
.facts__value .lp-count { font-variant-numeric: tabular-nums; }

/* fromzero: úvod od nuly. Černá víčka se zavřou do svítící čáry, ta se stáhne do tečky (semínko), do ní se
   slétají jiskry, z ní se rozepne kruh v barvách From Zero, v něm jména kapely a FROM ZERO s přelivem barev alba,
   nakonec vlna barev From Zero přes celé okno, ze které se vynoří web. Barvy = obal From Zero (jen barvy). */
.lp-genesis { z-index: 97; overflow: hidden; }
.lp-crt__lid { position: absolute; left: 0; right: 0; height: 50.5%; background: #050505; transform: scaleY(0); }
.lp-crt__lid--top { top: 0; transform-origin: 50% 0; }
.lp-crt__lid--bottom { bottom: 0; transform-origin: 50% 100%; }
.lp-crt__line {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 3px;
	margin-top: -1.5px;
	background: #fff;
	box-shadow: 0 0 18px 4px rgba(200, 215, 255, 0.85);
	opacity: 0;
}
.lp-genesis__spark {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 6px 2px rgba(222, 120, 211, 0.7);
	opacity: 0;
}
.lp-genesis__seed {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 22px 8px rgba(233, 209, 246, 0.85), 0 0 60px 20px rgba(222, 120, 211, 0.45);
	opacity: 0;
}
.lp-genesis__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(80vmin, 580px);
	height: min(80vmin, 580px);
	overflow: visible;
	opacity: 0;
	translate: -50% -50%;
	filter: drop-shadow(0 0 14px rgba(222, 120, 211, 0.55));
}
.lp-genesis__word {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #f4eaf8;
	font: 700 clamp(26px, 4.4vw, 58px)/1 var(--font-display);
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	translate: -50% -50%;
}
.lp-genesis__word--title {
	padding-block: 0.08em;
	background: linear-gradient(100deg, #e9d1f6 0%, #de78d3 35%, #b583b4 60%, #d4a1dd 80%, #e9d1f6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(34px, 7.4vw, 104px);
}
.lp-genesis__date {
	position: absolute;
	top: calc(50% + clamp(34px, 5.4vw, 74px));
	left: 0;
	right: 0;
	color: #d4a1dd;
	font: 500 clamp(11px, 1.1vw, 14px)/1.4 var(--font-mono);
	letter-spacing: 0.24em;
	text-align: center;
	text-transform: uppercase;
	opacity: 0;
}
.lp-genesis__flood {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300vmax;
	height: 300vmax;
	margin: -150vmax 0 0 -150vmax;
	border-radius: 50%;
	background: radial-gradient(closest-side, #e9d1f6 0%, #d4a1dd 14%, #de78d3 28%, #b583b4 44%, #8f6c85 62%, #2d3231 82%, transparent 100%);
	transform: scale(0);
}

/* victim: glitch, po bouři trvalá slabší distorze. Text se rozdvojí (stín vlevo červený, vpravo tyrkysový, posun --glitch z fx/lp-fx.js),
   přes okno šum (malé plátno roztažené bez vyhlazení), řádkování a roztržené pruhy; uprostřed velké MORE THE VICTIM
   ve třech vrstvách, které se trhají každá jinak. Jen malé plochy blikají, žádný záblesk přes celé okno. */
html.lp-glitching body { text-shadow: var(--glitch, 0px) 0 rgba(255, 40, 90, 0.75), calc(-1 * var(--glitch, 0px)) 0 rgba(0, 235, 255, 0.75); }
.lp-victim { z-index: 97; overflow: hidden; }
.lp-victim__noise { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; mix-blend-mode: overlay; opacity: 0.1; }
.lp-victim::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}
.lp-victim__tears { position: absolute; inset: 0; }
.lp-victim__tear { position: absolute; left: -40px; right: -40px; opacity: 0.38; }
.lp-victim__tear--red { background: #ff285a; }
.lp-victim__tear--cyan { background: #00ebff; }
.lp-victim__tear--white { background: #fff; opacity: 0.22; }
.lp-victim__title {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	display: grid;
	margin-top: -0.5em;
	font: 700 clamp(44px, 10vw, 160px)/1 var(--font-display);
	letter-spacing: -0.05em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}
.lp-victim__layer { grid-area: 1 / 1; }
.lp-victim__layer--base { color: #f4f4f4; text-shadow: 0 0 30px rgba(0, 0, 0, 0.6); }
.lp-victim__layer--red { color: #ff285a; mix-blend-mode: screen; }
.lp-victim__layer--cyan { color: #00ebff; mix-blend-mode: screen; }
@media (max-width: 700px) {
	.lp-victim__title { white-space: normal; font-size: clamp(40px, 15vw, 72px); line-height: 0.92; margin-top: -1em; }
}

/* finalmasquerade: škraboška přes celé okno (vlastní kresba v SVG). Tma s otvory pro oči, maska s leskem a lemem;
   velikost masky přes --masq-scale (fx/lp-fx.js), průlet okem = zvětšení celého SVG kolem levého oka. */
svg.lp-masq { width: 100%; height: 100%; z-index: 97; overflow: hidden; }
.lp-masq__night { fill: #08080a; }
.lp-masq__mask { transform: scale(var(--masq-scale, 1)); transform-box: view-box; transform-origin: 500px 480px; }
.lp-masq__body { fill: #2a282b; stroke: #d8d2c4; stroke-width: 2.2; }
.lp-masq__trim { fill: none; stroke: rgba(216, 210, 196, 0.45); stroke-width: 1.2; stroke-dasharray: 2 6; }
.lp-masq__sheen { fill: url(#lp-masq-sheen); opacity: 0.55; }
.lp-masq__stop { stop-color: #ffffff; stop-opacity: 0; }
.lp-masq__stop--hi { stop-opacity: 0.4; }

/* concert: reflektory shora v barvách alba (proměnné --fx-* se během koncertu přelévají), dole název alba a rok,
   tečky pulzují do rytmu. Reflektor = kužel z conic-gradient, nahoře ostrý, dolů slábne (maska). */
.lp-stage { z-index: 90; overflow: hidden; }
.lp-stage__beam {
	position: absolute;
	top: -10vh;
	width: 70vmax;
	height: 130vh;
	margin-left: -35vmax;
	background: conic-gradient(from 165deg at 50% 0%, transparent 0deg, var(--beam) 12deg, var(--beam) 18deg, transparent 30deg, transparent 360deg);
	-webkit-mask-image: linear-gradient(#000 10%, transparent 92%);
	mask-image: linear-gradient(#000 10%, transparent 92%);
	opacity: 0.34;
	transform-origin: 50% 0;
	will-change: transform;
}
.lp-stage__beam--1 { --beam: var(--fx-1); left: 12%; }
.lp-stage__beam--2 { --beam: var(--fx-3); left: 37%; }
.lp-stage__beam--3 { --beam: var(--fx-2); left: 63%; }
.lp-stage__beam--4 { --beam: var(--fx-1); left: 88%; }
.lp-stage__caption {
	position: absolute;
	left: 50%;
	bottom: 9vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 6px 16px;
	max-width: calc(100% - 2 * var(--gutter));
	padding: 12px 22px 14px;
	background: var(--lp-band);
	color: var(--lp-band-ink);
	text-align: center;
	translate: -50% 0;
	opacity: 0;
}
.lp-stage__album { font: 700 clamp(28px, 5vw, 64px)/1 var(--font-display); letter-spacing: -0.04em; text-transform: uppercase; }
.lp-stage__year { font: 500 clamp(12px, 1.2vw, 15px)/1 var(--font-mono); letter-spacing: 0.1em; opacity: 0.8; }
/* Užší okno: název alba nahoru, dole je oznámení (lp-toast) a obě by se překryla. */
@media (max-width: 1099px) {
	.lp-stage__caption { top: 18vh; bottom: auto; }
}
/* Rytmus: tečky (i ta házecí v úvodu) pulzují vlastností scale, takže se nepletou s jejich transformací. */
html.lp-concert .dot { animation: lp-beat 0.25s ease-in-out infinite alternate; }
@keyframes lp-beat { to { scale: 1.32; } }

/* castleofglass: přes okno sklo (stránka za ním se jemně rozostří) s leskem, praskliny od místa nárazu a střepy, které
   vypadnou z okna. Rozostření je backdrop-filter skla a střepů, proto vrstva .lp-glass nesmí mít průhlednost ani filtr
   (byla by jim „pozadím“ místo stránky). Nádech skla z --fx-2, hrany a praskliny světlé se stínem, ať jsou vidět
   ve světlém, tmavém i v motivu. */
.lp-glass { overflow: hidden; }
.lp-glass__pane,
.lp-glass__shard {
	position: absolute;
	background: color-mix(in srgb, var(--fx-2) 7%, rgba(255, 255, 255, 0.1));
	-webkit-backdrop-filter: blur(1.6px) saturate(1.2);
	backdrop-filter: blur(1.6px) saturate(1.2);
}
.lp-glass__pane {
	inset: 0;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset 0 0 90px rgba(255, 255, 255, 0.16);
	opacity: 0;
}
.lp-glass__sheen {
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.46) 50%, rgba(255, 255, 255, 0.1) 70%, transparent);
}
.lp-glass .lp-glass__cracks { position: absolute; inset: 0; visibility: hidden; }
.lp-glass__crack-shade { fill: none; stroke: rgba(0, 0, 0, 0.34); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-glass__crack { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lp-glass__flash {
	position: absolute;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), color-mix(in srgb, var(--fx-2) 40%, rgba(255, 255, 255, 0.35)) 40%, transparent);
	opacity: 0;
}
.lp-glass__shard { visibility: hidden; will-change: transform; }
.lp-glass__glint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%); opacity: 0.15; }
.lp-glass__shard svg { position: relative; }
.lp-glass__edge { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 3; stroke-linejoin: round; }
.lp-glass__splinter {
	position: absolute;
	background: rgba(255, 255, 255, 0.9);
	clip-path: polygon(50% 0, 100% 78%, 12% 100%);
	visibility: hidden;
}

/* iridescent: nadpisy, názvy projektů a tečky dostanou duhový přeliv (background-clip: text), karty v okně tenký duhový
   okraj se září. Duha je jedna přes celé okno (background-attachment: fixed), takže navazuje přes písmena, tečky
   i okraje, a posouvá se. Text se do průhledné přelije přechodem až s html.lp-iri-on (fx/lp-fx.js). Vlastní duha, ne
   logo; na světlé stránce sytější (čitelnost), na tmavé světlejší. Potomci nadpisů zvlášť: písmena rozdělená pro
   animace mají vlastní vrstvu a přes nadpis by zmizela. */
html.lp-iri { --lp-iri: repeating-linear-gradient(100deg, #c8234c 0vw, #d0620e 14vw, #a87b00 28vw, #1b8f4f 43vw, #136bbd 57vw, #4b3bc8 71vw, #962bb8 86vw, #c8234c 100vw); }
html.lp-iri[data-scheme="dark"] { --lp-iri: repeating-linear-gradient(100deg, #ff6b8b 0vw, #ffa45c 14vw, #ffe066 28vw, #6ee7a8 43vw, #64c8ff 57vw, #a495ff 71vw, #e48bff 86vw, #ff6b8b 100vw); }
html.lp-iri :is(h1, h2, h3, .project-row__title, .older__title, .tile__title, .case-next__title, .dot),
html.lp-iri :is(h1, h2, h3, .project-row__title, .older__title, .tile__title, .case-next__title) :not(svg, svg *),
.lp-iri-ring__line {
	background-image: var(--lp-iri);
	background-size: 300vw 100vh;
	background-attachment: fixed;
	animation: lp-iri-flow 4.5s linear both;
}
html.lp-iri :is(h1, h2, h3, .project-row__title, .older__title, .tile__title, .case-next__title, .dot),
html.lp-iri :is(h1, h2, h3, .project-row__title, .older__title, .tile__title, .case-next__title) :not(svg, svg *) {
	-webkit-background-clip: text;
	background-clip: text;
	transition: color 0.7s ease;
}
html.lp-iri.lp-iri-on :is(h1, h2, h3, .project-row__title, .older__title, .tile__title, .case-next__title, .dot),
html.lp-iri.lp-iri-on :is(h1, h2, h3, .project-row__title, .older__title, .tile__title, .case-next__title) :not(svg, svg *) { color: transparent; }
@keyframes lp-iri-flow { to { background-position: -150vw 0; } }
/* Okraj karty: vrstva v souřadnicích stránky kolem karty (nikdy přes okraj okna, takže nepřidá vodorovný posuvník),
   čára je maska „rámeček“, záře její rozmazaná kopie (rozmazání se do posouvání stránky nepočítá). */
.lp-iri-cards { position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none; }
.lp-iri-ring { position: absolute; opacity: 0; }
.lp-iri-ring__line,
.lp-iri-ring__glow { position: absolute; inset: 0; }
.lp-iri-ring__line {
	padding: 1.5px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.lp-iri-ring__glow { filter: blur(7px); opacity: 0.55; }
.lp-iri-ring__glow .lp-iri-ring__line { padding: 3px; }

/* intheend: závěrečné titulky. Stránka se ztmaví (průsvitná černá), titulky jedou zdola nahoru (transform), na konci
   velké „Konec“ a skladba. Klikům nepřekáží (.lp-fx), přeskočí Esc nebo klik kamkoli (fx/lp-fx.js). Stejné ve všech
   vzhledech: světlý text na tmavé. */
.lp-credits { z-index: 97; overflow: hidden; color: #f3f1ea; text-align: center; }
.lp-credits__shade { position: absolute; inset: 0; background: rgba(6, 6, 8, 0.92); opacity: 0; }
.lp-credits__roll {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(760px, calc(100% - 2 * var(--gutter)));
	padding-bottom: 6vh;
	translate: -50% 0;
	will-change: transform;
}
.lp-credits__site { font: 700 clamp(44px, 7vw, 96px)/1 var(--font-display); letter-spacing: -0.05em; }
.lp-credits__block { margin-top: clamp(48px, 8vh, 84px); }
.lp-credits__role {
	margin-bottom: 14px;
	color: rgba(243, 241, 234, 0.66);
	font: 500 12px/1.4 var(--font-mono);
	letter-spacing: 0.24em;
	text-transform: uppercase;
}
.lp-credits__name { font: 700 clamp(26px, 3.4vw, 40px)/1.15 var(--font-display); letter-spacing: -0.025em; }
.lp-credits__list { list-style: none; }
.lp-credits__list--cols { columns: 2; column-gap: 40px; }
.lp-credits__item { break-inside: avoid; font: 600 clamp(16px, 1.9vw, 24px)/1.4 var(--font-display); letter-spacing: -0.015em; }
.lp-credits__end { position: absolute; top: 50%; left: 0; right: 0; padding-inline: var(--gutter); translate: 0 -50%; }
.lp-credits__title { font: 700 clamp(64px, 13vw, 168px)/0.95 var(--font-display); white-space: nowrap; opacity: 0; }
.lp-credits__song {
	margin-top: 18px;
	color: rgba(243, 241, 234, 0.72);
	font: 500 clamp(11px, 1.2vw, 14px)/1.4 var(--font-mono);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0;
}
.lp-credits__skip {
	position: absolute;
	top: var(--gutter);
	right: var(--gutter);
	color: rgba(243, 241, 234, 0.62);
	font: 500 11px/1.4 var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0;
}


/* ---------- Teď hraje (patička všech stránek) ----------
 * Skladba dne s ekvalizérem ze čtyř sloupečků. Sloupečky se rozehrají jen na pár vteřin, když patička vjede na
 * obrazovku (fx/lp.js přidá .is-playing), a při najetí nebo fokusu; s omezeným pohybem a bez JS stojí.
 */

.lp-np { display: flex; min-width: 0; }
.lp-np__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.lp-np__link[hidden] { display: none; }
.lp-np__link:hover { color: var(--accent); }
.lp-np__label { color: var(--ink); }
.lp-np__link:hover .lp-np__label { color: inherit; }

.lp-eq { display: inline-flex; flex: none; align-items: flex-end; gap: 2px; width: 15px; height: 12px; }
.lp-eq span {
	--eq-rest: 0.45;
	--eq-peak: 1;
	--eq-dur: 0.7s;
	--eq-delay: 0s;
	flex: 1;
	height: 100%;
	background: var(--accent);
	transform: scaleY(var(--eq-rest));
	transform-origin: 50% 100%;
}
.lp-eq span:nth-child(2) { --eq-rest: 0.9; --eq-peak: 0.35; --eq-dur: 0.55s; --eq-delay: -0.2s; }
.lp-eq span:nth-child(3) { --eq-rest: 0.6; --eq-peak: 1; --eq-dur: 0.8s; --eq-delay: -0.45s; }
.lp-eq span:nth-child(4) { --eq-rest: 0.3; --eq-peak: 0.8; --eq-dur: 0.62s; --eq-delay: -0.1s; }
@keyframes lp-eq {
	from { transform: scaleY(var(--eq-rest)); }
	to { transform: scaleY(var(--eq-peak)); }
}
@media (prefers-reduced-motion: no-preference) {
	/* Sudý počet průchodů tam a zpátky: sloupečky skončí tam, kde stály (celkem do 5 s, WCAG 2.2.2). */
	.lp-np.is-playing .lp-eq span { animation: lp-eq var(--eq-dur) ease-in-out var(--eq-delay) 6 alternate; }
	.lp-np__link:hover .lp-eq span,
	.lp-np__link:focus-visible .lp-eq span { animation: lp-eq var(--eq-dur) ease-in-out var(--eq-delay) infinite alternate; }
}

@media (max-width: 1199px) {
	/* Užší okno: „Teď hraje“ na vlastním řádku nad copyrightem, ať se řádek s odkazy neláme napůl. */
	.lp-np { order: -1; flex-basis: 100%; }
}
@media (max-width: 700px) {
	.lp-np__link { padding-block: 6px; }
}


/* ---------- mezihra na úvodu (mezi Kariérou a Kontaktem) ----------
 * Pás přes celou šířku: vlevo velká deska (vlastní kresba v SVG, ořízne ji okraj pásu), vpravo skladba dne,
 * odpočet a setlist.
 * - Světlý a tmavý vzhled: klidně v barvách webu (vyvýšený papír, silné linky nahoře a dole, štítek v akcentu).
 * - Motiv Linkin Park (lp-theme.css): podklad a štítek v barvách alba a přes pás se pomalu přelévají barvy alba
 *   (dvě vrstvy měkkých skvrn, každá se točí jinak rychle). Deska je černá vždycky (vinyl), v tmavém okraj.
 * Desku točí a pás posouvá scroll (fx/lp.js); bez JS a s omezeným pohybem stojí. Na telefonu deska vyjede zpod
 * horního okraje pásu a text je pod ní.
 */

.lp-inter {
	--lpi-bg: var(--paper-raised);
	--lpi-ink: var(--ink);
	--lpi-muted: var(--ink-muted);
	--lpi-line: var(--line);
	--lpi-stroke: color-mix(in srgb, var(--ink) 50%, transparent);
	--lpi-dot: var(--accent);
	--lpi-btn: var(--ink);
	--lpi-btn-ink: var(--paper);
	--lpi-btn-hover: var(--accent);
	--lpi-btn-hover-ink: var(--accent-ink);
	--lpi-label: var(--accent);
	--lpi-label-ink: var(--accent-ink);
	/* Skladba dne v pásu skladeb: ve světlém vzhledu akcent, černá by na černé desce zmizela. */
	--lpi-today: var(--accent);
	--lpi-rim: transparent;
	--lpi-vinyl: #111110;
	--lpi-groove: #1e1e1c;
	--lpi-gap: #2d2c29;
	--lpi-disc: clamp(560px, 52vw, 800px);
	position: relative;
	/* flow-root: záporný horní okraj desky na telefonu se nesmí spojit s okrajem pásu (overflow: clip BFC nedělá). */
	display: flow-root;
	margin-top: 140px;
	overflow: clip;
	border-block: var(--rule) solid var(--line-strong);
	background: var(--lpi-bg);
	color: var(--lpi-ink);
}
/* Tmavě: černá deska na tmavém papíře potřebuje světlý okraj. Bez JS podle media query, s JS podle data-scheme. */
@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"]:not([data-scheme]) .lp-inter { --lpi-rim: rgba(255, 255, 255, 0.14); --lpi-today: var(--ink); }
}
:root[data-scheme="dark"] .lp-inter { --lpi-rim: rgba(255, 255, 255, 0.14); --lpi-today: var(--ink); }

/* Motiv Linkin Park: pás v barvách alba. */
:root[data-theme="lp"] .lp-inter {
	--lpi-bg: var(--lp-band);
	--lpi-ink: var(--lp-band-ink);
	--lpi-muted: color-mix(in srgb, var(--lp-band-ink) 78%, transparent);
	--lpi-line: color-mix(in srgb, var(--lp-band-ink) 30%, transparent);
	--lpi-stroke: color-mix(in srgb, var(--lp-band-ink) 62%, transparent);
	--lpi-dot: var(--lp-label);
	--lpi-btn: var(--lp-band-ink);
	--lpi-btn-ink: var(--lp-band);
	--lpi-btn-hover: var(--lp-label);
	--lpi-btn-hover-ink: var(--lp-label-ink);
	--lpi-label: var(--lp-label);
	--lpi-label-ink: var(--lp-label-ink);
	--lpi-rim: color-mix(in srgb, var(--lp-band-ink) 16%, transparent);
	--lpi-today: var(--lp-band-ink);
	border-block-color: transparent;
}
/* Přeliv: dvě přerostlé vrstvy s měkkými skvrnami v barvách alba se pomalu otáčí proti sobě. Jen v motivu. */
:root[data-theme="lp"] .lp-inter::before,
:root[data-theme="lp"] .lp-inter::after {
	content: "";
	position: absolute;
	inset: -45%;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
}
:root[data-theme="lp"] .lp-inter::before {
	background:
		radial-gradient(closest-side at 28% 34%, var(--fx-1), transparent),
		radial-gradient(closest-side at 72% 62%, var(--fx-2), transparent);
	opacity: 0.5;
}
:root[data-theme="lp"] .lp-inter::after {
	background: radial-gradient(closest-side at 58% 40%, var(--fx-3), transparent 80%);
	opacity: 0.3;
}
@media (prefers-reduced-motion: no-preference) {
	:root[data-theme="lp"] .lp-inter::before { animation: lp-turn 28s linear infinite; }
	:root[data-theme="lp"] .lp-inter::after { animation: lp-turn 41s linear infinite reverse; }
	:root[data-theme="lp"][data-album="quiet"] .lp-inter::before,
	:root[data-theme="lp"][data-album="quiet"] .lp-inter::after { animation: none; }
}
:root[data-theme="lp"][data-album="quiet"] .lp-inter::before,
:root[data-theme="lp"][data-album="quiet"] .lp-inter::after { display: none; }

.lp-inter ::selection { background: var(--lpi-ink); color: var(--lpi-bg); }
.lp-inter :focus-visible { outline-color: var(--lpi-ink); }

.lp-inter__disc {
	position: absolute;
	top: 50%;
	left: max(calc(var(--lpi-disc) * -0.3), calc((100% - var(--max)) / 2 - var(--lpi-disc) * 0.25));
	z-index: 1;
	width: var(--lpi-disc);
	height: auto;
	translate: 0 -50%;
}
/* Natočení desky nastavuje fx/lp.js podle scrollu (--lp-turn na .lp-inter). */
/* --lp-spin přidá theme.js při převinutí do jiného alba (deska se zatočí pozpátku), --lp-scratch točení rukou
   (DJ pult v fx/lp.js). */
.lp-inter [data-lp-disc] { transform: rotate(calc(var(--lp-turn, 0deg) + var(--lp-spin, 0deg) + var(--lp-scratch, 0deg))); transform-box: view-box; transform-origin: 120px 120px; }
/* Deska jde chytit a roztočit (jen s JS; svislý tah prstem dál posouvá stránku). */
html.js .lp-inter:not(.lp-inter--quiet) .lp-inter__disc { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lp-inter.is-scratching .lp-inter__disc { cursor: grabbing; }
.lp-disc__vinyl { fill: var(--lpi-vinyl); stroke: var(--lpi-rim); stroke-width: 1.2; }
.lp-disc__groove { fill: none; stroke: var(--lpi-groove); stroke-width: 0.6; }
.lp-disc__gap { fill: none; stroke: var(--lpi-gap); stroke-width: 1.6; }
/* Jediná nesouměrná drážka: díky ní (a štítku) je vidět, že se deska točí. */
.lp-disc__scratch { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.8; stroke-dasharray: 40 70 12 160; }
.lp-disc__label { fill: var(--lpi-label); }
.lp-disc__label-text { fill: var(--lpi-label-ink); font: 500 7.6px var(--font-mono); letter-spacing: 0.04em; }
.lp-disc__side { fill: var(--lpi-label-ink); font: 700 15px var(--font-display); }
.lp-disc__hole { fill: var(--lpi-bg); }
.lp-disc__sheen { fill: #fff; opacity: 0.06; }

.lp-inter__in {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	padding-top: clamp(96px, 10vw, 144px);
	padding-bottom: clamp(96px, 10vw, 144px);
}
.lp-inter__body { grid-column: 7 / -1; }
/* Mřížka textu leží přes celý pás (i přes desku): ukazatel projde skrz, chytá jen samotný text a tlačítka. */
.lp-inter__in { pointer-events: none; }
.lp-inter__body { pointer-events: auto; }
.lp-inter__kicker { color: var(--lpi-muted); font-size: 12px; }
.lp-inter__title {
	margin-top: 16px;
	font: 700 clamp(56px, 6.2vw, 96px)/0.88 var(--font-display);
	letter-spacing: -0.055em;
}
.lp-inter__title .dot { color: var(--lpi-dot); }

.lp-inter__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 44px;
	border-top: 1px solid var(--lpi-line);
}
.lp-inter__fact { padding-top: 16px; }
.lp-inter__fact dt { margin-bottom: 8px; color: var(--lpi-muted); font-size: 12px; }
.lp-inter__fact dd { margin: 0; }
.lp-inter__song { display: block; font: 700 clamp(26px, 2.5vw, 34px)/1.05 var(--font-display); letter-spacing: -0.03em; }
.lp-inter__next { display: block; font: 600 clamp(18px, 1.6vw, 21px)/1.35 var(--font-display); letter-spacing: -0.015em; }
.lp-inter__meta { display: block; margin-top: 8px; color: var(--lpi-muted); font-size: 12px; letter-spacing: 0.08em; }

.lp-inter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 40px; }
.lp-inter__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 22px;
	border: 0;
	background: var(--lpi-btn);
	color: var(--lpi-btn-ink);
	font: 600 15px/1.2 var(--font-body);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lp-inter__btn[hidden] { display: none; }
.lp-inter__btn:hover { background: var(--lpi-btn-hover); color: var(--lpi-btn-hover-ink); }
.lp-inter__btn .icon { transition: transform var(--dur) var(--ease-out); }
.lp-inter__btn:hover .icon { transform: translateX(3px); }
.lp-inter__hint { color: var(--lpi-muted); font-size: 12px; letter-spacing: 0.08em; }
.lp-inter__hint kbd {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	margin-inline: 2px;
	padding: 0 6px;
	border: 1px solid var(--lpi-stroke);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--lpi-ink);
	font: 500 12px/1 var(--font-mono);
}
.lp-inter__hint--touch { display: none; }
/* Bez klávesnice (jen dotyk) nápověda k ťukání, jinak ke klávesám. Bez JS žádná (setlist i slova potřebují skript). */
@media not (any-pointer: fine) {
	.lp-inter__hint--keys { display: none; }
	.lp-inter__hint--touch { display: block; }
}
html:not(.js) .lp-inter__hint { display: none; }

@media (max-width: 1099px) {
	.lp-inter__body { grid-column: 6 / -1; }
	.lp-inter__facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.lp-inter__fact + .lp-inter__fact { margin-top: 18px; border-top: 1px solid var(--lpi-line); }
}

/* Užší okno: deska nahoře (vyjede zpod horního okraje pásu), text pod ní přes celou šířku. */
@media (max-width: 899px) {
	.lp-inter { --lpi-disc: min(104vw, 600px); margin-top: 104px; }
	.lp-inter__disc {
		position: relative;
		top: auto;
		left: auto;
		display: block;
		margin: calc(var(--lpi-disc) * -0.2) 0 0 calc(50% - var(--lpi-disc) / 2);
		translate: none;
	}
	.lp-inter__in { padding-top: 28px; padding-bottom: 40px; }
	.lp-inter__body { grid-column: 1 / -1; }
	.lp-inter__title { font-size: clamp(52px, 15vw, 88px); }
	.lp-inter__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
	.lp-inter__fact + .lp-inter__fact { margin-top: 0; border-top: 0; }
	.lp-inter__actions { margin-top: 32px; }
}
@media (max-width: 560px) {
	.lp-inter__facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.lp-inter__fact + .lp-inter__fact { margin-top: 18px; border-top: 1px solid var(--lpi-line); }
	.lp-inter__btn { width: 100%; justify-content: space-between; }
}

/* 20. 7.: deska stojí, místo odpočtu vzpomínka na Chestera, bez pásu skladeb (fx/lp.js nic netočí), štítek šedý. */
.lp-inter--quiet { --lpi-label: var(--ink-muted); --lpi-dot: var(--ink-muted); }


/* ---------- setlist: skladba dne ---------- */

.lp-song--today { color: var(--sl-accent); }
.lp-song__today {
	align-self: center;
	padding: 3px 6px 2px;
	border: 1px solid currentColor;
	font: 500 10px/1 var(--font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}


/* 20. 7.: tečka za jménem (i ostatní tečky webu) a nit kurzoru jsou ten den šedé. Až na konci, ať přebije modré. */
.lp-quiet .dot { color: var(--ink-muted); }
.lp-quiet .lp-inter__title .dot { color: var(--lpi-muted); }
.lp-quiet .cursor__dot { background: var(--ink-muted); }
.lp-quiet .lp-eq span { background: var(--ink-muted); animation: none !important; }