/* ---------- FONTY ---------- */
@font-face { font-family:'HelveticaExtended'; src:url('HelveticaNeueLTProBdEx.otf'); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'HelveticaLight';    src:url('HelveticaNeueLTProLt.otf');   font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'HelveticaBold';     src:url('HelveticaNeueLTProBd.otf');   font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'HelveticaExtended53'; src:url('HelveticaNeueLTProEx.otf'); font-weight:normal; font-style:normal; font-display:swap; }

/* =========================================================
   PROMĚNNÉ (Custom Properties)
========================================================= */
:root {
    /* — Layout — */
    --content-max:     85.25rem;
    --container-pad:   3.75rem;
    --card-gap:        6rem;
    --space-section:   9.375rem;
    --space-title:     4.375rem;
    --radius:          0.25rem;

    /* — Accent palette (minimalistická černá / grafit) — */
    --violet-1: 20,20,20;
    --violet-2: 90,90,90;
    /* Hlavní akcentní barva (použij jako rgba(var(--accent),opacity)) */
    --accent: 20,20,20;
    /* Hlavní text (skoro černá) */
    --ink: #111114;

    /* — Background tones (light mode) — */
    --bg-dark:      #ffffff;   /* hlavní pozadí stránky */
    --bg-darker:    #ececed;   /* interaktivní „darken" plochy (hover polí/tlačítek) */
    --bg-card:      #f4f4f5;   /* karty, panely, řádky na hover */
    --bg-hero-mid:  #fafafb;
    --bg-hero-end:  #f4f4f5;

    /* — Borders (tmavé na světlém) — */
    --border-subtle: rgba(0,0,0,0.08);
    --border-mid:    rgba(0,0,0,0.12);
    --border-hover:  rgba(0,0,0,0.28);

    /* — Text alpha levels (černá na světlém) — */
    --text-dim-1: rgba(0,0,0,0.45);
    --text-dim-2: rgba(0,0,0,0.50);
    --text-dim-3: rgba(0,0,0,0.58);
    --text-dim-4: rgba(0,0,0,0.66);
    --text-dim-5: rgba(0,0,0,0.78);

    /* — Font families — */
    --font-extended:    'HelveticaExtended', sans-serif;
    --font-extended-53: 'HelveticaExtended53', sans-serif;
    --font-light:       'HelveticaLight', sans-serif;
    --font-bold:        'HelveticaBold', sans-serif;

    /* — Premium easing curves — */
    --ease-spring:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out:       cubic-bezier(0.25, 1, 0.5, 1);
    --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-preloader: cubic-bezier(0.76, 0, 0.24, 1);

    /* — Duration tokens — */
    --t-fast: 0.45s;
    --t-med:  0.6s;
    --t-slow: 0.9s;

    /* — Stacked-scroll stín (náběžná hrana sekcí najíždějících přes připnuté) — */
    --stack-shadow: 0 -0.5rem 1.5rem rgba(0,0,0,0.10);
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; cursor:none; }

html { scroll-behavior:smooth; overflow-x:clip; }

/* ─── LENIS ─── */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-stopped { overflow:hidden; }
.lenis.lenis-smooth iframe { pointer-events:none; }

body {
    background-color: var(--bg-dark);
    color: var(--ink);
    font-family: var(--font-light);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:clip;
}

img { display:block; max-width:100%; }
a { color:inherit; }

/* ─── STACKED SCROLLING (homepage) ───
   Hero scrolluje normálně. Pak dvě připnuté scény, na které postupně najedou
   překrývající sekce (stejný princip jako na stránce umělce — sticky vrstva +
   překrývající sekce s vyšším z-indexem a plným pozadím):
     1) UMĚLCI se připnou (z1) → EVENTY (z2) na ně najedou.
     2) O AGENTUŘE se připne (z3) → NAŠI UMĚLCI + FOOTER (z4) na ni najedou.
   Mezi tím se scrolluje normálně. Připnuté scény jsou 100vh, aby plně překryly to pod sebou.
   Navigace je fixed (z-index 1000), takže zůstává vždy nahoře. */
.home .events-section {
    position: relative;
    z-index: 2;
}
.home .about-section {
    position: sticky; top: 0; z-index: 3;
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    /* menší padding než ostatní sekce, aby se připnutá scéna vešla do 100vh */
    padding-top: clamp(1.5rem, 4vh, 3rem);
    padding-bottom: clamp(1.5rem, 4vh, 3rem);
}
/* video o agentuře je 4/5 (vysoké) – při připnutí mu omezíme výšku, ať se scéna
   vejde do 100vh; object-fit:cover se postará o správný ořez beze zkreslení */
.home .about-section .about-visual {
    max-height: 64vh;
    align-self: center;
}
.home .preview-section,
.home .site-footer {
    position: relative;
    z-index: 4;
}

/* Lehký stín pod náběžnou hranou sekcí, co najíždějí přes připnuté (stacked scroll) */
.home .artists-section,   /* najíždí přes hero */
.home .events-section,    /* najíždí přes UMĚLCE */
.home .preview-section {  /* najíždí přes O AGENTUŘE */
    box-shadow: var(--stack-shadow);
}

/* ---------- SDÍLENÝ KONTEJNER ---------- */
.container {
    width:100%;
    max-width:calc(var(--content-max) + var(--container-pad) * 2);
    margin:0 auto;
    padding-left:var(--container-pad);
    padding-right:var(--container-pad);
}

/* ---------- NADPIS SEKCE ---------- */
.section-title {
    font-family: var(--font-extended);
    font-size: clamp(1.75rem, 3.5vw, 2.875rem);
    line-height:1.05;
    letter-spacing:-0.02em;
    margin-bottom:var(--space-title);
}

/* ---------- SCROLL-REVEAL ---------- */
.js .reveal {
    opacity:0; transform:translateY(2.25rem);
    transition:opacity var(--t-slow) ease, transform var(--t-slow) var(--ease-spring);
}
.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity:1; transform:none; transition:none; }
}

