.dcard-art{--dcard-bg:#3A3A3A}
/* =========================================================================
   VESSAN — sekce divizí
   Styly pro tři inline SVG ilustrace. Vše je scopované pod .dcard-art,
   takže se nic nepropíše do zbytku webu. Barvy jsou napevno; --card
   musí odpovídat pozadí karty, protože se jí vyplňují stěny domu
   i siluety postav.
   ========================================================================= */

/* --- rám ilustrace ------------------------------------------------------ */
.dcard-art{position:relative;aspect-ratio:38/30;overflow:hidden}
.dcard-art svg{width:100%;height:100%;display:block}

/* --- plochy ------------------------------------------------------------- */
.dcard-art .fc{fill:var(--dcard-bg);stroke:none;transition:fill .5s cubic-bezier(.22,.61,.36,1)}
.dcard:hover .dcard-art .fc{fill:var(--dcard-bg)}
.dcard-art .fc-plate{fill:rgba(255,255,255,.012);stroke:none}   /* terén */
.dcard-art .fc-void{fill:rgba(0,0,0,.30);stroke:none}           /* vstupní výklenek */
.dcard-art .fg{fill:#C89868;stroke:none;opacity:.16}            /* prosklení */

/* --- linky: čtyři váhy -------------------------------------------------- */
.dcard-art .ln{fill:none;stroke:#C89868;stroke-linecap:round;stroke-linejoin:round;
  stroke-width:1.2;opacity:.72;transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.dcard-art .ln-strong{stroke-width:1.7;opacity:1}
.dcard-art .ln-mid{stroke-width:.9;opacity:.5}
.dcard-art .ln-hair{stroke-width:.7;opacity:.26}

/* Hover zesvětluje jen kresbu ve .stage. Postav v .actors se dotknout nesmí:
   skryté paže mají také třídu .ln a hover pravidlo má vyšší specificitu,
   takže by jim přebilo nulovou průhlednost a zviditelnilo je. */
.dcard:hover .dcard-art .stage .ln{opacity:.86}
.dcard:hover .dcard-art .stage .ln-mid{opacity:.6}
.dcard:hover .dcard-art .stage .ln-hair{opacity:.36}

/* --- postavy ------------------------------------------------------------ */
.dcard-art .sil{fill:var(--dcard-bg);stroke:#C89868;stroke-width:1.5;stroke-linejoin:round;opacity:.95}
.dcard:hover .dcard-art .sil{fill:var(--dcard-bg)}
.dcard-art .fig,.dcard-art .truck{opacity:0;transition:opacity .55s linear}
.dcard-art .fig.in,.dcard-art .truck.in{opacity:1}
/* kdo odchází z rámu, zmizí rychle, ať se neroztahuje na půl sekundy */
.dcard-art .fig.leaving,.dcard-art .truck.leaving{transition:opacity .18s linear}

/* Osa otáčení končetin je rameno, respektive kyčel. Ta neleží ve středu
   obrysu, proto má každá strana vlastní transform-origin. */
.dcard-art .arm-idle{transform-box:fill-box}
.dcard-art .arm-a{transform-origin:0% 0%}
.dcard-art .arm-b{transform-origin:100% 0%}
.dcard-art .leg{stroke-width:2.4;opacity:.95;transform-box:fill-box}
.dcard-art .leg-a{transform-origin:100% 0%}
.dcard-art .leg-b{transform-origin:0% 0%}

/* Klidový stav: zvednuté i pozdravná paže jsou skryté. */
.dcard-art .arm-shake,.dcard-art .arm-up{opacity:0}
/* Podání ruky: mizí jen natahovaná paže, druhá zůstává u těla. */
.dcard-art .shaking .arm-a{opacity:0}
.dcard-art .shaking .arm-shake{opacity:1;animation:dvshake .42s ease-in-out 3}
/* Zamávání oběma rukama (dělník na stavbě). */
.dcard-art .cheering .arm-idle{opacity:0}
.dcard-art .cheering .arm-up{opacity:1}

/* Chůze. Perioda --step se počítá v JS ze skutečné rychlosti přesunu,
   takže krok odpovídá tomu, jak rychle se tělo posouvá. */
.dcard-art .walking .leg-a{animation:dvla var(--step,.72s) ease-in-out infinite}
.dcard-art .walking .leg-b{animation:dvlb var(--step,.72s) ease-in-out infinite}
.dcard-art .walking .arm-a{animation:dvarma var(--step,.72s) ease-in-out infinite}
.dcard-art .walking .arm-b{animation:dvarmb var(--step,.72s) ease-in-out infinite}

@keyframes dvla{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-10deg)}}
@keyframes dvlb{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes dvarma{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}
@keyframes dvarmb{0%,100%{transform:rotate(11deg)}50%{transform:rotate(-11deg)}}
@keyframes dvshake{0%,100%{transform:rotate(0deg)}50%{transform:rotate(7deg)}}

/* --- kočka (jen karta Správa) ------------------------------------------- */
.dcard-art .cat-s{fill:var(--dcard-bg);stroke:#C89868;stroke-width:1.1;stroke-linejoin:round;opacity:.95}
.dcard:hover .dcard-art .cat-s{fill:var(--dcard-bg)}
.dcard-art .cat-tail{stroke-width:1;opacity:.8;transform-box:fill-box;transform-origin:100% 100%}
.dcard-art .cat-leg{fill:none;stroke:#C89868;stroke-width:1;stroke-linecap:round;opacity:.9;
  transform-box:fill-box;transform-origin:50% 0}
/* čtyři nohy ve čtyřech fázích, ne dvě a dvě */
.dcard-art .walking .cleg1{animation:dvcl var(--step,.45s) ease-in-out infinite}
.dcard-art .walking .cleg2{animation:dvcl var(--step,.45s) ease-in-out infinite;
  animation-delay:calc(var(--step,.45s) * -0.25)}
.dcard-art .walking .cleg3{animation:dvcl var(--step,.45s) ease-in-out infinite;
  animation-delay:calc(var(--step,.45s) * -0.5)}
.dcard-art .walking .cleg4{animation:dvcl var(--step,.45s) ease-in-out infinite;
  animation-delay:calc(var(--step,.45s) * -0.75)}
.dcard-art .walking .cat-tail{animation:dvtail calc(var(--step,.45s) * 2) ease-in-out infinite}
.dcard-art .looking .cat-head{animation:dvlook 2.6s ease-in-out}
.dcard-art .looking .cat-tail{animation:dvtail 1.3s ease-in-out infinite}
.dcard-art .cat-head{transform-box:fill-box;transform-origin:20% 80%}

@keyframes dvcl{0%,100%{transform:rotate(17deg)}50%{transform:rotate(-17deg)}}
@keyframes dvtail{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes dvlook{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-13deg)}
  60%{transform:rotate(11deg)}}

/* --- pták (jen karta Správa) -------------------------------------------- */
.dcard-art .bird-b{fill:#C89868;stroke:none;opacity:.85}
.dcard-art .bird-s{stroke-width:1;opacity:.85;fill:none}
.dcard-art .bird-w{transform-box:fill-box}
.dcard-art .bw-l{transform-origin:100% 100%;animation:dvflapl .62s ease-in-out infinite}
.dcard-art .bw-r{transform-origin:0% 100%;animation:dvflapr .62s ease-in-out infinite}
@keyframes dvflapl{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(20deg)}}
@keyframes dvflapr{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-20deg)}}

/* --- světla v oknech a siluety za sklem --------------------------------- */
.dcard-art .win{fill:#C89868;stroke:none;opacity:0;
  transition:opacity 1s cubic-bezier(.22,.61,.36,1)}
.dcard-art .glass{opacity:0}
.dcard-art .occ{opacity:0;transition:opacity 1.1s cubic-bezier(.22,.61,.36,1) .25s}
.dcard-art .occ.on{opacity:1}
.dcard-art .occ-s{fill:var(--dcard-bg);stroke:none}
.dcard-art .occ-l{fill:none;stroke:var(--dcard-bg);stroke-width:1.6;stroke-linecap:round}
.dcard:hover .dcard-art .occ-s{fill:var(--dcard-bg)}
.dcard:hover .dcard-art .occ-l{stroke:var(--dcard-bg)}

/* --- Development: rostoucí hmota, jeřáb, zeleň -------------------------- */
.dcard-art .storey{opacity:0}
.dcard-art .storey.on{opacity:1}
/* dočasné víko podlaží, aby rozestavěná hmota nevypadala otevřená;
   JS ho skryje, jakmile naskočí další patro */
.dcard-art .cap{display:inline}
.dcard-art .crane,.dcard-art .ent,.dcard-art .trees{opacity:0;
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}
.dcard-art .crane.on,.dcard-art .ent.on,.dcard-art .trees.on{opacity:1}
.dcard-art .trolley,.dcard-art .load{transition:transform 2s cubic-bezier(.4,0,.35,1)}

/* --- přístupnost -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .dcard-art *{animation:none!important;transition-duration:.01ms!important}
}