/* Motion – přechody převzaté a přizpůsobené z transitions.dev (Jakub Antalík),
   https://transitions.dev · použito v souladu s licencí (použití v projektu, ne
   redistribuce knihovny). Každý blok má guard pro prefers-reduced-motion. */

:root {
  /* Motion tokens – sdílená škála */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --distance-micro: 4px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --blur-small: 2px;
  --blur-medium: 3px;

  /* 08 Page side-by-side */
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 18 Texts reveal */
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 09 Icon swap */
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* 14 Skeleton loader and reveal */
  --pulse-dur: 1000ms;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
  /* 21 Accordion */
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 24 Learn more hover */
  --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 08 Page side-by-side – přechod mezi pohledy (vydání ↔ detail, starší ↔ novější).
   Jeden kontejner: starý obsah krátce odejde, nový přijede ze strany podle směru. */
.t-view {
  transition:
    opacity   var(--page-fade-dur)  var(--page-fade-ease),
    transform var(--page-slide-dur) var(--page-slide-ease),
    filter    var(--page-slide-dur) var(--page-slide-ease);
}
.t-view.is-leaving {
  opacity: 0;
  transform: translateX(calc(var(--page-slide-distance) * var(--t-dir, 1) * -1));
  filter: blur(var(--page-blur));
  transition-duration: var(--duration-quick);
}
.t-view.is-entering {
  opacity: 0;
  transform: translateX(calc(var(--page-slide-distance) * var(--t-dir, 1)));
  filter: blur(var(--page-blur));
  transition: none;
}

/* ── 18 Texts reveal – titulek, perex a meta vydání / článku */
.t-stagger-line {
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger.is-shown .t-stagger-line { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ── 14 Skeleton loader and reveal – první načtení a odhalení filtrovaných rubrik */
.t-skel-skeleton > * { animation: t-skel-pulse var(--pulse-dur) ease-in-out infinite; }
@keyframes t-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: var(--pulse-min); } }
.t-reveal { animation: t-reveal var(--reveal-dur) var(--reveal-ease) both; }
@keyframes t-reveal { from { opacity: 0; filter: blur(var(--reveal-blur)); } to { opacity: 1; filter: blur(0); } }

/* ── 09 Icon swap – přepínač světlý / tmavý režim */
.t-icon-swap { position: relative; display: inline-grid; }
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  display: grid; place-items: center;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] { opacity: 1; filter: blur(0); transform: scale(1); }
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); }

/* ── 21 Accordion – archiv vydání na mobilu */
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner { overflow: hidden; min-height: 0; opacity: 0; filter: blur(2px); transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease); }
.t-acc-chevron { display: inline-flex; transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }

/* ── 24 Learn more hover – šipka u odkazu na detail článku */
.t-learn-chevron { display: inline-flex; vertical-align: -1px; margin-left: 4px; transform: translateX(0); transition: transform var(--learn-out) var(--learn-ease); }
.t-learn-chevron svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.t-learn-arm { transform-box: view-box; transform-origin: 10px 8px; vector-effect: non-scaling-stroke; transition: transform var(--learn-out) var(--learn-ease); }
.t-learn:hover .t-learn-chevron, .t-learn:focus-visible .t-learn-chevron { transform: translateX(var(--learn-shift)); transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm, .t-learn:focus-visible .t-learn-arm { transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm-top, .t-learn:focus-visible .t-learn-arm-top { transform: rotate(var(--learn-spread)); }
.t-learn:hover .t-learn-arm-bot, .t-learn:focus-visible .t-learn-arm-bot { transform: rotate(calc(var(--learn-spread) * -1)); }

/* ── Refine: mikrointerakce napojené na motion tokeny */
.nav a, .archive__list a, .chip, .theme, .pager a, .src, .content a.src, .repo__name, .back {
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .t-view, .t-stagger-line, .t-icon-swap .t-icon, .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron, .t-learn-chevron, .t-learn-arm,
  .nav a, .archive__list a, .chip, .theme, .pager a, .content a.src, .repo__name, .back { transition: none !important; }
  .t-skel-skeleton > *, .t-reveal { animation: none !important; }
}