/* =============================================================================
   WEB 2030 — vrstva vzhledu veřejného webu (02.11.2026, plán Handoff/PLAN_web_2030_20261102.md)

   Richie: „dodat webu ještě větší šmrnc … feel pro rok 2030, ale pořád klasické
   rozložení, jak chce Irča … drobné detaily“ + „ten kinosál zní dobře … vymysli co
   nejlepší verzi“. Návrhy, náhled a měření: Temp/web_2030/ (směry A Sklo · B Vysílání
   · C Plynutí); tady finální výběr — základ A, z B vysílání / titulky / ostření /
   kinosál / čerstvá nástěnka / časové kódy, z C přelet fotky / pružiny / průběh čtení.

   PROČ SAMOSTATNÝ SOUBOR (ne do komponent): build inlinuje CSS do každé stránky
   a archiv má 56,5 z 57,0 kB rozpočtu (tools/kontrola_rozpoctu.py). Statický <link>
   v BaseLayout (dynamický by ClientRouter smazal — CLAUDE.md §7), cache-busting
   `?v=` u CSS i JS současně (past „nový skript, starý styl“).

   PRAVIDLA VRSTVY (kontroluje Temp/web_2030/nastroje/kontrola.py):
   - Ireniny rozložení se NEMĚNÍ: žádný margin/padding/width/height/font-size bloků;
     nové prvky jen ::before/::after s position: absolute (posun bloků změřen 0 px);
   - barvy a rozměry jen přes tokeny (#hex a px jen v deklaraci --w30-tokenu);
   - animace a nové přechody jen transform / translate / scale / rotate / opacity /
     filter (kompozitor); vše, co se hýbe, je za prefers-reduced-motion: no-preference;
   - v režimu úprav (html.ma-rezim) nic nesvítí pod rukou, nestmívá se, živé štítky
     se skryjí — redakce nesmí přijít o žádnou funkci.
   SPECIFIČNOST: předpona `:root[data-w30]` (0,2,0) + třída přebije scoped styly Astra
   (třída + data-astro-cid = 0,2,0). Atribut `data-w30` na <html> nese BaseLayout —
   je to i VYPÍNAČ celé vrstvy.
   ========================================================================== */

