/* Krystof Mandik - pianista. Vlastni, na miru stavena sablona (rebuild
   2026-09-21 po Robertove "hrozna sablona / vsechno o nicem" - puvodni
   reskin zdiroveneho free music templatu se zahodil cely, misto dalsiho
   patchovani. Vzor: skutecne stranky klasickych hudebniku (Benjamin
   Righetti a dalsi) - cerno-bila fotografie, jeden sans-serif pro telo,
   serifova kurziva jen pro jmeno/akcent, minimum dekorace, zadne fiktivni
   sekce (tiskove citace, koncertni terminy) bez skutecneho obsahu. */

:root {
	--ink: #161513;
	--paper: #ffffff;
	--paper-warm: #faf9f6;
	--line: #e4e1da;
	--accent: #8a6a34;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: 'Work Sans', -apple-system, sans-serif;
	font-weight: 300;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.serif {
	font-family: 'Fraunces', Georgia, serif;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

/* ---------- Nav ---------- */

.nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.4em 5vw;
}

/* mix-blend-mode je NA JEDNOTLIVYCH textech/ikonach (ne na .nav jako
   celku) - .nav sam nema pozadi (pruhledny nad hero fotkou), difference
   invertuje jen bile pismenka/ikonky, at jsou citelne nad fotkou i nad
   bilym obsahem stranky pod ni. Kdyby to bylo na .nav, i solidni
   podbarveny panel mobilniho menu (viz nize) by se pak neprijatelne
   prolinal s obsahem POD sebou (Robert 2026-09-22: "pri prehrani videa
   kdyz se klikne na menu, prekryje se video temi nazvy sekci a nevypada
   to dobre") - .nav-links dostava pri otevreni sve VLASTNI pozadi, proto
   dole v mobilnim bloku dostava misto toho mix-blend-mode:normal. */
.nav-mark {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-size: 1.15em;
	color: #fff;
	text-decoration: none;
	letter-spacing: .02em;
	mix-blend-mode: difference;
}

.nav-links {
	display: flex;
	gap: 2.2em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-links a {
	color: #fff;
	text-decoration: none;
	font-size: .85em;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .85;
	mix-blend-mode: difference;
}

.nav-links a:hover { opacity: 1; }

.nav-toggle {
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-size: 1.4em;
	cursor: pointer;
	mix-blend-mode: difference;
}

@media (max-width: 640px) {
	.nav-links {
		position: fixed;
		top: 0; right: 0;
		height: 100vh;
		width: 70vw;
		max-width: 300px;
		background: var(--ink);
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding: 2em 2em;
		gap: 1.4em;
		transform: translateX(100%);
		transition: transform .3s ease;
	}
	.nav-links.open { transform: translateX(0); }
	.nav-links a { mix-blend-mode: normal; }
	.nav-toggle { display: block; }
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	height: 100vh;
	min-height: 560px;
	background: url('../pictures/misc/hero-bw.jpg') center / cover no-repeat;
	display: flex;
	align-items: flex-end;
}

.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.75) 100%);
}

/* Kurzorem sledovany "dotek klaves" - jemna svetelna stopa, kde se
   nachazi mys nad hero fotkou (Robert 2026-09-21: "nejake originalni
   animovane webove schema vymysli"). --mx/--my aktualizuje js/hero-fx.js. */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.28), transparent 220px);
	mix-blend-mode: overlay;
	transition: opacity .3s ease;
	opacity: 0;
	pointer-events: none;
}

.hero.hero-active::before { opacity: 1; }

.hero-inner {
	position: relative;
	z-index: 2;
	padding: 0 5vw 3.5em 5vw;
	width: 100%;
	color: #fff;
}

.hero-name {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	/* min() na sirku i vysku - na sirokem ale nizkem viewportu (zmensene
	   okno, mobil naležato) by 8vw samo o sobe udelalo obrovske pismo,
	   ktere se prekryva s podtitulkem/scroll sipkou pod nim. */
	font-size: clamp(1.8em, min(8vw, 13vh), 5.2em);
	margin: 0;
	line-height: 1.02;
}

/* Pismeno-po-pismenu nastup jmena pri nacteni stranky, jako by se
   rozeznival tón po tónu. Rozdeleno na <span class="letter"> v HTML,
   zpozdeni per-pismeno pres --i (nastaveno inline). */
.hero-name .letter {
	display: inline-block;
	opacity: 0;
	transform: translateY(.4em);
	animation: letter-in .7s cubic-bezier(.2,.7,.3,1) forwards;
	animation-delay: calc(var(--i) * 45ms + .2s);
}

.hero-name .letter.space { width: .28em; }

@keyframes letter-in {
	to { opacity: 1; transform: translateY(0); }
}

.hero-role {
	font-size: .85em;
	letter-spacing: .3em;
	text-transform: uppercase;
	opacity: 0;
	animation: letter-in .8s cubic-bezier(.2,.7,.3,1) forwards;
	animation-delay: 1.05s;
	margin: .6em 0 0 0;
}

