/* Rozcestník: dvě pracoviště vedle sebe. Vše vlastní, žádné cizí zdroje (CSP default-src 'self'). */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  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+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: normal; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: swap;
  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+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: swap;
  src: url(fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Jakarta"; font-weight: 400; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Jakarta"; font-weight: 400; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jakarta"; font-weight: 500; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Jakarta"; font-weight: 500; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jakarta"; font-weight: 600; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Jakarta"; font-weight: 600; font-display: swap; src: url(fonts/plus-jakarta-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2212; }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2212; }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }

:root {
  --ink: #07090d;
  --ivory: #efe8db;
  --ivory-2: rgba(239, 232, 219, .72);
  --ivory-3: rgba(239, 232, 219, .46);
  --hair: rgba(239, 232, 219, .16);
  --bull: #2fd08a;
  --bear: #ff4f5f;
  --gold: #d6a65e;
  --desk: #ff7a2e;
  --steel: #9db0c6;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --pad: clamp(20px, 4.2vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }

/* ---------- horní lišta ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px var(--pad);
  pointer-events: none;
}
.bar__brand { display: flex; align-items: center; gap: 12px; }
.bar__mark { width: 26px; height: 26px; color: var(--ivory); opacity: .9; }
.bar__name, .bar__hint, .bar__clock, .foot {
  font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
}
.bar__name { color: var(--ivory); }
.bar__hint { margin: 0; color: var(--ivory-3); }
.bar__clock { justify-self: end; color: var(--ivory-2); font-variant-numeric: tabular-nums; }
.bar__clock b { font-weight: 500; color: var(--ivory); }
.bar__clock i { font-style: normal; display: inline-block; width: 1px; height: 10px; margin: 0 12px; vertical-align: -1px; background: var(--hair); }

/* ---------- dvě poloviny ---------- */
.split {
  position: relative;
  display: flex;
  width: 100%; height: 100vh; height: 100svh;
  min-height: 560px;
}
.side {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  outline: none;
  transition: flex-grow 1.1s var(--ease);
  --mx: 0; --my: 0; --lx: 50%; --ly: 60%;
}
.split.has-focus .side { flex-grow: .78; }
.split.has-focus .side.is-active { flex-grow: 1.22; }

.side__media, .side__img, .side__shade, .side__light { position: absolute; inset: 0; }
.side__media { z-index: -3; overflow: hidden; }
.side__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0) scale(1.07);
  transition: transform 1.6s var(--ease), filter 1.1s var(--ease);
  filter: saturate(.92) brightness(.86);
  will-change: transform;
}
.side--trade .side__img { object-position: 40% 50%; }
.side--desk .side__img { object-position: 52% 50%; }
.split.has-focus .side:not(.is-active) .side__img { filter: saturate(.35) brightness(.42); }
.side.is-active .side__img { filter: saturate(1) brightness(.95); transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0) scale(1.03); }

/* ---------- skleněné panely s živým grafem ---------- */
.widget {
  position: absolute; top: clamp(84px, 12vh, 118px); left: var(--pad);
  width: clamp(290px, 46%, 360px);
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(14,18,26,.62), rgba(9,12,18,.5));
  border: 1px solid rgba(239,232,219,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -24px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
          backdrop-filter: blur(18px) saturate(1.25);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease);
  pointer-events: none;
}
.widget--desk { left: auto; right: var(--pad); }
.widget.is-crowded { visibility: hidden; }
.split.has-focus .side:not(.is-active) .widget { opacity: .3; filter: saturate(.3); }
.widget__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.widget__label { font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-3); }
.widget__chip {
  font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums;
  padding: 5px 7px; border-radius: 6px;
  color: var(--bull); background: rgba(47,208,138,.12);
}
.widget__chip.is-down { color: var(--bear); background: rgba(255,79,95,.12); }
.widget__chip--desk { color: var(--desk); background: rgba(255,122,46,.12); }
.widget__canvas { display: block; width: 100%; height: 118px; }
.widget--desk .widget__canvas { height: 72px; }
.widget__foot {
  display: flex; justify-content: space-between; gap: 8px;
  padding-top: 10px; border-top: 1px solid rgba(239,232,219,.08);
  font: 400 10.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ivory-3); letter-spacing: .04em;
}
.widget__foot b { font-weight: 500; color: var(--ivory-2); margin-left: 5px; }
.widget__table { display: flex; flex-direction: column; border-top: 1px solid rgba(239,232,219,.08); }
.wrow {
  display: grid; grid-template-columns: 22px 1fr 24% 44px; align-items: center; gap: 10px;
  height: 25px; border-bottom: 1px solid rgba(239,232,219,.06);
}
.wrow:last-child { border-bottom: 0; }
.wrow b { font: 500 10.5px/1 var(--mono); color: var(--ivory); letter-spacing: .04em; }
.wrow i { font: 400 12px/1 var(--sans); color: var(--ivory-2); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow u { display: block; height: 4px; border-radius: 2px; background: rgba(239,232,219,.08); overflow: hidden; text-decoration: none; }
.wrow s { display: block; height: 100%; border-radius: 2px; background: var(--steel); transform-origin: 0 50%; transform: scaleX(var(--v, .5)); transition: transform 1.4s var(--ease); text-decoration: none; }
.wrow.is-hot s { background: var(--desk); }
.wrow em { font: 500 11px/1 var(--mono); font-style: normal; text-align: right; color: var(--ivory-2); font-variant-numeric: tabular-nums; }

.side__shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,9,13,.82) 0%, rgba(7,9,13,0) 22%),
    linear-gradient(0deg, rgba(7,9,13,.96) 0%, rgba(7,9,13,.78) 24%, rgba(7,9,13,0) 58%);
}
.side--trade .side__shade { box-shadow: inset -1px 0 0 rgba(239,232,219,.07); }
.side__light {
  z-index: -1;
  background: radial-gradient(560px circle at var(--lx) var(--ly), rgba(255, 214, 160, .10), transparent 60%);
  opacity: 0; transition: opacity .8s var(--ease);
  mix-blend-mode: screen;
}
.side.is-active .side__light { opacity: 1; }