:root[data-w30] {
  /* --- Sklo (A) --- */
  --w30-sklo: color-mix(in srgb, var(--color-surface) 78%, transparent);
  --w30-sklo-silne: color-mix(in srgb, var(--color-surface) 90%, transparent);
  --w30-sklo-menu: color-mix(in srgb, var(--color-chrome-bg-deep) 72%, transparent);
  --w30-sklo-hrana: rgb(255 255 255 / 80%);
  --w30-sklo-ram: color-mix(in srgb, var(--navy-700) 10%, transparent);
  --w30-blur-menu: 18px;
  --w30-blur-maly: 10px;
  /* Vrstvy kinosálu — platí UVNITŘ `#obsah` (stacking context kvůli auře, `isolation: isolate`):
     závoj se vkládá do `#obsah` (web-2030.js `sal()`), záznam nad něj. Hlavička (`--z-header`)
     je mimo `#obsah`, proto zůstane nad tmou. Audit Fable Z1 02.11.2026. */
  --w30-z-sal: calc(var(--z-sticky) + 50);
  --w30-z-sal-zaznam: calc(var(--z-sticky) + 60);
  --w30-blur-odchod: 6px;   /* stará stránka se rozplyne (A8) */
  --w30-blur-prichod: 3px;  /* nová stránka zaostří (A8) */
  --w30-sytost: 1.5;
  --w30-radius: 18px;
  --w30-radius-bublina: 12px;

  /* Aura barev města — SYTĚJŠÍ než v náhledu A (Richie: „skoro nevidím rozdíl“) */
  --w30-aura-fialova: color-mix(in srgb, var(--purple-600) 40%, transparent);
  --w30-aura-azur: color-mix(in srgb, var(--azure-500) 32%, transparent);
  --w30-aura-navy: color-mix(in srgb, var(--navy-500) 16%, transparent);
  --w30-aura-vyska: 72rem;
  --w30-aura-posun: 10vh;

  /* Hloubka: kontakt + jádro + ambient */
  --w30-stin: 0 1px 1px rgb(18 35 85 / 5%), 0 6px 16px -6px rgb(18 35 85 / 14%), 0 22px 44px -18px rgb(18 35 85 / 18%);
  --w30-stin-zvednuty: 0 1px 1px rgb(18 35 85 / 5%), 0 12px 24px -8px rgb(18 35 85 / 20%), 0 34px 64px -22px rgb(18 35 85 / 26%);
  --w30-stin-pilulka: 0 1px 1px rgb(18 35 85 / 6%), 0 6px 14px -6px rgb(18 35 85 / 18%);

  /* Světlo pod kurzorem a lesk */
  --w30-svetlo: color-mix(in srgb, var(--azure-500) 18%, transparent);
  --w30-svetlo-r: 210px;
  --w30-lesk: rgb(255 255 255 / 34%);
  --w30-zar-play: color-mix(in srgb, var(--azure-500) 55%, transparent);

  /* Bublina */
  --w30-bublina: color-mix(in srgb, var(--navy-900) 80%, transparent);
  --w30-bublina-ram: rgb(255 255 255 / 16%);
  --w30-bublina-odstup: 8px;
  --w30-bublina-zpozdeni: 260ms;
  --w30-prstenec-zar: color-mix(in srgb, var(--color-ring) 28%, transparent);
  --w30-stisk: 0.97;

  /* --- Vysílání (B) --- */
  --w30-tally: var(--color-decor-live);
  --w30-tally-zar: color-mix(in srgb, var(--signal-500) 45%, transparent);
  --w30-titulek: linear-gradient(90deg, var(--purple-600), var(--azure-500));
  --w30-titulek-vyska: 4px;
  --w30-titulek-delka: 3.25em;
  --w30-titulek-odstup: -0.45em;
  --w30-sal: rgb(2 4 11 / 72%);
  --w30-kino-dur: 900ms;
  --w30-ambient-blur: 56px;
  --w30-ambient-klid: 0.32;
  --w30-ambient-kino: 0.62;
  --w30-ostreni: 10px;
  --w30-tecka: 0.5rem;
  --w30-cip-pozadi: color-mix(in srgb, var(--signal-500) 10%, var(--color-surface));
  --w30-cas-zvyrazneni: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --w30-cas-zive: color-mix(in srgb, var(--signal-500) 16%, transparent);

  /* --- Plynutí (C) --- pružiny analyticky jako znělka (public/znelka-intro.js):
     ζ 0,72 / 0,6 s = překmit 3,8 %; ζ 0,82 / 0,77 s = 1,1 % (dlouhé dráhy) */
  --w30-pruzina: linear(0, 0.032, 0.111, 0.218, 0.338, 0.458, 0.572, 0.675, 0.765, 0.839, 0.9, 0.946, 0.981, 1.006, 1.023, 1.033, 1.037, 1.038, 1.037, 1.033, 1.029, 1.025, 1.02, 1.016, 1.012, 1.008, 1.006, 1.003, 1);
  --w30-pruzina-dur: 600ms;
  --w30-klidna: linear(0, 0.036, 0.122, 0.234, 0.355, 0.472, 0.58, 0.676, 0.756, 0.823, 0.876, 0.917, 0.948, 0.971, 0.987, 0.998, 1.005, 1.009, 1.011, 1.011, 1.011, 1.01, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1);
  --w30-klidna-dur: 770ms;
  --w30-prelet: 620ms;
  --w30-cteni-vyska: 3px;

  /* Rozměry hran a stínů (px jen tady v tokenech) */
  --w30-vlas: 1px;
  --w30-linka: 2px;
  --w30-okraj-bodu: 3px;
  --w30-hrana: inset 0 1px 0 var(--w30-sklo-hrana);
  --w30-hrana-menu: inset 0 1px 0 var(--color-chrome-line);
  --w30-stitek-ram: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
  --w30-play-stin: inset 0 1px 0 rgb(255 255 255 / 40%), 0 8px 24px -6px var(--w30-zar-play);
  --w30-tlacitko-stin: inset 0 1px 0 rgb(255 255 255 / 22%), var(--w30-stin-pilulka);
  --w30-video-stin: 0 0 0 1px rgb(255 255 255 / 10%), var(--shadow-lg), 0 0 96px color-mix(in srgb, var(--color-decor-tv) 22%, transparent);
  --w30-panel-hrana: inset 0 1px 0 rgb(255 255 255 / 8%);
  --w30-bod-stin: inset 0 1px 0 rgb(255 255 255 / 22%), 0 0 24px -6px var(--w30-zar-play);
  --w30-bublina-stin: inset 0 1px 0 rgb(255 255 255 / 14%), 0 10px 28px -8px rgb(0 0 0 / 45%);
  --w30-bublina-mlha: 4px;
  --w30-prsten-1: 2px;
  --w30-prsten-2: 5px;
  --w30-prsten-3: 10px;
}

:root[data-w30][data-theme="dark"] {
  --w30-sklo: color-mix(in srgb, var(--navy-750) 66%, transparent);
  --w30-sklo-silne: color-mix(in srgb, var(--navy-750) 82%, transparent);
  --w30-sklo-hrana: rgb(255 255 255 / 9%);
  --w30-sklo-ram: rgb(255 255 255 / 9%);
  --w30-aura-fialova: color-mix(in srgb, var(--purple-500) 38%, transparent);
  --w30-aura-azur: color-mix(in srgb, var(--azure-500) 28%, transparent);
  --w30-aura-navy: color-mix(in srgb, var(--navy-500) 38%, transparent);
  --w30-stin: 0 0 0 1px rgb(255 255 255 / 4%), 0 10px 30px -10px rgb(0 0 0 / 60%);
  --w30-stin-zvednuty: 0 0 0 1px rgb(255 255 255 / 6%), 0 20px 50px -16px rgb(0 0 0 / 70%);
  --w30-stin-pilulka: 0 0 0 1px rgb(255 255 255 / 5%), 0 6px 16px -8px rgb(0 0 0 / 60%);
  --w30-svetlo: color-mix(in srgb, var(--azure-500) 22%, transparent);
  --w30-lesk: rgb(255 255 255 / 16%);
  --w30-bublina: color-mix(in srgb, var(--navy-650) 84%, transparent);
  --w30-bublina-ram: rgb(255 255 255 / 20%);
  --w30-cip-pozadi: color-mix(in srgb, var(--signal-500) 18%, var(--color-surface));
  --w30-cas-zvyrazneni: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --w30-cas-zive: color-mix(in srgb, var(--signal-500) 26%, transparent);
}