.scroll-cue {
	position: absolute;
	bottom: 1.6em;
	left: 5vw;
	z-index: 2;
	color: #fff;
	opacity: .7;
	font-size: 1.3em;
	text-decoration: none;
	animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* ---------- Sections ---------- */

section {
	padding: 6em 5vw;
	max-width: 760px;
	margin: 0 auto;
}

.section-label {
	font-size: .8em;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1.2em 0;
}

.section-title {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 400;
	font-size: 2em;
	margin: 0 0 .8em 0;
}

p { font-size: 1.05em; margin: 0 0 1.2em 0; }

.placeholder-note {
	font-size: .85em;
	color: #8a8478;
	font-style: italic;
}

/* ---------- Timeline (vodorovna, Robert 2026-09-22) ---------- */

.timeline-empty {
	color: #8a8478;
	font-style: italic;
	margin-top: 2em;
}

/* Vylomeni z 760px sloupce sekce, at se da vodorovne scrollovat pres
   celou sirku obrazovky. */
.timeline-h {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-top: 2.5em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 5vw;
}

.timeline-h-track {
	position: relative;
	height: clamp(460px, 85vw, 720px);
}

.timeline-h-axis {
	position: absolute;
	top: 50%; left: 0; right: 0;
	height: 1px;
	background: var(--line);
}

.timeline-h-tick {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	background: var(--paper);
	padding: 0 .6em;
	font-size: .72em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent);
	white-space: nowrap;
	z-index: 2;
}

.timeline-h-item {
	--tw: clamp(120px, 34vw, 170px);
	position: absolute;
	top: 50%;
	width: var(--tw);
	margin-left: calc(var(--tw) / -2);
}

.timeline-h-dot {
	position: absolute;
	top: -4px; left: 50%;
	margin-left: -4px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--accent);
	z-index: 2;
}

.timeline-h-stem {
	position: absolute;
	left: 50%;
	width: 1px;
	background: var(--line);
}

.timeline-h-day {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: .72em;
	letter-spacing: .05em;
	color: #8a8478;
	white-space: nowrap;
}

.timeline-h-item.above .timeline-h-card { transform: translateY(calc(-100% - 26px)); }
.timeline-h-item.above .timeline-h-stem { bottom: 4px; height: 22px; }
.timeline-h-item.above .timeline-h-day { top: -22px; }

.timeline-h-item.below .timeline-h-card { transform: translateY(26px); }
.timeline-h-item.below .timeline-h-stem { top: 4px; height: 22px; }
.timeline-h-item.below .timeline-h-day { bottom: -22px; }

.timeline-h-card { text-align: center; }

.timeline-video-wrap {
	position: relative;
	width: var(--tw, 160px);
	display: inline-block;
}

.timeline-video {
	width: var(--tw, 160px);
	display: block;
	background: #000;
}

.timeline-expand {
	position: absolute;
	bottom: 8px; right: 8px;
	width: 30px; height: 30px;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,.55);
	color: #fff;
	font-size: .9em;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.timeline-thumb {
	width: var(--tw, 160px);
	aspect-ratio: 9 / 16;
	padding: 0;
	border: none;
	background-color: #000;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	cursor: pointer;
	display: block;
}

.timeline-play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,.85);
	color: #161513;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8em;
	padding-left: 3px;
}

.timeline-caption {
	margin-top: .5em;
	font-size: .82em;
	color: var(--ink);
}

.timeline-upload-link {
	margin-top: 2em;
}

.timeline-upload-link a {
	font-size: .85em;
	color: #8a8478;
	text-decoration: underline;
}

/* ---------- Contact ---------- */

.form-row { margin-bottom: 1.6em; }

.form-row label {
	display: block;
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8a8478;
	margin-bottom: .5em;
}

.form-row input, .form-row textarea {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--line);
	background: transparent;
	font-family: inherit;
	font-size: 1.05em;
	padding: .5em 0;
	color: var(--ink);
}

.form-row input:focus, .form-row textarea:focus {
	outline: none;
	border-bottom-color: var(--accent);
}

.form-row textarea { resize: vertical; }

button.submit-plain {
	background: none;
	border: 1px solid var(--ink);
	padding: .8em 2em;
	font-family: inherit;
	font-size: .85em;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

button.submit-plain:hover {
	background: var(--ink);
	color: #fff;
}

/* ---------- Footer ---------- */

footer {
	padding: 3em 5vw 2.5em 5vw;
	border-top: 1px solid var(--line);
	text-align: center;
}

.footer-social {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 1.4em;
	margin: 0 0 1.2em 0;
	padding: 0;
}

.footer-social img { width: 18px; height: 18px; opacity: .55; }
.footer-social a:hover img { opacity: 1; }

.footer-copy {
	font-size: .8em;
	color: #8a8478;
	margin: 0;
}

.footer-credit {
	font-size: .7em;
	color: #bdb8ab;
	margin: .6em 0 0 0;
}

/* ---------- Wave divider (animated) ---------- */
/* Original animovany prvek mezi sekcemi (Robert 2026-09-21: "nejake
   originalni animovane webove schema vymysli") - tichy "ekvalizer",
   ambientni, ne prehravajici skutecne audio - vizualni motiv hudby
   mezi sekcemi mista ploche cary. */

.wave-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 28px;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 5vw;
	overflow: hidden;
}

.wave-divider span {
	display: block;
	width: 2px;
	height: 6px;
	background: var(--accent);
	opacity: .55;
	border-radius: 1px;
	animation: wave-bar 2.6s ease-in-out infinite;
}

@keyframes wave-bar {
	0%, 100% { height: 4px; }
	50% { height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-name .letter, .hero-role { animation: none; opacity: 1; }
	.wave-divider span { animation: none; height: 8px; }
	.hero::before { display: none; }
}