/* ---------- text ---------- */
.side__content {
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: calc(clamp(56px, 11vh, 120px) + 34px);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px;
}
.side--desk .side__content { align-items: flex-end; text-align: right; }

.side__index {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivory-2);
}
.side__index span { color: var(--ivory); }
.side__index i { display: inline-block; width: 36px; height: 1px; background: currentColor; opacity: .55; transition: width .9s var(--ease); }
.side.is-active .side__index i { width: 64px; }
.side--trade .side__index span { color: var(--bull); }
.side--desk .side__index span { color: var(--desk); }

.side__title {
  display: block;
  font: 400 clamp(52px, 7.4vw, 128px)/.9 var(--serif);
  letter-spacing: -.012em;
  color: var(--ivory);
}
.side__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.side__title .line > * { display: block; transform: translateY(0); transition: transform 1.2s var(--ease); }
.side__title em { font-style: italic; color: rgba(239, 232, 219, .78); }
.side--trade .side__title em { padding-left: .55em; }
.side--desk .side__title em { padding-right: .55em; }

.side__text {
  max-width: 34ch;
  text-wrap: balance;
  color: var(--ivory-2);
  font-size: clamp(14px, 1.05vw, 16px);
}

.side__cta {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: 6px;
}
.side--desk .side__cta { flex-direction: row-reverse; }
.cta__label { font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.cta__arrow {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(239, 232, 219, .32);
  transition: background .6s var(--ease), border-color .6s var(--ease), transform .6s var(--ease);
}
.cta__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease); }
.side--desk .cta__arrow svg { transform: none; }
.side.is-active .cta__arrow { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.side.is-active .cta__arrow svg { transform: translateX(3px); }
.cta__host {
  font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--ivory-3);
  opacity: 0; transform: translateX(-6px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.cta__host:empty { display: none; }
.side--desk .cta__host { transform: translateX(6px); }
.side.is-active .cta__host { opacity: 1; transform: none; }

.side:focus-visible .cta__arrow { box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px var(--ivory); }

/* ---------- páska s funkcemi ---------- */
.tape {
  position: absolute; left: 0; right: 0; bottom: clamp(56px, 11vh, 120px);
  height: 34px;
  display: flex; align-items: center;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tape__run { display: flex; flex: none; white-space: nowrap; animation: tape 48s linear infinite; }
.side--desk .tape__run { animation-direction: reverse; animation-duration: 56s; }
.tape b {
  font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivory-3);
  padding: 0 26px;
  display: inline-flex; align-items: center; gap: 26px;
}
.tape b::after { content: ""; width: 4px; height: 4px; transform: rotate(45deg); background: currentColor; opacity: .7; }
.side--trade .tape b:nth-child(3n+1)::after { background: var(--bull); opacity: 1; }
.side--trade .tape b:nth-child(4n+3)::after { background: var(--bear); opacity: 1; }
.side--desk .tape b:nth-child(3n+2)::after { background: var(--desk); opacity: 1; }
@keyframes tape { to { transform: translateX(-50%); } }

/* ---------- šev mezi polovinami ---------- */
.seam {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 0; z-index: 10; pointer-events: none;
  transform: translateX(var(--seam-x, 0));
}
.seam__line {
  position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(239,232,219,.28) 18%, rgba(239,232,219,.28) 82%, transparent 100%);
  transform-origin: 50% 0;
}
.seam__knot {
  position: absolute; top: 50%; left: 0;
  width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center;
  font: italic 400 19px/1 var(--serif); color: var(--ivory);
  background: rgba(7, 9, 13, .55);
  border: 1px solid rgba(239,232,219,.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
}
.seam__knot::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(239,232,219,.08);
}

/* ---------- pata ---------- */
.foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--pad);
  height: clamp(56px, 11vh, 120px);
  color: var(--ivory-3);
  pointer-events: none;
}
.foot kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; margin: 0 3px;
  border: 1px solid var(--hair); border-radius: 4px;
  font: 500 10px/1 var(--mono); color: var(--ivory-2); letter-spacing: .04em;
}
.foot__keys kbd:nth-of-type(3) { margin-left: 14px; }