/* ===========================================================================
   A1  AURA ZNAČKY — světlo barev města nahoře na každé stránce
   Statický gradient = nula práce v klidu; při rolování jen pomalu odjede
   a pohasne (scroll(root) — past §7: nikdy holé scroll() v overflow:hidden).
   =========================================================================== */
:root[data-w30] #obsah {
  position: relative;
  isolation: isolate;
}

:root[data-w30] #obsah::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--w30-aura-vyska);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 60% at 86% 4%, var(--w30-aura-fialova), transparent 70%),
    radial-gradient(44% 56% at 8% 18%, var(--w30-aura-azur), transparent 72%),
    radial-gradient(70% 50% at 50% 0%, var(--w30-aura-navy), transparent 75%);
}

/* Úvodka: tónované přechody bloků ustoupí auře (jinak by se kreslily přes ni). */
:root[data-w30] .aktualne,
:root[data-w30] .hero {
  background: none;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    :root[data-w30] #obsah::before {
      animation: w30-aura linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
    }
  }
}

@keyframes w30-aura {
  to {
    opacity: 0.55;
    transform: translateY(var(--w30-aura-posun));
  }
}

/* ===========================================================================
   A2  MLÉČNÉ SKLO V MENU — po přilepení prosvítá obsah rozmazaně pod lištou
   Hlavička je přilepená se záporným `top` (zůstává jen menu). Pás s logem nese
   plnou navy sám (gradient do výšky pásu + fotky — táž clamp() jako SiteHeader),
   lišta menu je průsvitná. Pás s logem NETVOŘÍ vlastní vrstvu — bublina ikon
   sítí dál přečnívá přes menu (oprava 02.11.: `[data-napoveda]:hover { z-index }`).
   =========================================================================== */
:root[data-w30] .hlavicka {
  background: linear-gradient(var(--color-chrome-bg) 0 4.25rem, transparent 0);
}

:root[data-w30] .hlavicka--s-titulkou {
  background: linear-gradient(var(--color-chrome-bg) 0 calc(4.25rem + clamp(9rem, 20vw, 19rem)), transparent 0);
}

/* ⚠️ Prvek s `view-transition-name` je pro sklo „kořen pozadí“: rozmazání pod
   ním vidí jen hlavičku, ne obsah (změřeno snímkem 02.11.). Hlavička jméno
   přechodu potřebuje jen BĚHEM přechodu stránek — mimo něj ho nenese.
   Prohlížeč bez `:active-view-transition` pravidlo zahodí → lišta je jen
   průsvitná, bez rozmazání (korektní ochuzení). */
:root[data-w30]:not(:active-view-transition) .hlavicka {
  view-transition-name: none;
}

:root[data-w30] .navigace {
  position: relative;
  isolation: isolate;
  background: var(--w30-sklo-menu);
  -webkit-backdrop-filter: blur(var(--w30-blur-menu)) saturate(var(--w30-sytost));
  backdrop-filter: blur(var(--w30-blur-menu)) saturate(var(--w30-sytost));
}

/* Nahoře stránky je lišta PLNÁ jako dnes; sklem se stane, až se přilepí a pod
   ní jede obsah. Plnou vrstvu nese pseudo-prvek, mizí jen jeho opacity. */
:root[data-w30] .navigace::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-chrome-bg-deep);
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    :root[data-w30] .hlavicka--s-titulkou .navigace::before {
      animation: w30-zprusvitni linear both;
      animation-timeline: scroll(root);
      animation-range: calc(2.25rem + clamp(9rem, 20vw, 19rem)) calc(4.25rem + clamp(9rem, 20vw, 19rem));
    }

    :root[data-w30] .hlavicka:not(.hlavicka--s-titulkou) .navigace::before {
      animation: w30-zprusvitni linear both;
      animation-timeline: scroll(root);
      animation-range: 0 4.25rem;
    }
  }
}

@keyframes w30-zprusvitni {
  to {
    opacity: 0;
  }
}

/* A7  Položka menu: na najetí se pod textem rozsvítí skleněná kapka (místo
   ploché barvy); aktivní stránku dál nese jezdec. */
:root[data-w30] .navigace__odkaz:hover {
  background: transparent;
}

:root[data-w30] .navigace__odkaz::before {
  content: "";
  position: absolute;
  inset: 0.375rem 0.125rem;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: var(--color-chrome-hover);
  box-shadow: var(--w30-hrana-menu);
  opacity: 0;
  scale: 0.86;
  transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-base) var(--ease-out);
}

