/* Studio — konfigurátor dárku na homepage, blok `studio` (tpl/studio.php).
 * Předloha: lovable/src/components/sections/Studio.tsx (aurora, glass, orbit, bottle-in,
 * sticker-pop, shimmer-text, range).
 *
 * Vlevo scéna s lahví (náklon za myší a světlo přes --svetlo-x/y z js/uvod.js), vpravo panel
 * s šesti bloky a cenou. Cenu dodává server; tady je jen vzhled.
 * Panel je zhuštěný (přání zadavatele 2026-10-07): menší pole, přepínače v řádku nadpisu,
 * menší dlaždice; na desktopu se scéna při posunu drží v okně, aby byl náhled pořád vidět.
 */

.studio {
    overflow: hidden;
    overflow: clip;   /* hidden by z .studio udělal posuvný kontejner a scéna by se nepřišpendlila */
    padding: 6rem 0;
    background: var(--c-grafit);
    color: var(--c-papir);
}
.studio__aurora { position: absolute; inset: 0; pointer-events: none; }
.studio__aurora::before,
.studio__aurora::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.55;
    animation: studio-aurora 18s ease-in-out infinite;
}
.studio__aurora::before { left: -10%; top: -10%; background: color-mix(in oklab, var(--c-sampan) 28%, var(--c-grafit)); }
.studio__aurora::after { right: -15%; bottom: -20%; background: color-mix(in oklab, var(--c-sampan) 55%, var(--c-grafit)); animation-delay: -9s; }

.studio__obal { position: relative; z-index: 1; max-width: var(--sirka); margin: 0 auto; padding: 0 var(--okraj); }
.studio__hlava { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.studio__nadtitulek { color: var(--c-sampan); }
.studio__nadpis { margin: 1rem 0 0; font-size: 2.6rem; font-weight: 700; line-height: 1.06; }
.studio__trpyt {
    background: linear-gradient(90deg, var(--c-sampan) 0%, var(--c-sampan-svetla) 25%, var(--c-sampan) 50%, color-mix(in oklab, var(--c-sampan) 60%, var(--c-cerna)) 75%, var(--c-sampan) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: studio-trpyt 5s linear infinite;
}
.studio__postup { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.72rem; }
.studio__krok {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--c-papir) 15%, transparent);
    border-radius: var(--r-pilulka);
    color: color-mix(in oklab, var(--c-papir) 65%, transparent);
    transition: all 0.5s ease;
}
.studio__krok-cislo { font-weight: 700; }
.studio__krok--ted { border-color: color-mix(in oklab, var(--c-sampan) 60%, transparent); color: var(--c-sampan); }
.studio__krok--hotovo { border-color: var(--c-sampan); background: var(--c-sampan); color: var(--c-cerna-hluboka); }

.studio__mrizka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 3rem; }   /* minmax(0) — řada vín nesmí sloupec roztáhnout */

/* sklo (glass) */
.studio__scena,
.studio__panel {
    border: 1px solid color-mix(in oklab, var(--c-papir) 14%, transparent);
    border-radius: var(--r-panel);
    background: color-mix(in oklab, var(--c-papir) 6%, transparent);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-papir) 12%, transparent);
}

