/* ==========================================================================
   JOZEF HOLLY — ZAŽI PIANO SHOW
   Štýly len pre interaktívny zážitok. Načítavajú sa iba na tejto stránke,
   takže zvyšok webu nimi nie je zaťažený.

   Styles for the interactive experience only. Loaded on this page alone,
   so no other page pays for them.
   ========================================================================== */

/* ---------- 1. Stránka je scéna, nie dokument ---------- */
.footer,
.dock,
.totop,
.progress,
.srail          { display: none !important; }

html, body      { overflow: hidden; }
body            { overscroll-behavior: none; }
#main           { padding: 0; }

.exp {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  --gate: 1;                     /* 1 = brána ešte stojí / the gate is still up */
}

/* ---------- 2. Brána ---------- */
.exp-gate {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: var(--nav-h) var(--gut) 3rem;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 42%, rgba(14, 14, 16, 0.82) 0%, #06060700 68%), #060607;
  transition: opacity 1.5s var(--ease-io), visibility 1.5s;
}
.exp-gate__inner { max-width: 46ch; }
/* Titulok brány je bežný nadpis .h1 a po prekalibrovaní písma vyrástol na
   150 px - obsah brány tým narástol na 948 px do priestoru 688 px a
   tlačidlo Vstúpiť skončilo pod dolným okrajom okna. Veľkosť je preto
   zhora obmedzená aj výškou okna, nielen šírkou. Odrolovanie je posledná
   poistka, keby sa obsah nezmestil ani tak.                            */
.exp-gate { overflow-y: auto; }
.exp-gate__title {
  margin-block: 1rem 1.1rem;
  font-size: min(var(--fs-h1), 10.5vh);
}
@media (max-height: 880px) {
  .exp-gate__title { margin-block: 0.6rem 0.7rem; }
  .exp-gate__skip { margin-top: 1.4rem; }
}
.exp-gate .lead  { margin-inline: auto; }
/* Zvuk sa hlási hneď na bráne, nie až v scéne: kto vstúpi, má vedieť,
   že tu bude čo počuť — a zároveň je to prísľub, nie varovanie. */
.exp-gate__sound {
  display: inline-flex; align-items: flex-start; gap: 0.55rem;
  /* Na úzkej obrazovke sa veta zalomí; užší pás a text vľavo ju drží pod
     ikonkou, nie rozhodenú na dva riadky s ikonkou kdesi zboku. */
  max-width: 30ch; margin: clamp(1.8rem, 4.5vw, 2.4rem) auto 0;
  text-align: left;
  font-size: 0.76rem; letter-spacing: 0.12em; line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold-2);
}
.exp-gate__sound svg { flex: none; opacity: .85; margin-top: 0.15em; }
.exp-gate__cta   { margin: 0.9rem 0 1.1rem; }
.exp-gate__note,
.exp-gate__skip {
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.exp-gate__skip { margin-top: 2.2rem; }
.exp-gate__skip a { border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.exp-gate__skip a:hover { color: var(--gold-2); border-color: var(--gold); }

.exp.is-open .exp-gate { opacity: 0; visibility: hidden; pointer-events: none; }

/* Návrat na scénu: brána sa vôbec neukáže a svetlo nabehne krátko,
   nie na dve a pol sekundy ako pri prvom vstupe. */
.exp.is-instant .exp-gate  { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.exp.is-instant .exp-stage { transition-duration: .5s, .6s; }

/* Kým brána stojí, scéna je takmer tmavá — potom sa filmovo rozsvieti. */
.exp-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding-top: var(--nav-h);
  opacity: 0.14;
  transform: scale(1.045);
  transition: opacity 3.4s var(--ease-io), transform 4.2s var(--ease-io);
}
.exp.is-open .exp-stage { opacity: 1; transform: none; }

/* ---------- 3. Koncertná sála ---------- */
.exp-stage__vig,
.exp-stage__haze { position: absolute; inset: 0; pointer-events: none; }
.exp-stage__vig {
  z-index: 3;
  background:
    radial-gradient(110% 78% at 50% 46%, transparent 38%, rgba(6, 6, 7, 0.72) 100%),
    linear-gradient(180deg, rgba(6, 6, 7, 0.55), transparent 22%);
}
.exp-stage__haze {
  z-index: 0;
  background:
    radial-gradient(58% 42% at 22% 12%, rgba(198, 163, 83, 0.16), transparent 70%),
    radial-gradient(70% 52% at 54% 68%, rgba(198, 163, 83, 0.075), transparent 72%);
  opacity: 0.9;
}
.exp.is-open .exp-stage__haze { animation: exhaze 22s var(--ease-io) infinite alternate; }
@keyframes exhaze {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.6%, -1.4%, 0) scale(1.06); }
}

/* ---------- 4. Krídlo ---------- */
.exp-frame {
  position: relative; z-index: 2;
  flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center;
  overflow: hidden;
  padding-block-end: 1.2rem;              /* nech nástroj nedosadne na text */
  /* Scéna sa dolu nekončí rezom, ale sa vytratí. Roj sa rozsype aj pod
     nástroj a rám ho tam odstrihol rovnou čiarou — na tmavom pozadí bolo
     vidieť, kde scéna končí. Posledných šesťdesiat pixelov preto plynule
     prechádza do čierna; nohy stoličky sú nad tým, tie ostávajú celé. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 60px),
                                      rgba(0, 0, 0, .55) calc(100% - 22px),
                                      transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 60px),
                              rgba(0, 0, 0, .55) calc(100% - 22px),
                              transparent 100%);
}
/* V režime hrania je nákres schovaný a klaviatúra visí mimo rámu —
   maska by tam už len robila zbytočnú vrstvu. */
.exp.is-focus .exp-frame {
  -webkit-mask-image: none; mask-image: none;
}

/* Krídlo je vždy také veľké, aké mu scéna dovolí — a nikdy väčšie.
   The grand is always as large as the stage allows, and never larger.

   Šírka stojí ako premenná na ráme, nie priamo na nástroji: počíta s ňou
   aj súhvezdie odkazov, ktoré si podľa nej hľadá stred voľného pruhu
   vedľa. Kým bol vzorec napísaný dvakrát, jeden sa zmenil a druhý nie —
   a súhvezdie sa postavilo do nástroja. */
.exp-frame {
  --piano-w: min(100%, calc((100svh - var(--nav-h) - 132px) * var(--vw) / var(--vh)));
}

.exp-piano {
  position: relative;
  width: var(--piano-w);
  aspect-ratio: var(--vw) / var(--vh);
  transform: scale(var(--zoom, 1)) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.9s var(--ease);
  will-change: transform;
}

/* Na širokej obrazovke stolička nedosadla. Výpočet šírky si dole odkladal
   len 132 px, lenže pod rámom stojí tlačidlo aj nápoveda — dokopy takmer
   dvesto. Krídlo tak vyšlo vyššie než rám a spodok, teda práve stolička,
   ostal pod hranou a v hmle.

   Miesto sa najprv hľadalo dole, nie na nástroji: krivka zvuku v scéne
   nikdy nesvieti (hrá sa až na rozbalenej klaviatúre), tak si tam nemusí
   držať riadok, a tlačidlo nemusí stáť tak ďaleko od scény. Až zvyšok
   dorovná menší nádych v samotnom výpočte — krídlo je o pár percent
   menšie, zato celé.

   Telefón ani tablet sem nesiahajú; tam je spodok scény vyladený inak. */
@media (min-width: 761px) {
  .exp:not(.is-focus) .exp-wave { display: none; }
  .exp-prize { margin-top: 1.5rem; }
  .exp-frame {
    padding-block-end: 0.5rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px),
                                        rgba(0, 0, 0, .55) calc(100% - 9px),
                                        transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px),
                                rgba(0, 0, 0, .55) calc(100% - 9px),
                                transparent 100%);
  }
  .exp-frame {
    --piano-w: min(100%, calc((100svh - var(--nav-h) - 184px) * var(--vw) / var(--vh)));
  }
}

/* ---------- Nástroj sa poskladá z roja ----------
   Po VSTÚPIŤ priletí zo všetkých strán štyristodvadsať drobných čiastočiek
   a sadnú presne na čiary nákresu — body sa počítajú z hotového nákresu
   (build.py, funkcia _shards), takže roj kreslí presne to krídlo, ktoré
   potom ostane. Keď je na mieste, nákres pod ním sa rozsvieti a čiastočky
   sa rozsypú okolo klavíra, kde ostanú ako hviezdy.

   Roj má vlastné SVG nad nákresom — nákres tak počas letu neprekresľuje
   ani jeden snímok a scéna beží plynulo. */
.exp-swarm {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;                    /* hviezdy smú aj za okraj nákresu */
  pointer-events: none;
}
.ex-shard {
  fill: var(--gold-2);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  /* pokojný stav je hviezda — tam roj skončí a tam ostane */
  transform: translate(var(--ex), var(--ey)) scale(var(--es));
  opacity: var(--eo);
}
.exp:not(.is-open) .ex-shard { opacity: 0; }
.exp.is-open .ex-shard { animation: exshard 5.4s var(--sd) both; }

@keyframes exshard {
  /* zďaleka, pootočená a menšia */
  0% {
    transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(0.5);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.24, 0.4, 0.2, 1);
  }
  14% { opacity: 0.88; animation-timing-function: cubic-bezier(0.24, 0.4, 0.2, 1); }
  /* dosadne na svoju čiaru a chvíľu ju drží, kým sa nákres rozsvieti */
  34% { transform: none; opacity: 0.88; animation-timing-function: linear; }
  44% { transform: none; opacity: 0.88; animation-timing-function: cubic-bezier(0.32, 0.02, 0.24, 1); }
  /* a pomaly sa rozsype okolo klavíra, kde ostane */
  100% { transform: translate(var(--ex), var(--ey)) scale(var(--es)); opacity: var(--eo); }
}

/* Nákres presvitá cez roj — obe vrstvy sa dlho prekrývajú, aby jedna
   plynulo prešla do druhej. */
/* Keď hviezdy dosadnú, animáciu z nich zložíme. Pokojný stav je aj tak
   hviezda, takže sa nič nepohne — ale štyristo čiastočiek prestane visieť
   prehliadaču v zozname animovaných prvkov a scéna sa uvoľní. */
.exp-swarm.is-still .ex-shard { animation: none; }

/* Keď hviezdy dosadnú, vyše polovica z nich začne blikať — každá vlastným
   tempom, odkladom aj vrcholom, takže sa nikdy nezosynchronizujú a obloha
   pôsobí živo. Hviezda pritom zhasne skoro dočista a potom sa rozžiari
   naplno; slabé kolísanie okolo pokojnej hodnoty nebolo vidieť vôbec.
   K tomu sa nepatrne zväčší — takto to iskrí, nie len presvitá.

   Posun musí byť v každom kroku, inak by hviezda skočila do stredu scény:
   pokojnú polohu jej dáva práve translate() zo základného pravidla. */
