.hero-static #track { height: auto; }
.hero-static #stage { position: relative; }
.hero-static #scene, .hero-static #timeline, .hero-static #playback,
.hero-static #labels, .hero-static #leaders, .hero-static #plane-labels,
.hero-static .scene-legend, .hero-static #time-caption { display: none; }
.hero-loading #scene { visibility: hidden; }
/* Během načítání nic neproblikne; náhled a hláška přijdou, jen když to trvá (hero-slow). */
.hero-loading #hero-poster, .hero-loading #copy > :not(#hero-status) { opacity: 0; transition: opacity 0.4s ease; }
.hero-loading #hero-status { opacity: 0; transition: opacity 0.4s ease; }
.hero-loading.hero-slow #hero-poster, .hero-loading.hero-slow #hero-status { opacity: 1; }
.hero-ready #stage { background: #000; }
#hero-poster { position: absolute; right: 8%; top: 16%; width: 45%; height: 66%; object-fit: contain; }
.hero-ready #hero-poster, .hero-ready #hero-story { display: none; }
.hero-loading #hero-story { display: none; }
#hero-status { font-size: 12px; line-height: 1.6; }
.hero-story { max-width: 1000px; margin: 0 auto; padding: 56px 24px; }
.hero-story > h2 { font: 400 32px var(--serif); }
.hero-story ol { padding-left: 24px; display: grid; gap: 24px; }
.hero-story h3 { font: 400 23px var(--serif); margin: 0 0 8px; }
.hero-story p { color: var(--muted); line-height: 1.7; max-width: 65ch; margin: 0; }
.scene-legend { position: absolute; z-index: 5; left: clamp(24px, 6vw, 96px); top: calc(var(--copy-bottom, 340px) + 18px); width: min(330px, calc(100% - 48px)); font-size: 12px; }
.scene-legend[hidden] { display: none; }
.scene-legend summary { cursor: pointer; min-height: 44px; padding: 12px 0; color: var(--text); }
.scene-legend summary:focus-visible, .scene-legend button:focus-visible, .scene-legend select:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.legend-content { padding: 16px; border: 1px solid var(--line); background: var(--bg); max-height: max(140px, min(280px, calc(100svh - var(--copy-bottom, 340px) - 200px))); overflow-y: auto; overscroll-behavior: contain; }
.legend-content dl { margin: 0; display: grid; gap: 16px; }
.legend-content dt { color: var(--text); font-size: 14px; margin-bottom: 4px; }
.legend-content dd { color: var(--muted); line-height: 1.6; margin: 0; }
.legend-content label { display: block; margin-bottom: 8px; color: var(--muted); }
.legend-content select, .legend-content button { width: 100%; min-height: 44px; background: var(--bg); color: var(--text); border: 1px solid var(--line); padding: 10px; font: 13px var(--sans); }
.legend-content button { margin-top: 12px; cursor: pointer; }
.legend-content button:disabled { color: var(--muted); cursor: default; }
#node-feedback { display: block; margin-top: 12px; color: var(--muted); line-height: 1.6; }
.hero-performance { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: #151519; color: var(--text); border-top: 1px solid var(--line); padding: 8px 16px; font: 11px/1.5 var(--sans); pointer-events: none; }

@media (max-width: 1100px) {
  #track { height: 800svh; }
  #stage { height: 100svh; --scene-top: 280px; --scene-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  #copy { top: 94px; left: 24px; width: calc(100% - 48px); }
  #copy h1 { font-size: clamp(28px, 4.2vw, 36px); line-height: 1.12; margin-top: 12px; }
  #copy p { margin-top: 12px; max-width: 65ch; font-size: 15px; line-height: 1.55; }
  #copy #copy-hint { margin-top: 8px; font-size: 12px; }
  #scene, #leaders, #labels, #plane-labels, #hero-poster { top: var(--scene-top); bottom: var(--scene-bottom); left: 0; right: auto; width: 100%; height: calc(100% - var(--scene-top) - var(--scene-bottom)); }
  #hero-poster { object-fit: contain; }
  #tooltip { top: var(--scene-top); }
  .label { width: 190px; }
  .label strong { font-size: 15px; }
  .label span { font-size: 11.5px; line-height: 1.4; }
  .plane-label { font-size: 10px; }
  #playback { position: absolute; left: 24px; right: 24px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
  #playback-note { font-size: 11px; }
  #stage[data-legend="true"] #playback-note { display: none; }
  #timeline { left: 20px; right: 20px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  #timeline button { box-sizing: border-box; min-width: 44px; min-height: 52px; padding: 4px 0; gap: 8px; }
  #timeline .tl-text { flex-direction: column; gap: 2px; }
  #timeline .tl-text b { font-size: 11px; line-height: 13px; }
  #timeline .tl-text span { display: block; font-size: 10px; line-height: 12px; }
  .tl-line { top: 42px; }
  .scene-legend { left: auto; right: 24px; top: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 140px; }
  .scene-legend summary { padding: 12px 0 12px 8px; text-align: right; }
  .legend-content { position: absolute; bottom: calc(100% + 8px); right: 0; width: min(350px, calc(var(--stage-width, 100vw) - 48px)); max-height: min(300px, calc(100svh - 180px)); }
  .legend-content select { font-size: 16px; }
  #time-caption { font-size: 11px; }
}
@media (max-width: 600px) { #copy { top: 84px; } }
/* Popisky dílů u modelu jen tam, kde je vedle něj místo; na telefonu je nahradí legenda. */
@media (max-width: 679px) { #labels, #leaders { display: none; } }
@media (max-width: 1100px) and (max-height: 650px) {
  #copy { top: 78px; }
  #copy h1 { font-size: 25px; margin-top: 10px; }
  #copy p { font-size: 13px; line-height: 1.45; margin-top: 10px; }
  #copy #copy-hint { font-size: 11px; line-height: 1.4; }
  .copy-num { font-size: 11px; }
}
@media (max-width: 1100px) and (max-height: 560px) and (orientation: landscape) {
  #copy { width: 40%; max-height: calc(100svh - 220px); overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; }
  #copy h1 { font-size: 24px; }
  #scene, #leaders, #labels, #plane-labels, #hero-poster { left: 46%; width: 54%; top: 78px; height: calc(100% - 218px); }
  #tooltip { left: 46%; top: 78px; }
  .hero-static #copy { max-height: calc(100svh - 110px); }
}
@media (prefers-reduced-motion: reduce) {
  #copy, #scene, #play-toggle, #timeline button, #timeline button::after { transition: none; }
}

/* Varianta s textem vedle hodinek (?text=vedle): jedna věta fáze, slovo po slově. */
.text-vedle #copy-text { display: none; }
.text-vedle #copy h1 { margin-top: 16px; font-size: clamp(20px, 1.75vw, 25px); line-height: 1.4; letter-spacing: 0; }
.text-vedle #copy .w { opacity: 0; transition: opacity 0.3s ease; }
.text-vedle #copy.lines-in .w { opacity: 1; transition-delay: var(--d, 0ms); }
.text-vedle #copy .copy-num, .text-vedle #copy #copy-hint { opacity: 0; transition: opacity 0.3s ease; }
.text-vedle #copy.lines-in .copy-num { opacity: 1; }
.text-vedle #copy.lines-in #copy-hint { opacity: 1; transition-delay: var(--d, 0ms); }
.text-vedle #stage.side #copy { top: 50%; transform: translateY(-50%); left: clamp(24px, 4vw, 96px); width: min(340px, 29vw); }
.text-vedle #stage.side #copy p { max-width: none; }
.tlumene.text-vedle #copy .w, .tlumene.text-vedle #copy .copy-num, .tlumene.text-vedle #copy #copy-hint { transition: none; }

/* Užší okno ve variantě vedle: scéna začíná až za sloupcem textu, takže se model a text nepotkají. */
@media (max-width: 1100px) {
  .text-vedle #stage.side #scene, .text-vedle #stage.side #leaders, .text-vedle #stage.side #labels, .text-vedle #stage.side #plane-labels { left: var(--scene-left, 0px); width: calc(100% - var(--scene-left, 0px)); }
}