/* havranci.cz/projects — the crossroad. Same tokens as /portfolio/ (light mode), Swiss-clean.
   Card positions are set by script.js (--x/--y on each <li>); the "stack" class = narrow-screen layout. */

:root {
  --navy: #323b4c;
  --ink: #1b212d;
  --slate: #8993a4;
  --bg: #f6f7fa;
  --line: #e2e6ee;
  --muted: #5b6578;
  --accent: #2563eb;
  --accent-soft: #e8efff;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); font: 400 16px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }

.mark { position: fixed; z-index: 2; top: clamp(20px, 6vh, 46px); left: clamp(18px, 5.5vw, 76px); width: 48px; height: 48px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; font: 800 1.15rem/1 var(--font-display); letter-spacing: .02em; }

.title { position: fixed; z-index: 2; left: clamp(18px, 5.5vw, 76px); top: 28vh; max-width: 48vw; pointer-events: none; }
.eyebrow { margin: 0 0 .5em; font: 700 clamp(.72rem, 1.15vw, 1rem)/1.2 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 0; font: 800 clamp(2.5rem, 5.4vw, 5rem)/1 var(--font-display); letter-spacing: -.025em; color: var(--navy); white-space: nowrap; }

/* ---------- cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; counter-reset: card; }
.cards li { counter-increment: card; position: fixed; z-index: 3; left: var(--x, 50%); top: var(--y, 50%); width: var(--w, 380px); translate: -50% -50%;
  opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 350ms); }
.ready .cards li { opacity: 1; transform: none; }
.card { display: flex; align-items: center; gap: 18px; padding: 18px 22px; min-height: 92px; background: #fff; color: inherit; text-decoration: none; border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(27, 33, 45, .07); outline: none;
  transition: box-shadow .25s var(--ease), translate .25s var(--ease); }
.num::before { content: counter(card, decimal-leading-zero); }
.num { font: 800 clamp(2.2rem, 3.6vw, 3.4rem)/1 var(--font-display); letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; flex: none; }
.txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.txt strong { font: 700 clamp(1.05rem, 1.6vw, 1.4rem)/1.15 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.txt span { font-size: clamp(.82rem, 1.05vw, .95rem); color: var(--muted); }
.arrow { flex: none; font-size: 1.25rem; color: var(--ink); transition: transform .25s var(--ease), color .25s; }

.card:hover, .card:focus-visible, .card.hot { translate: 0 -2px; box-shadow: 0 0 0 2px var(--accent), 0 14px 34px rgba(37, 99, 235, .14); }
.card:hover .arrow, .card:focus-visible .arrow, .card.hot .arrow { color: var(--accent); transform: translateX(4px); }

/* ---------- narrow screens: title on top, smaller cards zig-zag around the centre ---------- */
.stack .title { top: calc(clamp(20px, 6vh, 46px) + 70px); max-width: none; right: 18px; }
.stack h1 { font-size: clamp(2.2rem, 11vw, 3.4rem); white-space: normal; }
.stack .eyebrow { letter-spacing: .14em; }
.stack .card { flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 0; padding: 12px 14px 14px; }
.stack .num { font-size: 1.75rem; }
.stack .arrow { margin-left: auto; font-size: 1.1rem; }
.stack .txt { flex-basis: 100%; order: 3; }
.stack .txt strong { font-size: 1.02rem; }
.stack .txt span { font-size: .8rem; line-height: 1.3; }
@media (max-width: 380px) { .stack .eyebrow { letter-spacing: .07em; font-size: .68rem; } }
/* fallback when too many cards to zig-zag: full-width list */
.stack.list .card { flex-wrap: nowrap; padding: 14px 18px; gap: 14px; }
.stack.list .txt { flex-basis: auto; order: 0; }
.stack.list .num { font-size: 2.2rem; }

/* ---------- click: the card opens up over the whole screen ---------- */
.burst { position: fixed; inset: 0; z-index: 20; pointer-events: none; visibility: hidden; background: #fff; }
.leaving .cards li:not(.chosen), .leaving .title, .leaving .mark { opacity: 0; transition: opacity .3s; transition-delay: 0s; }
.leaving, .leaving a { cursor: progress; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .cards li { transform: none; transition: opacity .3s; }
  .card, .arrow { transition: none; }
}

/* cross-document view transition: needed on BOTH pages, this one and the destination (portfolio/kobka style.css) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vtArrive .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vtArrive { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }