/* 001kmh — galerie: obří písmo, bílá/černá, jedna červená. Posouvá se do strany. */
:root {
    --l: #f5f5f3;
    --d: #0d0d0d;
    --a: #ff3b1d;
    --ease: cubic-bezier(0.2, 0.9, 0.1, 1);
    --pad: clamp(18px, 4vw, 56px);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overscroll-behavior: none; background: var(--d); overflow: hidden; }
body { font-family: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; color: var(--d); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--a); color: var(--d); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hlavička: bílá s inverzí, čitelná na světlých i tmavých panelech */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: calc(20px + env(safe-area-inset-top, 0px)) var(--pad) 20px; color: #fff; mix-blend-mode: difference; pointer-events: none; }
.brand { pointer-events: auto; padding: 6px 0; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.04em; }
.hint u { display: none; text-decoration: none; }
.hint b { font-weight: 500; }
.hint { font-weight: 500; font-size: 0.9rem; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(8px); } }
.brand:focus-visible, .row:focus-visible { outline: 3px solid var(--a); outline-offset: -6px; }

/* kolejnice panelů */
.rail { height: 100vh; height: 100dvh; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.list { list-style: none; display: flex; height: 100%; width: max-content; }
.pan { flex: none; height: 100%; min-width: 100vw; background: var(--l); color: var(--d); overflow: hidden; }
.pan:nth-child(even) { background: var(--d); color: var(--l); }
.row { position: relative; display: flex; align-items: center; height: 100%; padding: 0 clamp(36px, 9vw, 160px); }

.t {
    display: block;
    font-weight: 800;
    font-size: clamp(5rem, min(30vw, 34vh), 24rem);
    line-height: 0.9; letter-spacing: -0.05em; white-space: nowrap;
    padding: 0.06em 0;
    font-variation-settings: 'wdth' 100;
    translate: calc(var(--p, 0) * 1px) 0;
    transition: color 0.3s;
}
.ch { display: inline-block; font-variation-settings: 'wdth' 100, 'wght' 800; }
.t:not(.is-set) { clip-path: inset(-5% -6% 0 -6%); }
.t:not(.is-set) .ch { animation: chIn 1.1s var(--ease) calc(0.05s + var(--i, 0) * 0.1s + var(--c) * 0.04s) backwards; }
@keyframes chIn { from { transform: translateY(115%) rotate(8deg); opacity: 0; } }
.row:hover .t, .row:focus-visible .t { color: var(--a); }
.row--soon .t { color: transparent; -webkit-text-stroke: 2px currentColor; }
.row--soon:hover .t, .row--soon:focus-visible .t { color: transparent; -webkit-text-stroke-color: var(--a); }

.go { position: absolute; left: clamp(36px, 9vw, 160px); bottom: calc(clamp(28px, 9vh, 90px) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 1rem; }
.ar { position: relative; width: 54px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1.5px solid currentColor; border-radius: 50%; transition: rotate 0.6s var(--ease), border-color 0.3s; }
.ar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--a); scale: 0; transition: scale 0.5s var(--ease); }
.ar svg { position: relative; width: 46%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.row:hover .ar, .row:focus-visible .ar { rotate: 45deg; border-color: var(--a); }
.row:hover .ar::before, .row:focus-visible .ar::before { scale: 1; }
.row:hover .ar svg, .row:focus-visible .ar svg { stroke: var(--d); }

.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 4px; margin-bottom: env(safe-area-inset-bottom, 0px); background: var(--a); transform: scaleX(0); transform-origin: left center; pointer-events: none; }

/* telefon: název se vejde na šířku, panely se přichytávají, dotyk dá zpětnou vazbu */
@media (max-width: 640px) {
    .row, .go { padding-left: 24px; padding-right: 24px; }
    .go { left: 0; gap: 12px; font-size: 0.95rem; }
    .t { font-size: clamp(3.4rem, calc((100vw - 48px) / 5.3), 9rem); }
    .ar { width: 48px; }
    .hint b { display: none; }
    .hint u { display: inline; }
}
@media (hover: none), (pointer: coarse) {
    .rail { scroll-snap-type: x mandatory; }
    .pan { scroll-snap-align: start; scroll-snap-stop: always; }
    .row:active .t { color: var(--a); }
    .row:active .ar { rotate: 45deg; border-color: var(--a); }
    .row:active .ar::before { scale: 1; }
    .row:active .ar svg { stroke: var(--d); }
}

/* kurzor (jen myš) */
.cursor { display: none; }
html.has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; mix-blend-mode: difference; transition: transform 0.12s linear; }
.cursor i { display: block; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; transition: scale 0.45s var(--ease); }
html.cursor-hover .cursor i { scale: 5; }
html.has-cursor, html.has-cursor a { cursor: none; }

/* vstup (html.hold = čeká na loader / přechod) */
.top { animation: fade 0.8s 0.2s both; }
@keyframes fade { from { opacity: 0; } }
html.hold .top { animation: none; opacity: 0; }
html.hold .t .ch { animation: none; transform: translateY(115%); }
html.hold .bar { opacity: 0; }

/* loader: logo se natáhne a ztloustne, pod ním doběhne červená čára, pak se vše vyjede nahoru */
.loader { display: none; position: fixed; inset: 0; z-index: 950; background: var(--d); color: var(--l); place-content: center; justify-items: center; gap: clamp(14px, 3vh, 30px); }
html.intro .loader { display: grid; }
.ld-word { font-weight: 800; font-size: clamp(3.4rem, 17vw, 12rem); line-height: 1; opacity: 0; font-variation-settings: 'wdth' 75, 'wght' 200; letter-spacing: 0.2em; }
.loader.is-run .ld-word { animation: stretch 1.7s var(--ease) forwards; }
@keyframes stretch { to { opacity: 1; font-variation-settings: 'wdth' 100, 'wght' 800; letter-spacing: -0.05em; } }
.ld-bar { display: block; width: min(70vw, 560px); height: 4px; margin-bottom: env(safe-area-inset-bottom, 0px); background: var(--a); transform: scaleX(0); transform-origin: left center; }
.loader.is-run .ld-bar { animation: fill 1.7s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.loader.is-out { pointer-events: none; transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1); transform: translateY(-101%); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .t:not(.is-set) { clip-path: none; }
}