/* bigmstudio.com's home (P23 B, scratch): our own fonts, the three names, the bar hidden on them, and round 3's story
   of equal full screens (the owner, 11-01 ~13:00 UTC): BigM, Msounds, Vizuály, Samply, The Loop, Kontakt and the end
   with the app's two codes, each screen one viewport high, each saying what it is and letting it be tried there; a
   small "Stiahnuť aplikáciu" always in the corner, with room kept for it, and on every screen one line that it all
   lives in the app. Over zvuk.css (its copy beside this file); the concept: docs/briefs/bigm_beatbox_koncept.md §1. */

/* our own files, no Google Fonts (P23 B4; tools/fonts/fontsource.py, 5.3.0, SIL OFL 1.1: fonts/OFL-*.txt) */
@font-face { font-family: "Sora"; src: url(fonts/sora-latin.woff2?v=fa26406eed) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Sora"; src: url(fonts/sora-ext.woff2?v=c163c536f6) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geistmono-latin.woff2?v=684ad5b531) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geistmono-ext.woff2?v=1a189eb997) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root { --lista-v: 68px; --stiahni-v: 64px; }
@media (max-width: 900px) { :root { --lista-v: 98px; } }   /* the bar in two rows: the mark, then the sections */

/* ── the three names: the first screen (mena.css: the intro's room and panes); here only its fade into the studio ── */
.mena::after { content: ""; position: absolute; inset: auto 0 0; height: 18vh; pointer-events: none;   /* into the studio's picture below */
  background: linear-gradient(180deg, rgba(5, 5, 6, 0), var(--ink)); }

/* the bar waits below the names: the studio starts there (reading (a)) */
.lista { transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s; }
.na-menach .lista { opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .3s, transform .3s, visibility 0s .3s; }

/* ── the screens: each one viewport high, its content between the bar and the app button's corner ──────────────── */
html { scroll-snap-type: y proximity; }
.mena, .obrazovka { scroll-snap-align: start; }
.obrazovka { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2.6vh, 30px);
  min-height: 100vh; min-height: 100svh; max-width: none; margin: 0; padding: calc(var(--lista-v) + clamp(12px, 3vh, 36px)) var(--pad) calc(var(--stiahni-v) + 12px);
  scroll-margin-top: 0; }
.obrazovka > * { width: 100%; max-width: 1240px; margin-inline: auto; }
.obr-hlava .sekcia-titul { margin-bottom: 14px; }
.obr-hlava .uvod { margin: 0; }
.skus { margin: 8px 0 0; color: var(--chrome); font: 500 13px/1.5 var(--mono); letter-spacing: .02em; }
/* the one line on every screen: it all lives in the app */
.v-aplikacii { margin-top: 0; padding-top: 4px; color: var(--muted); font: 500 12px/1.5 var(--mono); letter-spacing: .03em; }
.v-aplikacii b { color: var(--chrome); font-weight: 500; }

/* BigM (round 4): the drum and bass loop full screen behind his name and his line, its still first (the old Kymatika
   still of zvuk.css is not fetched) */
