/* bigmstudio.com's first screen (P23 B7-B9, scratch): the intro's room and panes (sites/vstup/vstup.css) for the three
   names, every rule under .mena so the sound site's styles below and these never meet (both have a .vh, a --ryha and a
   --neon of their own). As the intro since 10-24: the panes without a visible frame, the room through them; since
   round 4 no pane glows either, and each name is lit in its neon at rest, engraved in the intro's lettering (pismo.js)
   with the #ryha-s/m filters, the same size in all three. Without JavaScript three links, their names engraved in the code monospace;
   mena.js adds .aktivne, .rozbite, .zrnka-bezia, .napisane, .jednoduche, .struna-bezi. */
.mena {
  --studio: #FF9A4D;   /* webnavždy: the intro's warm amber (WEB & APP) */
  --zvuk: #46C8FF;     /* bigmstudio: the intro's cold cyan (ZVUK) */
  --beatbox: #C792FF;  /* beatbox: a third neon, violet, between the two */
  --chrome-m: #E9ECEF; --kod: "Geist Mono", ui-monospace, monospace; --ryha-m: #4E5258; --ease-m: cubic-bezier(.16, 1, .3, 1);
  position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 6vh clamp(16px, 3.4vw, 64px);
  overflow: hidden; overflow: clip; background: #0a0a0c; isolation: isolate;
}
/* the room: before it comes (it is built after the load) or without WebGL, its own still - a frame of the room at rest,
   img/miestnost_*.webp, captured from javisko.js (11 and 9 kB) - over the intro's still made of light; the live room
   fades in over both */