:root[data-w30] .navigace__odkaz:hover::before,
:root[data-w30] .navigace__odkaz:focus-visible::before {
  opacity: 1;
  scale: 1;
}

:root[data-w30] .navigace__polozka {
  isolation: isolate;
}

/* Rozbalené podmenu = totéž sklo. */
:root[data-w30] .podmenu {
  background: var(--w30-sklo-menu);
  -webkit-backdrop-filter: blur(var(--w30-blur-menu)) saturate(var(--w30-sytost));
  backdrop-filter: blur(var(--w30-blur-menu)) saturate(var(--w30-sytost));
}

/* C4  Jezdec menu dojíždí pružinou (vlastnosti beze změny, jen křivka a tempo). */
:root[data-w30] .navigace__jezdec {
  transition:
    transform var(--w30-klidna-dur) var(--w30-klidna),
    opacity var(--dur-base) var(--ease-out);
}

/* ===========================================================================
   A3  SKLENĚNÉ PLOCHY — Aktuálně, pravý sloupec, karty, panely, ročníky
   ⚠️ BEZ backdrop-filter: pod plochami je jen hladká aura — rozmazat hladký
   gradient je vizuálně totéž, ale stálo by to grafiku ~60 % okna při každém
   snímku rolování (změřeno 02.11.: 21 prvků / 67 % okna). Skutečné rozmazání
   jen tam, kde pod sklem jede obsah: menu, podmenu, bubliny, play.
   =========================================================================== */
:root[data-w30] .aktualne__karta,
:root[data-w30] .hero__bok {
  background: var(--w30-sklo);
  border-color: var(--w30-sklo-ram);
  border-radius: var(--w30-radius);
  box-shadow: var(--w30-hrana), var(--w30-stin);
}

:root[data-w30] .karta,
:root[data-w30] .panel,
:root[data-w30] .rok {
  border-color: var(--w30-sklo-ram);
  border-radius: var(--w30-radius);
  box-shadow: var(--w30-hrana), var(--w30-stin);
}

:root[data-w30] .karta:hover {
  box-shadow: var(--w30-hrana), var(--w30-stin-zvednuty);
}

:root[data-w30][data-theme="dark"] .karta,
:root[data-w30][data-theme="dark"] .panel,
:root[data-w30][data-theme="dark"] .rok {
  background: var(--w30-sklo-silne);
}

/* Dotyk: plochy o chlup sytější — na malém displeji by průsvit působil vybledle. */
@media (pointer: coarse) {
  :root[data-w30] :is(.aktualne__karta, .hero__bok) {
    background: var(--w30-sklo-silne);
  }
}

/* Zkrácená nástěnka: závoj v barvě SKLA, ne plné plochy. */
:root[data-w30] .aktualne__karta--zkracena .aktualne__text::after {
  background: linear-gradient(180deg, transparent, var(--w30-sklo-silne) 85%);
}

:root[data-w30] .aktualne__stitek {
  box-shadow: var(--w30-stitek-ram);
}

/* C4  Zvednutí karty dojíždí pružinou. */
:root[data-w30] .karta {
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--w30-pruzina-dur) var(--w30-pruzina);
}

/* A12  Archiv: otevřený ročník se zvedne nad ostatní. */
:root[data-w30] .rok[open] {
  box-shadow: var(--w30-hrana), var(--w30-stin-zvednuty);
}

/* C4  Šipka ročníku po pružině. */
:root[data-w30] .rok__hlavicka::before {
  display: inline-block;
  transition: transform var(--w30-pruzina-dur) var(--w30-pruzina);
}

/* ===========================================================================
   A4  SVĚTLO POD KURZOREM — karta „ví“, kde je ruka (web-2030.js dává polohu)
   Kruh světla pod sklem, hýbe se jen `translate` (kompozitor). Jen myš.
   =========================================================================== */
:root[data-w30] .karta,
:root[data-w30] .aktualne__karta,
:root[data-w30] .hero__bok,
:root[data-w30] .panel {
  position: relative;
  isolation: isolate;
}

@media (hover: hover) and (pointer: fine) {
  :root[data-w30]:not(.ma-rezim) :is(.karta, .aktualne__karta, .hero__bok, .panel)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: calc(var(--w30-svetlo-r) * 2);
    height: calc(var(--w30-svetlo-r) * 2);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--w30-svetlo), transparent);
    pointer-events: none;
    opacity: 0;
    translate: calc(var(--w30-mx, -999rem) - var(--w30-svetlo-r)) calc(var(--w30-my, -999rem) - var(--w30-svetlo-r));
    transition: opacity var(--dur-slow) var(--ease-out);
  }

  :root[data-w30]:not(.ma-rezim) :is(.karta, .aktualne__karta, .hero__bok, .panel).w30-svetlo::before {
    opacity: 1;
  }
}

/* ===========================================================================
   A5  LESK SKLA NA FOTKÁCH — přes náhled přejede pruh světla (jednou na najetí)
   =========================================================================== */
:root[data-w30] .hero__obrazek {
  border-radius: var(--w30-radius);
  box-shadow: var(--w30-hrana), var(--w30-stin-zvednuty);
}