/* =========================================================
   HERO + VIDEO
========================================================= */
.hero-section {
    /* Hero scrolluje úplně normálně; připíná se až sekce s umělci pod ním. */
    position:relative; z-index:0;
    width:100%; height:100vh; min-height:47.5rem;
}
.hero-bg { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-bg video { width:100vw; height:100%; object-fit:cover; }
.css-overlay-dark { position:absolute; inset:0; background:rgba(0,0,0,0.32); z-index:2; }
.css-overlay-fade {
    display:none;   /* hero fade odebrán – flat design */
    position:absolute; bottom:0; left:0; width:100%; height:20rem;
    z-index:3;
}

.hero-content { position:relative; z-index:4; max-width:90rem; margin:0 auto; height:100%; }

/* ---------- NAVIGACE ---------- */
.top-nav {
    /* Grid 1fr auto 1fr: krajní sloupce jsou VŽDY stejně široké → logo přesně uprostřed
       (flex:1 sem tam dával drobný posun). */
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
    width:100%;
    max-width:calc(var(--content-max) + var(--container-pad) * 2);
    margin-left:auto; margin-right:auto;
    padding: 1.5rem var(--container-pad);
    transition: padding 0.5s var(--ease-spring);
}
.nav-left, .nav-right { display:flex; align-items:center; gap:clamp(1.5rem, 3.5vw, 6.25rem); min-width:0; }
/* Krajní odkazy k okrajům obsahu (NEVÁZANÁ POPTÁVKA vlevo, KONTAKT vpravo) → nav je
   stejně široký jako obsah stránky. Logo zůstává uprostřed díky gridu 1fr auto 1fr. */
.nav-left { justify-content:flex-start; }
.nav-right { justify-content:flex-end; }
.nav-center {
    display:flex; justify-content:center; flex:0 0 auto;
    min-width:0; overflow:hidden;
    /* padding = dýchací prostor kolem loga, ať na něj boční odkazy nelepí.
       Při scrollu se spolu s max-width:0 zkolabuje (overflow:hidden). */
    padding:0 clamp(1.5rem, 3vw, 3.25rem);
    max-width:20rem; opacity:1; transform:translateY(0);
    transition: max-width 0.5s var(--ease-spring),
                padding 0.5s var(--ease-spring),
                opacity 0.45s var(--ease-spring),
                transform 0.5s var(--ease-spring);
}
.logo { width:12rem; height:auto; transition: filter 0.45s var(--ease-out); }

/* Restore interactivity for all links inside the pointer-events:none nav containers */
.top-nav a { pointer-events: auto; }

/* Subpage (umělci, tým, eventy, poptávka…) mají SVĚTLÉ pozadí nahoře → logo a nav
   tmavé hned od začátku (žádný blend mode, žádné probliknutí). Výjimka: artist-page
   má tmavé hero foto, tak tam zůstává bílé (řeší se níže přes is-scrolled). */
body.subpage:not(.artist-page) .nav-link { color: var(--ink); }
body.subpage:not(.artist-page) .logo { filter: brightness(0); }
body.subpage:not(.artist-page) .nav-link::after { background: var(--ink); }

.nav-link {
    font-family: var(--font-extended);
    font-size:1.0625rem; letter-spacing:0.1em; color:#fff; text-decoration:none;
    position:relative; padding-bottom:0.25rem;
    white-space:nowrap;   /* ať se „NEZÁVAZNÁ POPTÁVKA" nezalamuje na dva řádky */
    transition: transform 0.4s var(--ease-spring), color 0.45s var(--ease-out);
}
.nav-link::after {
    content:''; position:absolute; bottom:-0.25rem; left:50%;
    transform:translateX(-50%);
    height:0.0625rem; width:0%; opacity:0;
    background: rgba(255,255,255,0.9);
    box-shadow:none;
    transition:width 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
.nav-link:hover::after { width:100%; opacity:1; }
.nav-link:hover { transform: translateY(-0.125rem); }

.hero-title-container { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; text-align:center; }
.hero-title { max-width:100%; height:auto; margin:0 auto; }

/* =========================================================
   SEKCE UMĚLCI (carousel)
========================================================= */
.artists-section {
    /* Připnutá scéna: po dojetí k umělcům se sekce připne pod header a zůstane
       stát, zatímco eventy + o agentuře na ni neprůhledně najedou (jako .artist-bio). */
    /* --umelci-tuck = o kolik sekce vyscrolluje nahoru (nadpis UMĚLCI zajede pod
       nav bar), než se připne. Pak na připnutý karusel najedou eventy.
       Extra výška (100vh + tuck) dává prostor, aby se nadpis stihl schovat
       DŘÍV, než eventy začnou překrývat. */
    --umelci-tuck: clamp(6rem, 10vh, 8rem);
    position:sticky; top:calc(-1 * var(--umelci-tuck)); z-index:1;
    width:100%;
    min-height:calc(100vh + var(--umelci-tuck));
    display:flex; flex-direction:column; justify-content:flex-start;
    padding-top: clamp(3.5rem, 7vh, 5rem);
    padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
    background: var(--bg-dark);
    overflow:hidden;
}
.artists-glow {
    display:none;   /* glow odebrán – flat design */
    position:absolute; top:16%; left:50%; transform:translateX(-50%);
    width:68.75rem; height:38.75rem; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse at center,
        rgba(var(--violet-2),0.06) 0%, rgba(var(--violet-2),0.03) 42%, rgba(0,0,0,0) 70%);
    filter:blur(3.125rem);
}
.artists-content { position:relative; z-index:1; }

.carousel-wrapper {
    overflow:hidden; padding:1.625rem 0 2.5rem;
}
.carousel-track { display:flex; gap:var(--card-gap); will-change:transform; }

.artist-card {
    flex:0 0 auto;
    width:var(--card-w, 24.4375rem);
    text-decoration:none;
    display:flex; flex-direction:column;
    padding:1rem;
    position:relative;
    background: var(--bg-card);
    border:0.0625rem solid var(--border-subtle);
    border-radius:0.25rem; cursor:none;
    transition:border-color var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out), filter var(--t-med) var(--ease-out);
}
.artist-card:hover { border-color: var(--border-hover); }
.artist-card::before {
    display:none;   /* gradientový glow okraj odebrán dle požadavku */
    content:''; position:absolute; inset:-0.0625rem;
    border-radius:0.3125rem; padding:0.0625rem;
    background:conic-gradient(
        from var(--border-angle),
        transparent 0%,
        transparent 72%,
        rgba(var(--accent),0.5) 82%,
        rgba(var(--accent),0.9) 88%,
        rgba(var(--accent),0.5) 94%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 0.25rem rgba(var(--accent),0.45));
    opacity:0;
    transition: opacity 0.4s var(--ease-out);
    pointer-events:none;
}
.artist-card:hover::before {
    opacity:1;
    animation: borderSpin 2.2s linear infinite;
}
.artist-photo-wrap { width:100%; overflow:hidden; aspect-ratio:334/393; }
.artist-photo {
    width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
    will-change:transform; backface-visibility:hidden;
    transition:transform var(--t-med) var(--ease-out);
}
.artist-card:hover .artist-photo { transform:scale(1.05); }
.artist-info {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:1rem;
}
.artist-name {
    font-family: var(--font-light);
    font-size: clamp(1.375rem, 2.8vw, 2.25rem);
    letter-spacing:-0.01em;
    text-transform:uppercase;
}
.artist-arrow { width:1.625rem; height:1.625rem; filter:brightness(0); transition:transform 0.4s var(--ease-spring); flex-shrink:0; }
.artist-card:hover .artist-arrow { transform:translate(0.1875rem,-0.1875rem); }

.section-eyebrow {
    font-family: var(--font-bold);
    font-size:0.6875rem; letter-spacing:0.25em; text-transform:uppercase;
    color: var(--text-dim-1);
    margin-bottom:1.25rem;
}

.artists-section .section-title { margin-bottom:2.75rem; }
/* Vysouvací reveal vyžaduje overflow:hidden – ten ale ořezává háčky/čárky nad velkými
   písmeny. Kompenzujeme horním paddingem (a stejně velkým záporným marginem, aby se
   layout nezměnil) + volnějším line-height u spanu, aby diakritika seděla UVNITŘ boxu
   i u víceřádkových nadpisů (O AGENTUŘE<br>LIVE DISTRICT). */
.title-reveal { overflow:hidden; padding-top:0.4em; margin-top:-0.4em; padding-bottom:0.375rem; }
.title-reveal > span {
    display:block;
    line-height:1.18;
    transform:translateY(110%);
    transition:transform 1.1s var(--ease-spring) 0.1s;
}
.title-reveal.in > span { transform:translateY(0); }

/* =========================================================
   SEKCE EVENTY
========================================================= */
.events-section {
    position:relative; width:100%;
    padding-top:var(--space-section); padding-bottom:var(--space-section);
    background: var(--bg-dark);
}
.events-table { width:100%; display:flex; flex-direction:column; gap:0; }

.events-header, .events-row {
    display:grid; grid-template-columns:1fr 2.6fr 2.6fr 1.5fr;
    align-items:center;
    padding-left:0.75rem; padding-right:0.75rem;
}
.events-header {
    font-family: var(--font-bold); font-size:0.75rem; letter-spacing:0.15em;
    text-transform:uppercase; color: var(--text-dim-3);
    padding-bottom:1.25rem;
    border-bottom:0.0625rem solid var(--border-mid);
}
.col-umelec { text-align:right; }

.events-row {
    font-family: var(--font-light);
    font-size: clamp(1.125rem, 2.8vw, 2.25rem);
    line-height:1;
    height:3.8125rem; cursor:none;
    position:relative; background:none;
    border-radius:0.375rem;
    transition:transform 0.5s var(--ease-spring), background-color 0.4s var(--ease-spring);
    border-bottom:0.0625rem solid rgba(0,0,0,0.07);
}
a.events-row { color: inherit; text-decoration: none; }   /* řádek = odkaz na goout/eventlook */
.events-row:hover { background-color: var(--bg-card); }
.events-row::after {
    content:''; position:absolute; bottom:0; left:0; right:0;
    height:0.0625rem;
    background: rgba(var(--accent),0.85);
    box-shadow:none;
    transform:scaleX(0);
    transform-origin:right center;
    transition:transform 0.5s var(--ease-out);
}
.events-row:hover::after { transform:scaleX(1); }
.events-row .col-kdy    { color: var(--ink); font-family: var(--font-light); }
.events-row .col-lokace { color: var(--text-dim-4); font-family: var(--font-light); transition:color 0.4s var(--ease-spring); }
.events-row .col-club   { color: var(--ink); font-family: var(--font-light); }
.events-row .col-umelec { color: var(--ink); font-family: var(--font-extended-53); }
.events-row:hover .col-lokace { color: var(--ink); }
/* obal klub+město (vytváří JS); na desktopu průhledný → tabulka beze změny */
.col-venue { display: contents; }
/* umělci bez eventů: jen lehká čára pod nadpisem EVENTY */
.events-empty { width: 100%; height: 0.0625rem; background: var(--border-mid); margin: 0.75rem 0 1rem; }