/* --- scéna --- */
.studio__scena {
    --svetlo-x: 50%;
    --svetlo-y: 45%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 620px;
    overflow: hidden;
    perspective: 1200px;
}
.studio__svetlo {
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--svetlo-x) var(--svetlo-y), color-mix(in oklab, var(--c-sampan) 28%, transparent), transparent 55%);
    pointer-events: none;
}
.studio__scena::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 33%;
    background: linear-gradient(to top, color-mix(in oklab, var(--c-cerna-hluboka) 80%, transparent), transparent);
    pointer-events: none;
}
.studio__orbita {
    position: absolute;
    width: 520px;
    height: 520px;
    border: 1px solid color-mix(in oklab, var(--c-sampan) 15%, transparent);
    border-radius: 50%;
    animation: studio-orbita 24s linear infinite;
    pointer-events: none;
}
.studio__orbita span {
    position: absolute;
    left: 50%;
    top: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--c-sampan);
    box-shadow: 0 0 20px var(--c-sampan);
    transform: translate(-50%, -50%);
}
.studio__lahev {
    --lahev: 460px;   /* výška fotky lahve; samolepka a lupa se počítají z ní */
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease-out;
    transform-style: preserve-3d;
}
.studio__lahev--prijezd { animation: studio-prijezd 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.studio__ram {
    position: relative;
    overflow: hidden;
    padding: 0.75rem;
    border-radius: 2rem;
    background: var(--c-papir);
    box-shadow: 0 60px 100px -40px var(--c-cerna-hluboka);
}
/* Fotka lahve a samolepka v jednom rámu: rozměry samolepky jsou podíl výšky fotky (--lahev).
 * Fotky vín mají jednotný tvar (fotky.md): lahev ≈ 90 % výšky obrázku ≈ 31 cm, etiketa ve 40–58 %.
 * Samolepka Ø 4 cm = 11,6 % výšky, Ø 3 cm = 8,7 %; střed v 69 % výšky — pod etiketou. */
.studio__foto { position: relative; }
.studio__foto img { display: block; width: auto; height: var(--lahev); mix-blend-mode: multiply; }
.studio__vzor { position: absolute; width: 0; height: 0; overflow: hidden; }
.studio__lesk {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 35%, color-mix(in oklab, var(--c-papir) 55%, transparent) 50%, transparent 62%);
    mix-blend-mode: soft-light;
    pointer-events: none;
}
.studio__samolepka {
    position: absolute;
    left: 50%;
    top: 69%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35));
}
.studio__samolepka svg { display: block; width: calc(var(--lahev) * 0.116); height: calc(var(--lahev) * 0.116); transition: width 0.3s ease, height 0.3s ease; }
.studio__samolepka--3 svg { width: calc(var(--lahev) * 0.087); height: calc(var(--lahev) * 0.087); }
/* zvětšený náhled samolepky, aby byl text čitelný — u pravého okraje rámu ve výšce samolepky */
.studio__lupa {
    --lupa: 7.5rem;
    position: absolute;
    left: calc(100% - var(--lupa) / 2);
    top: calc(0.75rem + var(--lahev) * 0.69 - var(--lupa) / 2);
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    margin: 0;
    pointer-events: none;
}
.studio__lupa svg { display: block; width: var(--lupa); height: var(--lupa); filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.4)); }
.studio__lupa-popis { max-width: var(--lupa); padding: 0.25rem 0.625rem; border-radius: var(--r-velky); background: color-mix(in oklab, var(--c-grafit) 55%, transparent); color: color-mix(in oklab, var(--c-papir) 75%, transparent); font-size: 0.66rem; line-height: 1.3; text-align: center; }   /* zalomí se — u okraje scény by přetekl */
.studio__samolepka--pop { animation: studio-pop 0.8s cubic-bezier(0.3, 1.4, 0.5, 1) both; }

.studio__pretahni {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid color-mix(in oklab, var(--c-sampan) 50%, transparent);
    border-radius: var(--r-pilulka);
    background: color-mix(in oklab, var(--c-grafit) 50%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--c-sampan);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}
.studio__pretahni:hover,
.studio__pretahni--nad { background: var(--c-sampan); color: var(--c-cerna-hluboka); }
.studio__pretahni--nad { transform: translateX(-50%) scale(1.1); }
.studio__pretahni[hidden] { display: none; }
.studio__tecka { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; animation: studio-tecka 1.6s ease-in-out infinite; }
.studio__stitek-vino {
    position: absolute;
    left: 1.5rem;
    top: 1.5rem;
    z-index: 2;
    margin: 0;
    padding: 0.375rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--c-papir) 15%, transparent);
    border-radius: var(--r-pilulka);
    background: color-mix(in oklab, var(--c-grafit) 40%, transparent);
    color: color-mix(in oklab, var(--c-papir) 70%, transparent);
    font-size: 0.7rem;
}
.studio__medaile { position: absolute; right: 1.5rem; top: 1.5rem; z-index: 2; --medaile: 4.25rem; }