:root[data-w30] .hero__obrazek::after,
:root[data-w30] .karta__obrazek::after {
  content: "";
  position: absolute;
  inset: -10% -60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, var(--w30-lesk) 50%, transparent 62%);
  translate: -70% 0;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root[data-w30]:not(.ma-rezim) .hero__hlavni:hover .hero__obrazek::after,
  :root[data-w30]:not(.ma-rezim) .karta__odkaz:hover .karta__obrazek::after {
    animation: w30-lesk 1100ms var(--ease-out) 80ms both;
  }
}

@keyframes w30-lesk {
  0% {
    translate: -70% 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    translate: 70% 0;
    opacity: 0;
  }
}

/* Play = skleněná kapka se září v barvě televize. */
:root[data-w30] .hero__play,
:root[data-w30] .zaznam__spustit svg {
  background: color-mix(in srgb, var(--navy-900) 42%, transparent);
  -webkit-backdrop-filter: blur(var(--w30-blur-maly)) saturate(var(--w30-sytost));
  backdrop-filter: blur(var(--w30-blur-maly)) saturate(var(--w30-sytost));
  box-shadow: var(--w30-play-stin);
}

:root[data-w30] .hero__play {
  z-index: 2;
}

/* ===========================================================================
   A6  KAPSLE A TLAČÍTKA — skleněné pilulky, odezva stisku (i na dotyku)
   =========================================================================== */
:root[data-w30] .pas__kapsle,
:root[data-w30] .filtr__kapsle,
:root[data-w30] .rychle__odkaz,
:root[data-w30] .stitek {
  background: var(--w30-sklo-silne);
  border-color: var(--w30-sklo-ram);
  box-shadow: var(--w30-hrana), var(--w30-stin-pilulka);
}

/* Převzaté přechody (barva rámečku, stín) + pružina (C4) + měřítko stisku. */
:root[data-w30] .pas__kapsle {
  transition:
    border-color var(--dur-fast) var(--ease-out),
    transform var(--w30-pruzina-dur) var(--w30-pruzina),
    box-shadow var(--dur-base) var(--ease-out),
    scale var(--dur-fast) var(--ease-out);
}

:root[data-w30] .tlacitko {
  box-shadow: var(--w30-tlacitko-stin);
  transition: background-color var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-out);
}

:root[data-w30] .karta__odkaz,
:root[data-w30] .hero__hlavni {
  transition: scale var(--dur-fast) var(--ease-out);
}

:root[data-w30] :is(.pas__kapsle, .tlacitko, .filtr__kapsle):active,
:root[data-w30] :is(.karta__odkaz, .hero__hlavni):active {
  scale: var(--w30-stisk);
}

/* ===========================================================================
   A8  PŘECHOD STRÁNEK — stará stránka se rozplyne do mléčného skla
   Jen myš (rozmazání celé obrazovky na telefonu nechceme), bez „omezit pohyb“,
   ne při přepnutí vzhledu.
   =========================================================================== */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root[data-w30]:not(.je-prolnuti-vzhledu)::view-transition-old(root) {
    animation: w30-ven 420ms var(--ease-out) both;
  }

  :root[data-w30]:not(.je-prolnuti-vzhledu)::view-transition-new(root) {
    animation: w30-dovnitr 420ms var(--ease-out) both;
  }
}

@keyframes w30-ven {
  to {
    opacity: 0;
    filter: blur(var(--w30-blur-odchod));
  }
}

@keyframes w30-dovnitr {
  from {
    opacity: 0;
    filter: blur(var(--w30-blur-prichod));
  }
}

/* ===========================================================================
   C1  PŘELET FOTKY — fotka kliknuté karty doletí na místo obrazu článku /
   přehrávače / záznamu zasedání (a tlačítkem Zpět zpátky do karty). Jméno
   přechodu dává web-2030.js JEN kliknuté fotce a jejímu protějšku — ne všem
   náhledům (to dělalo „bílý flash“ z 23.08., poznámka v KartaClanku.astro).
   =========================================================================== */
:root[data-w30]::view-transition-group(w30-foto) {
  animation-duration: var(--w30-prelet);
  animation-timing-function: var(--w30-klidna);
  border-radius: var(--radius-lg);
  overflow: clip;
}

:root[data-w30]::view-transition-old(w30-foto),
:root[data-w30]::view-transition-new(w30-foto) {
  height: 100%;
  object-fit: cover;
  animation-duration: var(--w30-prelet);
}

/* ===========================================================================
   A10  FOKUS — dvoubarevný prstenec zůstává, navíc měkká záře
   =========================================================================== */
:root[data-w30] :focus-visible {
  box-shadow:
    0 0 0 var(--w30-prsten-1) var(--color-bg),
    0 0 0 var(--w30-prsten-2) var(--color-ring),
    0 0 0 var(--w30-prsten-3) var(--w30-prstenec-zar);
}

/* ===========================================================================
   B1  „VYSÍLÁME“ — blok vysílání ví, co právě běží (web-2030.js)
   Čtyři časy jsou redakční sloty, délka vysílání slot `vysilani-delka`. Skript
   zvýrazní čas, který běží nebo přijde, a vpravo nahoře ukáže štítek —
   absolutně, nic se neposune. Úzký sloupec: jen tečka (text pro čtečky).
   =========================================================================== */
