/* Atlas – redakční kartografický styl v tématu „Broumovská krajina“. Plátno 1920 × 1080 px. */
@font-face { font-family: "Playfair Display"; src: url("../../fonts/PlayfairDisplay-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Source Sans 3"; src: url("../../fonts/SourceSans3-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Source Sans 3"; src: url("../../fonts/SourceSans3-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Source Sans 3"; src: url("../../fonts/SourceSans3-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: "Source Sans 3"; src: url("../../fonts/SourceSans3-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: block; }

:root {
  --mlecna: #F7F3EC; --piskovec: #D9C6A5; --les: #2F4A3A; --les-hluboky: #1E3127;
  --terakota: #B5543A; --tmava-terakota: #9A4430; --grafit: #22262A; --sedohneda: #5E5A52;
  --f-nadpis: "Playfair Display", Georgia, serif;
  --f-text: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ink: rgba(94, 90, 82, .30);
  --ink-idx: rgba(94, 90, 82, .52);
}
html, body { margin: 0; height: 100%; background: #121513; overflow: hidden; }
#viewport { position: fixed; inset: 0; overflow: hidden; cursor: default; }
#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden;
  transform-origin: 0 0; background: var(--mlecna); color: var(--grafit);
  font-family: var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .9s var(--ease);
}
#stage.is-dark { background: var(--les); --ink: rgba(217, 198, 165, .16); --ink-idx: rgba(217, 198, 165, .3); }
#paper { position: absolute; inset: 0; background-size: 384px 384px; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
#stage.is-dark #paper { opacity: .22; }
#atlas { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: hidden; }

/* ---------- vrstevnice: tahy pera ---------- */
.ct { fill: none; stroke: var(--ink); stroke-width: 1.1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.45, .05, .2, 1) var(--dl, 0s), stroke .9s; }
.ct.idx { stroke: var(--ink-idx); stroke-width: 1.6px; }
.inked .ct { stroke-dashoffset: 0; }
.contours { transition: opacity 1.1s var(--ease); }
#atlas[data-cam="village"] .coarse { opacity: 0; }
.contours.fine { opacity: 0; }
.contours.fine.on { opacity: 1; }
.fine-ct { stroke: rgba(94, 90, 82, .34); }
.fine-ct.idx { stroke: rgba(94, 90, 82, .55); }
#atlas[data-cam="stake"] .coarse, #atlas[data-cam="survey"] .coarse { opacity: .55; }
#atlas[data-cam="pilot"] .coarse, #atlas[data-cam="region"] .coarse { opacity: .85; }

/* ---------- mapové vrstvy ---------- */
.lay { opacity: 0; transition: opacity .7s var(--ease); pointer-events: none; }
.lay.on { opacity: 1; transition: opacity .9s var(--ease) .5s; }
.border { fill: none; stroke: var(--sedohneda); stroke-width: 2px; stroke-dasharray: 10 6 2 6; vector-effect: non-scaling-stroke; opacity: .75; }
.river { fill: none; stroke: #6F8A86; stroke-width: 2.4px; vector-effect: non-scaling-stroke; opacity: .7; }
.ridge { fill: none; stroke: var(--sedohneda); stroke-width: 3px; stroke-dasharray: 1 8; vector-effect: non-scaling-stroke; opacity: .45; stroke-linecap: round; }
.map-cap { font-family: var(--f-text); font-weight: 600; letter-spacing: .2em; fill: var(--sedohneda); paint-order: stroke; stroke: var(--mlecna); stroke-width: 5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vdot { fill: var(--les); stroke: var(--mlecna); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.vdot.town { fill: var(--mlecna); stroke: var(--les); stroke-width: 4px; }
.vlab { font-family: var(--f-text); font-weight: 600; fill: var(--grafit); paint-order: stroke; stroke: var(--mlecna); stroke-width: 6px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vlab.town { font-weight: 700; fill: var(--les); }
.vlab.acc { fill: var(--tmava-terakota); font-weight: 700; }
.scalebar { fill: none; stroke: var(--grafit); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.route { fill: none; stroke: var(--les); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .75;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.5, 0, .2, 1) var(--rd, 0s); }
.routes.on .route { stroke-dashoffset: 0; }
.hot { fill: var(--terakota); opacity: .88; }
.hot-ring { fill: none; stroke: var(--terakota); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; }
.pilot-ring { fill: rgba(181, 84, 58, .14); stroke: var(--terakota); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.avoid { fill: none; stroke: var(--sedohneda); stroke-width: 2px; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.road { fill: none; stroke: #B9A88A; stroke-width: 5px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.house { fill: #E4D7C0; stroke: var(--sedohneda); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.room { fill: var(--les); stroke: var(--mlecna); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.reception { fill: var(--terakota); stroke: var(--mlecna); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.link { fill: none; stroke: var(--les); stroke-width: 1.6px; vector-effect: non-scaling-stroke; opacity: .7; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) var(--rd, 0s); }
.ring200 { fill: none; stroke: var(--terakota); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.5, 0, .2, 1) .7s; }
.links.on .link, .links.on .ring200 { stroke-dashoffset: 0; }

/* ---------- snímky ---------- */
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .8s var(--ease), visibility 0s .55s; }
.slide.is-past { transform: translateY(-14px); }
.slide.is-current { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease) .25s, transform 1s var(--ease) .25s, visibility 0s; }
.slide p, .slide h1, .slide h2, .slide h3 { margin: 0; }

.label { position: absolute; left: 120px; top: 92px; font: 600 24px/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--tmava-terakota); }
.label .dt { color: var(--tmava-terakota); }
.s-survey .label { color: var(--sedohneda); }
.label.on-dark { color: var(--piskovec); }
.title { position: absolute; left: 120px; top: 132px; font: 700 60px/1.12 var(--f-nadpis); color: var(--les); text-wrap: balance; letter-spacing: -.005em; }
.title.w-wide { width: 1600px; }
.title.on-dark { color: var(--mlecna); }
.title em, .hero em { font-style: italic; }
.source { position: absolute; left: 120px; right: 220px; bottom: 54px; padding-top: 12px; font: 400 22px/1.3 var(--f-text); color: var(--sedohneda); border-top: 1px solid rgba(94, 90, 82, .35); width: max-content; max-width: 1580px; }
.source .fn { font-weight: 600; }
.margin-note { position: absolute; font: italic 400 22px/1.3 var(--f-text); color: var(--sedohneda); background: rgba(247, 243, 236, .9); padding: 4px 12px; border-radius: 4px; }
.ph { color: var(--tmava-terakota); background: rgba(154, 68, 48, .08); outline: 2px dashed rgba(154, 68, 48, .55); outline-offset: 2px; border-radius: 6px; padding: 0 .25em; font-weight: 600; }
.s-close .ph { color: var(--piskovec); background: rgba(217, 198, 165, .12); outline-color: rgba(217, 198, 165, .6); }

#slide-no { position: absolute; right: 120px; top: 84px; font: 600 26px/1 var(--f-text); letter-spacing: .12em; color: var(--sedohneda); font-variant-numeric: tabular-nums; transition: color .9s, opacity .5s; }
#slide-no::before { content: ""; display: inline-block; width: 36px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 14px; opacity: .6; }
#slide-no.hide { opacity: 0; }
.is-dark #slide-no, #slide-no.light { color: var(--mlecna); }

#progress { position: absolute; left: 120px; right: 120px; bottom: 26px; height: 12px; pointer-events: none; }
#progress-line { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: rgba(94, 90, 82, .18); }
#progress-fill { height: 100%; width: 0; background: var(--les); transition: width .8s var(--ease); }
.pdot { position: absolute; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--mlecna); border: 2px solid rgba(94, 90, 82, .45); box-sizing: border-box; transition: all .5s var(--ease); }
.pdot.done { background: var(--les); border-color: var(--les); }
.pdot.now { background: var(--terakota); border-color: var(--terakota); transform: scale(1.35); }
.is-dark #progress-line { background: rgba(217, 198, 165, .2); }
.is-dark #progress-fill, .is-dark .pdot.done { background: var(--piskovec); border-color: var(--piskovec); }
.is-dark .pdot { background: var(--les); border-color: rgba(217, 198, 165, .5); }
.is-dark .pdot.now { background: var(--terakota); border-color: var(--terakota); }

/* kroky */
[data-step] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
[data-step].is-on { opacity: 1; transform: none; }

/* ---------- 1 · titul ---------- */
.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-title { background: var(--les); }
.title-map { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.title-map .ct { stroke: rgba(217, 198, 165, .2); }
.title-map .ct.idx { stroke: rgba(217, 198, 165, .38); }
.title-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(30, 49, 39, .55) 0%, rgba(30, 49, 39, 0) 46%), linear-gradient(180deg, rgba(30, 49, 39, 0) 52%, rgba(30, 49, 39, .82) 100%); }
.tm-line { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.5, 0, .2, 1) 0s; }
.s-title.is-current .tm-line { stroke-dashoffset: 0; transition-delay: var(--td, 0s); }
.tm-border { stroke: rgba(217, 198, 165, .7); stroke-width: 2px; }
.tm-river { stroke: #8FB0AA; stroke-width: 2.6px; opacity: .8; }
.tm-ridge { stroke: rgba(217, 198, 165, .5); stroke-width: 3px; }
.tm-route { stroke: var(--piskovec); stroke-width: 2.4px; opacity: .55; transition-duration: 1.6s; }
.tm-cap { font-family: var(--f-text); font-weight: 600; letter-spacing: .2em; fill: rgba(217, 198, 165, .75); opacity: 0; transition: opacity 1s var(--ease); }
.s-title.is-current .tm-cap { opacity: 1; transition-delay: 1.6s; }
.tm-v { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .5s, transform .9s cubic-bezier(.34, 1.56, .64, 1); }
.s-title.is-current .tm-v { opacity: 1; transform: none; transition-delay: var(--td, 0s); }
.tm-dot { fill: var(--piskovec); stroke: var(--les); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.tm-dot.town { fill: var(--les); stroke: var(--piskovec); stroke-width: 4px; }
.tm-lab { font-family: var(--f-text); font-weight: 600; fill: var(--mlecna); paint-order: stroke; stroke: var(--les); stroke-width: 6px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tm-lab.acc { fill: #E9A68F; font-weight: 700; }
.tm-recdot { fill: var(--terakota); stroke: var(--mlecna); stroke-width: 4px; vector-effect: non-scaling-stroke; opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .5s, transform 1s cubic-bezier(.34, 1.56, .64, 1); }
.s-title.is-current .tm-recdot { opacity: 1; transform: none; transition-delay: 2.6s; }
.tm-pulse { fill: none; stroke: var(--terakota); stroke-width: 2.5px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.s-title.is-current .tm-pulse { animation: tmPulse 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes tmPulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
.t-sheet { position: absolute; left: 120px; right: 120px; top: 84px; display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(217, 198, 165, .35); font: 600 24px/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--piskovec); }
.t-sheet span + span { font-weight: 400; font-style: italic; letter-spacing: .04em; text-transform: none; color: rgba(247, 243, 236, .75); }
.t-legend { position: absolute; right: 120px; bottom: 112px; display: flex; align-items: center; gap: 14px; font: 400 22px/1 var(--f-text); color: rgba(247, 243, 236, .82); }
.t-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-left: 18px; }
.t-legend .lg-v { background: var(--piskovec); margin-left: 0; }
.t-legend .lg-r { width: 22px; height: 22px; background: var(--terakota); box-shadow: 0 0 0 3px rgba(247, 243, 236, .7); }
.t-legend .lg-t { width: 30px; height: 0; border-radius: 0; border-top: 2px solid rgba(217, 198, 165, .7); }
.s-title .title-block .kicker, .s-title .title-block .hero, .s-title .title-block .sub, .s-title .title-block .names { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform 1.1s var(--ease); }
.s-title.is-current .title-block .kicker { opacity: 1; transform: none; transition-delay: .5s; }
.s-title.is-current .title-block .hero { opacity: 1; transform: none; transition-delay: .8s; }
.s-title.is-current .title-block .sub { opacity: 1; transform: none; transition-delay: 1.2s; }
.s-title.is-current .title-block .names { opacity: 1; transform: none; transition-delay: 1.6s; }
.ov-mini .tm-line { stroke-dashoffset: 0; transition: none; } .ov-mini .tm-v, .ov-mini .tm-recdot, .ov-mini .tm-cap, .ov-mini .title-block * { opacity: 1 !important; transform: none !important; transition: none !important; }
.photo-contours { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.photo-contours .ct { stroke: rgba(217, 198, 165, .22); }
.photo-contours .ct.idx { stroke: rgba(217, 198, 165, .4); }
.roofdots i, .close-dots i, .dot-cluster i { position: absolute; display: block; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--piskovec); box-shadow: 0 0 0 3px rgba(30, 49, 39, .5); }
.roofdots i.rec, .close-dots i.rec { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: var(--terakota); box-shadow: 0 0 0 4px rgba(247, 243, 236, .7); }
.roofdots i { opacity: 0; transform: scale(.2); transition: opacity .5s, transform .9s cubic-bezier(.34, 1.56, .64, 1); }
.is-current .roofdots i { opacity: 1; transform: none; }
.is-current .roofdots i:nth-child(1) { transition-delay: .9s; } .is-current .roofdots i:nth-child(2) { transition-delay: 1.05s; }
.is-current .roofdots i:nth-child(3) { transition-delay: 1.2s; } .is-current .roofdots i:nth-child(4) { transition-delay: 1.6s; }
.is-current .roofdots i:nth-child(5) { transition-delay: 1.3s; } .is-current .roofdots i:nth-child(6) { transition-delay: 1.4s; } .is-current .roofdots i:nth-child(7) { transition-delay: 1.5s; }
.title-block { position: absolute; left: 120px; right: 200px; bottom: 112px; color: var(--mlecna); }
.kicker { font: 600 24px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--piskovec); margin-bottom: 30px !important; }
.hero { font: 700 124px/1.0 var(--f-nadpis); letter-spacing: -.01em; margin-bottom: 30px !important; text-shadow: 0 2px 30px rgba(20, 30, 25, .35); }
.sub { font: 400 38px/1.25 var(--f-text); max-width: 1300px; margin-bottom: 34px !important; }
.names { font: 600 26px/1.3 var(--f-text); color: var(--piskovec); white-space: nowrap; padding-top: 18px; border-top: 1px solid rgba(217, 198, 165, .4); display: inline-block; }
.credit-v { position: absolute; right: 44px; bottom: 112px; transform-origin: right bottom; transform: rotate(-90deg) translateX(100%); font: 400 22px/1 var(--f-text); color: rgba(247, 243, 236, .88); white-space: nowrap; }

/* ---------- 2 · problém ---------- */
.figs { position: absolute; left: 120px; top: 360px; width: 960px; }
.fig { display: grid; grid-template-columns: 420px 1fr; align-items: baseline; column-gap: 32px; padding: 26px 0 24px; border-top: 1px solid rgba(94, 90, 82, .3); }
.fig:last-child { border-bottom: 1px solid rgba(94, 90, 82, .3); }
.fig .big { font: 700 92px/1 var(--f-text); color: var(--les); letter-spacing: -.02em; font-variant-numeric: lining-nums; white-space: nowrap; }
.fig.key .big { color: var(--terakota); }
.fig .cap { font: 400 30px/1.25 var(--f-text); color: var(--grafit); }
.fig .cap small { display: block; font-size: 24px; color: var(--sedohneda); margin-top: 6px; }
.map-note { left: 1500px; top: 1000px; }

/* ---------- 3 · koncept ---------- */
.band { position: absolute; left: 0; top: 0; width: 1920px; height: 420px; overflow: hidden; background: var(--les); }
.band .veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 49, 39, .86) 0%, rgba(30, 49, 39, .62) 60%, rgba(30, 49, 39, .4) 100%); }
.band-text .label { top: 170px; }
.band-text .title { top: 210px; width: 1600px; font-size: 58px; }
.credit-h { position: absolute; right: 40px; bottom: 16px; font: 400 22px/1 var(--f-text); color: rgba(247, 243, 236, .9); }
.entries { position: absolute; left: 120px; top: 476px; width: 860px; }
.entry p { text-wrap: pretty; }
.entry { padding: 0 0 22px 28px; margin-bottom: 22px; border-left: 2px solid rgba(47, 74, 58, .5); }
.entry h3 { font: 700 30px/1.2 var(--f-text); color: var(--les); margin-bottom: 4px !important; }
.entry p { font: 400 30px/1.32 var(--f-text); color: var(--grafit); }
.entry.num { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 30px; border-left-color: var(--terakota); padding-bottom: 0; margin-bottom: 0; }
.entry.num .big { font: 700 112px/1 var(--f-text); color: var(--terakota); letter-spacing: -.02em; }
.village-note { right: 60px; top: 446px; }

/* ---------- 6 · stakeholdeři ---------- */
.venn { position: absolute; left: 96px; top: 352px; width: 600px; height: 581px; }
.vring { fill: none; stroke: rgba(47, 74, 58, .45); stroke-width: 1.2px; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.45, .05, .2, 1) var(--rd, 0s); }
.vring.main { stroke: var(--les); stroke-width: 2.4px; }
.is-current .vring { stroke-dashoffset: 0; }
.vattr { font: 700 24px var(--f-text); letter-spacing: .14em; fill: var(--les); }
.vcls { font: 600 24px var(--f-text); fill: var(--grafit); opacity: 0; transition: opacity .6s; paint-order: stroke; stroke: var(--mlecna); stroke-width: 5px; }
.vregion rect { fill: var(--piskovec); }
.vregion { opacity: 0; transition: opacity .7s var(--ease); }
.s-stake[data-at="1"] .r-def, .s-stake[data-at="1"] .c-def,
.s-stake[data-at="2"] .r-dom, .s-stake[data-at="2"] .c-dom,
.s-stake[data-at="3"] .r-zav, .s-stake[data-at="3"] .c-zav { opacity: 1; }
.s-stake[data-at="2"] .c-def, .s-stake[data-at="3"] .c-def, .s-stake[data-at="3"] .c-dom { opacity: .75; }
.ov-mini .vcls, .ov-mini .vregion.r-def { opacity: .9; }
.matrix { position: absolute; left: 730px; top: 392px; width: 1070px; }
.mx-head, .mx-row { display: grid; grid-template-columns: 220px 140px 165px 170px 1fr; align-items: center; }
.mx-head { padding: 0 22px 0 26px; }
.mx-head span { font: 600 22px/1 var(--f-text); letter-spacing: .07em; text-transform: uppercase; color: var(--sedohneda); padding-bottom: 16px; text-align: center; }
.mx-head span:last-child { text-align: left; padding-left: 18px; }
.mx-row { background: rgba(217, 198, 165, .55); border-radius: 4px; margin-bottom: 14px; min-height: 120px; padding: 0 22px 0 26px; }
.mx-row b { font: 700 32px/1.1 var(--f-text); color: var(--les); }
.mx-row span { font: 400 30px/1.25 var(--f-text); color: var(--grafit); padding-left: 18px; }
.d { justify-self: center; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--les); box-sizing: border-box; }
.d.on { background: var(--les); }
.d.acc { border: 4px solid var(--terakota); width: 40px; height: 40px; box-shadow: 0 0 0 6px rgba(181, 84, 58, .16); }
.dot-cluster { position: absolute; right: 150px; bottom: 50px; width: 120px; height: 50px; }
.dot-cluster i { width: 12px; height: 12px; margin: 0; background: var(--les); box-shadow: none; }
.dot-cluster i:nth-child(1) { left: 0; top: 20px; } .dot-cluster i:nth-child(2) { left: 22px; top: 4px; } .dot-cluster i:nth-child(3) { left: 40px; top: 30px; }
.dot-cluster i.rec { left: 60px; top: 10px; width: 20px; height: 20px; background: var(--terakota); }
.dot-cluster i:nth-child(5) { left: 86px; top: 34px; } .dot-cluster i:nth-child(6) { left: 100px; top: 2px; } .dot-cluster i:nth-child(7) { left: 116px; top: 22px; }

/* ---------- 7 · dotazník ---------- */
.after-title { position: absolute; left: 120px; top: 280px; font: 400 26px/1.3 var(--f-text); color: var(--sedohneda); }
.chart-wrap { position: absolute; left: 120px; top: 346px; width: 1680px; height: 470px; }
.chart-cap { font: 600 24px/1.2 var(--f-text); color: var(--grafit); margin-bottom: 6px !important; }
.likert { position: absolute; left: 0; top: 40px; width: 1680px; height: 420px; overflow: visible; }
.lk-t { font: 400 22px var(--f-text); fill: var(--sedohneda); }
.lk-g { font: 600 30px var(--f-text); fill: var(--grafit); }
.lk-grid { stroke: rgba(94, 90, 82, .28); stroke-width: 1; stroke-dasharray: 2 5; }
.lk-zero { stroke: var(--grafit); stroke-width: 1.6; }
.lk-bar { transform-box: fill-box; transform: scaleX(0); transition: transform 1.1s var(--ease) var(--bd, 0s); }
.ix-bar, .ix-bar-k { fill: var(--piskovec); stroke: rgba(94, 90, 82, .45); stroke-width: 1.5px; }
.ix-dot, .ix-dot-k { fill: var(--les); stroke: var(--mlecna); stroke-width: 4px; }
.ix-dot { opacity: 0; transition: opacity .6s var(--ease) var(--bd, 0s); }
.is-current .lk-bar, .ov-mini .lk-bar { transform: none; }
.is-current .ix-dot, .ov-mini .ix-dot { opacity: 1; }
.watermark { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-7deg); font: 700 76px/1 var(--f-text); letter-spacing: .06em; color: var(--tmava-terakota); opacity: .17; white-space: nowrap; pointer-events: none; }
.chips { position: absolute; left: 120px; top: 846px; display: flex; gap: 22px; }
.chip { display: inline-flex; align-items: center; gap: 14px; padding: 14px 24px; border: 2px solid rgba(47, 74, 58, .55); border-radius: 40px; background: var(--mlecna); font: 400 24px/1 var(--f-text); color: var(--sedohneda); }
.chip b { font: 700 30px/1 var(--f-text); color: var(--les); }
.chip.h5 { border: 3px solid var(--terakota); }
.s-survey .source .dt { color: var(--tmava-terakota); font-weight: 600; }