/* Stránka EVENTY */
.events-page-section {
    width:100%; padding:clamp(3.75rem,8vh,6.25rem) 0 clamp(5rem,12vh,8.75rem) 0;
}
.events-page-title {
    font-family: var(--font-extended);
    font-size: clamp(1.75rem, 3.5vw, 2.875rem);
    letter-spacing:-0.02em;
    text-align:center; text-transform:uppercase;
    margin:2.5rem 0 clamp(2.5rem,6vh,5rem) 0; font-weight:normal;
}

/* =========================================================
   SEKCE O AGENTUŘE
========================================================= */
.about-section { position:relative; width:100%; padding:var(--space-section) 0; background: var(--bg-dark); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }

.about-text { position:relative; }.about-heading {
    font-family: var(--font-extended);
    font-size: clamp(1.75rem, 3.5vw, 2.875rem);
    line-height:1.08;
    letter-spacing:-0.02em;
    margin-bottom:4.25rem; position:relative; z-index:1;
}
.about-accent-line {
    height:0.125rem; width:0%; max-width:7.5rem; margin:1.375rem 0 2.75rem;
    background: rgba(0,0,0,0.45);
    transition:width 1s var(--ease-out);
    position:relative; z-index:1;
}
.about-accent-line.is-visible { width:100%; }
.about-text p { font-size:1.0625rem; line-height:1.75; color: var(--text-dim-5); max-width:36.25rem; position:relative; z-index:1; }
.about-text p + p { margin-top:1.75rem; }
.about-visual {
    width:100%; aspect-ratio:4/5; overflow:hidden; background:#eaeaea;
    border-radius:0.25rem;
    box-shadow:0 1.25rem 3.75rem rgba(0,0,0,0.12);
}
.about-video {
    width:100%; height:100%; object-fit:cover; display:block;
    will-change:transform; backface-visibility:hidden;
    transition:transform var(--t-med) var(--ease-out);
}
.about-visual:hover .about-video { transform:scale(1.05); }

/* =========================================================
   NÁHLED NAŠI UMĚLCI + KOLÁŽ
========================================================= */
.preview-section {
    position:relative; width:100%; background: var(--bg-dark);
    padding-top: clamp(5rem, 12vh, 10rem);
    padding-bottom: clamp(5rem, 12vh, 10rem);
}
.preview-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:3.75rem; }
.preview-head .section-title { margin-bottom:0; }

/* ─── ARTIST BENTO GRID ─── */
.bento-fade {
    width:100%;
    margin-top:3.75rem;
    padding:1.125rem 0;
    overflow:hidden;
}
/* Nekonečný marquee – track plynule jede doleva, na hover se pozastaví */
.bento-track {
    display:flex;
    width:max-content;
    animation:bentoScroll 60s linear infinite;
    will-change:transform;
}
.bento-fade:hover .bento-track { animation-play-state:paused; }
@keyframes bentoScroll {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); }   /* track = 2 identické poloviny → bezešvý loop */
}

/* Bento batch – jen čtverce a vertikální obdélníky (žádné horizontální tahy).
   Čtvercové buňky (stejný clamp pro sloupce i řady). */
.bento-mosaic {
    display:grid;
    grid-template-columns:repeat(8, clamp(6.75rem, 11.5vw, 10.625rem));
    grid-template-rows:repeat(3, clamp(6.75rem, 11.5vw, 10.625rem));
    gap:0.75rem;
    margin-right:0.75rem;   /* mezera mezi batchi (místo flex gapu kvůli přesnému -50% loopu) */
    flex-shrink:0;
    position:relative;   /* offsetLeft/Top relativně k batchi pro crowd parting */
}
/* PRVNÍ batch – pevná hierarchie dle důležitosti (dominant M = 2×3). */
.bento-fixed {
    grid-template-areas:
        "M M e f a b c d"
        "M M e f a b c d"
        "M M e f g h i j";
}
.bento-fixed > :nth-child(1)  { grid-area:M; }   /* #1 – dominantní centrální (2×3) */
.bento-fixed > :nth-child(2)  { grid-area:e; }   /* #2–3 – vysoké vertikály (1×3) */
.bento-fixed > :nth-child(3)  { grid-area:f; }
.bento-fixed > :nth-child(4)  { grid-area:a; }   /* #4–7 – vertikály (1×2) */
.bento-fixed > :nth-child(5)  { grid-area:b; }
.bento-fixed > :nth-child(6)  { grid-area:c; }
.bento-fixed > :nth-child(7)  { grid-area:d; }
.bento-fixed > :nth-child(8)  { grid-area:g; }   /* #8–11 – čtverce (1×1) */
.bento-fixed > :nth-child(9)  { grid-area:h; }
.bento-fixed > :nth-child(10) { grid-area:i; }
.bento-fixed > :nth-child(11) { grid-area:j; }
/* NÁSLEDNÉ batche – náhodné: plní se po sloupcích, každá dlaždice span 1 (čtverec)
   nebo span 2 (vertikál); přiřazuje JS. */
.bento-random {
    grid-auto-flow:column;
    grid-template-areas:none;
}

.bento-item {
    display:block; position:relative;
    background: var(--bg-card);
    border-radius:0;
    border:0.0625rem solid var(--border-subtle);
    transition:transform 0.55s var(--ease-spring),
               opacity var(--t-med) var(--ease-spring),
               filter var(--t-med) var(--ease-spring);
}
.bento-item::before {
    display:none;   /* glow okraj odebrán – flat design */
    content:''; position:absolute; inset:-0.0625rem;
    border-radius:0; padding:0.0625rem; z-index:2;
    background:conic-gradient(
        from var(--border-angle),
        transparent 0%, transparent 72%,
        rgba(var(--accent),0.5) 82%,
        rgba(var(--accent),0.9) 88%,
        rgba(var(--accent),0.5) 94%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 0.25rem rgba(var(--accent),0.45));
    opacity:0; transition: opacity 0.6s var(--ease-out); pointer-events:none;
}
.bento-item:hover::before {
    opacity:1; animation: borderSpin 3.5s linear infinite;
}
.bento-item picture { display:block; width:100%; height:100%; }
.bento-item img {
    width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
    border-radius:0;
    will-change:transform; backface-visibility:hidden; transform:translateZ(0);
}
/* Hover: zvětšení + vyzdvižení nad ostatní (z-index), hrany zůstanou viditelné */
.bento-item:hover {
    transform:scale(1.05);
    z-index:10;
}


/* Ostatní dlaždice se ztlumí, když některou najedeš */
/* Hover focus: ztlumí CELOU koláž (všechny batche), ne jen jeden – zvýrazní najetou dlaždici.
   Jen opacity (GPU, levné) – žádný grayscale filtr, který sekal. */
.bento-track:has(.bento-item:hover) .bento-item:not(:hover) {
    opacity:0.32;
}

/* Stejný styl jako .form-submit (standardní tlačítko webu) – animovaný conic
   glow okraj na hover, jemné pozadí, žádný statický rámeček. */