.exp-swarm.is-still .ex-shard--tw {
  animation: exstar var(--kd, 3s) ease-in-out var(--kl, 0s) infinite;
}
@keyframes exstar {
  0%, 100% {
    opacity: calc(var(--eo) * 0.24);
    fill: var(--gold-2);
    transform: translate(var(--ex), var(--ey)) scale(var(--es));
  }
  50% {
    opacity: var(--kp, 1);
    /* Na vrchole hviezda svetlie a zväčší sa — spolu to je ten záblesk.
       Robiť ho filtrom by pri stovke hviezd stálo plynulosť. Je to na
       polceste medzi pokojnou zlatou a čistým svetlom: úplne biela
       a trojnásobný bod boli na scénu priveľa. */
    fill: var(--twc, #F5E8C7);
    transform: translate(var(--ex), var(--ey)) scale(calc(var(--es) * var(--twk, 2.1)));
  }
}

/* Na telefóne je obrazovka menšia a hviezdy na nej drobnejšie — záblesk
   preto ide vyššie a do belšieho, nech ho vidno aj tam. */
@media (max-width: 640px) {
  .exp-swarm.is-still .ex-shard--tw { --twk: 3.4; --twc: #FFFBEE; }

}

/* Návrat z rozbalenej klaviatúry vyzerá rovnako ako prvý príchod na
   stránku — js/experience.js jednoducho zloží `is-still` a let hore
   (exshard) sa rozbehne odznova. Vlastné pravidlo tu preto netreba. */

.ex-scene { opacity: 0; transition: opacity 1.7s var(--ease-io) 1.9s; }
.exp.is-open .ex-scene { opacity: 1; }

/* Návrat zo zvačšenej klaviatúry skladá nástroj rovnako ako prvý príchod:
   roj letí a nákres sa doňho postupne prepíše. Prechod z pravidla vyššie
   tu použiť nemožno — beží len raz, pri otvorení. Preto tá istá krivka
   ako animácia: nákresu niet do 1,9 s (52,8 % z 3,6 s), presne dokedy sa
   roj skladá na jeho čiary, a potom sa 1,7 s prelína. */
.exp.is-reassembling .ex-scene { animation: exscenein 3.6s both; }
@keyframes exscenein {
  0%     { opacity: 0; animation-timing-function: linear; }
  52.8%  { opacity: 0; animation-timing-function: var(--ease-io); }
  100%   { opacity: 1; }
}

/* Reflektory. Po vstupe sa pomaly rozžeravia, ale len na tlmenú službu —
   naplno ich zapne až klik na svietidlo. Kužeľ myš nechytá, terčom je
   samotná lampa; inak by sa nedalo kliknúť na nič pod ním. */
/* Nábeh po vstupe je pomalý a s odkladom. Keby si ten istý odklad vzalo aj
   zapínanie klikom, kužeľ by po zhasnutí dohorieval ešte tri sekundy. Preto
   sa po dobehnutí vstupu (trieda is-settled, dáva ju js/experience.js)
   prepne na krátky prechod — od tej chvíle sa reflektor zapína a zhasína
   okamžite v oboch smeroch. */
.ex-shaft { opacity: 0; pointer-events: none; filter: brightness(1);
            transition: opacity 1.8s var(--ease-io) 2.9s,
                        filter .6s var(--ease-io); }
.exp.is-open .ex-shaft { opacity: .26; }
.exp.is-settled .ex-shaft { transition: opacity .55s var(--ease-io),
                                        filter .55s var(--ease-io); }
/* Terč pre myš. Svietidlo je z tenkých čiar a medzi nimi nie je čo trafiť,
   preto má každý reflektor cez celé teleso jeden priehľadný obdĺžnik. Kreslí
   sa až po nástroji, takže ho krídlo neprekryje.

   Pri prejdení myšou sa svietidlo prižiari — inak by nebolo vidieť, že sa
   dá kliknúť. */
.ex-lamphit { fill: transparent; cursor: pointer; pointer-events: all;
              touch-action: manipulation; }

/* Rozsvietený reflektor sa predstaví. Nápis stojí pod svietidlom a je to
   ten istý text, aký nesie svetielko Koncerty vo Veľkom voze — kto klikne
   na reflektor, dozvie sa, čoho sa týka. Vodorovne sedí na osi svietidla:
   268 z 1000 jednotiek nákresu je 26,8 %. */
.exp-notes { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.ex-riglabels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
/* Presunuté nad opar sály (js/experience.js) — rozmery nákresu im dáva
   to isté miesto, preto tu inset púšťame. */
.ex-riglabels.is-loose { inset: auto; z-index: 4; }
/* Všetky tri vyskakovacie nápisy majú rovnakú veľkosť — drží ju jedna
   dvojica hodnôt, aby sa nemohli rozísť. */
.ex-riglabel, .ex-cdlabel, .ex-benchlabel {
  --lbl-name: 0.823rem;                /* 0,748 rem väčšie o 10 % */
  --lbl-sub:  0.748rem;                /* 0,680 rem väčšie o 10 % */
}
.ex-riglabel   .exp-hot__name,
.ex-cdlabel    .exp-hot__name,
.ex-benchlabel .exp-hot__name { font-size: var(--lbl-name); }
.ex-riglabel   .exp-hot__sub,
.ex-benchlabel .exp-hot__sub  { font-size: var(--lbl-sub); }

.ex-riglabel {
  position: absolute; top: 16.5%; left: 26.8%;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 4px 9px;
  white-space: nowrap; text-align: center;
  background: rgba(8, 8, 9, .94); border-radius: 2px;
  border: 1px solid rgba(231, 211, 161, .26);
  cursor: pointer; touch-action: manipulation;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              visibility 0s .5s;
}
/* Kým nápis nesvieti, nesmie chytať myš — leží nad krídlom. */
.ex-riglabel.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s;
}
.ex-riglabel:hover .exp-hot__name { color: var(--gold); }

/* Ponuka kúpiť CD. Objaví sa nad postaveným obalom albumu a vedie do
   diskografie. Rovnaký vzhľad ako nápis pri reflektore — je to tá istá
   vec: nápis, ktorý sa objaví až po kliknutí na diel nástroja. */
.ex-cdlabel {
  /* Tesne nad postaveným obalom: ten má vrch na 17,6 % výšky nákresu
     a nápis je vysoký zhruba 7 %, takže mu ostane úzka medzera. Percentá
     platia pri každej veľkosti — obal aj nápis sedia v tom istom rámci. */
  position: absolute; left: 50%; top: 9.2%;
  display: flex; justify-content: center;
  padding: 4px 9px;
  white-space: nowrap;
  background: rgba(8, 8, 9, .94); border-radius: 2px;
  border: 1px solid rgba(231, 211, 161, .26);
  cursor: pointer; touch-action: manipulation;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 5px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              visibility 0s .45s;
}
.ex-cdlabel.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .45s var(--ease) .5s, transform .45s var(--ease) .5s,
              visibility 0s;
}
.ex-cdlabel:hover .exp-hot__name { color: var(--gold); }

/* Príbeh pod rozsypanou stoličkou. Vedie tam, kam jeho svetielko vo Veľkom
   voze, a vyzerá rovnako ako ostatné vyskakovacie nápisy. */
.ex-benchlabel {
  /* Vedľa stoličky, nie nad ňou. Odkedy sedí vyššie pri pedáloch, je nad
     ňou klaviatúra a nápis by ležal na klávesoch; vedľa je miesta dosť.
     Ďalej doprava, preč od nástroja: pri ňom sa strácal v tmavom pozadí
     aj v pedáloch. Svetielko Veľkého voza mu tam už nevadí — nápisy sa
     kreslia nad celou scénou a pozadie majú takmer nepriehľadné. */
  position: absolute; left: 78%; top: 87.4%;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 4px 9px;
  white-space: nowrap; text-align: center;
  background: rgba(8, 8, 9, .94); border-radius: 2px;
  border: 1px solid rgba(231, 211, 161, .26);
  cursor: pointer; touch-action: manipulation;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 5px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              visibility 0s .45s;
}
.ex-benchlabel.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s;
}
.ex-benchlabel:hover .exp-hot__name { color: var(--gold); }

/* Presunutý do pruhu scény (js/experience.js): tam ho orezanie rámu
   nezhltne a smie si sadnúť priamo na stoličku. Polohu mu dáva to isté
   miesto — meria ju zo stoličky, preto tu žiadne percentá. */
.ex-benchlabel.is-loose {
  top: 0; bottom: auto; z-index: 6;
}

/* Diely nástroja sa dajú kliknúť. Každý robí to isté, čo jeho svetielko vo
   Veľkom voze — veko sa zavrie a otvorí, stolička sa rozsype, na klapke sa
   premietne filmový pás, disk sa postaví, struny sa rozochvejú. Na telefóne,
   kde svetielka nie sú, je to jediná cesta k týmto efektom; `manipulation`
   zaistí, že stačí jedno ťuknutie a nečaká sa na druhé. */
.exp-art { touch-action: manipulation; }
.ex-lidwrap, .ex-bench, .ex-front, .ex-cd,
.ex-strings, .ex-bridge, .ex-pinblock, .ex-struts, .ex-dampers { cursor: pointer; }

/* Aby bolo vidieť, že sa dá kliknúť, obrysy dielov pomaly dýchajú — každý
   diel vo vlastnom čase, takže nástroj nebliká naraz ako reklama, ale
   pokojne sa preberá. Je to zmena krytia, nie filtra: krytie zvládne
   grafická karta, filter by pri siedmich skupinách stál plynulosť. */
@keyframes exhint {
  0%, 100% { opacity: 1; }
  46%      { opacity: .56; }         /* hlbší nádych, stále nie blikanie */
}
.ex-lidwrap, .ex-front, .ex-strings, .ex-cd, .ex-bench, .ex-lyre, .ex-lamp {
  animation: exhint 4.6s ease-in-out infinite;
}
/* Aby sa diel pri zatrasení otáčal okolo seba, a nie okolo rohu nákresu.
   Pedále sem nepatria: majú vlastný `transform` priamo v nákrese a iná
   vzťažná sústava by ich premiestnila. Netrasú sa teda vôbec. */
