/* ─────────────────────────────────────────────────────────────────────────
   KABÁT „PŘECHOD" — dynamická vrstva (styl aasidesign v paletě oboru).
   Odpojitelná: připíná se JEN když config má kabat="prechod". NEMĚNÍ třídy ani kostru.
   Barvy bere z palety oboru (--a1/--a1d/--a1p/--a2/--bg/--ink) → sedí na každý obor,
   žádné plošné neonové AASI barvy. Pohyb decentní; prefers-reduced-motion respektováno;
   kontrast textu držen (gradienty jen na velkém nadpisu a tlačítku, akcenty jen ~20 % do bg).
   ───────────────────────────────────────────────────────────────────────── */

/* Animovaný -45deg vícebarevný gradient ZA herem — decentní, v paletě (accent ~20 % do bg,
   takže povrch zůstává světlý a tmavý text hera drží AA). */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -25%; z-index: -2;
  background: linear-gradient(-45deg,
    var(--bg),
    var(--surface2),
    color-mix(in srgb, var(--a1) 20%, var(--bg)),
    color-mix(in srgb, var(--a2) 20%, var(--bg)),
    var(--surface),
    var(--bg));
  background-size: 400% 400%;
  animation: aasiGrad 24s ease-in-out infinite;
}
@keyframes aasiGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Měkké radiální záře (průhlednost ~0,3) v akcentech oboru. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 52% at 12% 18%, color-mix(in srgb, var(--a1) 32%, transparent), transparent 72%),
    radial-gradient(44% 58% at 88% 82%, color-mix(in srgb, var(--a2) 28%, transparent), transparent 72%);
}
/* Pointer-follow záře (JS nastaví --mx/--my); bez JS zůstává statická varianta výše. */
.hero.has-glow::after {
  background:
    radial-gradient(30% 40% at var(--mx, 50%) var(--my, 28%), color-mix(in srgb, var(--a2) 30%, transparent), transparent 70%),
    radial-gradient(38% 52% at 12% 18%, color-mix(in srgb, var(--a1) 30%, transparent), transparent 72%),
    radial-gradient(44% 58% at 88% 82%, color-mix(in srgb, var(--a2) 24%, transparent), transparent 72%);
}

/* Gradientní nadpis hera — mezi TMAVÝMI stopy (--a1d → --ink), AA-safe na světlém povrchu
   (velký text, práh 3:1). Fallback: plná --ink, když background-clip:text chybí. */
.hero__text h1 { color: var(--ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__text h1 {
    background: linear-gradient(100deg, var(--a1d), var(--ink) 78%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

/* Primární tlačítko — DYNAMIKA přes akcentní záři + lift, NE přes změnu pozadí.
   Pozadí drží solid --a1p (th() u něj kontrast s --accent-ink ověřilo ≥4,5 pro každou paletu).
   ⛔ Gradient na --a1d by u palet s tmavým inkem (bistro) spadl pod 4,5 — proto ne.
   Zároveň PŘEBÍJÍME base hover (→--a1d), aby žádný stav tlačítka neklesl pod AA. */
.btn--primary {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--a1) 32%, transparent);
  transition: transform .15s ease, box-shadow .25s ease;
}
.btn--primary:hover {
  background: var(--a1p, var(--a1));
  transform: translateY(-1px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--a1) 42%, transparent);
}

/* Výkon + přístupnost: žádný pohyb při prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; background-position: 25% 50%; }
  .btn--primary { transition: transform .15s ease; }
}