.btn-outline {
    position:relative; display:inline-block;
    font-family: var(--font-bold); font-size:0.875rem; letter-spacing:0.1em;
    text-transform:uppercase; text-decoration:none; white-space:nowrap; color: var(--ink); cursor:none;
    padding:1.125rem 3.125rem;
    border:0.0625rem solid var(--border-mid);
    background:transparent;
    border-radius:0.25rem;
    transition:background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.5s var(--ease-spring);
}
.btn-outline:hover { background:#000; color:#fff; border-color:#000; transform:translateY(-0.125rem); }
.home .btn-outline::before { display:none; }   /* glow okraj na HP odebrán – flat design */

/* =========================================================
   FOOTER
========================================================= */
.site-footer {
    width:100%;
    background:var(--bg-dark);
    position:relative; z-index:2;
    padding:5rem 3.75rem 2rem;
    display:flex; flex-direction:column; gap:2.5rem;
    margin-top:0 !important;
    border-top:none !important;
    box-shadow:none !important;
}
.footer-top {
    display:flex; justify-content:space-between; align-items:flex-start;
}
.footer-logo img {
    width:12.5rem; height:auto;
    filter:brightness(0);
    opacity:0.85; transition:opacity 0.5s var(--ease-spring);
}
.footer-logo:hover img { opacity:1; }
.footer-nav {
    display:flex; flex-direction:column; align-items:flex-end; gap:0.5rem;
}
.footer-nav a {
    font-family: var(--font-extended);
    font-size:0.8125rem; letter-spacing:0.06em; line-height:1.1; text-transform:uppercase;
    color: var(--ink); text-decoration:none; position:relative;
}
.footer-nav a::after {
    content:''; position:absolute; bottom:-0.25rem; left:50%;
    transform:translateX(-50%);
    height:0.0625rem; width:0%; opacity:0;
    background: rgba(0,0,0,0.75);
    transition:width 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
.footer-nav a:hover::after { width:100%; opacity:1; }
.footer-divider { display:none; }
.footer-bottom {
    display:flex; justify-content:space-between; align-items:center;
    font-family: var(--font-light);
    font-size:0.8125rem; color: var(--text-dim-2);
    flex-wrap:wrap; gap:0.75rem;
}
.footer-bottom-left,
.footer-bottom-right {
    display:flex; align-items:center; flex-wrap:wrap;
}
.footer-bottom a {
    color: var(--text-dim-2); text-decoration:none;
    transition:color 0.45s var(--ease-spring);
}
.footer-bottom a:hover { color: var(--ink); }
.separator { margin:0 0.625rem; opacity:0.4; font-size:0.625rem; }

/* =========================================================
   PODSTRÁNKY
========================================================= */
body.subpage {
    background:radial-gradient(120% 80% at 50% 0%, #ffffff 0%, #fafafa 45%, #f3f3f4 100%);
    min-height:100vh; display:flex; flex-direction:column;
}
body.gallery-page {
    background: var(--bg-dark);
}
.subpage-header {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background: transparent;
    pointer-events: none;
    /* mix-blend-mode:difference odebrán – na mobilu způsoboval sekání a černé probliknutí.
       Barvy loga/navigace řešíme explicitně podle typu stránky (níže). */
}
.page-main { flex:1 0 auto; width:100%; position:relative; z-index:2; }
body.subpage:not(.artist-page) .page-main { padding-top:5.625rem; }

/* =========================================================
   SOCIÁLNÍ IKONY
========================================================= */
.socials { display:flex; align-items:center; gap:0.875rem; }
.socials a {
    display:inline-flex; opacity:.8;
    transition:opacity 0.45s var(--ease-spring), transform 0.45s var(--ease-spring);
}
.socials a:hover { opacity:1; transform:translateY(-0.125rem); }
.socials svg { width:1.375rem; height:1.375rem; display:block; }

.socials-lg { justify-content:center; gap:1.875rem; }
.socials-lg svg { width:1.875rem; height:1.875rem; }

/* =========================================================
   GALERIE NAŠI UMĚLCI
========================================================= */
.gallery-section {
    width:100%;
    padding: clamp(2.5rem, 5vh, 3.75rem) 0 clamp(5rem, 12vh, 8.125rem) 0;
    position:relative;
    background:var(--bg-dark);
}
.gallery-section::before {
    content:''; position:absolute; top:10%; left:50%; transform:translateX(-50%);
    width:87.5rem; height:50rem; pointer-events:none; z-index:0;
    background:radial-gradient(ellipse at center,
        rgba(var(--violet-2),0.06) 0%, rgba(var(--violet-2),0.03) 38%, rgba(0,0,0,0) 68%);
    filter:blur(3.75rem);
}
.gallery-section .container { position:relative; z-index:1; }
.gallery-title {
    font-family: var(--font-extended);
    font-size: clamp(1.75rem, 3.5vw, 2.875rem);
    line-height:1.18;   /* prostor pro háčky/čárky (NAŠI UMĚLCI) */
    letter-spacing:-0.02em;
    /* padding-top dává prostor diakritice i v kompozitní vrstvě, kterou vytvoří
       reveal transform (iOS jinak vršek písmen ořízne do prvního scrollu).
       margin-top je o stejně menší, takže rozložení zůstává stejné. */
    padding-top:0.35em;
    text-align:center; margin:2.15em 0 5.625rem 0; text-transform:uppercase;
}
.gallery-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:2.875rem; }

@property --border-angle {
    syntax: '<angle>';
    initial-value: 0turn;
    inherits: false;
}

.gallery-card {
    display:flex; flex-direction:column;
    background: var(--bg-card);
    border:0.0625rem solid var(--border-subtle); border-radius:0.25rem;
    text-decoration:none; position:relative;
    transition:border-color var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out), filter var(--t-med) var(--ease-out);
}
.gallery-card::before {
    content:''; position:absolute; inset:-0.0625rem;
    border-radius:0.3125rem; padding:0.0625rem;
    background:conic-gradient(
        from var(--border-angle),
        transparent 0%,
        transparent 72%,
        rgba(var(--accent),0.5) 82%,
        rgba(var(--accent),0.9) 88%,
        rgba(var(--accent),0.5) 94%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 0.25rem rgba(var(--accent),0.45));
    opacity:0;
    transition: opacity 0.4s var(--ease-out);
    pointer-events:none;
}
.gallery-card:hover::before {
    opacity:1;
    animation: borderSpin 2.2s linear infinite;
}
@keyframes borderSpin {
    to { --border-angle: 1turn; }
}
.gallery-card:hover { border-color: var(--border-hover); }
.gallery-card > a { display:block; overflow:hidden; }
.gallery-card .photo {
    width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
    will-change:transform; backface-visibility:hidden;
    transition:transform var(--t-med) var(--ease-out);
}
.gallery-card:hover .photo { transform:scale(1.05); }
.gallery-card .card-footer {
    display:flex; justify-content:space-between; align-items:center;
    padding:0.75rem 1rem 1rem;
}
.gallery-card .card-name {
    font-family: var(--font-extended); font-size:1.3125rem;
    letter-spacing:-0.01em; text-transform:uppercase;
    text-decoration:none;
    transition: color 0.35s var(--ease-out);
}
.gallery-card:hover .card-name { color:rgba(var(--accent),0.9); }
.artist-socials { display:flex; gap:0.875rem; align-items:center; }
.artist-socials a {
    opacity:1; color: var(--ink);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;   /* ať se ikonky v úzkém footeru nesmáčknou (deformace TikToku) */
    transition:opacity 0.45s var(--ease-spring), transform 0.45s var(--ease-spring);
}
.artist-socials a:hover { opacity:1; transform:translateY(-0.125rem); }
.artist-socials svg { width:1.25rem; height:1.25rem; display:block; flex-shrink:0; }

/* =========================================================
   FORMULÁŘ
========================================================= */
.form-section { width:100%; padding:3.75rem 0 8.125rem 0; }
.form-intro { text-align:center; margin-bottom:5rem; }
.form-intro h1, .form-intro h2 {
    font-family: var(--font-bold);
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    letter-spacing:-0.02em;
    text-transform:uppercase; margin-bottom:1.375rem; font-weight:normal;
}
.form-intro p {
    font-family: var(--font-light);
    font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
    line-height: 1.6; letter-spacing: 0.004em;
    color: var(--text-dim-5);
    max-width: 36.25rem; margin: 0 auto;
    text-wrap: balance;
}

.inquiry-form { display:flex; flex-direction:column; max-width:61.25rem; margin:0 auto; }
.field { margin-bottom:2.625rem; }
.field label {
    display:block; font-family: var(--font-bold); font-size:0.8125rem; letter-spacing:0.15em;
    text-transform:uppercase; margin-bottom:0.75rem; color: var(--text-dim-3);
}
.field input, .field textarea {
    width:100%; font-family: var(--font-light); font-size:0.8125rem; color: var(--ink); cursor:text;
    text-transform:lowercase;
    background:rgba(0,0,0,0.04); border:none;
    border-radius:0.25rem; padding:0.9375rem 1.125rem;
    transition:border-color 0.5s var(--ease-spring), background 0.5s var(--ease-spring),
               box-shadow 0.5s var(--ease-spring);
}
.field input { height:3.625rem; }
.field textarea { min-height:9.375rem; resize:vertical; }
.field input::placeholder, .field textarea::placeholder {
    color:transparent; font-family: var(--font-light);
    transition: color 0.4s var(--ease-out);
}
.field input:hover::placeholder,
.field input:focus::placeholder,
.field textarea:hover::placeholder,
.field textarea:focus::placeholder {
    color:rgba(0,0,0,0.38);
}
.field input:focus, .field textarea:focus {
    outline:none; background:rgba(0,0,0,0.06);
    border-color:rgba(var(--violet-1),0.7);
    box-shadow:0 0 0 0.1875rem rgba(var(--violet-1),0.08);
}

.input-wrap {
    position:relative; border-radius:0.25rem;
    transition: background 0.3s var(--ease-out);
}
.input-wrap:hover input,
.input-wrap:hover textarea {
    background: var(--bg-darker);
    transition: background 0.8s var(--ease-out);
}
.input-wrap::before,
.form-submit::before,
.btn-outline::before {
    content:''; position:absolute; inset:-0.0625rem;
    border-radius:0.3125rem; padding:0.0625rem;
    background:conic-gradient(
        from var(--border-angle),
        transparent 0%,
        transparent 72%,
        rgba(var(--accent),0.5) 82%,
        rgba(var(--accent),0.9) 88%,
        rgba(var(--accent),0.5) 94%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 0.25rem rgba(var(--accent),0.45));
    opacity:0;
    transition: opacity 0.6s var(--ease-out);
    pointer-events:none;
}
.input-wrap:hover::before,
.input-wrap:focus-within::before,
.form-submit:hover::before,
.btn-outline:hover::before {
    opacity:1;
    animation: borderSpin 3.5s linear infinite;
}

.form-submit {
    align-self:flex-end; margin-top:0.875rem; font-family: var(--font-bold); position:relative;
    font-size:0.875rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); cursor:none;
    padding:1.125rem 3.125rem;
    border:0.0625rem solid var(--border-mid);
    background:transparent;
    border-radius:0.25rem;
    transition:background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.5s var(--ease-spring);
}
.form-submit:hover {
    background:#000; color:#fff; border-color:#000; transform:translateY(-0.125rem);
}

/* =========================================================
   NEZÁVAZNÁ POPTÁVKA — flat hover (sjednoceno s homepage)
========================================================= */
/* trošku větší mezera mezi (fixní) nav lištou a nadpisem */
body.poptavka-page .form-section { padding-top: clamp(5.25rem, 9vh, 7rem); }

/* =========================================================
   STRÁNKA ODESLÁNO — potvrzení po odeslání formuláře
========================================================= */
body.confirm-page .form-section { min-height:62vh; display:flex; align-items:center; }
body.confirm-page .form-intro { text-align:center; max-width:36rem; margin:0 auto; }
body.confirm-page .form-intro p { margin-top:1.25rem; }
body.confirm-page .form-intro .btn-outline { margin-top:2.75rem; }

/* pryč rotující conic-gradient glow okraj na polích i tlačítku */
body.poptavka-page .input-wrap::before,
body.poptavka-page .form-submit::before { display:none; }

/* pole: spodní akcentní linka, která se na hover/focus vytře zprava (jako eventy) */
body.poptavka-page .field { position:relative; }
body.poptavka-page .field::after {
    content:''; position:absolute; left:0; right:0; bottom:0;
    height:0.0625rem;
    background: rgba(var(--accent),0.85);
    transform:scaleX(0); transform-origin:right center;
    transition:transform 0.5s var(--ease-out);
    pointer-events:none;
}
body.poptavka-page .field:hover::after,
body.poptavka-page .field:focus-within::after { transform:scaleX(1); }

/* bez glow ringu na focus – čistý flat vzhled */
body.poptavka-page .field input:focus,
body.poptavka-page .field textarea:focus { box-shadow:none; }

/* =========================================================
   PER-UMĚLEC LADĚNÍ NÁHLEDOVÝCH FOTEK (zoom / kompozice)
   – platí jen pro karty (karusel + galerie), hover zoom zachován
========================================================= */
/* LBOY – mírný zoom (těsnější výřez) */
.artist-card[href="lboy.html"] .artist-photo,
.gallery-card a[href="lboy.html"] .photo {
    transform: scale(1.18);
    object-position: center 30%;
}
.artist-card[href="lboy.html"]:hover .artist-photo,
.gallery-card:hover a[href="lboy.html"] .photo { transform: scale(1.24); }

/* ERNE100 – kompozice: zoom + posun dolů, ať není nahoře prázdno */
.artist-card[href="erne100.html"] .artist-photo,
.gallery-card a[href="erne100.html"] .photo {
    transform: scale(1.22);
    object-position: center 80%;
}
.artist-card[href="erne100.html"]:hover .artist-photo,
.gallery-card:hover a[href="erne100.html"] .photo { transform: scale(1.28); }
/* ERNE100 v bento koláži – výřez na subjekt (jinak nahoře prázdno, subjekt uříznutý) */
.bento-item[href="erne100.html"] img { object-position: center 62%; }

/* =========================================================
   PRÁVNÍ / TEXTOVÁ STRÁNKA (ochrana osobních údajů)
========================================================= */
.legal-section {
    width:100%;
    padding: clamp(4.5rem, 11vh, 7.5rem) 0 clamp(5rem, 12vh, 8.75rem) 0;
}
.legal-section .container { max-width: calc(52rem + var(--container-pad) * 2); }
.legal-title {
    font-family: var(--font-extended);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    letter-spacing:-0.01em; line-height:1.2;
    text-transform:uppercase; font-weight:normal;
    margin-bottom:1rem;
}
.legal-meta {
    font-family: var(--font-light);
    font-size:1.0625rem; line-height:1.75; letter-spacing:0;
    color: var(--text-dim-5);
    display:block; margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.legal-content h2 {
    font-family: var(--font-extended);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    letter-spacing:-0.01em; line-height:1.2; font-weight:normal;
    text-transform:uppercase;
    margin: clamp(2.25rem, 5vh, 3.25rem) 0 1rem;
}
.legal-content > h2:first-child { margin-top:0; }
.legal-content p {
    font-family: var(--font-light);
    font-size:1.0625rem; line-height:1.75;
    color: var(--text-dim-5); max-width:46rem;
    margin-bottom:1.25rem;
}
.legal-content ul { list-style:none; margin:0 0 1.25rem; padding:0; max-width:46rem; }
.legal-content li {
    font-family: var(--font-light);
    font-size:1.0625rem; line-height:1.75; color: var(--text-dim-5);
    position:relative; padding-left:1.25rem; margin-bottom:0.5rem;
}
.legal-content li::before {
    content:''; position:absolute; left:0; top:0.7rem;
    width:0.3125rem; height:0.3125rem; border-radius:50%;
    background: rgba(var(--accent),0.6);
}
.legal-content a {
    color: var(--ink); text-decoration:underline;
    text-underline-offset:0.15em; text-decoration-color: rgba(0,0,0,0.3);
    transition: text-decoration-color 0.3s var(--ease-out);
}
.legal-content a:hover { text-decoration-color: var(--ink); }
.legal-divider {
    height:0.0625rem; width:100%; background: var(--border-mid);
    margin: clamp(2.5rem, 6vh, 3.75rem) 0;
}

/* =========================================================
   STRÁNKA TÝM
========================================================= */
.team-section { width:100%; padding:3.75rem 0 9.375rem 0; }
.team-title {
    font-family: var(--font-bold);
    font-size: clamp(1.75rem, 4vw, 3.25rem);
    line-height:1.18;   /* prostor pro háčky/čárky (TÝM) */
    letter-spacing:-0.02em;
    text-transform:uppercase; margin-bottom:3.4375rem; font-weight:normal;
}
.team-panel {
    background:rgba(0,0,0,0.025);
    border:0.0625rem solid rgba(0,0,0,0.08);
    border-radius:0.25rem; padding:3.75rem;
}
.team-card { display:grid; grid-template-columns:40% 1fr; gap:2.5rem; align-items:start; }
.team-photo { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:0.125rem; }
.team-name {
    font-family: var(--font-bold);
    font-size: clamp(1.375rem, 2.8vw, 2.25rem);
    letter-spacing:-0.01em;
    text-transform:uppercase; margin-bottom:2.125rem; font-weight:normal;
}
.team-bio p { font-size:1.0625rem; line-height:1.8; color:rgba(0,0,0,0.72); }
.team-bio p + p { margin-top:1.5rem; }
.team-socials { display:flex; justify-content:flex-end; gap:2rem; margin-top:3.375rem; }
.team-socials svg { width:1.875rem; height:1.875rem; }

/* =========================================================
   DETAIL UMĚLCE
========================================================= */
.artist-hero {
    position:relative; width:100%; height:100vh; min-height:37.5rem;
    overflow:hidden;
}
.artist-page .top-nav {
    position:fixed; top:0; left:0; right:0; width:100%; z-index:1000;
    background: transparent;
    pointer-events: none;
    /* mix-blend-mode odebrán (sekání na mobilu) – barvy řešíme explicitně */
}

.artist-hero-photo { position:absolute; inset:0; }
.artist-hero-photo img {
    width:100%; height:100%; object-fit:cover; object-position:center 20%;
    will-change:transform; backface-visibility:hidden;
}

.artist-hero-overlay {
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(0deg, rgba(8,8,10,0.92) 0%, rgba(5,5,8,0.45) 35%, transparent 65%);
}

.artist-hero-name {
    position:absolute; bottom:clamp(2.25rem, 6vh, 5rem); left:clamp(2.25rem, 4vw, 5rem);
    z-index:2;
}
.artist-hero-name span {
    font-family: var(--font-extended);
    font-size:clamp(3.25rem, 11vw, 11.875rem);
    text-transform:uppercase;
    letter-spacing:-0.03em; line-height:0.95;   /* dost místa pro háček (VLAĎKYSYN) */
    color:#fff; display:block;
}

/* ── About section (editorial 2-col grid) ── */
.artist-about { background: var(--bg-dark); padding:clamp(3.75rem, 10vh, 8.75rem) 0; }
.artist-about-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}
.artist-about-eyebrow {
    font-family: var(--font-bold); font-size:0.6875rem;
    letter-spacing:0.22em; text-transform:uppercase;
    color:rgba(0,0,0,0.5); margin-bottom:1.25rem; display:block;
}
.artist-about-heading {
    font-family: var(--font-extended);
    font-size:clamp(1.625rem, 3.2vw, 2.875rem);
    letter-spacing:-0.02em; text-transform:uppercase; line-height:1.18;
}
.artist-about-text p {
    font-size:1.0625rem; line-height:1.75;
    color:rgba(0,0,0,0.75); margin-bottom:1.75rem;
}
.artist-about-text .socials-lg { margin-top:2.5rem; }

.artist-about-portrait {
    position:relative; aspect-ratio:4/5;
    overflow:hidden; border-radius:0.25rem;
    box-shadow:0 1.25rem 3.125rem rgba(0,0,0,0.12);
}
.artist-about-portrait img {
    width:100%; height:100%; object-fit:cover; object-position:center 15%;
    display:block; will-change:transform; backface-visibility:hidden;
    transition:transform var(--t-med) var(--ease-out);
}
.artist-about-portrait:hover img { transform:scale(1.03); }

/* Centered bio – editorial lead */
.artist-bio { width:100%; padding:clamp(5.25rem,12vh,8.25rem) 0 clamp(3.75rem,8vh,5.375rem); text-align:center; }
.artist-bio .container { display:flex; flex-direction:column; align-items:center; }
.artist-bio-eyebrow {
    font-family: var(--font-bold);
    font-size:0.6875rem; letter-spacing:0.28em; text-transform:uppercase;
    color:rgba(0,0,0,0.5);
    margin-bottom:1.875rem; display:block;
}
.artist-bio p {
    font-family: var(--font-light);
    font-size:clamp(1.0625rem, 1.35vw, 1.3125rem);
    line-height:1.6; letter-spacing:0.004em;
    color:rgba(0,0,0,0.82);
    max-width:43.75rem; margin:0 auto;
    text-wrap:balance;
}
.artist-bio .artist-bio-divider {
    width:3rem; height:0.0625rem; margin:2.875rem auto 0;
    background:linear-gradient(90deg, transparent, rgba(0,0,0,0.35), transparent);
}
.artist-bio .socials-lg { margin-top:2.625rem; }

.artist-release { width:100%; padding:1.875rem 0 6.875rem 0; }

.artist-page .events-section,
.artist-page .form-section { background:transparent; }
.artist-page .events-section { padding-top:2.5rem; }

/* =========================================================
   ARTIST PAGE – sjednocený layout (dříve scopováno na katannah)
========================================================= */

/* Tmavší vršek overlaye kvůli čitelnosti navigace nad fotkou */
body.artist-page .artist-hero-overlay {
    background:
        linear-gradient(to bottom, rgba(5,5,8,0.88) 0%, transparent 18%),
        linear-gradient(to top, rgba(8,8,10,0.92) 0%, rgba(5,5,8,0.45) 35%, transparent 65%);
}

/* Bio zarovnané vlevo na hranu formuláře */
body.artist-page .artist-bio {
    text-align:left;
    padding:clamp(4.5rem,10vh,7.25rem) 0 clamp(6.875rem,15vh,10.625rem);
}
body.artist-page .artist-bio .container {
    align-items:flex-start;
    max-width:calc(61.25rem + var(--container-pad) * 2);
}
body.artist-page .artist-bio p { margin-left:0; margin-right:0; max-width:38.75rem; }
body.artist-page .artist-bio .socials-lg { justify-content:flex-start; }

/* Nadpis i text poptávky zarovnané vlevo na hranu formuláře */
body.artist-page .form-intro {
    text-align:left;
    max-width:61.25rem;
    margin-left:auto; margin-right:auto;
}
body.artist-page .form-intro p { margin-left:0; margin-right:0; }

/* Pole dotazníku: spodní akcentní podtržení ve stylu eventů (vytře se zprava).
   Pozicováno přes .field (každá stránka ho má), takže není potřeba .input-wrap. */
body.artist-page .input-wrap::before { display:none; }   /* vypnout rotující conic rámeček */
body.artist-page .field { position:relative; }
body.artist-page .field input,
body.artist-page .field textarea { display:block; }
body.artist-page .field::after,
body.artist-page .form-submit::before {
    content:''; position:absolute;
    inset:auto; top:auto; left:0; right:0; bottom:0;
    width:auto; height:0.0625rem;
    padding:0; border-radius:0;
    background:linear-gradient(90deg, transparent 0%, rgba(var(--accent),0.9) 50%, transparent 100%);
    -webkit-mask:none; mask:none; filter:none;
    box-shadow:0 0.0625rem 0.3125rem rgba(var(--accent),0.45);
    opacity:1;
    transform:scaleX(0); transform-origin:right center;
    transition:transform 0.5s var(--ease-out);
    pointer-events:none;
}
body.artist-page .field:hover::after,
body.artist-page .field:focus-within::after,
body.artist-page .form-submit:hover::before {
    transform:scaleX(1);
    animation:none;
}
/* Ztmavení pole na hover (jako u eventů řádky) */
body.artist-page .field:hover input,
body.artist-page .field:hover textarea {
    background:var(--bg-darker);
}

/* ── Parallax: hero se jménem zůstane připnutý (nahoře zůstane vidět pruh
   se jménem + kousek místa), bio se připne pod ním a sekce poptávky přes
   obojí při scrollu najede. --hero-peek = výška viditelného pruhu hero. ── */
body.artist-page {
    --hero-peek: 42vh;
}
body.artist-page .artist-hero {
    position: sticky;
    top: calc(var(--hero-peek) - 100vh);   /* připne se tak, že nahoře zůstane vidět spodní pruh hero se jménem */
    z-index: 0;
}
body.artist-page .artist-bio {
    position: sticky;
    top: var(--hero-peek);                  /* připne se hned pod pruhem se jménem */
    min-height: calc(100vh - var(--hero-peek));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 1;
}
/* Sekce poptávky (a další) přejedou přes připnuté vrstvy neprůhledně */
body.artist-page .artist-release,
body.artist-page .form-section,
body.artist-page .events-section {
    position: relative;
    z-index: 2;
    background: var(--bg-dark);
}

/* Lehký stín pod náběžnou hranou (stacked scroll na stránce umělce) */
body.artist-page .artist-bio,                /* najíždí přes hero se jménem */
body.artist-page .artist-bio + section {     /* první sekce (release/poptávka) najíždí přes bio */
    box-shadow: var(--stack-shadow);
}