/* --- panel --- */
.studio__panel { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; }
.studio__blok { margin: 0; padding: 0; border: 0; min-width: 0; }
.studio__blok-nadpis {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    padding: 0;
    color: color-mix(in oklab, var(--c-papir) 90%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
}
.studio__blok-nadpis span { color: var(--c-sampan); font-weight: 700; }
.studio__blok-nadpis b { color: var(--c-papir); }
/* nadpis bloku a přepínač (filtr barev, velikost samolepky) v jednom řádku */
.studio__blok-hlava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.studio__blok-hlava .studio__blok-nadpis { margin: 0; }
.studio__blok.studio__blok-hlava { margin-bottom: 0; }
.studio__radek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 0.75rem; }
/* název nahraného loga má vlastní řádek — tlačítko a název firmy si drží šířku */
.studio__soubor { grid-row: 2; grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio__soubor::before { content: "✓ "; color: var(--c-sampan); }
.studio__soubor[hidden] { display: none; }
.studio__nahrat {
    display: grid;
    place-items: center;
    min-height: 2.75rem;
    padding: 0.25rem 0.75rem;
    line-height: 1.2;
    text-align: center;
    border: 1px dashed color-mix(in oklab, var(--c-sampan) 50%, transparent);
    border-radius: var(--r-velky);
    color: var(--c-sampan);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.studio__nahrat:hover,
.studio__nahrat:focus-within { background: color-mix(in oklab, var(--c-sampan) 10%, transparent); }
.studio__soubor { color: color-mix(in oklab, var(--c-papir) 70%, transparent); font-size: 0.78rem; }   /* umístění viz .studio__radek */
.studio__vstup {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 2.75rem;
    padding: 0 0.875rem;
    border: 1px solid color-mix(in oklab, var(--c-papir) 15%, transparent);
    border-radius: var(--r-velky);
    background: color-mix(in oklab, var(--c-papir) 5%, transparent);
    color: var(--c-papir);
    font: inherit;
    font-size: 0.84rem;
}
.studio__vstup::placeholder { color: color-mix(in oklab, var(--c-papir) 60%, transparent); }
.studio__vstup:focus { border-color: var(--c-sampan); outline: none; }
.studio__texty { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.studio__text { min-width: 0; }
/* Příležitost, tón a tlačítko v jedné řadě se stejnou výškou */
.studio__navrh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: stretch; gap: 0.5rem; margin-top: 0.75rem; }
.studio__maly-select {
    min-width: 0;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid color-mix(in oklab, var(--c-papir) 15%, transparent);
    border-radius: var(--r-pilulka);
    background: var(--c-grafit);
    color: var(--c-papir);
    font: inherit;
    font-size: 0.76rem;
}
.studio__navrhnout {
    height: 2.5rem;
    padding: 0 1rem;
    white-space: nowrap;
    border: 0;
    border-radius: var(--r-pilulka);
    background: linear-gradient(110deg, var(--c-sampan), var(--c-sampan-svetla), var(--c-sampan));
    background-size: 200% auto;
    color: var(--c-cerna-hluboka);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    animation: studio-trpyt 3s linear infinite;
}
.studio__navrhnout[hidden] { display: none; }
.studio__navrhnout:disabled { opacity: 0.7; cursor: progress; }

.studio__vina-pocet { color: color-mix(in oklab, var(--c-papir) 55%, transparent); font-weight: 500; }
/* rychlý filtr podle barvy */
.studio__barvy { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.studio__barva {
    padding: 0.25rem 0.75rem;
    border: 1px solid color-mix(in oklab, var(--c-papir) 15%, transparent);
    border-radius: var(--r-pilulka);
    background: transparent;
    color: color-mix(in oklab, var(--c-papir) 75%, transparent);
    font: inherit;
    font-size: 0.74rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.studio__barva:hover { border-color: color-mix(in oklab, var(--c-sampan) 60%, transparent); color: var(--c-papir); }
.studio__barva--zvolena { border-color: var(--c-sampan); background: var(--c-sampan); color: var(--c-cerna-hluboka); }
/* posuvná řada (vína, obaly) — jedna řada, posouvá se do strany (tažením, kolečkem, šipkami) */
.studio__rada { position: relative; }
.studio__pas {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--c-sampan) 50%, transparent) transparent;
    overscroll-behavior-x: contain;
}
.studio__posun {
    position: absolute;
    top: calc(50% - 1.5rem);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid color-mix(in oklab, var(--c-papir) 25%, transparent);
    border-radius: 50%;
    background: var(--c-grafit);
    color: var(--c-sampan);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
    cursor: pointer;
}
.studio__posun--zpet { left: -0.75rem; }
.studio__posun--dal { right: -0.75rem; }
.studio__posun[hidden] { display: none; }
.studio__posun:disabled { opacity: 0; pointer-events: none; }
.studio__posun .ikona { width: 1rem; height: 1rem; }
.studio__vino {
    flex: 0 0 5.25rem;
    display: block;
    scroll-snap-align: start;
    padding: 0.375rem;
    border-radius: var(--r-velky);
    background: color-mix(in oklab, var(--c-papir) 10%, transparent);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.studio__vino[hidden] { display: none; }
.studio__vino:hover { background: color-mix(in oklab, var(--c-papir) 20%, transparent); }
.studio__vino:has(input:checked) { background: var(--c-sampan); }
.studio__vino:has(input:focus-visible) { outline: 2px solid var(--c-sampan); outline-offset: 2px; }
.studio__vino-foto {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.75rem;
    background: var(--c-papir);
}
.studio__vino-foto img { width: auto; height: 3.5rem; mix-blend-mode: multiply; transition: transform 0.3s ease; }
.studio__vino:hover .studio__vino-foto img { transform: translateY(-4px); }
.studio__vino-nazev {
    display: block;
    margin-top: 0.25rem;
    overflow: hidden;
    color: color-mix(in oklab, var(--c-papir) 70%, transparent);
    font-size: 0.62rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;   /* jeden řádek; celý název je v title */
}
.studio__vino-meta { display: block; margin-top: 0.125rem; color: color-mix(in oklab, var(--c-papir) 50%, transparent); font-size: 0.6rem; white-space: nowrap; }
.studio__vino:has(input:checked) .studio__vino-nazev,
.studio__vino:has(input:checked) .studio__vino-meta { color: var(--c-cerna-hluboka); }

.studio__baleni {
    flex: 0 0 5.25rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 0.375rem;
    border-radius: var(--r-velky);
    background: color-mix(in oklab, var(--c-papir) 10%, transparent);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.studio__baleni:hover { background: color-mix(in oklab, var(--c-papir) 20%, transparent); }
.studio__baleni:has(input:checked) { background: var(--c-sampan); }
.studio__baleni:has(input:focus-visible) { outline: 2px solid var(--c-sampan); outline-offset: 2px; }
.studio__baleni-foto {
    display: grid;
    place-items: center;
    height: 3.5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #fff;   /* fotky obalů mají bílé pozadí */
}
.studio__baleni-foto img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; }
.studio__baleni:hover .studio__baleni-foto img { transform: scale(1.05); }
.studio__baleni-foto--zadne { background: color-mix(in oklab, var(--c-papir) 8%, transparent); color: color-mix(in oklab, var(--c-papir) 50%, transparent); }
.studio__baleni-foto--zadne .ikona { width: 1.25rem; height: 1.25rem; }
.studio__baleni-nazev {
    display: -webkit-box;
    min-height: 2.5em;
    margin-top: 0.25rem;
    overflow: hidden;
    color: color-mix(in oklab, var(--c-papir) 75%, transparent);
    font-size: 0.62rem;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.studio__baleni-cena { color: color-mix(in oklab, var(--c-papir) 50%, transparent); font-size: 0.6rem; }
.studio__baleni:has(input:checked) .studio__baleni-nazev,
.studio__baleni:has(input:checked) .studio__baleni-cena,
.studio__baleni:has(input:checked) .studio__baleni-foto--zadne { color: var(--c-cerna-hluboka); }
.studio__prepinac {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--r-velky);
    background: color-mix(in oklab, var(--c-papir) 10%, transparent);
}
.studio__volba {
    padding: 0.3rem 0.875rem;
    border-radius: 0.75rem;
    color: color-mix(in oklab, var(--c-papir) 70%, transparent);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.4s ease;
}
.studio__volba:has(input:checked) { background: var(--c-sampan); color: var(--c-cerna-hluboka); }
.studio__volba:has(input:focus-visible) { outline: 2px solid var(--c-sampan); outline-offset: 2px; }
.studio__volba-nazev { display: block; font-size: 0.8rem; font-weight: 600; }

.studio__pocet { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; }
.studio__pocet .studio__blok-nadpis { margin: 0; }
.studio__ks-obal { color: color-mix(in oklab, var(--c-papir) 70%, transparent); font-size: 0.78rem; white-space: nowrap; }
.studio__ks {
    width: 4.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid color-mix(in oklab, var(--c-papir) 15%, transparent);
    border-radius: var(--r-velky);
    background: color-mix(in oklab, var(--c-papir) 5%, transparent);
    color: var(--c-papir);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
}
.studio__ks:focus { border-color: var(--c-sampan); outline: none; }
.studio__posuvnik {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--r-pilulka);
    background: linear-gradient(90deg, var(--c-sampan) var(--p), color-mix(in oklab, var(--c-papir) 15%, transparent) var(--p));
}
.studio__posuvnik::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 4px solid var(--c-sampan);
    border-radius: 50%;
    background: var(--c-papir);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--c-sampan) 25%, transparent);
    cursor: grab;
}
.studio__posuvnik::-moz-range-thumb { width: 22px; height: 22px; border: 4px solid var(--c-sampan); border-radius: 50%; background: var(--c-papir); }