.obrazovka.hero { justify-content: center; overflow: hidden; isolation: isolate; }
.hero video.hero-video { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; background: #000; }
/* the name over the rings' bright middle: a soft dark ellipse behind the words, over zvuk.css's top and foot shade */
.hero::after { background:
  radial-gradient(min(560px, 86vw) min(250px, 30vh) at 50% 50%, rgba(5, 5, 6, .8), rgba(5, 5, 6, .55) 55%, rgba(5, 5, 6, 0) 100%),
  linear-gradient(180deg, rgba(5, 5, 6, .45) 0%, rgba(5, 5, 6, 0) 22%, rgba(5, 5, 6, 0) 50%, rgba(5, 5, 6, .55) 76%, rgba(5, 5, 6, .9) 100%); }
.hero .hero-obsah { position: static; transform: none; display: grid; justify-items: center; gap: 14px; max-width: 760px; padding: 0; text-align: center; }
.hero .v-aplikacii { margin-top: 0; text-align: center; text-shadow: 0 1px 8px #000; }

/* Videá (round 4): the drum and bass video fits the screen, the track to download under it */
#videa .video-velke { width: auto; max-width: min(100%, calc((100svh - var(--lista-v) - var(--stiahni-v) - 350px) * 16 / 9)); }
.video-velke video { display: block; height: auto; }
.skladba { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.skladba .tl { min-height: 44px; padding: 0 20px; font-size: 11px; }
.skladba-fakty { margin: 0; font: 500 13px/1.5 var(--mono); letter-spacing: .02em; }
.skladba-licencia { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Msounds (round 4, one screen): the app's full pads; beside them the sand board over the three drum and bass loops; at
   the foot the way to the app, its two codes and its two buttons */
.ms-hra { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: center; }
.app-pady--ms { height: min(44vh, 396px); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ms-bok { display: grid; justify-items: center; gap: 14px; }
.doska { margin: 0; width: min(100%, 34vh, 320px); }
.doska-platno { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 14px;
  background: radial-gradient(120% 90% at 30% 20%, #17171b, #0b0b0d 70%); }
.ms-slucky { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ms-slucky[hidden] { display: none; }
.ms-slucky .tl { min-height: 42px; padding: 0 18px; font-size: 11px; }
.ms-app { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(18px, 3vw, 40px); }
.ms-app .qr { gap: 12px; }
.ms-app .qr img { width: 96px; height: 96px; border-radius: 10px; }
.ms-app .qr figcaption span { max-width: 26ch; font-size: 13px; }
.ms-app-tl { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 0 auto; }
.ms-app-tl .tl { min-height: 44px; padding: 0 20px; font-size: 11px; }
.no-js .ms-hra, .no-js .skus { display: none; }

/* Vizuály: the app's visual live over the whole screen, the words over it, the five to pick at the foot */
.obrazovka.viz { overflow: hidden; isolation: isolate; justify-content: flex-start; background: #000; }
.viz .viz-ovladanie { margin-top: auto; }   /* the words at the top, the choice at the foot, the visual's middle free */
.viz-platno { position: absolute; inset: 0; z-index: -2; max-width: none; margin: 0; }
.viz-platno canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.obrazovka.viz::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .84)); }
/* the words over a light visual (Uhlík's ground glass) stay readable: lighter and with a shadow */
.viz .viz-stav, .viz .v-aplikacii { color: rgba(233, 236, 239, .8); text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .8); }
.viz-ovladanie { display: grid; gap: 14px; }
.viz-zoznam { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.viz-volba { display: grid; grid-template-columns: 44px auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px 8px 8px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(5, 5, 6, .55); color: var(--chrome); font: 500 12px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, background .2s; }
.viz-volba img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: #000; }
.viz-volba:hover { border-color: rgba(233, 236, 239, .4); }
.viz-volba[aria-checked="true"] { border-color: var(--neon); background: rgba(70, 200, 255, .12); }
.viz-jediny, .viz-jediny:hover { width: fit-content; margin: 0; border-color: var(--neon); background: rgba(70, 200, 255, .12); cursor: default; }   /* round 7: the one free visual, named, not a choice */
.viz-tlacidla { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.viz-tlacidla .tl { min-height: 44px; padding: 0 20px; font-size: 11px; }
.tl[aria-pressed="true"] { border-color: var(--neon); background: rgba(70, 200, 255, .22); box-shadow: 0 0 16px rgba(70, 200, 255, .35); }
.viz-stav { margin: 0; color: var(--muted); font: 400 12px/1.4 var(--mono); }
.viz-stav:empty { display: none; }

/* Samply: the free pack on the app's pads, its facts and the download beside them */
.balik { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 44px); align-items: center;
  padding: clamp(18px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 50%), rgba(10, 11, 13, .55); }
.balik h3 { margin: 8px 0 0; font: 500 clamp(22px, 2vw, 28px)/1.25 var(--sans); }
.balik-veta { margin: 8px 0 0; color: rgba(233, 236, 239, .82); }
.balik-fakty { margin: 12px 0 0; font: 500 13px/1.5 var(--mono); letter-spacing: .02em; }
.balik-licencia { max-width: 60ch; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.akcie--balik { justify-content: flex-start; align-items: center; margin: 16px 0 0; }
.app-pady--samply { height: min(50vh, 420px); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.no-js .app-pady--samply, .no-js .prepinac-viz { display: none; }
/* the visual's switch: off by default (the owner: the pads need no visual, a switch for it) */
.prepinac-viz { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px 0 14px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; color: var(--chrome); font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.prepinac-viz i { position: relative; width: 30px; height: 16px; border-radius: 999px; background: rgba(233, 236, 239, .16); transition: background .2s; }
.prepinac-viz i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted);
  transition: transform .2s var(--ease), background .2s; }
.prepinac-viz[aria-checked="true"] { border-color: rgba(70, 200, 255, .55); }
.prepinac-viz[aria-checked="true"] i { background: rgba(70, 200, 255, .35); }
.prepinac-viz[aria-checked="true"] i::after { transform: translateX(14px); background: var(--neon); }

/* The Loop: its picture fits the screen */
.obrazovka .loop-obraz { width: auto; max-width: min(100%, calc((100svh - var(--lista-v) - var(--stiahni-v) - 400px) * 1600 / 786)); }   /* B24: the Sklo capture's ratio */

/* the app's two codes (on the Msounds screen since round 4), to the phone and to the web */
.qr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; margin: 0; }
.qr img { display: block; border-radius: 12px; background: var(--chrome); }
.qr figcaption { display: grid; gap: 6px; justify-items: start; }
.qr figcaption b { font: 600 13px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.qr figcaption span { color: var(--muted); font: 400 14px/1.45 var(--sans); }
.qr .tl { margin-top: 6px; min-height: 42px; padding: 0 18px; font-size: 11px; }
.obrazovka + .paticka, .paticka { margin-top: 0; }

/* the small download button, always in the corner; the screens keep its room free (--stiahni-v) */
.stiahni { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px 0 13px; border: 1px solid rgba(70, 200, 255, .6);
  border-radius: 999px; background: rgba(5, 5, 6, .82); color: var(--chrome); font: 600 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, box-shadow .2s; }
.stiahni svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stiahni:hover { background: rgba(70, 200, 255, .2); box-shadow: 0 0 16px rgba(70, 200, 255, .35); }
.mp[role="dialog"] { bottom: calc(var(--stiahni-v) + 8px); }   /* the install pane opens above the button (over msounds_ponuka.css) */

.obrazovka[hidden] { display: none; }
/* the operator's line waits empty, so unseen, until the IČO exists (P23 B5) */
.impresum:empty { display: none; }

/* Vystúpenia (round 7, B30): his three offers beside the request, in one viewport (zvuk.css "Vystúpenia" under this) */
.formaty li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; }
.formaty b, .formaty span { grid-column: 1; }
.formaty .format-cena { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--chrome); font: 600 clamp(22px, 2.2vw, 30px)/1 var(--sans); white-space: nowrap; }
.rez-obal > summary { display: none; }   /* a computer has the form open; a phone opens it from this button (zvuk.js) */
.rezervacia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rez-titul, .rez-cele, .rezervacia .tl, .rez-stav, .rez-pozn { grid-column: 1 / -1; }

@media (max-width: 760px) {
  :root { --stiahni-v: 60px; }
  .obrazovka { gap: 14px; padding-top: calc(var(--lista-v) + 10px); }
  .obr-hlava .sekcia-titul { margin-bottom: 10px; }
  .obr-hlava .uvod { font-size: 15px; line-height: 1.55; }
  .ms-hra { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .app-pady--ms { height: 236px; gap: 8px; }
  .ms-bok { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 12px; }
  .doska { width: min(38vw, 17svh, 150px); }
  .ms-slucky { flex-direction: column; align-items: stretch; }
  .ms-slucky .tl { justify-content: center; min-height: 40px; }
  .ms-app .qr { display: none; }   /* a phone cannot scan its own screen: the two buttons */
  .ms-app-tl { flex-wrap: nowrap; gap: 8px; margin: 0; }
  .ms-app-tl .tl { min-height: 42px; padding: 0 13px; font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
  .app-pady .pad { border-radius: 16px; }
  .app-pady .pad-zona { padding-left: 9px; }
  .viz-volba { grid-template-columns: 36px auto; min-height: 48px; padding: 6px 12px 6px 6px; font-size: 11px; }
  .viz-volba img { width: 36px; height: 36px; }
  .balik { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .app-pady--samply { height: 212px; gap: 8px; order: -1; }
  .balik h3 { margin-top: 4px; font-size: 21px; }
  .balik-veta { display: none; }
  .balik-fakty { margin-top: 6px; font-size: 12px; }
  .balik-licencia { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
  .akcie--balik { margin-top: 10px; }
  .formaty { gap: 0; }
  .formaty li { padding: 9px 0; }
  .formaty span { font-size: 14px; line-height: 1.4; }
  .rez-obal > summary { display: inline-flex; justify-content: center; min-height: 44px; list-style: none; font-size: 11px; }
  .rez-obal > summary::-webkit-details-marker { display: none; }
  .rez-obal[open] > .rezervacia { margin-top: 12px; }
  .rezervacia { grid-template-columns: minmax(0, 1fr); }
  .stiahni { min-height: 38px; padding: 0 14px 0 11px; font-size: 11px; }
}