.mena .miestnost { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url(img/miestnost_1440.webp?v=e7e5375f50) center / cover no-repeat,
    radial-gradient(60% 46% at 68% 22%, rgba(214, 219, 227, .085), rgba(214, 219, 227, 0) 70%),
    linear-gradient(180deg, rgba(232, 235, 240, 0) 58%, rgba(232, 235, 240, .045) 66.5%, rgba(232, 235, 240, .012) 70%, rgba(232, 235, 240, 0) 82%),
    linear-gradient(180deg, #0a0a0c 0%, #0c0c0f 66%, #101013 100%); }
.mena .miestnost-platno { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.mena .miestnost.zive .miestnost-platno { opacity: 1; }
.mena::after { z-index: 1; }   /* domov.css: the fade into the studio below, over the floor */

/* the three panes */
.mena .volby { position: relative; z-index: 2; display: flex; gap: clamp(12px, 1.6vw, 28px); width: min(1360px, 100%); margin: 0; padding: 0; list-style: none; }
.mena .volba-obal { position: relative; flex: 1 1 0; min-width: 0; }
.mena .volba {
  --vp: clamp(18px, 1.8vw, 32px); --neon: var(--studio);
  --lit: color-mix(in srgb, var(--neon) 66%, #0A0B0D);   /* the word lit, as at the end of webnavždy's animation */
  --lit-domena: color-mix(in srgb, var(--neon) 50%, #0A0B0D);   /* its domain, the same colour, quieter */
  position: relative; display: block; height: clamp(190px, 38vh, 380px); padding: var(--vp); overflow: hidden; isolation: isolate;
  border: 1px solid transparent; border-radius: clamp(18px, 1.6vw, 28px); background: transparent;
  color: var(--chrome-m); text-decoration: none; -webkit-tap-highlight-color: transparent;
  container-type: inline-size;
}
.mena .volba--zvuk { --neon: var(--zvuk); }
.mena .volba--beatbox { --neon: var(--beatbox); }
.mena .volba:focus { outline: none; }
/* keyboard focus: a line of the word's neon under the word, not a frame round the pane (round 4: no square) */
.mena .volba:focus-visible { outline: none; }
.mena .volba:focus-visible .volba-nazov { box-shadow: 0 14px 0 -11px var(--neon); }
/* the name and its domain on one line, centred together in the glass (B32, the owner 11-01 ~22:10 UTC). The three names
   the same size, set by the longest: BIGMSTUDIO, 9.2 caps wide with its margins, and .COM after it, 3.72 of the domain's
   caps at .44 of the name's; the line may reach into the pane's padding, so the name keeps its size on a computer */
.mena .volba-riadok { --kod-vel: clamp(15px, 6.2cqi, 40px); --cap: min(52px, calc(100cqi / 9.4), calc((100cqi + 2 * var(--vp)) / 10.84));
  --cap-domena: calc(var(--cap) * .44); --domena-dole: calc(var(--cap) * var(--navrch, .18) - var(--cap-domena) * .18);
  position: absolute; z-index: 4; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: baseline; width: max-content; margin: 0 auto; }
/* the name, engraved; without our lettering, the code monospace in capitals */
.mena .volba-nazov { --rozstup: .2em; display: block; padding-left: var(--rozstup);
  font: 600 28px/1 var(--kod); font-size: var(--kod-vel); letter-spacing: var(--rozstup); text-transform: uppercase;
  white-space: nowrap; color: var(--lit); filter: url(#ryha-m);
  transition: color .6s var(--ease-m), opacity .6s var(--ease-m); }
.mena .volba-nazov.ma-pismo { align-self: flex-end; padding: 0; letter-spacing: 0; line-height: 0; filter: none; }
/* its domain, small and still: the effects move only the name. Too thin for the engraving, so without the #ryha filters;
   its letters' margin taken off, so it stands on the name's baseline whatever room the name's caron takes */
.mena .volba-domena { font: 600 11px/1 var(--kod); font-size: calc(var(--kod-vel) * .44); letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap; color: var(--lit-domena); }
.mena .volba-domena.ma-pismo { --cap: var(--cap-domena); align-self: flex-end; margin-bottom: var(--domena-dole); letter-spacing: 0; line-height: 0; }
.mena .volba-domena.ma-pismo .pismo-slovo > g:not(.pulz), .mena .volba-domena.ma-pismo .pismo-slovo > .vlna { filter: none; }
.mena .ma-pismo .pismo-slovo { display: block; width: calc(var(--cap) * var(--pomer)); height: calc(var(--cap) * var(--vyska, 1.36)); overflow: visible; }
.mena .ma-pismo .pismo-slovo > g:not(.pulz), .mena .ma-pismo .pismo-slovo > .vlna { filter: url(#ryha-m); }
.mena .ma-pismo .stopa { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.mena .ma-pismo .via, .mena .ma-pismo .vlna { fill: currentColor; }
.mena .ma-pismo .pulz { pointer-events: none; }
.mena .ma-pismo .pulz path { fill: none; stroke: color-mix(in srgb, var(--neon) 40%, #FFFFFF); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 9 400; stroke-dashoffset: 9; opacity: 0; filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 6px var(--neon)); }
.mena .ma-pismo .pulz circle { fill: none; stroke: color-mix(in srgb, var(--neon) 40%, #FFFFFF); stroke-width: 2.4; opacity: 0; filter: drop-shadow(0 0 3px var(--neon)); }
.mena .ma-pismo .pismo-slovo.bezi .pulz path { animation: mena-beh var(--t) linear var(--d) both; }
.mena .ma-pismo .pismo-slovo.bezi .pulz circle { animation: mena-blik .7s ease-out var(--d) both; }
@keyframes mena-beh { 0% { stroke-dashoffset: 9; opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes mena-blik { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mena .ma-pismo .pismo-slovo.bezi .pulz path, .mena .ma-pismo .pismo-slovo.bezi .pulz circle { animation: none; } }
.mena .citatel { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* round 4 (the owner, 11-01): the three words lit at rest, as at the end of webnavždy's animation, and no pane - active
   (hover, keyboard focus, its turn on a phone) moves only the word (mena.js); without JavaScript the words stay lit */

/* webnavždy while the glass flies apart: the canvas carries the pane */
.mena .volba-obal.rozbite .volba { background: transparent; transition: none; }
.mena .volba-obal.rozbite .volba-nazov { opacity: 0; transition: none; }
.mena .fragmenty { position: absolute; z-index: 3; pointer-events: none; }
/* bigmstudio: the grains over the whole pane; the name gives way to the figure and comes back filled with sand */
.mena .zrnka, .mena .struna { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.mena .zrnka { opacity: 0; transition: opacity .35s; }
.mena .volba-obal.zrnka-bezia .zrnka { opacity: 1; }
.mena .volba-obal.zrnka-bezia .volba-nazov { opacity: 0; transition: opacity .3s; }
.mena .volba-obal.zrnka-bezia.napisane .volba-nazov, .mena .volba-obal.napisane .volba-nazov { opacity: 1; transition-duration: .9s; }
/* beatbox: the canvas draws the name as its string while it rings */
.mena .volba-obal.struna-bezi .volba-nazov { opacity: 0; transition: none; }
/* the simple version of bigmstudio: a still figure, then the engraved name over it */
.mena .chladni { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%;
  overflow: visible; fill: none; stroke: var(--zvuk); stroke-width: 1; stroke-linecap: round; opacity: 0; transition: opacity .8s ease; pointer-events: none;
  filter: drop-shadow(0 0 2px var(--zvuk));
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.mena .chladni path { vector-effect: non-scaling-stroke; }
.mena .volba.aktivne .chladni { opacity: .75; }
.mena .volba-obal.jednoduche .volba-nazov { opacity: 0; transition: opacity .8s ease; }
.mena .volba-obal.jednoduche.napisane .volba-nazov { opacity: 1; }
.mena .volba-obal.napisane .chladni { opacity: .3; }

@media (max-width: 760px) {
  .mena { padding: 5svh 16px; }
  .mena .miestnost { background-image: url(img/miestnost_390.webp?v=1c4615c237); background-size: cover; background-position: center; }
  .mena .volby { flex-direction: column; gap: 10px; }
  .mena .volba-obal { flex: none; }
  .mena .volba { height: clamp(130px, 25svh, 220px); }
  .mena .volba-nazov { filter: url(#ryha-s); }
  .mena .volba-nazov.ma-pismo { filter: none; }
  .mena .ma-pismo .pismo-slovo > g:not(.pulz), .mena .ma-pismo .pismo-slovo > .vlna { filter: url(#ryha-s); }
}
@media (prefers-reduced-motion: reduce) {
  .mena .volba, .mena .volba-nazov { transition-duration: .7s; transition-timing-function: ease; }
}