/* ---------- zrno a opona ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 30; pointer-events: none;
  background: url(img/grain.png);
  opacity: .055;
  mix-blend-mode: overlay;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
.curtain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: var(--ink);
  transition: opacity 1.4s var(--ease-io) .25s;
}

/* úvodní animace */
.is-loading .side__title .line > * { transform: translateY(105%); }
.is-loading .widget { opacity: 0; transform: translateY(14px); }
.is-loading .side__index, .is-loading .side__text, .is-loading .side__cta, .is-loading .tape, .is-loading .bar, .is-loading .foot { opacity: 0; }
.is-loading .seam__line { transform: scaleY(0); }
.is-loading .seam__knot { opacity: 0; transform: scale(.6); }
.side__index, .side__text, .side__cta, .tape, .bar, .foot { transition: opacity 1.2s var(--ease) .9s; }
.side__text { transition-delay: 1.05s; }
body:not(.is-ready) .widget { transition-delay: 1.35s; }
.side__cta { transition-delay: 1.2s; }
.side__title .line:nth-child(1) > * { transition-delay: .55s; }
.side__title .line:nth-child(2) > * { transition-delay: .68s; }
.side--desk .side__title .line:nth-child(1) > * { transition-delay: .68s; }
.side--desk .side__title .line:nth-child(2) > * { transition-delay: .81s; }
.is-ready .side__title .line > * { transition-delay: 0s; }
.seam__line { transition: transform 1.3s var(--ease-io) .1s; }
.seam__knot { transition: opacity .8s var(--ease) 1.1s, transform 1s var(--ease) 1.1s; }
body:not(.is-loading) .curtain { opacity: 0; }

/* ---------- telefon a úzké okno: pod sebou ---------- */
@media (max-width: 860px) {
  body { overflow: auto; }
  .bar { position: absolute; padding: 18px 20px; grid-template-columns: 1fr auto; }
  .bar__hint { display: none; }
  .split { flex-direction: column; height: auto; min-height: 100svh; }
  .side { flex: 1 0 auto; min-height: max(78svh, 520px); }
  .widget { display: none; }
  .side__img { object-position: 30% 30%; }
  .side--desk .side__img { object-position: 60% 40%; }
  .split.has-focus .side, .split.has-focus .side.is-active { flex-grow: 1; }
  .side__content { left: 20px; right: 20px; bottom: 58px; gap: 12px; }
  .side--desk .side__content { align-items: flex-start; text-align: left; }
  .side--desk .side__cta { flex-direction: row; }
  .side__title { font-size: clamp(46px, 13vw, 76px); }
  .side--desk .side__title em { padding-right: 0; padding-left: .55em; }
  .side__text { font-size: 14px; }
  .cta__arrow { width: 46px; height: 46px; }
  .cta__host { opacity: 1; transform: none; }
  .side--desk .cta__host { transform: none; }
  .tape { bottom: 0; height: 30px; }
  .side--trade .side__shade { box-shadow: inset 0 -1px 0 rgba(239,232,219,.12); }
  .side--desk .side__shade { background: linear-gradient(180deg, rgba(7,9,13,.7) 0%, rgba(7,9,13,0) 26%), linear-gradient(0deg, rgba(7,9,13,.96) 0%, rgba(7,9,13,.74) 30%, rgba(7,9,13,0) 64%); }
  .seam { display: none; }
  .foot { position: static; height: auto; padding: 18px 20px 22px; }
  .foot__keys { display: none; }
  .split.has-focus .side:not(.is-active) .side__img { filter: saturate(.92) brightness(.86); }
}

@media (max-height: 640px) and (min-width: 861px) {
  .side__title { font-size: clamp(44px, 6vw, 84px); }
  .side__text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}