/* Co se skrývá za faksimilií? — webová prezentace, styl A */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:block;src:url(fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:block;src:url(fonts/instrument-serif-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:block;src:url(fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:block;src:url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk Variable';font-style:normal;font-weight:100 900;font-display:block;src:url(fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk Variable';font-style:normal;font-weight:100 900;font-display:block;src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#F1EFEA;--ink:#171615;--mute:#77716B;--wine:#6B1B22;--dark:#161514;--paper:#F1EFEA;--line:#d9d5ce;
--serif:'Instrument Serif',Georgia,serif;--sans:'Hanken Grotesk Variable',Arial,sans-serif;
--fade:900ms;--ease:cubic-bezier(.22,.61,.36,1)}
html,body{width:100%;height:100%;background:#000;overflow:hidden}
body.hide-cursor{cursor:none}

/* jeviště: vyplní celé okno, obsah 1920×1080 zůstává uprostřed, fotky do kraje se protáhnou */
#stage{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;--ext:0px;--exty:0px;background:var(--dark)}
.c{position:absolute;left:var(--ext);top:var(--exty);width:1920px;height:1080px}

/* slidy jako vrstvy: další najede zespodu přes předchozí */
.s{position:absolute;inset:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);
  transform:translate3d(0,100%,0);visibility:hidden;
  transition:transform var(--dur) var(--io),visibility 0s linear var(--dur)}
:root{--dur:1150ms;--io:cubic-bezier(.76,0,.24,1);--out:cubic-bezier(.16,1,.3,1)}
.s.dk{background:var(--dark);color:var(--paper)}
.s.past{transform:translate3d(0,-22%,0)}
.s.on{transform:none;visibility:visible;transition:transform var(--dur) var(--io),visibility 0s}
.s.leaving{visibility:visible}
.s.notrans{transition:none!important}
.s::after{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--io)}
.s.past::after{opacity:.55}

.h{position:absolute;font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.01em}
.h em{font-style:italic}.w{color:var(--wine)}.dk .w{color:#B0545C}
.t{position:absolute;font-size:32px;line-height:1.3}
.cap{position:absolute;font-size:18px;color:var(--mute);letter-spacing:.03em;line-height:1.35}
.dk .cap{color:#9C958E}
.lab{position:absolute;font-size:19px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.ph{position:absolute;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.axis{position:absolute;left:128px;right:120px;top:64px;display:flex;justify-content:space-between;align-items:center;font-size:17px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.axis .steps{display:flex;gap:30px}.axis .on{color:var(--wine);font-weight:600}
.rule{position:absolute;height:3px;background:var(--wine)}
.panel{position:absolute;background:var(--bg)}

/* ---- pohyb: měkká prolínání, žádné drobné posuny ---- */
/* nadpisy po slovech: vyplavou z rozostření */
.m{display:inline}
.mi{display:inline;opacity:0;filter:blur(12px);transition:opacity 1400ms var(--soft),filter 1600ms var(--soft)}
:root{--soft:cubic-bezier(.25,.1,.25,1)}
.s.on .mi{opacity:1;filter:none;transition-delay:calc(var(--base,550ms) + var(--wd,0)*90ms)}
.s.dk{--base:800ms}
.s.dk.on .mi{transition-duration:2000ms,2200ms;transition-delay:calc(var(--base) + var(--wd,0)*170ms)}
.s.on .st .mi{transition-delay:calc(var(--base,550ms) + var(--i,0)*240ms)}

/* drobné texty, linky, osa: pomalé rozsvícení po nadpisu */
.s .cap:not(.f1):not(.st),.s .lab:not(.f1),.s .t:not(.f1),.s .rule,.s .axis{opacity:0;transition:opacity 1300ms var(--soft)}
.s.on .cap:not(.f1):not(.st),.s.on .lab:not(.f1),.s.on .t:not(.f1),.s.on .rule,.s.on .axis{opacity:1;transition-delay:1300ms}
.s.on .axis{transition-delay:500ms}
.s.dk.on .lab{transition-delay:2400ms}

/* skupiny (osa, role, slova): rozsvěcují se jedna po druhé */
.s .st:not(.ph){opacity:0;transition:opacity 1300ms var(--soft)}
.s.on .st:not(.ph){opacity:1;transition-delay:calc(700ms + var(--i,0)*260ms)}

/* fotky v rámu: rozsvícení s pomalým doznívajícím zoomem */
.s .ph:not(.bleed){opacity:0;transition:opacity 1600ms var(--soft)}
.s.on .ph:not(.bleed){opacity:1;transition-delay:calc(450ms + var(--i,0)*280ms)}

/* kroky na kliknutí (.f1): čisté prolnutí */
.f1{opacity:0;transition:opacity 1300ms var(--soft)}
.s[data-step="1"] .f1,.s[data-step="2"] .f1{opacity:1;transition-delay:0ms}
.s.on .f1 .mi{opacity:0;filter:blur(12px)}
.s.on[data-step="1"] .f1 .mi{opacity:1;filter:none;transition-delay:calc(150ms + var(--wd,0)*90ms)}
.s.on .ph.f1{opacity:0}
.s.on[data-step="1"] .ph.f1{opacity:1;transition-delay:0ms}

/* fotky jsou statické: žádný zoom ani posun */
.s .ph img{transform:none!important;transition:none!important}

@media (prefers-reduced-motion:reduce){:root{--dur:1ms}.mi,.s .ph,.s .ph img{transition:none!important;transform:none!important;filter:none!important}}

/* ---- ovládací prvky ---- */
#counter{position:fixed;right:30px;bottom:22px;z-index:20;font:500 13px var(--sans);letter-spacing:.18em;color:#8a847e;font-variant-numeric:tabular-nums;mix-blend-mode:difference;color:#cfc9c2}
body.no-progress #counter{opacity:0}
#progress{position:fixed;left:0;bottom:0;height:3px;background:var(--wine);width:0;transition:width 600ms var(--ease);z-index:20;opacity:.85}
body.no-progress #progress{opacity:0}
#blank{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity 500ms;z-index:30}
body.blank #blank{opacity:1}
#hint{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:rgba(23,22,21,.86);color:#F1EFEA;font:500 14px/1.5 var(--sans);letter-spacing:.04em;padding:10px 18px;z-index:40;transition:opacity 600ms;white-space:nowrap}
#hint kbd{font:600 12px var(--sans);border:1px solid rgba(241,239,234,.4);padding:1px 6px;margin:0 2px}
#hint.gone{opacity:0;pointer-events:none}
#jump{position:fixed;right:28px;bottom:24px;font:400 64px var(--serif);color:#F1EFEA;background:rgba(23,22,21,.86);padding:6px 22px;z-index:41;display:none}

/* přehled */
#overview{position:fixed;inset:0;background:var(--dark);z-index:50;overflow:auto;padding:56px 64px;display:none}
body.ov #overview{display:block}
#overview h2{font:400 44px var(--serif);color:var(--paper);margin-bottom:28px}
#overview h2 em{color:#B0545C}
#overview .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
#overview button{all:unset;cursor:pointer;display:block;position:relative;outline-offset:4px}
#overview button img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.82;transition:opacity 200ms}
#overview button:hover img,#overview button:focus-visible img,#overview button.cur img{opacity:1}
#overview button.cur{outline:3px solid #B0545C}
#overview button span{display:block;font:500 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9C958E;margin-top:8px}
#overview button span b{color:var(--paper);font-weight:600;margin-right:8px}