/* =========================================================
   RESPONZIVITA
========================================================= */
@media (max-width:1200px) {
    :root { --card-gap:3.75rem; }
    .about-grid { gap:4.375rem; }
}
@media (max-width:1100px) {
    .gallery-grid { grid-template-columns:repeat(2, 1fr); }
    .team-card { grid-template-columns:38% 1fr; gap:2.25rem; }
}
@media (max-width:900px) {
    :root { --container-pad:2.25rem; --space-section:6.25rem; --space-title:3rem; }
    .about-grid { grid-template-columns:1fr; gap:3rem; }
    .about-visual { width:100%; max-width:25rem; }
    .site-footer { padding:3.25rem 2.25rem 1.75rem; gap:2rem; }
    .footer-top { flex-direction:column; gap:2.25rem; align-items:flex-start; }
    .footer-logo img { width:9.5rem; }                              /* logo trošku menší na mobilu */
    .footer-nav { gap:1.5rem; flex-wrap:wrap; align-items:flex-start; }  /* nav vlevo na mobilu */
    .footer-bottom { flex-direction:column; align-items:flex-start; gap:0.5rem; }
    .artist-hero { height:100svh; min-height:32.5rem; }
    .artist-about-grid { grid-template-columns:1fr; gap:3rem; }
    .artist-about-portrait { max-width:25rem; }
    .events-row { height:3.375rem; }
    .events-header { font-size:0.8125rem; }
}
@media (max-width:768px) {
    :root { --container-pad:1.375rem; --space-section:5rem; }
    /* poptávka: titulek + úvod zarovnat vlevo (desktop zůstává na střed) */
    body.poptavka-page .form-intro { text-align: left; }
    body.poptavka-page .form-intro p { max-width: none; margin-left: 0; margin-right: 0; }
    .preview-head { flex-direction:column; align-items:flex-start; gap:1.625rem; }
    .gallery-grid { grid-template-columns:1fr; gap:1.875rem; }
    .team-panel { padding:1.75rem; }
    .team-card { grid-template-columns:1fr; gap:1.875rem; }
    .team-socials { justify-content:flex-start; }
    /* EVENTY na mobilu: datum vlevo, umělec, a klub + město na JEDNOM řádku */
    .events-header { display: none; }
    .events-row {
        grid-template-columns: 4.25rem 1fr;   /* pevná šířka data → všechna jména v jedné linii */
        grid-template-areas:
            "kdy umelec"
            "kdy venue";
        column-gap: 1.125rem; row-gap: 0.25rem;
        height: auto; padding: 1.125rem 0.5rem;
    }
    .events-row .col-kdy    { grid-area: kdy; align-self: start; font-size: 1.1875rem; color: var(--text-dim-4); }
    .events-row .col-umelec { grid-area: umelec; display: block; text-align: left; font-size: 1.1875rem; }
    .events-row .col-venue {
        grid-area: venue; display: flex; flex-wrap: wrap; align-items: baseline;
        font-size: 0.9375rem;
    }
    .events-row .col-venue .col-club   { order: 1; color: var(--text-dim-4); }
    .events-row .col-venue .col-lokace { order: 2; color: var(--text-dim-4); }
    .events-row .col-venue .col-lokace::before { content: "–"; margin: 0 0.4rem; color: var(--text-dim-4); }
    /* schovej pomlčku, když chybí klub NEBO město (festival / jen město) */
    .events-row .col-venue .col-lokace:empty::before,
    .events-row .col-venue:has(.col-club:empty) .col-lokace::before { content: ""; margin: 0; }
}
@media (max-width:480px) {
    :root { --container-pad:1rem; --space-section:4rem; }
    .hero-title-container { width:92%; }
    .section-title { font-size: clamp(1.75rem, 8vw, 2.625rem); }
    .artists-section { padding-top:3.75rem; }
    .events-page-title { font-size:clamp(1.5rem, 7vw, 2.25rem); }
    .gallery-grid { gap:1.25rem; }
    .team-panel { padding:1.25rem; }
    .form-submit { align-self:stretch; text-align:center; }
    .artist-hero-name { left:0; right:0; padding:0 1.25rem; text-align:center; }   /* jméno na střed */
    .artist-hero-name span { font-size:clamp(2.25rem, 11.5vw, 5rem); }             /* zmenšeno, ať se vejde */
    .footer-bottom-left, .footer-bottom-right { flex-direction:column; align-items:flex-start; gap:0.25rem; }
    .separator { display:none; }
}

.gallery-card a { text-decoration:none; }

/* =========================================================
   ANIMACE & INTERAKCE
========================================================= */

/* Custom cursor */
.custom-cursor {
    position:fixed; left:0; top:0; pointer-events:none; z-index:100001;
    width:0.5rem; height:0.5rem; border-radius:50%; background:#fff;
    mix-blend-mode:difference;
    display:flex; justify-content:center; align-items:center;
    transform:translate(-50%,-50%);
    transition:width var(--t-fast) var(--ease-out),
               height var(--t-fast) var(--ease-out),
               transform 0.35s var(--ease-out);
}
.custom-cursor.is-hovering {
    transform:translate(-50%,-50%) scale(2.5);
}
.custom-cursor.is-artist-hover {
    mix-blend-mode:difference;
    transform:translate(-50%,-50%) scale(1);
}
.cursor-text {
    font-family: var(--font-bold), 'Helvetica Neue', sans-serif;
    font-size:0.625rem; letter-spacing:0.18em; text-transform:uppercase;
    color:#000; white-space:nowrap; text-align:center; line-height:1;
    opacity:0; transition:opacity 0.25s var(--ease-spring);
}
.custom-cursor.is-artist-hover .cursor-text {
    position:absolute;
    left:0.875rem; top:50%;
    background:#fff;
    padding:0.5rem 1rem;
    border-radius:0.1875rem;
    opacity:1;
    color:#000;
    animation: cursorLabelIn 0.6s var(--ease-out) both;
}
@keyframes cursorLabelIn {
    from { opacity:0; transform:translateY(-50%) translateX(-1.25rem); }
    to   { opacity:1; transform:translateY(-50%) translateX(0); }
}

/* Side-label state for bento grid */
.custom-cursor.is-bento-hover .cursor-text {
    position:absolute;
    left:1rem; top:50%;
    transform:translateY(-50%);
    padding:0; opacity:1;
    font-size:0.6875rem; letter-spacing:0.2em;
    color:#fff;
}
@media (hover:none) {
    .custom-cursor { display:none; }
    *, *::before, *::after { cursor:auto; }
    /* Na dotykových zařízeních se :hover „zasekává" → efekt by zůstal viset po ťuknutí.
       Vypínáme VŠECHNY hover efekty karet (dimming, zvětšení fotky, rámeček, barvu). */
    .gallery-grid:has(.gallery-card:hover) .gallery-card:not(:hover),
    .carousel-track:has(.artist-card:hover) .artist-card:not(:hover),
    .bento-track:has(.bento-item:hover) .bento-item:not(:hover) {
        opacity:1;
    }
    .gallery-card:hover .photo,
    .gallery-card:hover a[href="lboy.html"] .photo,
    .gallery-card:hover a[href="erne100.html"] .photo,
    .artist-card:hover .artist-photo,
    .artist-card[href="lboy.html"]:hover .artist-photo,
    .artist-card[href="erne100.html"]:hover .artist-photo {
        transform:none;
    }
    .gallery-card:hover,
    .artist-card:hover { border-color: var(--border-subtle); }
    .gallery-card:hover .card-name { color: var(--ink); }
    .artist-card:hover .artist-arrow { transform:none; }
    .bento-item:hover { transform:none; }
    .gallery-card:hover::before,
    .artist-card:hover::before,
    .bento-item:hover::before { opacity:0; }
}

/* Scroll progress bar */
.scroll-bar {
    position:fixed; top:0; left:0; height:0.0625rem; width:0%;
    background: rgba(var(--accent),0.85);
    box-shadow:none;
    mix-blend-mode:normal;
    z-index:9999; pointer-events:none;
    transition:width 0.1s ease-out;
}

/* Nav entrance */
@keyframes navSlideIn {
    from { transform:translateY(-110%); }
    to   { transform:none; }
}
.js .subpage-header,
.js .artist-page .top-nav {
    animation:navSlideIn 0.9s var(--ease-spring) 0.1s both;
}

/* Grid dimming */
.carousel-track:has(.artist-card:hover) .artist-card:not(:hover) {
    opacity:0.42;
}
.gallery-grid:has(.gallery-card:hover) .gallery-card:not(:hover) {
    opacity:0.42;
}

/* Artist hero entrance zoom */
@keyframes heroZoom {
    from { transform:scale(1.08); }
    to   { transform:scale(1); }
}
.artist-hero-photo img { animation:heroZoom 1.8s var(--ease-spring) both; }

/* Event rows stagger entrance */
@keyframes rowReveal {
    from { opacity:0; transform:translateX(-1.75rem); }
    to   { opacity:1; transform:none; }
}
.js .events-header,
.js .events-row { opacity:0; transform:translateX(-1.75rem); }
.js .events-header.row-in,
.js .events-row.row-in { animation:rowReveal .7s var(--ease-spring) both; }
.js .events-header.revealed,
.js .events-row.revealed { opacity:1; transform:none; }