:root[data-w30] .bok__vysilani {
  position: relative;
  container: w30-vysilani / inline-size;
}

:root[data-w30]:not(.ma-rezim) [data-text-slot^="vysilani-cas-"].w30-dalsi {
  border-radius: var(--radius-sm);
  background: var(--w30-cas-zvyrazneni);
  box-shadow: 0 0 0 0.18em var(--w30-cas-zvyrazneni);
}

:root[data-w30]:not(.ma-rezim) [data-text-slot^="vysilani-cas-"].w30-ted {
  background: var(--w30-cas-zive);
  box-shadow: 0 0 0 0.18em var(--w30-cas-zive);
}

:root[data-w30] .w30-stav {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.6em;
  border-radius: var(--radius-pill);
  background: var(--w30-cip-pozadi);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

:root[data-w30] .w30-stav::before {
  content: "";
  flex: none;
  width: var(--w30-tecka);
  height: var(--w30-tecka);
  border-radius: 50%;
  background: var(--color-text-muted);
}

:root[data-w30] .w30-stav[data-stav="zive"] {
  color: var(--color-text);
}

:root[data-w30] .w30-stav[data-stav="zive"]::before {
  background: var(--w30-tally);
  box-shadow: 0 0 0 0.2em var(--w30-tally-zar);
}

@container w30-vysilani (max-width: 18rem) {
  :root[data-w30] .w30-stav__text {
    position: absolute;
    width: var(--w30-vlas);
    height: var(--w30-vlas);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :root[data-w30] .w30-stav {
    padding: 0.35em;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-w30] .w30-stav[data-stav="zive"]::before {
    animation: w30-dech 2.8s var(--ease-in-out) infinite;
  }
}

@keyframes w30-dech {
  50% {
    opacity: 0.45;
  }
}

/* Režim úprav: časy jsou redakční sloty k úpravě — štítek by překážel. */
:root[data-w30].ma-rezim .w30-stav {
  display: none;
}

/* Tally na logu — jen když se právě vysílá (třída w30-zive na <html>). */
:root[data-w30] .znacka {
  position: relative;
}

:root[data-w30].w30-zive:not(.ma-rezim) .znacka::after {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: 4.05rem;
  width: var(--w30-tecka);
  height: var(--w30-tecka);
  border-radius: 50%;
  background: var(--w30-tally);
  box-shadow: 0 0 0.6rem var(--w30-tally-zar);
}

/* Patička: dioda „Vysíláme od května 1996“ pulzuje jen při vysílání — mimo
   vysílání svítí klidně (dřív pulzovala pořád: nekonečná animace na každé
   stránce, která nic neznamenala). */
:root[data-w30]:not(.w30-zive) .paticka__od::after {
  animation: none;
}

/* ===========================================================================
   B2  SPODNÍ TITULEK — nadpisy sekcí a článků dostanou čáru „lower third“
   (fialová → azurová); vysune se zleva, když nadpis vjede do okna (view
   timeline = kompozitor, 0 B JS; žádný z nadpisů neleží v overflow: hidden).
   =========================================================================== */
:root[data-w30] :is(.sekce__nadpis, .aktualne__nadpis, .clanek__titulek, .archiv__titulek, .souvisejici__nadpis, .hero__titulek) {
  position: relative;
}

:root[data-w30] :is(.sekce__nadpis, .aktualne__nadpis, .clanek__titulek, .archiv__titulek, .souvisejici__nadpis)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--w30-titulek-odstup);
  width: var(--w30-titulek-delka);
  height: var(--w30-titulek-vyska);
  border-radius: var(--radius-pill);
  background: var(--w30-titulek);
  transform-origin: 0 50%;
  pointer-events: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :root[data-w30] :is(.sekce__nadpis, .aktualne__nadpis, .clanek__titulek, .archiv__titulek, .souvisejici__nadpis)::after {
      animation: w30-titulek linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}

@keyframes w30-titulek {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
}

/* Hlavní vydání = spodní titulek: svislý pruh vlevo od textu + tally u štítku. */
:root[data-w30] .hero__text {
  position: relative;
}

:root[data-w30] .hero__text::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  bottom: 0.15rem;
  left: calc(-1 * var(--space-xs));
  width: var(--w30-titulek-vyska);
  border-radius: var(--radius-pill);
  background: linear-gradient(var(--purple-600), var(--azure-500));
  transform-origin: 50% 0;
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-w30] .hero__text::before {
    animation: w30-pruh 900ms var(--ease-out) 300ms both;
  }
}

@keyframes w30-pruh {
  from {
    transform: scaleY(0);
  }
}

:root[data-w30] .hero__stitek {
  border-radius: var(--radius-sm);
  box-shadow: inset 0.22rem 0 0 var(--w30-tally);
}

/* ===========================================================================
   B4  OSTŘENÍ KAMERY — líně načtené fotky se zaostří z rozmazání
   Filtr na kompozitoru, jednou na fotku; `scale` zůstává (zoom karet).
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  :root[data-w30] img[data-plynule] {
    filter: blur(var(--w30-ostreni));
  }

  :root[data-w30] img[data-plynule="hotovo"] {
    filter: blur(0);
    transition:
      opacity var(--dur-odhaleni) var(--ease-out),
      filter var(--dur-slow) var(--ease-out),
      scale var(--dur-slow) var(--ease-out);
  }
}

/* ===========================================================================
   B5  KINOSÁL — záznam zasedání: při přehrávání se v sále zhasne
   Za obrazem svítí rozmazaný plakát (ambient — statický, při přehrávání nic
   nepočítá). Po spuštění se zbytek stránky ztlumí, záznam i seznam bodů zůstanou
   rozsvícené, hlavička nad tmou (menu jde použít). Rozsvítí: pauza (když nehraje
   jiný záznam), konec, klik kamkoli mimo záznam (projde i na odkaz), Esc, návrat
   z mezipaměti prohlížeče. Aktivní bod nese živou hranu. Režim úprav: nestmívá se.
   =========================================================================== */
:root[data-w30] .zaznam__hlavni {
  isolation: isolate;
}

:root[data-w30] .zaznam__hlavni::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  max-width: var(--zaznam-sirka);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: var(--w30-plakat, none) center / cover no-repeat;
  filter: blur(var(--w30-ambient-blur)) saturate(1.6);
  opacity: var(--w30-ambient-klid);
  transform: scale(1.08);
  pointer-events: none;
  transition: opacity var(--w30-kino-dur) var(--ease-in-out);
}

:root[data-w30].w30-kino .zaznam__hlavni::before {
  opacity: var(--w30-ambient-kino);
}

:root[data-w30] .w30-sal {
  position: fixed;
  inset: 0;
  z-index: var(--w30-z-sal);
  background: var(--w30-sal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--w30-kino-dur) var(--ease-in-out);
}

/* Tma je jen obraz (`pointer-events` zůstává none): klik mimo záznam ji rozsvítí
   a ZÁROVEŇ projde na odkaz pod ní — žádný „první klik naprázdno“ (cross-check
   02.11.2026, Argon 1A). Rozsvícení řeší web-2030.js (klik kamkoli mimo `.zaznam`). */
:root[data-w30].w30-kino:not(.ma-rezim) .w30-sal {
  opacity: 1;
}

/* Celý `#obsah` (s tmou uvnitř) během kina NAD pozicované prvky za ním — jinak by patička
   (`.paticka__od` má `position: relative`) svítila přes tmu (doplňkový audit Fable N7). Hlavička
   (`--z-header`) zůstává nad, tlačítko „Nahoru“ (`--z-sticky`) taky. */
:root[data-w30].w30-kino:not(.ma-rezim) #obsah {
  z-index: var(--z-base);
}

:root[data-w30].w30-kino:not(.ma-rezim) .zaznam {
  position: relative;
  z-index: var(--w30-z-sal-zaznam);
}

/* Video a seznam bodů ve skle (A9). */
:root[data-w30] .zaznam__video {
  border-radius: var(--w30-radius);
  box-shadow: var(--w30-video-stin);
}

:root[data-w30] .zaznam__body {
  background: color-mix(in srgb, var(--navy-900) 28%, transparent);
  border-radius: var(--w30-radius);
  box-shadow: var(--w30-panel-hrana);
}

:root[data-w30] .zaznam__bod {
  position: relative;
}

:root[data-w30] .zaznam__bod[aria-current="true"] {
  background: rgb(255 255 255 / 18%);
  box-shadow: var(--w30-bod-stin);
}

/* Aktivní bod „žije“: při přehrávání jeho levá hrana zčervená jako tally a pomalu
   dýchá jako ručička VU-metru (absolutní pseudo-prvek přes hranu, nic se neposune). */
:root[data-w30].w30-hraje .zaznam__bod[aria-current="true"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--w30-okraj-bodu));
  width: var(--w30-okraj-bodu);
  border-radius: var(--radius-pill);
  background: var(--w30-tally);
  box-shadow: 0 0 0.6rem var(--w30-tally-zar);
  transform-origin: 50% 50%;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-w30].w30-hraje .zaznam__bod[aria-current="true"]::after {
    animation: w30-hladina 1600ms var(--ease-in-out) infinite alternate;
  }
}

@keyframes w30-hladina {
  from {
    transform: scaleY(0.55);
    opacity: 0.7;
  }
}

/* B8  Délky bodů jako časové kódy na monitoru (rámeček stínem — šířka se nemění). */
:root[data-w30] .zaznam__delka {
  border-radius: var(--radius-sm);
  background: rgb(0 0 0 / 28%);
  box-shadow: 0 0 0 0.25em rgb(0 0 0 / 28%);
}

:root[data-w30] .zaznam__bod[aria-current="true"] .zaznam__nahled {
  box-shadow: 0 0 0 var(--w30-linka) var(--w30-tally);
}

/* ===========================================================================
   B6  ČERSTVÁ NÁSTĚNKA — „Aktualizováno …“ s tally, je-li do 7 dnů
   =========================================================================== */