/* ---------- 10 · doporučení ---------- */
.pros { position: absolute; left: 120px; top: 360px; width: 1230px; }
.pr-head, .pr-row { display: grid; grid-template-columns: 76px 420px 360px 360px; column-gap: 0; }
.pr-head span { font: 600 22px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sedohneda); padding: 0 0 14px 26px; }
.pr-row { margin-bottom: 14px; min-height: 140px; }
.pr-row > span { display: flex; align-items: center; padding: 18px 26px; font: 400 30px/1.25 var(--f-text); }
.pr-row .no { font: 700 44px/1 var(--f-text); color: var(--les); padding: 0; justify-content: flex-start; }
.pr-row.first .no { font-size: 96px; color: var(--terakota); }
.pr-row .rc { background: var(--les); color: var(--mlecna); font-weight: 600; border-radius: 4px 0 0 4px; }
.pr-row .pro { background: rgba(217, 198, 165, .85); color: var(--grafit); position: relative; padding-left: 58px; }
.pr-row .pro::before { content: "+"; position: absolute; left: 22px; font: 700 36px/1 var(--f-text); color: var(--les); }
.pr-row .con { background: var(--mlecna); color: var(--grafit); box-shadow: inset 0 0 0 1px rgba(94, 90, 82, .7); position: relative; padding-left: 58px; border-radius: 0 4px 4px 0; }
.pr-row .con::before { content: "−"; position: absolute; left: 22px; font: 700 36px/1 var(--f-text); color: var(--tmava-terakota); }
.pilot-note { left: 1560px; top: 968px; }

/* ---------- 11 · závěr ---------- */
.s-close .photo-contours .ct { stroke: rgba(217, 198, 165, .14); }
.s-close .photo-contours .ct.idx { stroke: rgba(217, 198, 165, .26); }
.cols { position: absolute; left: 120px; top: 420px; width: 1680px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 64px; }
.col { border-top: 2px solid rgba(217, 198, 165, .55); padding-top: 26px; }
.col h3 { font: 700 32px/1.2 var(--f-text); color: var(--piskovec); margin-bottom: 14px !important; }
.col p { font: 400 30px/1.35 var(--f-text); color: var(--mlecna); }
.col .ph-line { margin-top: 16px; font-size: 26px; }
.close-dots { position: absolute; left: 920px; top: 760px; width: 840px; height: 140px; }
.close-dots i { box-shadow: none; }
.close-dots i.rec { box-shadow: 0 0 0 4px rgba(247, 243, 236, .25); }
.footer { position: absolute; left: 120px; bottom: 58px; font: 400 22px/1.3 var(--f-text); color: rgba(247, 243, 236, .85); }

/* ---------- panely mimo plátno ---------- */
.panel { font-family: var(--f-text); }
#notes { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 36vw); box-sizing: border-box; padding: 26px 28px; background: #1A1E1C; color: #EDE6DA; overflow-y: auto; transform: translateX(100%); transition: transform .45s var(--ease); z-index: 20; }
.notes-open #notes { transform: none; }
.n-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 18px; color: var(--piskovec); }
.n-head button { background: none; border: 1px solid rgba(217, 198, 165, .4); color: inherit; border-radius: 50%; width: 34px; height: 34px; font-size: 20px; cursor: pointer; }
.n-clock { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 12px; }
.n-clock > div { background: rgba(255, 255, 255, .05); border-radius: 8px; padding: 12px 14px; }
.n-k { display: block; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #B9B0A2; }
.n-v { display: block; font: 700 36px/1.1 var(--f-text); font-variant-numeric: tabular-nums; }
.n-p { font-size: 15px; color: #B9B0A2; }
.n-bar { height: 4px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
#notes-bar { height: 100%; width: 0; background: var(--piskovec); transition: width .4s; }
#notes-bar.over { background: var(--terakota); }
.n-step { font-size: 15px; color: #B9B0A2; margin: 10px 0 14px; }
.n-text { font-size: 21px; line-height: 1.5; margin: 0 0 18px; }
.n-next { font-size: 16px; color: var(--piskovec); border-top: 1px solid rgba(217, 198, 165, .25); padding-top: 12px; }

#overview { position: fixed; inset: 0; background: rgba(18, 21, 19, .94); z-index: 30; display: none; padding: 40px; box-sizing: border-box; overflow-y: auto; }
.ov-open #overview { display: block; }
.ov-title { color: var(--piskovec); font: 600 16px var(--f-text); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 22px; }
#ov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.ov-item { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: #EDE6DA; font: 400 15px var(--f-text); }
.ov-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--mlecna); outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .2s; container-type: inline-size; }
.ov-frame.dark { background: var(--les); }
.ov-item.sel .ov-frame, .ov-item:hover .ov-frame { outline-color: var(--terakota); }
.ov-mini { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transform: scale(calc(100cqw / 1920px)); }
.ov-mini .paper { position: absolute; inset: 0; background-size: 384px; mix-blend-mode: multiply; opacity: .5; }
/* zmenšenina je vlastní kontext skládání: papír musí mít pod sebou barvu snímku, jinak jen zesvětlí */
.ov-mini { background: var(--mlecna); }
.ov-frame.dark .ov-mini { background: var(--les); --ink: rgba(217, 198, 165, .16); --ink-idx: rgba(217, 198, 165, .3); }
.ov-frame.dark .ov-mini .paper { opacity: .22; }
.ov-mini .atlas-svg { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.ov-mini .lay.on { opacity: 1; }
.ov-mini .ct, .ov-mini .route, .ov-mini .link, .ov-mini .ring200, .ov-mini .vring { stroke-dashoffset: 0; transition: none; }
.ov-mini .slide { opacity: 1; visibility: visible; transform: none; transition: none; }
.ov-mini [data-step], .ov-mini .roofdots i { opacity: 1; transform: none; transition: none; }
.ov-cap { display: block; margin-top: 10px; }

#help { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(18, 21, 19, .6); z-index: 40; }
.help-open #help { display: flex; }
.help-card { background: var(--mlecna); color: var(--grafit); border-radius: 10px; padding: 26px 32px 30px; width: min(560px, 90vw); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.help-card .n-head { color: var(--les); font-size: 22px; }
.help-card .n-head button { border-color: rgba(47, 74, 58, .4); }
.help-card dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; margin: 20px 0 0; font-size: 18px; }
.help-card dt { font-weight: 700; color: var(--les); }
.help-card dd { margin: 0; }

#debug-errors { position: fixed; left: 8px; bottom: 8px; max-width: 60vw; margin: 0; font: 12px/1.3 monospace; color: #fff; background: rgba(150, 0, 0, .8); z-index: 99; white-space: pre-wrap; }
#debug-errors:empty { display: none; }

/* bez animací: konečné stavy hned */
.is-static *, .is-static *::before, .is-static *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}