.studio__cena {
    margin-top: auto;
    padding: 1.25rem;
    border-radius: var(--r-karta);
    background: var(--c-sampan);
    color: var(--c-cerna-hluboka);
}
.studio__cena-popisek { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.studio__cena-celkem { margin: 0; font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.studio__cena-rozpis { margin: 0.25rem 0 0; font-size: 0.76rem; opacity: 0.75; }
.studio__vlozit {
    width: 100%;
    margin-top: 1rem;
    padding: 0.875rem 1.5rem;
    border: 0;
    border-radius: var(--r-pilulka);
    background: var(--c-cerna-hluboka);
    color: var(--c-sampan);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.studio__vlozit:hover { transform: translateY(-2px); }
.studio__vlozit:disabled { opacity: 0.6; cursor: progress; transform: none; }

@keyframes studio-aurora {
    0% { transform: translate3d(-10%, -5%, 0) rotate(0deg) scale(1); }
    50% { transform: translate3d(8%, 6%, 0) rotate(20deg) scale(1.15); }
    100% { transform: translate3d(-10%, -5%, 0) rotate(0deg) scale(1); }
}
@keyframes studio-orbita { to { transform: rotate(360deg); } }
@keyframes studio-trpyt { to { background-position: 200% center; } }
@keyframes studio-prijezd {
    from { opacity: 0; transform: translateY(40px) rotateY(-35deg) scale(0.9); filter: blur(8px); }
    to { opacity: 1; filter: blur(0); }
}
@keyframes studio-pop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-120deg); }
    70% { transform: translate(-50%, -50%) scale(1.12) rotate(8deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes studio-tecka { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 6px transparent; } }

@media (max-width: 639px) {
    .studio__texty { grid-template-columns: 1fr; }
    .studio__navrh { grid-template-columns: 1fr 1fr; }
    .studio__navrhnout { grid-column: 1 / -1; }
    .studio__pocet { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.75rem; }
    .studio__pocet .studio__posuvnik { grid-row: 2; grid-column: 1 / -1; }   /* na úzkém displeji posuvník přes celou šířku */
    .studio__scena { min-height: 480px; }
    .studio__lahev { --lahev: 340px; }
    .studio__lupa { --lupa: 5.25rem; left: auto; right: 0.375rem; }   /* uvnitř rámu, scéna je úzká */
    .studio__orbita { width: 380px; height: 380px; }
    .studio__stitek-vino { max-width: calc(100% - 3rem); }
    .studio__medaile { top: 1rem; right: 1rem; --medaile: 3.25rem; }
}
@media (min-width: 768px) {
    .studio__nadpis { font-size: 4.4rem; }
    .studio__panel { padding: 2rem; }
}
@media (min-width: 1024px) {
    .studio__mrizka { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
    /* scéna se při posunu drží v okně pod hlavičkou; lahev se vejde i do nižšího okna */
    .studio__scena {
        position: sticky;
        top: calc(var(--vyska-hlavy) + 1rem);
        align-self: start;
        height: calc(100vh - var(--vyska-hlavy) - 2rem);
        min-height: 520px;
        max-height: 52rem;
    }
    .studio__lahev { --lahev: min(560px, calc(100vh - var(--vyska-hlavy) - 15rem)); }
}
@media (prefers-reduced-motion: reduce) {
    .studio__aurora::before, .studio__aurora::after, .studio__orbita, .studio__trpyt, .studio__navrhnout,
    .studio__lahev--prijezd, .studio__samolepka--pop, .studio__tecka { animation: none !important; }
}