/* =========================================================
   PRELOADER
========================================================= */
.preloader {
    position:fixed; inset:0; z-index:99999;
    width:100vw;
    height:100vh;          /* fallback pro starší prohlížeče */
    height:100dvh;         /* dynamický viewport – pokryje display i s URL barem na mobilu */
    background: var(--bg-dark);
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.7s var(--ease-preloader) 0.05s;
    will-change:transform;
}
.preloader-inner {
    display:flex; flex-direction:column; align-items:center; gap:2rem;
    transition:opacity 0.35s var(--ease-spring);
}
.preloader-logo-img {
    width:13.125rem; height:auto;
    filter:brightness(0);
    animation:plFadeUp 0.9s var(--ease-spring) 0.15s both;
}
@keyframes plFadeUp {
    from { opacity:0; transform:translateY(0.875rem); }
    to   { opacity:1; transform:none; }
}
.preloader-line {
    width:0; height:0.0625rem;
    background: rgba(0,0,0,0.2);
    animation:plLine 1s var(--ease-spring) 0.55s forwards;
}
@keyframes plLine {
    to { width:13.125rem; }
}
.preloader.is-hidden { transform:translateY(-100%); }
.preloader.is-hidden .preloader-inner { opacity:0; }

/* =========================================================
   SCROLLED NAV STATE
========================================================= */
.subpage-header,
.artist-page .top-nav {
    transition: background 0.45s var(--ease-out),
                backdrop-filter 0.45s var(--ease-out),
                -webkit-backdrop-filter 0.45s var(--ease-out);
}

/* .subpage-header je už full-width (left:0;right:0), pozadí stačí přímo na něm */
html.is-scrolled .subpage-header {
    background: rgba(244, 244, 245, 0.88);
    backdrop-filter: blur(0.875rem);
    -webkit-backdrop-filter: blur(0.875rem);
    border-bottom: 0.0625rem solid var(--border-mid);
}

/* Artist nav je max-width vycentrovaný – plné pozadí přes ::before na 100vw,
   aby pruh zabíral celou šířku displeje a zůstal symetrický */
.artist-page .top-nav::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: rgba(244, 244, 245, 0.88);
    backdrop-filter: blur(0.875rem);
    -webkit-backdrop-filter: blur(0.875rem);
    border-bottom: 0.0625rem solid var(--border-mid);
    transition: opacity 0.45s var(--ease-out);
}
html.is-scrolled .artist-page .top-nav::before {
    opacity: 1;
}

html.is-scrolled .subpage-header .top-nav,
html.is-scrolled .artist-page .top-nav {
    padding: 0.625rem var(--container-pad);
}

html.is-scrolled .nav-center {
    max-width: 0;
    padding-left: 0; padding-right: 0;   /* ať se logo i s dýchacím prostorem zkolabuje úplně */
    opacity: 0;
    transform: translateY(-0.75rem);
    pointer-events: none;
}

/* Light mode: ve scrollnutém stavu sedí nav na světlém skle (mix-blend:normal),
   takže obsah musí být tmavý, aby byl čitelný. */
html.is-scrolled .subpage-header .nav-link,
html.is-scrolled .artist-page .top-nav .nav-link { color: var(--ink); }
html.is-scrolled .subpage-header .logo,
html.is-scrolled .artist-page .top-nav .logo { filter: brightness(0); }
/* ve scrollnuté liště je podtržení tmavé (světlé sklo pod ním) */
html.is-scrolled .subpage-header .nav-link::after,
html.is-scrolled .artist-page .top-nav .nav-link::after {
    background: rgba(0,0,0,0.8);
    box-shadow: none;
}

/* Scroll offset pro kotvy – kompenzuje výšku fixní navigace */
#eventy, #o-agenture, #kontakt { scroll-margin-top: 5rem; }

/* =========================================================
   MOBILNÍ HLAVIČKA — hamburger + menu (≤1024px; nad tím plný desktop nav).
   Breakpoint 1024px, aby řádkový nav nezůstal viset v rozpadlém stavu na úzkém
   desktopu/tabletu (kolidující odkazy, zalomené „NEZÁVAZNÁ POPTÁVKA").
   .nav-toggle a .mobile-menu se vytvářejí v JS (animations.js); na desktopu skryté.
========================================================= */
.nav-toggle, .mobile-menu { display: none; }

@media (max-width: 1024px) {
    /* Lišta: malé logo vlevo + hamburger vpravo; řádkové odkazy pryč.
       Zpět na flex (desktop má grid 1fr auto 1fr pro centrované logo). */
    .top-nav { display: flex; justify-content: space-between; flex-wrap: nowrap; gap: 0; }
    .nav-left, .nav-right { display: none; }
    .nav-center {
        display: flex; justify-content: flex-start;
        flex: 0 0 auto; max-width: none; overflow: visible;
        padding: 0;   /* na mobilu logo vlevo bez dýchacího paddingu */
    }
    .nav-center .logo { width: 7.5rem; }
    /* mobilní logo zůstává viditelné i po odscrollování (přebíjí desktop collapse) */
    html.is-scrolled .nav-center {
        max-width: none; padding: 0; opacity: 1; transform: none; pointer-events: auto;
    }

    /* Hamburger */
    .nav-toggle {
        display: block; position: relative; flex: 0 0 auto;
        width: 1.625rem; height: 1rem; padding: 0; margin: 0;
        background: none; border: 0; cursor: pointer;
        pointer-events: auto;   /* header má pointer-events:none */
        -webkit-tap-highlight-color: transparent;
    }
    .nav-toggle span {
        position: absolute; left: 0; width: 100%; height: 0.125rem;  /* všechny čáry stejně široké */
        background: #fff; border-radius: 1px;   /* bílé → adaptivní přes mix-blend headeru */
        transition: transform 0.35s var(--ease-spring), opacity 0.2s var(--ease-out), background 0.45s var(--ease-out);
    }
    .nav-toggle span:nth-child(1) { top: 0; }
    .nav-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .nav-toggle span:nth-child(3) { bottom: 0; }
    /* po odscrollování (světlá glass lišta, mix-blend:normal) → tmavé čárky */
    html.is-scrolled .nav-toggle span { background: var(--ink); }
    /* Subpage má světlé pozadí → hamburger tmavý hned (bez blend mode by byl bílý na bílém). */
    body.subpage:not(.artist-page) .nav-toggle span { background: var(--ink); }
    /* Otevřené menu = bílý overlay → křížek vždy tmavý, ať je vidět. */
    html.menu-open .nav-toggle span { background: var(--ink); }
    /* po kliknutí: hamburger → křížek (stejné čáry, postupná animace) */
    html.menu-open .nav-toggle span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
    html.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
    html.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }
    /* při otevřeném menu vyzvedni lištu (logo + křížek) nad overlay, ať je morph vidět */
    html.menu-open .subpage-header,
    html.menu-open .artist-page .top-nav { z-index: 100001; }

    /* Fullscreen světlé menu */
    .mobile-menu {
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000;
        width: 100vw;
        height: 100vh;          /* fallback */
        height: 100lvh;         /* LARGE viewport – vždy max výška, pokryje display i když je lišta schovaná */
        /* JS navíc nastaví --vh = window.innerHeight (reálná výška včetně oblasti za lištou) */
        height: var(--menu-h, 100lvh);
        background: #ffffff;
        opacity: 0; visibility: hidden;
        transition: opacity 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
    }
    html.menu-open .mobile-menu { opacity: 1; visibility: visible; }
    /* Scroll-lock na iOS: fixní body (samotné overflow:hidden iOS Safari ignoruje).
       JS doplní top: -scrollY, aby stránka nepodskočila. */
    html.menu-open { overflow: hidden; }
    html.menu-open body {
        overflow: hidden;
        position: fixed;
        left: 0; right: 0;
        width: 100%;
    }

    .mobile-menu-links {
        display: flex; flex-direction: column; align-items: center; gap: 1.875rem;
    }
    .mobile-menu-link {
        font-family: var(--font-extended);
        font-size: clamp(1.375rem, 6vw, 1.875rem);
        letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink); text-decoration: none;
        position: relative; padding-bottom: 0.3rem;
    }
    .mobile-menu-link::after {
        content: ''; position: absolute; left: 50%; bottom: 0;
        transform: translateX(-50%);
        width: 0; height: 0.0625rem; background: var(--ink);
        transition: width 0.3s var(--ease-out);
    }
    .mobile-menu-link:hover::after, .mobile-menu-link:active::after { width: 100%; }
}