:root[data-w30] .aktualne__stitek.w30-cerstve::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.4em;
  border-radius: 50%;
  background: var(--w30-tally);
  vertical-align: 0.08em;
}

/* ===========================================================================
   C7  PRŮBĚH ČTENÍ — tenká linka nahoře na článku a zasedání (scroll(root),
   0 B JS). Při „omezit pohyb“ se nekreslí (bez animace by stála na nule).
   =========================================================================== */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    :root[data-w30]:has(.clanek) body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: calc(var(--z-header) + 1);
      height: var(--w30-cteni-vyska);
      background: var(--w30-titulek);
      transform-origin: 0 50%;
      pointer-events: none;
      animation: w30-cteni linear both;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes w30-cteni {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ===========================================================================
   A11  BUBLINY [data-napoveda] — mléčné sklo bez šipky (jako macOS / visionOS)
   Richie: „možná i modernější vizuál tooltipů“. Materiál navy 80 % + blur,
   hrana světla, rámeček 16 % bílé. Bublina „vyrůstá“ ze strany prvku. Náběh po
   260 ms (úmysl — přejetí přes řadu ikon už neproblikává), opacity + scale
   0,94 → 1 + rozostření 4 → 0; odchod hned; klávesnice bez zpoždění; omezený
   pohyb = jen prolnutí. Kontrast bílé ≈ 8 : 1 (světlý), ≈ 10 : 1 (tmavý) — AA.
   Oprava 02.11. (global.css: prvek s bublinou se zvedne nad sousedy) zůstává.
   =========================================================================== */
@media (hover: hover) and (pointer: fine) {
  :root[data-w30] [data-napoveda]::after {
    top: calc(100% + var(--w30-bublina-odstup));
    padding: var(--space-3xs) var(--space-xs);
    background:
      linear-gradient(rgb(255 255 255 / 12%), transparent 55%),
      var(--w30-bublina);
    -webkit-backdrop-filter: blur(var(--w30-blur-maly)) saturate(var(--w30-sytost));
    backdrop-filter: blur(var(--w30-blur-maly)) saturate(var(--w30-sytost));
    border: var(--w30-vlas) solid var(--w30-bublina-ram);
    border-radius: var(--w30-radius-bublina);
    box-shadow: var(--w30-bublina-stin);
    font-weight: 550;
    letter-spacing: 0.01em;
    transform-origin: 50% 0;
    scale: 0.94;
    filter: blur(var(--w30-bublina-mlha));
    transition:
      opacity var(--dur-fast) var(--ease-out),
      translate var(--dur-fast) var(--ease-out),
      scale var(--dur-base) var(--ease-out),
      filter var(--dur-base) var(--ease-out),
      display var(--dur-fast) allow-discrete;
  }

  /* Šipka pryč — sklo bez ocásku, ukazuje polohou. */
  :root[data-w30] [data-napoveda]::before {
    content: none;
  }

  :root[data-w30] [data-napoveda]:hover::after {
    scale: 1;
    filter: blur(0);
    transition-delay: var(--w30-bublina-zpozdeni);
  }

  :root[data-w30] [data-napoveda]:focus-visible::after {
    scale: 1;
    filter: blur(0);
    transition-delay: 0s;
  }

  @starting-style {
    :root[data-w30] [data-napoveda]:hover::after,
    :root[data-w30] [data-napoveda]:focus-visible::after {
      scale: 0.94;
      filter: blur(var(--w30-bublina-mlha));
    }
  }

  :root[data-w30] [data-napoveda-smer="nahoru"]::after {
    top: auto;
    bottom: calc(100% + var(--w30-bublina-odstup));
    transform-origin: 50% 100%;
  }

  :root[data-w30] [data-napoveda-smer="vlevo"]::after {
    top: 50%;
    right: calc(100% + var(--w30-bublina-odstup));
    transform-origin: 100% 50%;
  }

  :root[data-w30] [data-napoveda-smer="vpravo"]::after {
    top: 50%;
    left: calc(100% + var(--w30-bublina-odstup));
    transform-origin: 0 50%;
  }

  /* Na tmavé hlavičce a patičce: sytější sklo, ať bublina neztratí hranu. */
  :root[data-w30] :is(.hlavicka, .paticka) [data-napoveda]::after {
    background:
      linear-gradient(rgb(255 255 255 / 12%), transparent 55%),
      color-mix(in srgb, var(--navy-1000) 82%, transparent);
    border-color: var(--w30-bublina-ram);
  }

  @media (prefers-reduced-motion: reduce) {
    :root[data-w30] [data-napoveda]::after,
    :root[data-w30] [data-napoveda]:hover::after {
      scale: 1;
      filter: none;
    }
  }
}

/* ===========================================================================
   Omezený pohyb: nic se nezamáčkne (globální brzda v global.css zastaví
   animace; tady jistota i pro stavy, které brzda nepokryje).
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root[data-w30] :is(.pas__kapsle, .tlacitko, .filtr__kapsle, .karta__odkaz, .hero__hlavni):active {
    scale: 1;
  }
}