.ex-lidwrap, .ex-front, .ex-strings, .ex-cd, .ex-bench, .ex-lamp {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* A keď naň prídete myšou, zatrasie sa — ako keby sa prebral. Dýchanie
   pritom beží ďalej: jedno mení krytie, druhé polohu, takže si neprekážajú.
   Na dotyku sa diely trasú samy, po jednom (js/experience.js). */
/* -------------------------------------------------- dymová clona na veku --
   Čarovný klavír sa má jemne prelievať. Po laku plynie riedka clona: veľké
   mäkké obláčiky s vyhasínajúcim okrajom, každý vlastným tempom aj smerom,
   orezané tvarom veka. Nie sú to iskričky — doska len tak dýcha svetlom.

   Hýbe sa iba posun, mierka a krytie, teda nič, čo by prehliadač nútilo
   nákres prekresľovať; rozmazanie robí prechod farby v samotnej výplni,
   nie filter, ktorý by pri každom snímku stál plynulosť.

   Keď sa veko zatvára, `--lidt` z js/experience.js celú vrstvu stlmí:
   doska sa otočí preč a clona by ostala visieť vo vzduchu.
   -------------------------------------------------------------------- */
.ex-lidhaze {
  opacity: clamp(0, (var(--lidt, 1) - .86) * 7, 1);
  pointer-events: none;
}
.ex-haze {
  fill: url(#exhazefill);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: exlidhaze var(--hd, 18s) ease-in-out var(--hl, 0s) infinite;
}
@keyframes exlidhaze {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(.85); }
  22%      { opacity: .85; transform: translate(calc(var(--hx) * .35),
                                                calc(var(--hy) * .35)) scale(1.05); }
  55%      { opacity: .55; transform: translate(var(--hx), var(--hy)) scale(1.25); }
  80%      { opacity: .2; transform: translate(calc(var(--hx) * 1.5),
                                               calc(var(--hy) * 1.5)) scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .ex-haze { animation: none; opacity: .3; }
}

@keyframes exwiggle {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  14%      { transform: rotate(-1.7deg) translate(-2px, 0); }
  38%      { transform: rotate(1.5deg) translate(2px, 0); }
  62%      { transform: rotate(-1deg) translate(-1px, 0); }
  84%      { transform: rotate(.5deg) translate(1px, 0); }
}
.ex-lidwrap:hover, .ex-front:hover, .ex-strings:hover, .ex-cd:hover,
.ex-bench:hover, .ex-lamp:hover,
.ex-lidwrap.is-wiggle, .ex-front.is-wiggle, .ex-strings.is-wiggle,
.ex-cd.is-wiggle, .ex-bench.is-wiggle, .ex-lamp.is-wiggle {
  animation: exhint 4.6s ease-in-out infinite, exwiggle .62s ease-in-out;
}
.ex-front     { animation-delay: .65s; }
.ex-strings   { animation-delay: 1.3s; }
.ex-cd        { animation-delay: 1.95s; }
.ex-bench     { animation-delay: 2.6s; }
.ex-lyre      { animation-delay: 3.25s; }
.ex-lamp      { animation-delay: 3.9s; }

/* Kým diel práve hrá svoju vlastnú animáciu — alebo ho niečo schováva —
   dýchanie stojí. Inak by krytie z animácie prebilo to, čo má platiť. */
.exp-piano.is-lidshut .ex-cd,
.exp-piano.is-cd .ex-cd,
.exp-piano.is-cd-out .ex-cd,
.exp-piano.is-bench .ex-bench,
.exp-piano[data-hover="video"] .ex-front,
.exp.is-focus .ex-lidwrap,
.exp.is-focus .ex-front,
.exp.is-focus .ex-strings,
.exp.is-focus .ex-cd,
.exp.is-focus .ex-bench,
.exp.is-focus .ex-lyre,
.exp.is-focus .ex-lamp { animation: none; }
.ex-rig.is-hot .ex-lamp-lens  { opacity: 1; filter: brightness(1.7); }
.ex-rig.is-hot .ex-lamp-glow  { opacity: .32; }
.ex-rig.is-hot .ex-shaft      { filter: brightness(1.9); }

/* Rozsvietený reflektor. Samotný jas nestačí — kužeľ je priesvitný na
   štvrtinu a jasnejšia farba sa v tme aj tak stratí. Preto sa pri zapnutí
   dvíha aj krytie: z tlmenej štvrtiny na dve tretiny. To je ten rozdiel,
   ktorý naozaj vidno. */
.ex-rig.is-lit .ex-shaft { filter: brightness(9.3); }
.exp.is-settled .ex-rig.is-lit .ex-shaft { opacity: .95; }
.ex-rig.is-lit .ex-lamp-lens { opacity: 1; filter: brightness(6.3); }
.ex-rig.is-lit .ex-lamp-glow { opacity: 1; filter: brightness(6.3); }
.ex-lamp-lens, .ex-lamp-glow { transition: filter .5s var(--ease-io),
                                           opacity .5s var(--ease-io); }

/* Svetielka počkajú, kým je na čo ukazovať, a nabehnú pomaly. Prechod
   sedí na .exp.is-open, aby ho neprebilo neskoršie pravidlo pre .exp-hots. */
.exp:not(.is-open) .exp-hots { opacity: 0; }

/* Klaviatúra čaká skrytá, kým sa scéna neotvorí — rovnako ako nákres a roj.
   Bez toho stála na stránke hotová od prvej chvíle a keď sa zdvihla úvodná
   opona, na okamih ju bolo vidieť cez bránu skôr, než sa obrad rozbehol. */
.exp:not(.is-open) .exp-kbd { opacity: 0; }
.exp.is-open .exp-hots { opacity: 1; transition: opacity 1.4s var(--ease-io) 3.7s; }

/* Klaviatúra dosadne s roja. Je to animácia, nie prechod — inak by si
   liezla do cesty s tlmením pri prepínaní do režimu hrania. */
@keyframes exkbdin {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
}
.exp.is-assembling .exp-kbd,
.exp.is-reassembling .exp-kbd {
  animation: exkbdin 1.6s cubic-bezier(0.24, 0.4, 0.2, 1) 2.15s backwards;
}

/* Priamy odkaz na obsah alebo druhá návšteva v tej istej relácii: nástroj
   je hneď hotový, roj sa vôbec neukáže. Neplatí to pri vedomom prehratí
   skladania (návrat zo zvačšenej klaviatúry) — to si roj pýta samo.

   Blikajúcim hviezdam sa toto pravidlo musí vyhnúť. Stojí v súbore nižšie
   než ich blikanie, takže bez výnimky by ho prebilo a druhá návšteva by
   dostala nehybnú oblohu. */
.exp.is-instant:not(.is-reassembling) .ex-shard:not(.ex-shard--tw) { animation: none; }
.exp.is-instant .ex-scene,
.exp.is-instant .ex-shaft,
.exp.is-instant .exp-hots { transition: none; }

.exp-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.exp-art path, .exp-art line, .exp-art ellipse,
.exp-art rect, .exp-art circle { vector-effect: non-scaling-stroke; }

/* --- javisko: svetlo, plátno, odlesk na podlahe --- */
.ex-floor        { fill: url(#exfloor); opacity: .8; }
.ex-beam         { fill: url(#exbeam); opacity: .95; }
.ex-beam--wide   { opacity: .5; }
.ex-beam--core   { opacity: .75; }
.ex-lamp-glow    { fill: url(#exlamp); opacity: 0; }

/* Prach v kuželi. Zrnká sa pomaly vznášajú a nesvietia naraz — vďaka tomu
   lúč nevyzerá ako plochý trojuholník, ale ako svetlo v priestore.

   Vznášajú sa len v rozsvietenom reflektore. V tlmenom ich aj tak nevidno,
   ale sedemdesiat animovaných zrniek vnútri skupiny s dymovým filtrom núti
   prehliadač prekresľovať celý kužeľ v každom snímku — a to sa podpíše na
   plynulosti celej scény, nielen na kuželi. */
.ex-dust circle {
  fill: #F3E6C4;
  opacity: 0;
}
.ex-rig.is-lit .ex-dust circle {
  animation: exdust linear infinite;
  animation-duration: calc(9s + var(--i) * 0.42s);
  animation-delay: calc(var(--i) * -0.63s);
}
@keyframes exdust {
  0%   { opacity: 0;                    transform: translate(0, 0); }
  18%  { opacity: calc(var(--t) * .34); }
  70%  { opacity: calc(var(--t) * .22); }
  100% { opacity: 0;                    transform: translate(6px, -26px); }
}
.ex-lamp-wire    { fill: none; stroke: url(#exgold); stroke-width: .9; opacity: .4; }
.ex-lamp-hook    { fill: #141418; stroke: url(#exgold); stroke-width: .9; }
.ex-lamp-yoke    { fill: none; stroke: url(#exgold); stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.ex-lamp-bolt    { fill: #1A1A1E; stroke: url(#exgold); stroke-width: 1; }
.ex-lamp-can     { fill: url(#excase); stroke: url(#exgold); stroke-width: 1.1; stroke-linejoin: round; }
.ex-lamp-back    { fill: #0D0D10; stroke: url(#exgold); stroke-width: .9; }
.ex-lamp-rim     { fill: #0B0B0D; stroke: url(#exgold); stroke-width: 1.1; }
.ex-lamp-fin     { fill: none; stroke: url(#exgold); stroke-width: .7; opacity: .45; }
.ex-lamp-door    { fill: #101014; stroke: url(#exgold); stroke-width: .9; stroke-linejoin: round; opacity: .92; }
.ex-lamp-lens    { fill: #F3E6C4; opacity: .6; }

/* --- skriňa a nohy --- */
.ex-leg          { fill: url(#excase); stroke: url(#exgold); stroke-width: .9; stroke-linejoin: round; }
.ex-castor       { fill: #0B0B0D; stroke: url(#exgold); stroke-width: .8; }
.ex-rim-under    { fill: #070708; stroke: url(#exgold); stroke-width: 1; opacity: .55; }
.ex-case         { fill: url(#excase); stroke: url(#exgold); stroke-width: 1.5; stroke-linejoin: round; }
.ex-board        { fill: url(#exboard); stroke: none; }
.ex-rim-inner    { fill: none; stroke: url(#exgold); stroke-width: 1; opacity: .5; }

/* --- liatinový rám, mostíky, tlmiče --- */
.ex-pinblock     { fill: rgba(198, 163, 83, .07); stroke: url(#exgold); stroke-width: .8; opacity: .8; }
.ex-strut        { fill: rgba(198, 163, 83, .10); stroke: url(#exgold); stroke-width: .7; opacity: .75; }
.ex-bridge       { fill: rgba(198, 163, 83, .14); stroke: url(#exgold); stroke-width: .7; opacity: .8; }
.ex-dampers line { stroke: url(#exgold); stroke-width: 1.2; opacity: .3; stroke-linecap: round; }

/* --- struny: basy vedú ponad tenor --- */
.ex-str          { --o: .42; stroke: url(#exgold); stroke-width: .55; opacity: var(--o); }
.ex-str--bass    { --o: .62; stroke: #C09248; stroke-width: 1.15; }
.exp-art .pstr.is-ringing { stroke: #E7D3A1; opacity: 1; stroke-width: 1.6; }

/* --- veko --- */
.ex-lid          { fill: url(#exlid); stroke: url(#exgold); stroke-width: 1.3; stroke-linejoin: round; }
.ex-lid-edge     { fill: #1A1A1E; stroke: url(#exgold); stroke-width: .9; }
.ex-lid-shine    { fill: url(#exshine); stroke: none; }
.ex-prop         { fill: none; stroke: url(#exgold); stroke-width: 1.6; stroke-linecap: round; opacity: .75; }

/* --- disk na skrini, lýra s pedálmi ---
   Disk je kreslený ako skutočné CD: od kraja dovnútra zapísaná plocha,
   priehľadný prstenec, upínací krúžok a dierka. Každý prstenec má vlastný
   odtieň, inak by z toho bol len jeden plochý krúžok. */
.ex-cd ellipse   { stroke: url(#exgold); stroke-width: .8; }
.ex-cd-disc      { fill: rgba(231, 211, 161, .17); }
.ex-cd-band      { fill: rgba(231, 211, 161, .10); stroke-width: .5; opacity: .8; }
.ex-cd-sheen     { fill: rgba(255, 246, 214, .16); stroke: none; }

/* Disk sa točí. Vidno to len na odraze svetla — disk je okrúhly, všetko
   ostatné na ňom vyzerá pri každom natočení rovnako.

   Otáčať sa musí v rovine disku, nie obrazovky. Disk leží na klavíri a
   v perspektíve je z neho elipsa; keby sa odraz otáčal po obrazovke, hneď
   by z disku vyšiel von. Preto sa elipsa najprv roztiahne na kruh (--k je
   pomer jej polosí), až tam sa odraz otočí a nakoniec sa všetko stlačí
   späť. Stred otáčania je stred disku (--cx, --cy), písaný rovno v
   jednotkách nákresu — preto `transform-origin: 0 0` a posun v samotnom
   predpise.

   Kým stojí obal albumu, disk nie je na čo pozerať a točenie stojí s ním. */
.ex-cd-spin {
  transform-origin: 0 0;
  animation: excdspin 4.5s linear infinite;
}
@keyframes excdspin {
  from { transform: translate(var(--cx), var(--cy))
                    scaleY(calc(1 / var(--k))) rotate(0turn) scaleY(var(--k))
                    translate(calc(-1 * var(--cx)), calc(-1 * var(--cy))); }
  to   { transform: translate(var(--cx), var(--cy))
                    scaleY(calc(1 / var(--k))) rotate(1turn) scaleY(var(--k))
                    translate(calc(-1 * var(--cx)), calc(-1 * var(--cy))); }
}
.exp-piano.is-cd .ex-cd-spin,
.exp-piano.is-cd-out .ex-cd-spin { animation: none; }
.ex-cd-clear     { fill: rgba(10, 10, 11, .55); stroke-width: .6; opacity: .9; }
.ex-cd-clamp     { fill: rgba(231, 211, 161, .09); stroke-width: .5; opacity: .7; }
.ex-cd-hole      { fill: #0A0A0B; }

/* Prejdenie myšou disk len nadskočí — nič viac. Obal albumu sa z neho
   postaví až po kliknutí; keby sa staval už pri prejdení, cestou myšou
   cez scénu by vyskakoval bez vyzvania. */
.ex-cd           { transform-box: fill-box; transform-origin: 50% 50%;
                   transition: opacity .45s var(--ease-io); }
/* Pod zatvoreným vekom disk nie je vidieť — leží vnútri skrine. */
.exp-piano.is-lidshut .ex-cd { opacity: 0; pointer-events: none; }

/* Terč pre prst okolo disku. Na myši ho netreba — kurzor trafí aj malý
   disk — preto je vypnutý a nič neberie strunám. Na dotyku sa zapne
   a zväčší: prst potrebuje aspoň štyridsať pixelov a bez toho sa trafil
   zakaždým do rezonančnej dosky, teda do strún. O ten istý kus sa tým
   plocha strún zmenší; je to jedna a tá istá plocha. */
.ex-cdhit { fill: transparent; pointer-events: none;
            transform-box: fill-box; transform-origin: 50% 50%; }
.ex-cd.is-hop    { animation: excdhop .62s var(--ease-io); }
@keyframes excdhop {
  0%   { transform: none; }
  34%  { transform: translateY(-7px) scale(1.05); }
  64%  { transform: translateY(-2px) scale(1.01); }
  100% { transform: none; }
}

/* --- klátiky, lišta pred klávesmi a menovka --- */
.ex-cheek        { fill: url(#exlid); stroke: url(#exgold); stroke-width: .9; stroke-linejoin: round; opacity: .95; }
.ex-cheek-face   { fill: #0C0C0E; stroke: url(#exgold); stroke-width: 1; stroke-linejoin: round; }
.ex-cheek        { fill: url(#exlid); stroke: url(#exgold); stroke-width: .9; stroke-linejoin: round; }
.ex-cheek-face   { fill: #0C0C0E; stroke: url(#exgold); stroke-width: .9; stroke-linejoin: round; }
.ex-slip         { fill: #0E0E11; stroke: url(#exgold); stroke-width: 1; stroke-linejoin: round; }
/* Klapka má byť tenká lišta, nie doska: obrys je slabší a jemnejší. */
.ex-nameboard    { fill: url(#exlid); stroke: url(#exgold); stroke-width: .7;
                   stroke-opacity: .5; stroke-linejoin: round; }
.ex-fall-hinge   { fill: none; stroke: url(#exgold); stroke-width: .8; opacity: .22; }
/* Rozostupy písmen rieši textLength — vlastné letter-spacing by sa s ním bilo. */
.ex-name         { fill: url(#exgold); opacity: .88; font-family: var(--display);
                   font-weight: 500; letter-spacing: normal; }

/* Filmový pás na klapke: pri odkaze Video vystrieda menovku a rozbehne sa,
   ako keď sa premieta. Perforácia aj políčka majú spoločnú periódu, takže
   posun o jedno políčko sa nikde neroztrhne. */
.ex-film       { opacity: 0; transition: opacity .5s var(--ease); }
/* Priblíženie pred videom hýbe iba pásom, nie celým nástrojom. Vedie ho
   js/experience.js cez atribút transform, snímok po snímku — cez CSS sa pri
   SVG ľahko pomýli, okolo ktorého bodu sa mierka otáča. */
/* Podklad pásu je tmavší než klapka — film je matný, nie lesklý. */
.ex-film-body  { fill: rgba(5, 4, 4, .96); }
/* Perforácia svieti, ako keď cez dierky presvitá premietacie svetlo. */
.ex-film-hole  { fill: #E7D3A1; opacity: .62; }
/* Obrazové okienko je len o kúsok svetlejšie — nie je čo premietať. */
.ex-film-img   { fill: rgba(231, 211, 161, .07); }
.ex-film-gap   { stroke: rgba(0, 0, 0, .85); stroke-width: 1.4; }
.ex-film-edge  { stroke: url(#exgold); stroke-width: .7; opacity: .3; fill: none; }
/* Nápis beží po páse. Vlastná perióda (pol pásu), ale rovnaká rýchlosť ako
   políčka — do jedného políčka by sa nezmestil. */
.ex-film-text  { fill: #E7D3A1; opacity: .7; font-family: var(--display);
                 font-weight: 500; letter-spacing: normal; }
@keyframes exfilm { to { transform: translateX(calc(var(--fw) * -1)); } }
@keyframes exfilmcrawl { to { transform: translateX(calc(var(--tw) * -1)); } }

/* --- stolička --- */
/* Stolička je vidieť — má nohy, rám pri zemi aj prešité sedadlo, a obrys
   drží zlato o čosi silnejšie než zvyšok nábytku. */
.ex-bench-seat   { fill: url(#excase); stroke: url(#exgold); stroke-width: 1.2;
                   stroke-linejoin: round; }
.ex-bench-side   { fill: #0A090B; stroke: url(#exgold); stroke-width: 1; }
.ex-bench-edge   { fill: none; stroke: url(#exgold); stroke-width: 1.6; opacity: .9; }
/* --- lýra s pedálmi --- */
.ex-lyre-rod     { fill: url(#excase); stroke: url(#exgold); stroke-width: .8; }
.ex-lyre-bar     { fill: #101013; stroke: url(#exgold); stroke-width: .8; }
.ex-pedal        { fill: rgba(231, 211, 161, .22); stroke: url(#exgold); stroke-width: .9;
                   stroke-linejoin: round; }

.ex-bench-leg    { fill: #0B0A0C; stroke: url(#exgold); stroke-width: 1;
                   stroke-linejoin: round; }
.ex-bench-post   { fill: #0A090B; stroke: url(#exgold); stroke-width: 1;
                   stroke-linejoin: round; }
.ex-bench-thread { fill: none; stroke: url(#exgold); stroke-width: .8; opacity: .5; }

/* ==========================================================================
   4b. NÁSTROJ ODPOVEDÁ
   Kliknutie neotvorí obsah hneď — najprv sa pohne tá časť krídla, ktorej
   ste sa dotkli. Až potom sa scéna prehĺbi do obsahu.
   ========================================================================== */
.ex-bench, .ex-cd, .ex-lidwrap,
.ex-beam, .ex-lamp-lens, .ex-lamp-glow, .ex-dust,
.ex-nameboard, .ex-name {
  transition: transform .6s var(--ease), filter .6s var(--ease), opacity .6s var(--ease);
}

/* Stolička sa najprv poriadne roztrasie — celá, ako jeden kus, veď ešte
   drží pokope — a až potom sa rozsype. Každý diel si nesie vlastný smer
   (--px, --py, --pr); bez toho by odletela ako doska. */
.ex-bench-piece { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes exbench {
  0%  { transform: none;                                     animation-timing-function: linear; }
  3%  { transform: translate(-6px, 2px) rotate(-1.7deg);     animation-timing-function: linear; }
  6%  { transform: translate(7px, -1px) rotate(1.9deg);      animation-timing-function: linear; }
  9%  { transform: translate(-8px, 2px) rotate(-2.1deg);     animation-timing-function: linear; }
  12% { transform: translate(8px, -2px) rotate(2.1deg);      animation-timing-function: linear; }
  15% { transform: translate(-7px, 2px) rotate(-1.8deg);     animation-timing-function: linear; }
  18% { transform: translate(6px, -1px) rotate(1.6deg);      animation-timing-function: linear; }
  21% { transform: translate(-5px, 2px) rotate(-1.3deg);     animation-timing-function: linear; }
  24% { transform: translate(4px, -1px) rotate(1deg);        animation-timing-function: linear; }
  27% { transform: translate(-3px, 1px) rotate(-.7deg);      animation-timing-function: linear; }
  30% { transform: none;                                     animation-timing-function: cubic-bezier(.3, 0, .28, 1); }
  62% { transform: translate(var(--px), var(--py)) rotate(var(--pr));
        animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
  100% { transform: none; }
}
@keyframes excd    { 45% { transform: translateY(-10px); } 100% { transform: none; } }
@keyframes exlid   { 45% { transform: translateY(-11px); } 100% { transform: none; } }
@keyframes exglow  { 0%, 100% { filter: none; } 40% { filter: brightness(2.6); } }
@keyframes exbuzz {
  0%, 100% { opacity: var(--o); transform: none; }
  28%      { opacity: 1;        transform: translateX(.9px); }
  58%      { opacity: .92;      transform: translateX(-.9px); }
}

/* Beží na vlastnej triede, nie na data-act — ten scéna zloží po 1,4 s
   a trasenie aj rozpad by sa uprostred zaseklo. */
.exp-piano.is-bench .ex-bench-piece { animation: exbench 3.1s; }
.exp-piano[data-act="disc"]  .ex-strings .pstr {
  animation: exbuzz .95s var(--ease-io) both;
  animation-delay: calc(var(--i) * 13ms);
}
.exp-piano[data-act="shop"]  .ex-cd      { animation: excd 1.1s var(--ease); }
.exp-piano[data-act="show"]  .ex-lidwrap { animation: exlid 1.2s var(--ease); }
.exp-piano[data-act="tour"]  .ex-beam,
.exp-piano[data-act="tour"]  .ex-lamp-lens { animation: exglow 1.3s var(--ease-io); }
.exp-piano[data-act="tour"]  .ex-lamp-glow { animation: exlampon 1.3s var(--ease-io); }
.exp-piano[data-act="tour"]  .ex-dust      { animation: exglow 1.3s var(--ease-io); }
@keyframes exlampon { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
.exp-piano[data-act="music"] .ex-nameboard,
.exp-piano[data-act="music"] .ex-name { animation: exglow 1.2s var(--ease-io); }

/* Na myši stačí prejsť ponad svetielko a diel sa jemne ohlási.
   Stav nastavuje js/experience.js, nie CSS :has() — takto to funguje
   aj v prehliadačoch, ktoré :has() ešte nevedia. */
.exp-piano[data-hover="story"] .ex-bench   { transform: translate(-7px, 2px); }
.exp-piano[data-hover="disc"] .ex-strings .pstr {
  animation: exbuzz 1.05s var(--ease-io) infinite;
  animation-delay: calc(var(--i) * 15ms);
}
.exp-piano[data-hover="shop"]  .ex-cd      { transform: translateY(-5px); }
.exp-piano[data-hover="show"]  .ex-lidwrap { transform: translateY(-5px); }
.exp-piano[data-hover="video"] .ex-name { opacity: 0; }
/* Keď sa pás zdvihne z klapky a odletí do stredu, menovka sa vráti — inak
   by po ňom ostala prázdna tmavá doska. */
.exp.is-cinema .exp-piano[data-hover="video"] .ex-name { opacity: .88; }
.exp-piano[data-hover="video"] .ex-film { opacity: 1; }
.exp-piano[data-hover="video"] .ex-film-run { animation: exfilm 1.9s linear infinite; }
.exp-piano[data-hover="video"] .ex-film-crawl {
  animation: exfilmcrawl var(--td) linear infinite;
}

/* Obchod: obal albumu leží v strede na pätke priesvitných vzpier — tých
   zvislých rozpier liatinového rámu nad strunami — postaví sa, zdvihne sa aj
   s nimi, chvíľu tak ostane a zase si ľahne. Dvíhajú sa o rovnaký kus
   v jednotkách nákresu, inak by sa cestou rozišli. */
.ex-cd-art {
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(var(--flat));
  opacity: 0;
}
/* Postavenie a sklopenie sú dve samostatné animácie, nie jedna dlhá.
   Kým bola jedna, státie hore bolo pevným zlomkom jej dĺžky — a keď má obal
   stáť, kým hrá hudba, natiahlo by sa s ním aj samotné dvíhanie a sklápanie.
   Takto sa dvíha a sklápa vždy rovnako rýchlo a hore stojí, ako dlho treba. */
@keyframes excdup {
  0%   { transform: translateY(0) scaleY(var(--flat)); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(-26px) scaleY(1); opacity: 1; }
}
@keyframes excddown {
  0%   { transform: translateY(-26px) scaleY(1); opacity: 1; }
  100% { transform: translateY(0) scaleY(var(--flat)); opacity: 0; }
}
@keyframes exstandsup   { from { transform: translateY(0); }     to { transform: translateY(-26px); } }
@keyframes exstandsdown { from { transform: translateY(-26px); } to { transform: translateY(0); } }

/* Beží na vlastnej triede, nie na data-hover — inak by obal pri odchode myši
   zmizol uprostred pohybu. Triedy skladá js/experience.js. */
.exp-piano.is-cd .ex-cd-art     { animation: excdup .95s var(--ease-io) forwards; }
.exp-piano.is-cd .ex-struts     { animation: exstandsup .95s var(--ease-io) forwards; }
.exp-piano.is-cd-out .ex-cd-art { animation: excddown .85s var(--ease-io) forwards; }
.exp-piano.is-cd-out .ex-struts { animation: exstandsdown .85s var(--ease-io) forwards; }
.exp-piano.is-cd .ex-cd-disc,
.exp-piano.is-cd .ex-cd-hole,
.exp-piano.is-cd-out .ex-cd-disc,
.exp-piano.is-cd-out .ex-cd-hole { opacity: 0; transition: opacity .4s var(--ease); }

/* Reflektor sa naozaj rozsvieti — nielen zosvetlí. */
/* Prejdenie myšou kužeľ len prižiari — rozsvietený reflektor nesmie
   zhasnúť len preto, že myš odišla inam. */
.exp-piano[data-hover="tour"]  .ex-beam      { opacity: 1; }
.exp-piano[data-hover="tour"]  .ex-lamp-lens { opacity: 1; filter: brightness(1.5); }
.exp-piano[data-hover="tour"]  .ex-lamp-glow { opacity: .95; }
.exp-piano[data-hover="tour"]  .ex-dust      { filter: brightness(2.4); }

.exp-piano[data-hover="music"] .ex-name        { filter: brightness(1.6); }

/* ---------- 5. Hotspoty ---------- */
/* Svetielka stoja napravo od klavíra a tvoria Veľký voz. Nie sú vnútri
   .exp-piano, takže ich priblíženie nástroja neposúva. Bodka sedí presne
   na svojej hviezde — preto sa tlačidlo kotví pravou hranou, nie stredom:
   popis rastie doľava, do scény, a nie za okraj obrazovky. */
/* Vrstva svetielok leží cez celý rám, aj cez klaviatúru. Klikať sa v nej
   smie len na samotné tlačidlá — inak by neviditeľný popis (opacity: 0 stále
   chytá myš) prekryl klávesy a klavír by sa nedal hrať. */
.exp-hots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* Keď sa Veľký voz nezmestí vedľa krídla, nie je. Meria to js/experience.js:
   podmienka závisí od šírky aj výšky okna naraz a mediálnym dopytom sa
   napísať nedá. */
.exp.is-crowded .exp-hots { visibility: hidden; pointer-events: none; }
/* Myš chytá len bodka a jej neviditeľná plocha okolo. Celé tlačidlo je aj
   s popisom široké vyše dvesto bodov a leží nad klaviatúrou — keby chytalo
   ono, klávesy sa nedajú stlačiť. */
.exp-hot { pointer-events: none; }
.exp-hot::before,
.exp-hot__dot { pointer-events: auto; }

/* Rámik súhvezdia. Má pevný pomer strán (výška ku šírke 1,882 — taký, aký
   má Veľký voz na oblohe), takže sa asterizmus pri žiadnej veľkosti okna
   nerozťahuje. Polohy hviezd sú percentá tohto rámika, nie obrazovky. */
.exp-cons {
  /* Súhvezdie stojí presne v strede voľného pruhu medzi klavírom a pravým
     okrajom. Šírku klavíra si dopočítame tým istým vzorcom ako .exp-piano
     (--vw/--vh nesie rám), takže sa drží stredu pruhu pri každom okne. */
  --cons-h: clamp(230px, 48svh, 560px);
  --cons-w: calc(var(--cons-h) / 1.882);
  --gap-w: calc((100% - var(--piano-w)) / 2);
  position: absolute;
  top: 50%;
  /* Od pravého okraja stačí malý odstup — popisy hviezd rastú doľava, do
     scény, takže sa vpravo nemá čo zmestiť. Kým tu stál celý okrajový pruh
     (--gut, na širokej obrazovke sedemdesiat bodov), tlačil súhvezdie
     doľava — rovno do krídla. */
  right: max(1.25rem, calc((var(--gap-w) - var(--cons-w)) / 2));
  transform: translateY(-50%);
  height: var(--cons-h);
  width: var(--cons-w);
  overflow: visible;                   /* popisky smú z rámika von */
}

/* Spojnice medzi hviezdami — bez nich je to sedem bodiek, nie asterizmus. */
.exp-stars {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.exp-stars line {
  stroke: rgba(231, 211, 161, 0.28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.exp-hot {
  position: absolute;
  top: var(--y);
  right: calc(100% - var(--x));
  margin-right: -6px;                            /* stred bodky na hviezdu */
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 0.7rem;
  flex-direction: row-reverse;
  padding: 0;                                    /* dotykovú plochu robí ::before */
  color: var(--ivory);
  -webkit-tap-highlight-color: transparent;
}
.exp-hot .exp-hot__tag { text-align: right; }
/* Veľká neviditeľná dotyková plocha — nie je nutné trafiť bodku. */
.exp-hot::before {
  content: ""; position: absolute; top: 50%; right: -26px;
  width: 64px; height: 64px; margin-top: -32px;
  border-radius: 50%;
}

.exp-hot__dot {
  position: relative; display: block; flex: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 0 1px rgba(231, 211, 161, 0.5), 0 0 16px 3px rgba(198, 163, 83, 0.5);
  transition: transform 0.4s var(--ease);
}
.exp-hot__dot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(231, 211, 161, 0.55);
  animation: exping 3.2s var(--ease-io) infinite;
}
@keyframes exping {
  0%   { transform: scale(0.55); opacity: 0; }
  35%  { opacity: 0.85; }
  100% { transform: scale(1.9); opacity: 0; }
}
.exp-hot:nth-child(2) .exp-hot__dot::after { animation-delay: 0.4s; }
.exp-hot:nth-child(3) .exp-hot__dot::after { animation-delay: 0.8s; }
.exp-hot:nth-child(4) .exp-hot__dot::after { animation-delay: 1.2s; }
.exp-hot:nth-child(5) .exp-hot__dot::after { animation-delay: 1.6s; }
.exp-hot:nth-child(6) .exp-hot__dot::after { animation-delay: 2.0s; }
.exp-hot:nth-child(7) .exp-hot__dot::after { animation-delay: 2.4s; }

.exp-hot__tag {
  display: flex; flex-direction: column; gap: 3px;
  pointer-events: none;
  white-space: nowrap;
  padding: 5px 10px;
  /* Nápis stojí na pestrej kresbe nástroja — bez podkladu by sa strácal. */
  background: rgba(8, 8, 9, 0.68);
  border-radius: 2px;
  opacity: 0; transform: translateY(3px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.exp-hot__name {
  font-family: var(--display); font-size: 0.88rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-2);
}
.exp-hot__sub {
  font-size: 0.8rem; letter-spacing: 0.03em; color: #fff;
}

@media (hover: hover) {
  .exp-hot:hover .exp-hot__dot,
  .exp-hot:focus-visible .exp-hot__dot { transform: scale(1.25); }
  .exp-hot:hover .exp-hot__tag,
  .exp-hot:focus-visible .exp-hot__tag { opacity: 1; transform: none; }
}
/* Na dotyku niet hoveru. Názov visí pod bodkou, na stred — tak sa
   popisky navzájom nebijú ani nevytŕčajú za okraj obrazovky. */
@keyframes excdbreath {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.07); }
}

@media (hover: none) {
  .exp-hot__tag { opacity: 1; transform: none; }
  .exp-hot__sub  { display: none; }
  .exp-hot__name { font-size: 0.66rem; letter-spacing: 0.08em; }

  /* Na dotyku niet prejdenia myšou, ktoré by disk nadskočilo a prezradilo,
     že sa dá ťuknúť. Preto pomaly dýcha — sám od seba, potichu. Kým je
     obal hore alebo veko zatvorené, dýchanie stojí; animácia by prebila
     krytie, ktoré ho má v tých chvíľach schovať. */
  .ex-cd { animation: excdbreath 2.9s var(--ease-io) infinite; }
  .exp-piano.is-lidshut .ex-cd,
  .exp-piano.is-cd .ex-cd,
  .exp-piano.is-cd-out .ex-cd { animation: none; }

  .ex-cdhit { pointer-events: all; cursor: pointer; touch-action: manipulation;
              transform: scale(1.55); }
  .exp-piano.is-lidshut .ex-cdhit { pointer-events: none; }
  /* Nápis pri reflektore stojí sám, nemá sa s čím biť — druhý riadok si
     preto ponechá aj na dotyku. Prstom sa treba trafiť, tak sú obidva
     nápisy väčšie; pomer medzi nimi ostáva. */
  .ex-riglabel   .exp-hot__sub,
  .ex-benchlabel .exp-hot__sub  { display: block; }
  .ex-riglabel   .exp-hot__name,
  .ex-cdlabel    .exp-hot__name,
  .ex-benchlabel .exp-hot__name { letter-spacing: 0.15em; }
  .ex-riglabel, .ex-cdlabel, .ex-benchlabel {
    --lbl-name: 1.066rem;              /* 0,969 rem väčšie o 10 % */
    --lbl-sub:  0.972rem;              /* 0,884 rem väčšie o 10 % */
    padding: 6px 11px;
  }
  /* Na telefóne je scéna malá a nápis pri stoličke v nej nemá kam ísť:
     vpravo mu koniec textu odrezal okraj obrazovky (nákres je širší než
     displej), na mieste zas prikryl celú stoličku aj s nohami. Ide preto
     pod nákres, do voľného pásu nad tlačidlo so zľavou — na stred
     obrazovky, ktorý je zhodou okolností aj stredom nákresu.

     Nižšie sa už nedá: scéna má orezaný spodok (.exp-frame), takže nápis
     musí byť plochý. Obidva riadky preto idú vedľa seba do jedného —
     na dve riadky by mu spodok odkrojilo a podnadpis by zmizol. */
  .ex-benchlabel {
    left: 50%;
    max-width: 92vw;
    flex-direction: row; align-items: baseline; gap: 9px;
  }
}
.exp-hot:focus-visible { outline: none; }
.exp-hot:focus-visible .exp-hot__dot {
  box-shadow: 0 0 0 2px var(--gold-2), 0 0 18px 4px rgba(198, 163, 83, 0.6);
}

/* ---------- 5b. Nôty spod kurzora ----------
   Vyletia, keď myš príde na nápis, za ktorým je akcia. Iba transform
   a opacity, takže to nič nestojí — a po dolete sa samy odstránia. */
.exp-note {
  position: absolute; left: 50%; top: 50%;
  z-index: 3;
  font-size: 0.85rem; line-height: 1;
  color: var(--gold-2);
  text-shadow: 0 0 10px rgba(198, 163, 83, 0.55);
  pointer-events: none;
  opacity: 0;
  animation-name: exnote;
  animation-timing-function: var(--ease);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
.exp-note--fly {
  font-size: 1rem;
  animation-name: exfly;
  animation-timing-function: cubic-bezier(0.25, 0.6, 0.3, 1);
}
@keyframes exfly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(0deg); }
  16%  { opacity: 0.95; }
  55%  { opacity: 0.7; }
  100% { opacity: 0;
         transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                    scale(var(--sc)) rotate(var(--rot)); }
}

@keyframes exnote {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  22%  { opacity: 1; }
  70%  { opacity: 0.85; }
  100% { opacity: 0;
         transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                    scale(var(--sc)) rotate(var(--rot)); }
}

/* ---------- 6. Klaviatúra v perspektíve ---------- */
.exp-kbd {
  position: absolute;
  left: var(--kb-l); width: var(--kb-w);
  top: var(--kb-t); height: var(--kb-h);
  margin: 0;
  transform-origin: 50% 100%;
  transform: perspective(var(--kp, 760px)) rotateX(40deg);
}
.exp-kbd .piano__keys {
  width: 100%; height: 100%; margin: 0;
  overflow: visible;
}
.exp-kbd .piano__kb {
  min-width: 0; width: 100%; height: 100%;
  background: #0B0B0D;
  border: 1px solid rgba(198, 163, 83, 0.45);
  border-bottom: 0;
  box-shadow: 0 -18px 46px -22px rgba(0, 0, 0, 0.95);
}
.exp-kbd .key--w { border-radius: 0; }
/* Názvy skladieb na klávesoch: väčšie a v plnej sýtosti, nech sa dajú
   prečítať aj cez perspektívu. */
.exp-kbd .key__song {
  margin-bottom: 15px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #14110A;
  max-height: 90%;
}
.exp-kbd .key--w:hover .key__song,
.exp-kbd .key--w.is-down .key__song,
.exp-kbd .key--w.is-playing .key__song { color: #000; }
.exp-kbd .piano__blacks { inset: 0 0 40% 0; }

.exp-kbd .piano__glow { display: none; }
.exp-kbd .key--w.is-down,
.exp-kbd .key--w.is-playing { box-shadow: 0 0 30px 7px rgba(231, 211, 161, 0.45); }
.exp-kbd .key--b.is-down { box-shadow: 0 0 22px 5px rgba(198, 163, 83, 0.55); }

/* ---------- 6b. Režim hrania ----------
   Klik na klaviatúru odloží scénu a nechá na stránke len klávesy. */
/* Klaviatúra sa do svojej novej polohy nepresúva, ale prelína: v starej
   sa vytratí, preskočí a v novej sa zase rozsvieti. Skok tak nie je vidieť
   a prechod pôsobí ako jeden pohyb, nie ako dva obrazy za sebou. */
.exp-kbd { transition: opacity .34s var(--ease); }
.exp-kbd.is-morphing { opacity: 0; }

.exp.is-focus .exp-art,
.exp.is-focus .exp-hots { opacity: 0; visibility: hidden; }
.exp-art, .exp-hots { transition: opacity .5s var(--ease), visibility .5s; }

/* Kým sa klaviatúra prelína do novej polohy, vytráca sa s ňou aj nákres —
   rovnako dlho a rovnakou krivkou. Klaviatúra do kresby nepatrí, len na
   nej leží, takže keby zhasla sama, ostala by po nej na krídle diera. */
.exp.is-morphing .exp-art,
.exp.is-morphing .exp-hots {
  opacity: 0; visibility: hidden;
  transition: opacity .34s var(--ease), visibility .34s;
}

.exp.is-focus .exp-frame { overflow: visible; }
.exp.is-focus .exp-stage__haze { opacity: .45; }
/* Kým má rám vlastný transform, ukotvila by sa naň aj klaviatúra
   s position:fixed a nedosiahla by na celú šírku stránky. */
.exp.is-focus .exp-piano { transform: none; will-change: auto; }

.exp.is-focus .exp-kbd {
  position: fixed;
  left: 0; right: 0; width: 100%;
  top: auto; bottom: clamp(5rem, 12vh, 8rem);
  z-index: 60;
}
.exp.is-focus .exp-kbd .piano__kb { border-left: 0; border-right: 0; }
.exp.is-focus .exp-kbd .key__song { font-size: 0.95rem; margin-bottom: 24px; }
.exp.is-focus .exp-hud__hint { opacity: 0; }

/* Pruh pod rozbalenou klaviatúrou: odchod späť a prepínač skladby/hranie. */
.exp-focusbar {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  z-index: 61;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  width: max-content; max-width: calc(100% - 2 * var(--gut));
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.exp.is-focus .exp-focusbar { opacity: 1; visibility: visible; }

.exp-leave {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--line);
  background: rgba(10, 10, 11, 0.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.exp-leave svg { width: 15px; height: 15px; flex: none; }
.exp-leave:hover { color: var(--gold-2); border-color: var(--gold); }

/* Kým sa hrá na klavíri, prepínač ostáva rozsvietený — je to stav, nie odkaz. */
.exp-mode.is-on { color: var(--gold-2); border-color: var(--gold); }

/* ---------- 7. HUD ---------- */
.exp-hud {
  position: relative; z-index: 4;
  flex: none;
  /* Malé odsadenie zdola: spodok scény je ukotvený, takže menšia medzera
     tu posunie tlačidlo aj nápovedu nižšie — ďalej od stoličky. */
  padding: 0 var(--gut) clamp(0.2rem, 0.7vw, 0.45rem);
  text-align: center;
}
.exp-hud__now {
  min-height: 1.5em; margin: 0;
  font-family: var(--display); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.exp-hud__now.is-on { opacity: 1; transform: none; }
.exp-hud__hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  transition: opacity 0.6s var(--ease);
}
.exp-hud__now.is-on + .exp-hud__hint { opacity: 0; }

.exp-wave {
  display: block; width: min(560px, 100%); height: 46px;
  margin: 0.5rem auto 0;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.exp-wave.is-live { opacity: 0.85; }

.exp-tools {
  position: absolute; right: var(--gut); bottom: clamp(0.9rem, 2.4vw, 1.6rem);
  z-index: 6;
  display: flex; align-items: center; gap: 0.6rem;
}
.exp-tool {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.62rem 1rem;
  border: 1px solid var(--line);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  background: rgba(10, 10, 11, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.exp-tool svg { width: 14px; height: 14px; flex: none; }
.exp-tool:hover { color: var(--ivory); border-color: rgba(240, 235, 225, 0.34); }
.exp-tool[aria-pressed="true"] { color: var(--gold-2); border-color: var(--gold); }
.exp-tool--out { color: var(--gold-2); border-color: rgba(198, 163, 83, 0.5); }
.exp-tool--out:hover { background: var(--gold); color: #17130A; border-color: var(--gold); }

/* ---------- 8. Vrstva s obsahom ---------- */
.exp-sheet {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: rgba(8, 8, 9, 0.86);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
}
.exp-sheet[data-open="true"] { opacity: 1; visibility: visible; }

.exp-sheet__bar {
  flex: none;
  padding: calc(var(--nav-h) + 0.5rem) var(--gut) 0.6rem;
}
.exp-back {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1.4rem 0.85rem 1.1rem;
  border: 1px solid var(--line);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ivory);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.exp-back svg { width: 15px; height: 15px; }
.exp-back:hover { color: var(--gold-2); border-color: var(--gold); }

/* Kým je v hlavičke prepínač jazykov (mobil a tablet), visí pod ňou —
   tlačidlo Späť mu preto uhne nižšie. */
@media (max-width: 1159px) {
  .exp-sheet__bar { padding-top: calc(var(--nav-h) + 3.4rem); }
}

.exp-sheet__scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: clamp(1rem, 3vw, 2rem) var(--gut) clamp(3rem, 8vw, 6rem);
}

.exp-panel {
  max-width: 1080px; margin-inline: auto;
  opacity: 0; transform: translateY(16px);
}
.exp-panel[hidden] { display: none; }
.exp-sheet[data-open="true"] .exp-panel { animation: expin 0.65s var(--ease) forwards; }
@keyframes expin { to { opacity: 1; transform: none; } }

/* Novecento je v tenkých rezoch pri menších veľkostiach ťažko čitateľné,
   preto majú nadpisy v zážitku pevnejší rez a texty vyšší kontrast. */
.exp-panel__head { max-width: 62ch; }
.exp-panel__head .h2 { font-weight: 400; letter-spacing: 0.015em; }
.exp-panel__head .eyebrow { color: var(--gold-2); font-weight: 600; }
.exp-panel__head .lead { color: #fff; font-size: clamp(1.14rem, 1.55vw, 1.42rem); }
.exp-panel__body { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.exp-panel__note {
  margin-top: 1rem;
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.exp-panel__note[hidden] { display: none; }

/* ---------- 9. Albumy ---------- */
.albums--exp {
  display: grid; gap: clamp(1rem, 2.4vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* ---------- 11. Piano Show ---------- */
.exp-parts {
  display: flex; flex-wrap: wrap; gap: clamp(0.7rem, 2vw, 1.2rem);
  align-items: center;
}
.exp-part {
  position: relative;
  padding: clamp(0.9rem, 2.4vw, 1.3rem) clamp(1.1rem, 3vw, 1.9rem);
  border: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(0.95rem, 2.4vw, 1.5rem); font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(240, 235, 225, 0.22);
  opacity: 0.5;
  transition: color 0.7s var(--ease), border-color 0.7s var(--ease),
              opacity 0.7s var(--ease), box-shadow 0.7s var(--ease);
  transition-delay: calc(var(--i) * 0.16s);
}
.exp-parts.is-lit .exp-part {
  opacity: 1;
  color: var(--ivory);
  border-color: rgba(198, 163, 83, 0.45);
  box-shadow: inset 0 0 30px -10px rgba(198, 163, 83, 0.4);
}
.exp-parts.is-lit .exp-part:nth-child(odd) { color: var(--gold-2); }

/* ---------- 12. Časová os ---------- */
.exp-tl { position: relative; max-width: 860px; padding-left: 1.4rem; }
.exp-tl::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-deep) 12%, var(--gold-deep) 88%, transparent);
  opacity: 0.7;
}
.exp-tl__item {
  position: relative;
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 1.4rem;
  padding: 1.05rem 0;
}
.exp-tl__dot {
  position: absolute; left: -1.4rem; top: 1.5rem;
  width: 7px; height: 7px; margin-left: -3px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(10, 10, 11, 1), 0 0 14px 2px rgba(198, 163, 83, 0.5);
}
.exp-tl__year {
  font-family: var(--display); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.16em; color: var(--gold); padding-top: 0.28rem;
}
.exp-tl__body { display: flex; flex-direction: column; gap: 0.35rem; }
.exp-tl__head { font-family: var(--display); font-size: 1.22rem; font-weight: 500; letter-spacing: 0.035em; }
.exp-tl__text { font-size: 0.95rem; color: rgba(240, 235, 225, 0.86); }

/* ---------- 13. Koncerty ---------- */
.exp-map { position: relative; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.skmap { display: block; width: 100%; max-width: 760px; height: auto; margin-inline: auto; overflow: visible; }
.skmap__land {
  fill: rgba(198, 163, 83, 0.045);
  stroke: rgba(198, 163, 83, 0.42); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.skmap__pin { cursor: pointer; }
.skmap__hit  { fill: transparent; }
.skmap__halo { fill: url(#skglow); opacity: 0.35; transition: opacity 0.4s var(--ease), r 0.4s var(--ease); }
.skmap__dot  { fill: var(--gold-2); transition: fill 0.3s var(--ease); }
.skmap__label {
  fill: rgba(240, 235, 225, 0.62);
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  letter-spacing: 1.4px; text-anchor: middle;
  opacity: 0; transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.skmap__pin:hover .skmap__halo,
.skmap__pin:focus .skmap__halo,
.skmap__pin.is-on .skmap__halo { opacity: 1; }
.skmap__pin:hover .skmap__label,
.skmap__pin:focus .skmap__label,
.skmap__pin.is-on .skmap__label { opacity: 1; }
.skmap__pin:focus { outline: none; }
.skmap__pin:focus-visible .skmap__dot { fill: #fff; }
.exp-map__hint {
  margin: 0.4rem 0 0; text-align: center;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}

.exp-cities { max-width: 860px; }
.exp-city {
  display: grid; grid-template-columns: 5.4rem 1fr auto;
  align-items: center; gap: 1.2rem;
  padding: 1rem 0.6rem; border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.4s var(--ease);
}
.exp-city.is-on { background: rgba(198, 163, 83, 0.09); }
.exp-city__date { display: flex; align-items: baseline; gap: 0.4rem; }
.exp-city__day  { font-family: var(--display); font-size: 1.5rem; color: var(--gold-2); }
.exp-city__mon  { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--gold); }
.exp-city__yr   { font-size: 0.62rem; color: var(--muted-2); }
.exp-city__where { display: flex; flex-direction: column; }
.exp-city__name  { font-family: var(--display); font-size: 1.14rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.exp-city__venue { font-size: 0.9rem; color: rgba(255, 255, 255, 0.88); }
.exp-city__notify {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid rgba(198, 163, 83, 0.4); padding-bottom: 3px;
  white-space: nowrap;
}
.exp-city__notify:hover { color: var(--gold-2); }

/* ---------- 14. Video a obchod ---------- */
.exp-video { max-width: 1000px; }
.exp-shop { display: grid; gap: 0.7rem; max-width: 560px; }
.exp-shop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 62px; padding: 1rem 1.3rem;
  border: 1px solid var(--line);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.exp-shop__link:hover { color: var(--gold-2); border-color: var(--gold); }

/* ---------- 15. Výzva na konci ---------- */
.exp-cta {
  max-width: 1080px; margin: clamp(3rem, 8vw, 5rem) auto 0;
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
}
.exp-cta .h3 { flex: 1 1 18rem; }
.exp-cta .muted { flex: 1 1 16rem; margin: 0; font-size: 0.88rem; }

/* ==========================================================================
   16. MOBIL — samostatne premyslený, nie zmenšený desktop
   ========================================================================== */
/* ==========================================================================
   VIDEO NEOTVÁRA ĎALŠIU STRÁNKU
   Filmový pás na menovke sa priblíži a vyrastie z neho prehrávač. Kino leží
   nad scénou, nie v paneli s obsahom — nikam sa neodchádza, len sa priblíži
   to, čo už na nástroji beží.
   ========================================================================== */
.exp-cinema {
  position: absolute; inset: 0; z-index: 7;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 6, 8, 0);
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease-io), background .75s var(--ease-io),
              visibility 0s .75s;
}
.exp-cinema.is-on {
  opacity: 1; visibility: visible;
  background: rgba(6, 6, 8, .88);
  transition: opacity .45s var(--ease-io), background .75s var(--ease-io),
              visibility 0s;
}
.exp-cinema__box {
  width: min(100%, 58rem);
  /* Počiatok mierky presadí js/experience.js na stred filmového pásu, aby
     prehrávač vyrástol z toho istého miesta, kde pás beží. */
  transform-origin: 50% 50%;
  transform: scale(.55);
  opacity: 0;
  transition: transform .75s var(--ease-io), opacity .6s var(--ease-io);
  will-change: transform, opacity;
}
.exp-cinema.is-on .exp-cinema__box { transform: none; opacity: 1; }

/* Kým sa nástroj približuje, svetielka odídu — nezväčšujú sa s ním
   a inak by ostali visieť nad priblíženou klapkou. */
.exp.is-cinema .exp-hots {
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease-io);
}
.exp-cinema__cap {
  margin-top: .9rem; text-align: center;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.exp-cinema__close {
  position: absolute; top: clamp(.6rem, 2vw, 1.4rem); right: clamp(.6rem, 2vw, 1.4rem);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(10, 10, 11, .7);
  color: var(--gold-2); cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.exp-cinema__close:hover { border-color: var(--gold); color: var(--gold); }
.exp-cinema__close svg { width: 16px; height: 16px; }

/* ==========================================================================
   HRA O ZĽAVU
   Hrá sa na tej istej rozbalenej klaviatúre, aká sa objaví po kliknutí na
   klávesy — dve oktávy cez celú šírku. Rozdiel je len v tom, čo je na
   klávesoch napísané: nie názvy skladieb, ale mená tónov.
   ========================================================================== */
.exp.is-game .exp-kbd .key__song { opacity: 0; }
.exp.is-game .exp-kbd .key__name {
  opacity: 1;
  font-size: clamp(.93rem, 2.25vw, 1.29rem);
  letter-spacing: .12em;
  color: rgba(20, 18, 14, .55);
  bottom: 14px;
}
.exp.is-game .exp-kbd .key--b .key__name {
  color: rgba(231, 211, 161, .8);
  bottom: 8px;
  font-size: clamp(.75rem, 1.8vw, 1.02rem);
}
/* V hre kláves pod myšou nesvetlie. Hrá sa o kód a každý tón sa počíta,
   takže prechádzanie myšou nesmie vyzerať, že sa niečo deje — svetlejší
   kláves by z toho robil dojem stlačenia. Ozve sa až stlačením. */
.exp.is-game .exp-kbd .key--w:hover {
  background: linear-gradient(180deg, #FBF7EC 0%, #EDE5D2 78%, #D6CDB8 100%);
}
.exp.is-game .exp-kbd .key--b:hover {
  background: linear-gradient(180deg, #2A2A2E 0%, #141418 72%, #08080A 100%);
}

/* V hre sa neprepína režim — hrá sa o kód, nie o skladby. */
.exp.is-game .exp-mode { display: none; }

.exp.is-game .exp-kbd .key--w.is-bad { background: linear-gradient(#F3D9D0, #D8B4A6); }
.exp.is-game .exp-kbd .key--b.is-bad { background: linear-gradient(#6A3A2E, #3A1F17); }

/* Nápoveda: melódiu prehrá stránka a kláves sa pri svojom tóne rozsvieti.
   Zlatá, nie červená — červená v tejto hre znamená chybu. Svieti výrazne,
   aby ju bolo vidieť aj cez pol izby, a hneď aj zhasne, takže je ten istý
   rytmus počuť aj vidieť. Prechod je krátky, nie skokový: dlhý by rozmazal
   hranicu medzi dvoma rovnakými tónmi za sebou. */
.exp.is-game .exp-kbd .key.is-hint,
.exp.is-game .exp-gamekbd .key.is-hint {
  transition: background .06s linear, box-shadow .06s linear;
}
.exp.is-game .exp-kbd .key--w.is-hint,
.exp.is-game .exp-gamekbd .key--w.is-hint {
  background: linear-gradient(180deg, #FFF6D6 0%, #F2DC9E 58%, #D9BC6A 100%);
  box-shadow: 0 0 14px rgba(231, 211, 161, .75), inset 0 0 8px rgba(198, 163, 83, .35);
}
.exp.is-game .exp-kbd .key--b.is-hint,
.exp.is-game .exp-gamekbd .key--b.is-hint {
  background: linear-gradient(180deg, #B08F3C 0%, #7C6224 62%, #4C3B12 100%);
  box-shadow: 0 0 14px rgba(231, 211, 161, .7);
}

/* Menšia klaviatúra pre súťaž. Na širokej obrazovke sa nepoužíva — tam je
   miesta dosť a hrá sa na tej istej, ktorá sa rozbalí po kliknutí. */
.exp-gamekbd { display: none; }
.exp-gamekbd .piano__kb { min-width: 0; }

@media (max-width: 640px) {
  /* Na telefóne má súťaž vlastnú oktávu od F po F: osem bielych klávesov
     namiesto pätnástich, takmer dvakrát širších. Hlavná klaviatúra sa na
     ten čas skryje. */
  .exp.is-game .exp-gamekbd { display: block; }
  /* Klaviatúry sú dve, pre každé kolo jedna oktáva — na obrazovke smie byť
     len tá, ktorá patrí k práve hranej skladbe. Bez tohto by ju `display`
     vyššie ukázal aj so skrytím. */
  .exp.is-game .exp-gamekbd[hidden] { display: none; }
  .exp.is-game .exp-kbd:not(.exp-gamekbd) { display: none; }
}

/* Pruh nad klaviatúrou: čo treba zahrať a koľko tónov je za nami. */
.exp-gamebar {
  /* Kam presne, to vie až prehliadač — spodok berieme z nameranej polohy
     klaviatúry (js/experience.js). V CSS sa to spočítať nedá: výšku
     klaviatúry drží premenná v percentách iného prvku. */
  position: fixed; left: 0; right: 0; z-index: 61;
  bottom: var(--gamebar-bottom, 22rem);
  padding: 0 var(--gut) .9rem;
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s .4s;
}
.exp.is-game .exp-gamebar { opacity: 1; visibility: visible; transition: opacity .4s var(--ease) .35s, visibility 0s; }
/* Pokyn, čo a koľko treba zahrať, je to jediné, čo hráč v tej chvíli
   potrebuje vedieť — nesmie sa stratiť nad klaviatúrou. Preto je väčší,
   v plnej zlatej a na tmavom podklade, ktorý ho odlepí od scény za ním. */
.exp-gamebar__lead {
  display: inline-block;
  margin: 0 auto;
  font-family: var(--display); font-size: clamp(1.02rem, 3vw, 1.42rem);
  font-weight: 600; letter-spacing: .1em; line-height: 1.35;
  color: var(--gold);
  padding: .5rem 1.1rem;
  border-radius: 2px;
  background: rgba(8, 8, 9, .82);
  box-shadow: 0 0 26px rgba(6, 6, 8, .9);
}
/* Pokyny sú v stránke dva, pre každé kolo jeden, a nezobrazený má atribút
   hidden. Ten sám o sebe nestačí: `display: inline-block` vyššie ho prebije
   a v hre by potom stáli oba naraz. */
.exp-gamebar__lead[hidden] { display: none; }


.exp-gamebar__count {
  margin-top: .5rem;
  font-size: .92rem; letter-spacing: .12em; color: var(--gold-2);
  min-height: 1.2em;
  text-shadow: 0 0 12px rgba(6, 6, 8, .95), 0 0 4px rgba(6, 6, 8, .95);
}

/* Výsledok. Dve okná: čo ste vyhrali a aký máte kód. */
.exp-game {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(6, 6, 8, .95);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease-io), visibility 0s .4s;
}
.exp-game.is-on { opacity: 1; visibility: visible;
                  transition: opacity .4s var(--ease-io), visibility 0s; }
/* Konfety letia nad tmavým podkladom, ale pod oknami — nech sa dá kód
   prečítať aj v tej sláve. */
.exp-confetti {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}
.exp-game__win, .exp-game__lose {
  position: relative; z-index: 1;
  display: grid; gap: 1rem; width: min(100%, 34rem);
}
.exp-game__win[hidden], .exp-game__lose[hidden] { display: none; }
.exp-game__card {
  border: 1px solid var(--line); border-radius: 3px;
  background: rgba(12, 12, 14, .92);
  padding: 1.4rem 1.5rem; text-align: center; color: #fff;
}
/* To isté, čo tlačidlá pod ním: verzálky úzkeho displejového písma sa
   v tejto veľkosti čítajú ťažko. Nadpis okna je jeden pre všetky tri
   stavy hry - výhru, kód aj prehru - tak sa menia naraz a ostávajú
   navzájom v súlade. */
.exp-game__cardtitle {
  font-family: var(--sans); font-size: 1.15rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2);
  margin-bottom: .7rem;
}
.exp-game__card p { font-size: .92rem; line-height: 1.6; }
.exp-game__card--code { border-color: var(--gold); }
/* Upozornenie pod kódom. Vlastný rámček, aby sa nedalo prehliadnuť —
   kód nikde inde nie je a po zatvorení okna ho návštevník už nenájde. */
.exp-game__card--note { padding: .9rem 1.2rem; }
.exp-game__card--note p { font-size: .84rem; color: var(--gold-2); }
.exp-game__code {
  font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 600; letter-spacing: .34em; color: var(--gold);
  padding-left: .34em;                      /* posledná medzera nech nekríví stred */
}
/* Dve tlačidlá vedľa seba: skúsiť znova a odísť. Na úzkej obrazovke sa
   zalomia pod seba. */
.exp-game__acts {
  margin-top: 0;
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
}
/* V okne s prehrou sedia tlačidlá vnútri rámčeka, vo výhre stoja pod
   všetkými tromi — preto tam potrebujú vlastný odstup. */
.exp-game__card .exp-game__acts { margin-top: 1rem; }
/* Písmo nadpisov je úzke a vysoké - na nadpise cez pol obrazovky je to
   krása, na tlačidle s verzálkami veľkosti 11 bodov sa z neho stane rad
   čiarok. Tieto tri (Pomôcka, Skúsiť znova, Späť) preto berú Montserrat,
   sú o kúsok väčšie a majú menší rozstup - to isté, čo už predtým
   dostalo tlačidlo so zľavou. */
.exp-game__again {
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2);
  padding: .6rem 1.4rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 2px; background: none;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.exp-game__again:hover { border-color: var(--gold); color: var(--gold); }

/* Pomôcka je jediné tlačidlo, ktoré hráčovi v hre naozaj pomôže - medzi
   troma rovnako obrysovými by sa stratila. Dostala preto zlatý rám
   a tichú žiaru. Plné zlato ostáva ponuke zahrať si o zľavu, aby bolo
   ďalej jasné, ktoré tlačidlo pozýva najďalej. */
.exp-game__again[data-game-show] {
  color: var(--gold);
  border-color: rgba(198, 163, 83, .85);
  box-shadow: 0 0 14px rgba(198, 163, 83, .16),
              inset 0 0 10px rgba(198, 163, 83, .07);
}
.exp-game__again[data-game-show]:hover {
  border-color: var(--gold-2); color: var(--gold-2);
  box-shadow: 0 0 20px rgba(198, 163, 83, .26),
              inset 0 0 12px rgba(198, 163, 83, .1);
}

/* Ponuka zahrať si ešte raz, o zľavu na album, je to najlepšie, čo sa dá
   po výhre spraviť — a stratila by sa medzi dvoma rovnakými tlačidlami.
   Preto je zlatá naplno, o kúsok väčšia a potichu dýcha, aby ju oko
   našlo. Ostatné tlačidlá ostávajú obrysové, takže je hneď jasné, ktoré
   z nich pozýva ďalej. */
.exp-game__more {
  color: #0B0B0D;
  border-color: transparent;
  background: linear-gradient(135deg, #F7E9BE 0%, #E7D3A1 44%, #C6A353 100%);
  font-size: .88rem;
  padding: .78rem 1.7rem;
  animation: exmore 2.6s var(--ease-io) infinite;
}
.exp-game__more:hover {
  color: #0B0B0D;
  border-color: transparent;
  filter: brightness(1.08);
}
@keyframes exmore {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 211, 161, .5); transform: scale(1); }
  50%      { box-shadow: 0 0 26px 5px rgba(231, 211, 161, .4); transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .exp-game__more { animation: none; box-shadow: 0 0 18px 2px rgba(231, 211, 161, .34); }
}

.exp-game__close {
  position: absolute; top: clamp(4.6rem, 9vh, 6rem); right: clamp(.6rem, 2vw, 1.4rem);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(10, 10, 11, .7); color: var(--gold-2); cursor: pointer;
  z-index: 4;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.exp-game__close:hover { border-color: var(--gold); color: var(--gold); }
.exp-game__close svg { width: 16px; height: 16px; }

/* Ponuka pod nástrojom. Na rozdiel od nápisov v scéne (Koncerty, Príbeh,
   Kúpiť CD) je vidieť stále — nie je to ohlásenie dielu, ale pozvanie. */
/* Odsadenie zhora, aby tlačidlo nesadlo na stoličku. Rám nechá klavíru
   toľko miesta, koľko mu ostane, a keby bola stránka nízka, dosadol by mu
   text na nohy. */
.exp-prize { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--gut);
             margin-top: 2.9rem; }
/* Druhá voľba pod hlavným tlačidlom. Podčiarknutie hovorí, že sa naň dá
   kliknúť - kliknutie spustí hru rovno druhou skladbou. */
/* Slovo medzi ponukami. Vlásky po oboch stranách z neho robia predel -
   bez nich by splynulo s textom pod ním a vyzeralo ako jeho začiatok. */
.exp-prize__or {
  display: flex; align-items: center; gap: .7rem;
  margin: .72rem 0 .16rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .24em; text-transform: lowercase;
  color: var(--gold-2);
  text-shadow: 0 0 10px rgba(6, 6, 8, .95), 0 0 4px rgba(6, 6, 8, .95);
}
.exp-prize__or::before,
.exp-prize__or::after {
  content: ""; width: 34px; height: 1px;
  background: rgba(231, 211, 161, .38);
}

.exp-prize__note {
  margin: .1rem 0 0;
  max-width: 40ch; text-align: center;
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600;
  /* Verzálky, ale tichšie než tlačidlo nad ňou: menšie prestrkanie
     a voľnejšie riadkovanie, aby druhá ponuka tú prvú neprekrikovala. */
  text-transform: uppercase;
  letter-spacing: .07em; line-height: 1.62;
  color: var(--gold-2);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-color: rgba(231, 211, 161, .45);
  padding: .3rem .6rem;
  border: 0; background: none;
  cursor: pointer; touch-action: manipulation;
  text-shadow: 0 0 12px rgba(6, 6, 8, .95), 0 0 4px rgba(6, 6, 8, .95);
  transition: color .35s var(--ease), text-decoration-color .35s var(--ease);
}
.exp-prize__note:hover,
.exp-prize__note:focus-visible {
  color: #F7E9BE;
  text-decoration-color: #F7E9BE;
}

.exp-prize__btn {
  /* Úzke verzálky Big Shoulders sa pri 11 px zlievajú. Text je krátky,
     ale je to pozvánka na zľavu - musí sa dať prečítať na prvý pohľad,
     preto tu stojí bežné písmo stránky. Montserrat je širší, tak má
     o kúsok menší stupeň a užšie prestrkanie, nech tlačidlo nenarastie. */
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-2);
  padding: 0.66rem 1.5rem;
  border: 1px solid var(--line); border-radius: 2px;
  background: rgba(10, 10, 11, 0.55);
  cursor: pointer; touch-action: manipulation;
  transition: border-color .35s var(--ease), color .35s var(--ease),
              background .35s var(--ease);
}
/* Tlačidlo so zľavou je pozvánka, nie poznámka pod čiarou — preto má
   zlatý rám, vlastnú žiaru a tmavšie pozadie, aby sa od okolitých textov
   odrazilo. Nehýbe sa; namiesto toho sa mu raz za päť sekúnd prebehne
   rámom svetlo — zvýrazní sa a hneď pohasne. Oko to zachytí aj kútikom,
   a pritom nič neposkakuje.

   Pri prejdení myšou sa svetlo zastaví a rám ostane rozsvietený: kto už
   tlačidlo našiel, nepotrebuje, aby na seba ďalej upozorňovalo. */
.exp-prize__btn {
  color: var(--gold);
  border-color: rgba(198, 163, 83, .85);
  background: rgba(14, 12, 9, 0.82);
  box-shadow: 0 0 18px rgba(198, 163, 83, .18),
              inset 0 0 12px rgba(198, 163, 83, .08);
  animation: exprizeglow 5s ease-in-out infinite;
}
@keyframes exprizeglow {
  0%, 72%, 100% {
    border-color: rgba(198, 163, 83, .85);
    box-shadow: 0 0 18px rgba(198, 163, 83, .18),
                inset 0 0 12px rgba(198, 163, 83, .08);
  }
  84% {
    border-color: #F7E9BE;
    box-shadow: 0 0 32px rgba(231, 211, 161, .62),
                inset 0 0 20px rgba(231, 211, 161, .24);
  }
}
.exp-prize__btn:hover {
  animation: none;
  border-color: var(--gold); color: var(--gold);
  background: rgba(198, 163, 83, 0.14);
  box-shadow: 0 0 26px rgba(198, 163, 83, .3),
              inset 0 0 12px rgba(198, 163, 83, .1);
}
@media (prefers-reduced-motion: reduce) {
  .exp-prize__btn { animation: none; }
}

/* Nad rozbalenou klaviatúrou tlačidlo stojí tiež — kto si prišiel zahrať,
   je presne ten, koho zľava zaujíma. Sadá si tesne nad klávesy; kam presne,
   to vie až prehliadač, preto polohu meria js/experience.js.

   Počas hry o zľavu je preč: tam už na tom istom mieste stojí pokyn, čo
   treba zahrať, a dve veci nad sebou by si zavadzali. */
.exp.is-focus .exp-prize {
  position: fixed; left: 0; right: 0; z-index: 61;
  /* Odmeraná poloha sadá tesne nad klávesy; centimeter navyše jej dá
     vzduch, aby tlačidlo na klaviatúre nesedelo. */
  bottom: calc(var(--prize-bottom, 24rem) + 1cm);
  margin-top: 0; padding: 0 var(--gut);
}
.exp.is-game .exp-prize { display: none; }

@media (max-width: 900px) {
  /* Na mobile smie krídlo pretiecť cez okraje — rám ho oreže, takže
     nástroj ostane veľký a ovládateľný jedným prstom. */
  /* 250px dolu si berie HUD a pruh s odkazmi — bez toho by krídlo doň
     pretieklo a tlačidlá by ležali na klávesoch. */
  .exp-frame { --piano-w: min(100%, calc((100svh - var(--nav-h) - 300px) * var(--vw) / var(--vh))); }
  /* Dolný pruh rámu patrí odkazom — klavír sa doň nesmie pretiahnuť.
     Odkazy tak stoja pod stoličkou, nie cez nástroj. */
  .exp-frame { padding-block: 0.5rem 7rem; }

  .exp-hud { padding-bottom: 3.7rem; }
  .exp-hud__now { font-size: 0.78rem; }
  .exp-hud__hint { font-size: 0.66rem; letter-spacing: 0.12em; }
  .exp-wave { height: 34px; }

  .exp-tools {
    left: var(--gut); right: var(--gut); bottom: 0.9rem;
    justify-content: space-between;
  }
  /* Obe tlačidlá sa na šírku telefónu vedľa seba nezmestia — každé teda
     dostane vlastný riadok cez celú šírku, tak ako lišta pod nimi.
     Klaviatúra na ne musí nechať miesto, preto sedí vyššie. */
  .exp.is-focus .exp-kbd { bottom: 13.4rem; }
  .exp-focusbar {
    left: var(--gut); right: var(--gut); bottom: 4.6rem;
    transform: none; width: auto; max-width: none;
  }
  .exp-focusbar .exp-leave { flex: 1 1 auto; justify-content: center; min-height: 46px; }
  .exp-tool { flex: 1 1 auto; justify-content: center; min-height: 46px; }

  /* Klávesy: nižšie čierne, aby biele mali voľnú dolnú polovicu na prst.
     A kým sú na klávesoch skladby, čierne prst vôbec nezachytávajú —
     celý biely kláves je tak jeden veľký terč. */
  .exp-kbd .piano__blacks { inset: 0 0 48% 0; }
  .exp-kbd .piano__kb.show-songs .key--b { pointer-events: none; }
  .exp-kbd .key__song { font-size: 0.6rem; margin-bottom: 10px; }

  .exp-back { width: 100%; justify-content: center; min-height: 52px; }

  .exp-tl { padding-left: 1.1rem; }
  .exp-tl__item { grid-template-columns: 1fr; gap: 0.3rem; }
  .exp-tl__dot { top: 1.35rem; }

  .exp-city { grid-template-columns: 4.4rem 1fr; row-gap: 0.6rem; }
  .exp-city > .btn,
  .exp-city__notify { grid-column: 1 / -1; justify-self: start; }

  .albums--exp { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

@media (max-width: 560px) {
  .exp-frame { --piano-w: min(125%, calc((100svh - var(--nav-h) - 176px) * var(--vw) / var(--vh))); }

  /* Krídlo si na telefóne berie, koľko potrebuje, a všetko pod ním sa
     posúva nižšie: tesnejší odstup nad tlačidlom so zľavou aj pod textami
     uvoľní rámu vyše osemdesiat pixelov, a práve o toľko krídlo prečnievalo.
     Stolička aj nohy tak ostanú celé a nástroj si nechá svoju veľkosť. */
  .exp-frame { padding-block: 0.5rem 0.35rem; }
  .exp-prize { margin-top: 0.4rem; }
  .exp-hud { padding-bottom: 1.1rem; }
  /* Pod nástrojom je na telefóne len úzky pruh, takže sa scéna vytráca
     kratšie — dlhé prelínanie by ukusovalo zo stoličky. */
  .exp-frame {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 10px),
                                        transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 10px),
                                transparent 100%);
  }

  /* Na telefóne súhvezdie odkazov nie je. Sedem bodiek sa vedľa klavíra
     nezmestí a v riadku pod ním z nich bola drobná mriežka, do ktorej sa
     ťažko trafiť. Obsah aj tak vedie horné menu. */
  .exp-hots { display: none; }
  .exp-frame { padding-block: 0.5rem 1.2rem; }

  .exp-stars { display: none; }
  .exp-cons {
    position: absolute; inset: auto 0 0 0;
    transform: none;
    width: auto; height: auto; aspect-ratio: auto;
    display: flex; flex-wrap: wrap;
    justify-content: center; align-content: flex-end;
    gap: 0.3rem 0.35rem;
    padding: 0 0.6rem 0.25rem;
  }
  .exp-hot {
    position: static;
    margin: 0; transform: none;
    flex-direction: row; gap: 0.38rem;
    padding: 0.26rem 0.55rem 0.26rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(10, 10, 11, 0.62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  /* Na telefóne je terčom celé tlačidlo — leží pod klavírom, nič neprekrýva. */
  .exp-hot { pointer-events: auto; }
  .exp-hot::before { display: none; }
  .exp-hot .exp-hot__tag { text-align: left; opacity: 1; transform: none; }
  .exp-hot__dot { width: 6px; height: 6px; }
  .exp-hot__dot::after { inset: -5px; }
  .exp-hot__name { font-size: 0.54rem; letter-spacing: 0.06em; white-space: nowrap; }
}

/* Nízke obrazovky na výšku — nech klaviatúra nevytlačí HUD. */
@media (max-height: 620px) {
  .exp-hud__hint, .exp-wave { display: none; }
}

/* ---------- 17. Menej pohybu ---------- */
@media (prefers-reduced-motion: reduce) {
  .exp-stage { opacity: 1; transform: none; transition: none; }
  .exp-stage__haze { animation: none; }
  .exp-hot__dot::after { animation: none; opacity: 0.5; }
  .exp-piano { transition: none; }
  .exp-panel { opacity: 1; transform: none; animation: none !important; }
  .exp-gate { transition: opacity 0.2s linear; }
  /* Nič sa nezlieta — nástroj je rovno pokope. */
  .ex-shard { animation: none; }
  .ex-scene, .ex-shaft, .exp-hots { opacity: 1; transition: none; }
  .exp.is-reassembling .ex-scene { animation: none; }
  .exp.is-assembling .exp-kbd,
  .exp.is-reassembling .exp-kbd { animation: none; }
  .exp-part { transition-delay: 0s; }
  .exp-note { display: none; }
  .ex-dust circle { animation: none; opacity: .12; }
  .ex-cd-spin { animation: none; }
}