/* ======== DEJINY (dj-*) — уникальные цвета/фоны ======== */
.dj-chronicle{
  background:
    radial-gradient(600px 220px at 12% 12%, rgba(255,178,76,.10), transparent 60%),
    radial-gradient(600px 220px at 92% 0%,  rgba(30,90,78,.10), transparent 60%);
  position: relative;
}
.dj-chronicle__grid{
  display:grid; gap:1.2rem;
  grid-template-columns: 1.2fr .9fr .9fr;
  align-items:start;
}
.dj-head{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px; padding: 1.1rem 1.2rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 94% 100%, 6% 100%, 0 calc(100% - 16px)); /* «оторванный пергамент» */
  box-shadow: 0 10px 20px var(--ps-shadow);
}
.dj-head h1{
  margin: .2rem 0 .6rem;
  font-family: "Merriweather", serif; font-weight: 700;
  background: linear-gradient(90deg, var(--ps-cream), var(--ps-amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dj-lead{ font-family: "Merriweather", serif; }
.dj-text{ color: var(--ps-ink-dim); line-height: 1.75; }
.dj-underline{ position: relative; height: 10px; margin-top: .6rem; overflow: hidden; }
.dj-underline span{
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: calc(var(--ink, 12%)); height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ps-amber), var(--ps-accent));
  box-shadow: 0 0 16px rgba(255,178,76,.28);
  transition: width .35s ease;
}

.dj-scrap{
  position: relative; border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; overflow: clip; background: var(--ps-card);
  box-shadow: 0 12px 22px var(--ps-shadow);
}
.dj-scrap img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-scrap figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top: 1px dashed rgba(255,255,255,.12); }
/* кляксы «чернил» на углу */
.dj-ink{
  position:absolute; right:8px; top:8px; width:60px; height:60px; pointer-events:none;
  background:
    radial-gradient(14px 12px at 20% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(10px 10px at 60% 60%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(8px 8px at 40% 75%, rgba(255,255,255,.18), transparent 60%);
  mix-blend-mode: screen; opacity:.65; filter: blur(.2px);
  transform: rotate(8deg) scale(1);
  transition: transform .18s ease, opacity .18s ease;
}
.dj-scrap:hover .dj-ink{ transform: rotate(0deg) scale(1.05); opacity:.9; }

@media (max-width: 960px){
  .dj-chronicle__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .dj-chronicle__grid{ grid-template-columns: 1fr; }
}

/* ====== Sekcia 2: Mince a meradlá (timeline + coins) ====== */
.dj-coins{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 16px, transparent 16px 32px),
    radial-gradient(600px 220px at 86% 14%, rgba(179,27,52,.10), transparent 60%);
}
.dj-coins__wrap{ display:grid; gap:1.2rem; }
.dj-timeline{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.9rem;
  position: relative;
}
.dj-timeline::before{
  content:""; position:absolute; left:12px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  mask: linear-gradient(#000 0 0) top/100% var(--tl-progress, 0%) no-repeat;
}
.dj-time{
  position:relative; padding: .8rem .9rem .8rem 2.6rem;
  border:1px solid rgba(255,255,255,.12); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 10px 20px var(--ps-shadow);
  transition: transform .16s ease, border-color .2s ease;
}
.dj-time:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.18); }
.dj-time::before{
  content:""; position:absolute; left:6px; top: 1.05rem;
  width:14px; height:14px; border-radius:999px; background: var(--ps-amber);
  box-shadow: 0 0 0 2px rgba(255,178,76,.35);
}
.dj-time h3{ margin:0 0 .25rem; font-family:"Merriweather", serif; }
.dj-time p{ margin:0; line-height:1.7; }

.dj-coins__gallery{
  display:grid; gap:1rem; grid-template-columns: 1fr 1fr; align-items:start;
}
.dj-mint{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow: 0 12px 22px var(--ps-shadow);
}
.dj-mint img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-mint figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }
/* вращающаяся «монета» */
.dj-coin{
  position:absolute; right:10px; bottom:40px; width:52px; height:52px; border-radius:999px;
  background:
    radial-gradient(12px 12px at 50% 50%, rgba(255,255,255,.45), transparent 60%),
    conic-gradient(from 0deg, rgba(255,255,255,.38), rgba(255,255,255,.12) 25%, rgba(255,255,255,.38) 50%, rgba(255,255,255,.12) 75%, rgba(255,255,255,.38));
  mix-blend-mode: screen; transform: rotate(var(--spin,0deg));
  filter: drop-shadow(0 6px 12px var(--ps-shadow));
}
.dj-progress{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.dj-progress span{
  display:block; height:100%; width:var(--coins-pct, 0%); 
  background: linear-gradient(90deg, var(--ps-fern), var(--ps-amber));
  transition: width .25s ease;
}

@media (max-width: 820px){
  .dj-coins__gallery{ grid-template-columns: 1fr; }
}

/* ====== Sekcia 3: Cesty a trhy (map routes) ====== */
.dj-routes{
  background:
    radial-gradient(600px 220px at 12% 18%, rgba(30,90,78,.10), transparent 60%),
    radial-gradient(600px 220px at 92% 0%, rgba(27,78,122,.10), transparent 60%);
}
.dj-routes__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }

.dj-map{
  position: relative; border:1px dashed rgba(255,255,255,.20);
  border-radius:18px; padding: .8rem; background: rgba(255,255,255,.03);
  box-shadow: 0 10px 20px var(--ps-shadow);
  min-height: 240px; overflow: hidden;
}
.dj-map__route{
  position:absolute; left: 10%; right: 10%;
  height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.26) 0 10px, transparent 10px 20px);
  top: var(--y, 40%); transform: rotate(var(--r, 0deg)); transform-origin: left center;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.dj-map__route.is-north{ --y: 36%; --r: 8deg; }
.dj-map__route.is-south{ --y: 64%; --r: -10deg; }
.dj-map__route.is-east { --y: 50%; --r: 0deg; }

.dj-dot{
  position:absolute; left: 0; top: 50%; translate: -50% -50%;
  width: 10px; height: 10px; border-radius: 999px; background: var(--ps-amber);
  box-shadow: 0 0 0 2px rgba(255,178,76,.38);
  animation: dj-caravan 6s linear infinite;
}
@keyframes dj-caravan{
  from { left: 0%; } to { left: 100%; }
}

.dj-market{
  border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow: 0 12px 22px var(--ps-shadow);
}
.dj-market img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-market figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }

@media (max-width: 1000px){
  .dj-routes__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .dj-routes__grid{ grid-template-columns: 1fr; }
}
/* ====== Sekcia 4: Husitské stopy — štíty a iskry ====== */
.dj-hussites{
  background:
    radial-gradient(600px 220px at 8% 14%, rgba(255,178,76,.10), transparent 60%),
    radial-gradient(600px 220px at 92% 0%, rgba(27,78,122,.10), transparent 60%);
}
.dj-huss__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }

.dj-shield{
  position:relative; border:1px solid rgba(255,255,255,.12); overflow:clip;
  border-radius:18px; background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
  clip-path: polygon(12% 0, 88% 0, 100% 18%, 100% 70%, 50% 100%, 0 70%, 0 18%);
  transition: transform .18s ease, border-color .2s ease, box-shadow .18s ease;
}
.dj-shield:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,.18); box-shadow:0 18px 28px var(--ps-shadow); }
.dj-shield img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-shield figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }

/* искры */
.dj-sparks{ position:absolute; inset:0; pointer-events:none; opacity:.65; }
.dj-sparks i{
  position:absolute; width:6px; height:6px; border-radius:999px;
  background: var(--ps-amber); box-shadow: 0 0 10px rgba(255,178,76,.5);
  transform: translate(var(--sx,0), var(--sy,0)) scale(.9);
  animation: dj-twinkle 2.6s ease-in-out infinite;
}
@keyframes dj-twinkle{
  0%,100%{ opacity:.2; transform: translate(var(--sx,0), var(--sy,0)) scale(.7); }
  50%{ opacity:.95; transform: translate(calc(var(--sx,0) + 2px), calc(var(--sy,0) - 2px)) scale(1); }
}

@media (max-width: 1100px){
  .dj-huss__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
  .dj-huss__grid{ grid-template-columns: 1fr; }
}

/* ====== Sekcia 5: Reformácia a tlač — typografická dielňa ====== */
.dj-press{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 16px, transparent 16px 32px),
    radial-gradient(600px 220px at 86% 14%, rgba(30,90,78,.10), transparent 60%);
}
.dj-press__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }

.dj-typebar{
  border:1px dashed rgba(255,255,255,.20); border-radius:16px; padding:.6rem .8rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px);
  box-shadow:0 10px 20px var(--ps-shadow);
  font-variant-ligatures: common-ligatures contextual; 
}
.dj-type{ display:block; line-height:1.8; letter-spacing:.02em; }

.dj-print{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
}
.dj-print img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-print figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }

/* «валик» с чернилами */
.dj-roller{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(0deg, rgba(255,255,255,.10), transparent 60%);
  mix-blend-mode: screen; transition: opacity .2s ease;
}
.dj-print:hover .dj-roller{ opacity:.95; }

@media (max-width: 1100px){
  .dj-press__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
  .dj-press__grid{ grid-template-columns: 1fr; }
}

/* ====== Sekcia 6: Remeslá a cechy — znaky ====== */
.dj-guilds{
  background:
    radial-gradient(600px 220px at 12% 18%, rgba(179,27,52,.10), transparent 60%),
    radial-gradient(600px 220px at 0% 30%, rgba(27,78,122,.10), transparent 60%);
}
.dj-gmarks{ display:grid; gap:.9rem; margin:0; padding:0; list-style:none; }
.dj-gmark{
  position:relative; padding: 1rem 1rem 1rem 3rem;
  border:1px dashed rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:18px; box-shadow:0 10px 20px var(--ps-shadow);
}
.dj-gmark h3{ margin:0 0 .25rem; font-family:"Merriweather", serif; }
.dj-gmark p{ margin:0; line-height:1.75; }

/* герб-иконка слева (разные формы через nth-child) */
.dj-gmark::before{
  content:""; position:absolute; left:.9rem; top:50%; translate:0 -50%;
  width:18px; height:18px; background: var(--ps-amber); box-shadow:0 0 0 2px rgba(255,178,76,.35);
  clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); /* štít */
}
.dj-gmark:nth-child(2)::before{ clip-path: circle(50% at 50% 50%); }
.dj-gmark:nth-child(3)::before{ clip-path: polygon(10% 0, 90% 0, 100% 40%, 50% 100%, 0 40%); }
.dj-gmark:nth-child(4)::before{ clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* анимация «оживления» */
.dj-gmark.is-lit{ border-color: rgba(255,255,255,.24); box-shadow:0 16px 26px var(--ps-shadow); }
.dj-gline{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; margin-top:.8rem; overflow:hidden; }
.dj-gline > span{ display:block; height:100%; width:var(--gld,0%); background: linear-gradient(90deg, var(--ps-fern), var(--ps-amber)); transition: width .25s ease; }
/* ====== 7: Uhorská kráľovská cesta — milníky + sweep ====== */
.dj-royal{
  background:
    radial-gradient(600px 220px at 12% 18%, rgba(255,178,76,.10), transparent 60%),
    radial-gradient(600px 220px at 92% 0%,  rgba(27,78,122,.10), transparent 60%);
}
.dj-royal__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }
.dj-mile{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
}
.dj-mile img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-mile figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }
/* круговой „свип“ по краю карточки */
.dj-sweep{
  position:absolute; inset:0; pointer-events:none; opacity:.85;
  background:
    /* световая дуга */
    conic-gradient(from var(--rot,0deg), rgba(255,255,255,.28), transparent 40%, transparent 100%);
  mask:
    radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); /* колечко 6px по краю */
  mix-blend-mode: screen;
}
.dj-crownbar{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.dj-crownbar > span{ display:block; height:100%; width:var(--royal-pct,0%); background:linear-gradient(90deg, var(--ps-fern), var(--ps-amber)); transition: width .25s ease; }

@media (max-width: 1100px){ .dj-royal__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .dj-royal__grid{ grid-template-columns: 1fr; } }

/* ====== 8: Banícke mestá — ore-glint ====== */
.dj-mining{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 16px, transparent 16px 32px),
    radial-gradient(600px 220px at 86% 14%, rgba(30,90,78,.10), transparent 60%);
}
.dj-mining__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }
.dj-orecard{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
}
.dj-orecard img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-orecard figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }
/* слой «руды» и бликов */
.dj-ore{
  position:absolute; inset:0; pointer-events:none; opacity:.0; transition: opacity .2s ease;
  --mx: 50%; --my: 50%;
  background:
    radial-gradient(120px 100px at var(--mx) var(--my), rgba(255,255,255,.22), transparent 60%),
    radial-gradient(6px 6px  at 18% 22%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(5px 5px  at 36% 68%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(5px 5px  at 72% 44%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(4px 4px  at 58% 30%, rgba(255,255,255,.16), transparent 60%);
  mix-blend-mode: screen;
}
.dj-orecard:hover .dj-ore{ opacity:.95; }

@media (max-width: 1100px){ .dj-mining__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .dj-mining__grid{ grid-template-columns: 1fr; } }

/* ====== 9: Školy a učenie — osnova bez fotiek ====== */
.dj-schools{
  background:
    radial-gradient(600px 220px at 12% 18%, rgba(179,27,52,.10), transparent 60%),
    radial-gradient(600px 220px at 0% 30%, rgba(27,78,122,.10), transparent 60%);
}
.dj-syllabus{ display:grid; gap:.9rem; margin:0; padding:0; list-style:none; }
.dj-syl{
  position:relative; padding: 1rem 1rem 1rem 3rem;
  border:1px dashed rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:18px; box-shadow:0 10px 20px var(--ps-shadow);
  overflow:hidden;
}
.dj-syl h3{ margin:0 0 .25rem; font-family:"Merriweather", serif; }
.dj-syl p{ margin:0; line-height:1.75; }
/* «крейда» слева */
.dj-syl::before{
  content:""; position:absolute; left:.9rem; top:50%; translate:0 -50%;
  width:16px; height:16px; border-radius:3px; background: var(--ps-amber);
  box-shadow: 0 0 0 2px rgba(255,178,76,.35);
}
.dj-syl::after{
  content:""; position:absolute; right:-10%; top:0; bottom:0; width:40%;
  background: radial-gradient(120px 60px at 10% 50%, rgba(255,255,255,.10), transparent 60%);
  opacity:.0; animation: dj-chalk 3.6s ease-in-out infinite;
}
@keyframes dj-chalk{
  0%,100%{ opacity:0; transform: translateX(0); }
  50%{ opacity:.6; transform: translateX(-8%); }
}

.dj-classbar{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; margin-top:.8rem; overflow:hidden; }
.dj-classbar > span{ display:block; height:100%; width:var(--school-pct,0%); background: linear-gradient(90deg, var(--ps-fern), var(--ps-amber)); transition: width .25s ease; }
/* ====== 10: Zväzky a hranice — border-pulse ====== */
.dj-borders{
  background:
    radial-gradient(600px 220px at 12% 18%, rgba(255,178,76,.10), transparent 60%),
    radial-gradient(600px 220px at 92% 0%,  rgba(27,78,122,.10), transparent 60%);
}
.dj-borders__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }
.dj-bordercard{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
}
.dj-bordercard img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-bordercard figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }
/* пульсирующее «кольцо» по краю */
.dj-pulse{
  position:absolute; inset:0; pointer-events:none;
  background:
    conic-gradient(from var(--angle,0deg), rgba(255,255,255,.26), transparent 40% 60%, rgba(255,255,255,.26) 80%, transparent 100%);
  mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); /* обод 6px */
  mix-blend-mode: screen; opacity:.85;
}
.dj-borderline{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.dj-borderline > span{ display:block; height:100%; width:var(--border-pct,0%); background:linear-gradient(90deg, var(--ps-fern), var(--ps-amber)); transition: width .25s ease; }

@media (max-width: 1100px){ .dj-borders__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .dj-borders__grid{ grid-template-columns: 1fr; } }

/* ====== 11: Železnice a továrne — steam-track ====== */
.dj-rail{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 16px, transparent 16px 32px),
    radial-gradient(600px 220px at 86% 14%, rgba(30,90,78,.10), transparent 60%);
}
.dj-rail__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }
.dj-loco{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
}
.dj-loco img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-loco figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }
/* «рельсы» под фото */
.dj-track{
  position:absolute; left:0; right:0; bottom:42px; height:14px; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(255,255,255,.35), rgba(255,255,255,.0)) 0 0 / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 10px, rgba(255,255,255,.0) 10px 22px);
  animation: dj-track-move 3s linear infinite;
  opacity:.55;
}
@keyframes dj-track-move{
  from{ background-position: 0 0, 0 0; }
  to  { background-position: 0 0, -120px 0; }
}
/* «пар» */
.dj-steam{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:
    radial-gradient(120px 200px at 30% 100%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(140px 220px at 70% 100%, rgba(255,255,255,.14), transparent 60%);
  mix-blend-mode: screen;
  animation: dj-steam-rise 7s ease-in-out infinite;
}
@keyframes dj-steam-rise{
  0%,100%{ transform: translateY(8%); filter: blur(0); }
  50%{ transform: translateY(-8%); filter: blur(1px); }
}
.dj-loco.is-on .dj-steam{ opacity:.9; }

@media (max-width: 1100px){ .dj-rail__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .dj-rail__grid{ grid-template-columns: 1fr; } }

/* ====== 12: Občianske spolky — badge-trail ====== */
.dj-societies{
  background:
    radial-gradient(600px 220px at 12% 18%, rgba(179,27,52,.10), transparent 60%),
    radial-gradient(600px 220px at 0% 30%, rgba(27,78,122,.10), transparent 60%);
}
.dj-badges{ display:grid; gap:.9rem; margin:0; padding:0; list-style:none; }
.dj-badge{
  position:relative; padding: 1rem 1rem 1rem 3rem;
  border:1px dashed rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:18px; box-shadow:0 10px 20px var(--ps-shadow);
}
.dj-badge h3{ margin:0 0 .25rem; font-family:"Merriweather", serif; }
.dj-badge p{ margin:0; line-height:1.75; }
/* «значок» слева — разные формы по порядку */
.dj-badge::before{
  content:""; position:absolute; left:.9rem; top:50%; translate:0 -50%;
  width:18px; height:18px; background: var(--ps-amber); box-shadow:0 0 0 2px rgba(255,178,76,.35);
  clip-path: polygon(50% 0, 100% 45%, 78% 100%, 22% 100%, 0 45%);
}
.dj-badge:nth-child(2)::before{ clip-path: circle(50% at 50% 50%); }
.dj-badge:nth-child(3)::before{ clip-path: polygon(0 30%, 50% 0, 100% 30%, 70% 100%, 30% 100%); }
.dj-badge:nth-child(4)::before{ clip-path: polygon(50% 0, 100% 55%, 50% 100%, 0 55%); }

.dj-badge.is-on{ border-color: rgba(255,255,255,.24); box-shadow:0 16px 26px var(--ps-shadow); }
.dj-badgebar{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; margin-top:.8rem; overflow:hidden; }
.dj-badgebar > span{ display:block; height:100%; width:var(--soc-pct,0%); background: linear-gradient(90deg, var(--ps-fern), var(--ps-amber)); transition: width .25s ease; }
/* ====== 13: Jazyk a kódex — accent-wave ====== */
.dj-language{
  background:
    radial-gradient(600px 220px at 12% 18%, rgba(30,90,78,.10), transparent 60%),
    radial-gradient(600px 220px at 92% 0%,  rgba(179,27,52,.10), transparent 60%);
}
.dj-language__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }
.dj-ling{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
}
.dj-ling img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-ling figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }
/* бегущая волна диакритик над карточкой */
.dj-accent{
  position:absolute; inset:0; pointer-events:none; opacity:.9;
  --ax: 50%; --ay: 50%;
  background:
    radial-gradient(160px 110px at var(--ax) var(--ay), rgba(255,255,255,.18), transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.10) 0 2px, transparent 2px 14px),
    /* строка акцентов */
    linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.20), rgba(255,255,255,.0)) 0 12%/200% 1px no-repeat;
  mix-blend-mode: screen;
  animation: dj-accent-wave 4.8s ease-in-out infinite;
}
@keyframes dj-accent-wave{
  0%,100%{ background-position: 0 0, 0 0, 0 12%; }
  50%{ background-position: 0 0, 0 0, 100% 12%; }
}
.dj-lexbar{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.dj-lexbar > span{ display:block; height:100%; width:var(--lex-pct,0%); background: linear-gradient(90deg, var(--ps-fern), var(--ps-amber)); transition: width .25s ease; }

@media (max-width: 1100px){ .dj-language__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .dj-language__grid{ grid-template-columns: 1fr; } }

/* ====== 14: Prvá republika — flag-stripes ====== */
.dj-republic{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 16px, transparent 16px 32px),
    radial-gradient(600px 220px at 86% 14%, rgba(255,178,76,.10), transparent 60%);
}
.dj-republic__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }
.dj-rep-card{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dj-rep-card:hover{ box-shadow:0 18px 28px var(--ps-shadow); border-color: rgba(255,255,255,.18); }
.dj-rep-card img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-rep-card figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }
/* полосы-флаги */
.dj-flag{
  position:absolute; inset:-2px; pointer-events:none; opacity:.9;
  background:
    linear-gradient(var(--ang, 12deg),
      rgba(255,255,255,.10) 0 18%,
      rgba(255,255,255,.00) 18% 36%,
      rgba(255,255,255,.10) 36% 54%,
      rgba(255,255,255,.00) 54% 72%,
      rgba(255,255,255,.10) 72% 90%,
      rgba(255,255,255,.00) 90% 100%);
  mix-blend-mode: screen;
}

@media (max-width: 1100px){ .dj-republic__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .dj-republic__grid{ grid-template-columns: 1fr; } }

/* ====== 15: Obnova a elektrifikácia — wire-spark ====== */
.dj-rebuild{
  background:
    radial-gradient(600px 220px at 12% 18%, rgba(27,78,122,.10), transparent 60%),
    radial-gradient(600px 220px at 0% 30%, rgba(179,27,52,.10), transparent 60%);
}
.dj-rebuild__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }
.dj-reb-card{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
}
.dj-reb-card img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-reb-card figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }
/* провода и искры */
.dj-wire{
  position:absolute; inset:0; pointer-events:none; opacity:.85;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px) 0 26%/ 22px 2px repeat-x,
    linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px) 0 52%/ 22px 2px repeat-x,
    linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px) 0 78%/ 22px 2px repeat-x;
  mix-blend-mode: screen;
}
.dj-spark{
  position:absolute; left:0; top:26%;
  width:12px; height:12px; border-radius:999px; background: var(--ps-amber);
  box-shadow:0 0 0 2px rgba(255,178,76,.35), 0 0 16px rgba(255,178,76,.45);
  animation: dj-spark-run 4.8s linear infinite;
}
@keyframes dj-spark-run{
  0%{ transform: translate(0, 0); }
  33%{ transform: translate(100%, 0); }
  34%{ transform: translate(0, 26%); }     /* прыжок на нижний уровень */
  66%{ transform: translate(100%, 26%); }
  67%{ transform: translate(0, 52%); }
  100%{ transform: translate(100%, 52%); }
}
.dj-rebbar{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.dj-rebbar > span{ display:block; height:100%; width:var(--reb-pct,0%); background: linear-gradient(90deg, var(--ps-fern), var(--ps-amber)); transition: width .25s ease; }

@media (max-width: 1100px){ .dj-rebuild__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .dj-rebuild__grid{ grid-template-columns: 1fr; } }
/* ====== 16: Kultúra a festivaly — stage-spot + equalizer ====== */
.dj-fests{
  background:
    radial-gradient(600px 220px at 12% 18%, rgba(255,178,76,.10), transparent 60%),
    radial-gradient(600px 220px at 92% 0%,  rgba(27,78,122,.10), transparent 60%);
}
.dj-fests__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }
.dj-stage{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
}
.dj-stage img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-stage figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }

/* софит-«спот» */
.dj-spot{
  position:absolute; inset:0; pointer-events:none; opacity:.0; transition: opacity .2s ease;
  --fx: 50%; --fy: 40%;
  background:
    radial-gradient(220px 180px at var(--fx) var(--fy), rgba(255,255,255,.22), transparent 60%),
    radial-gradient(160px 120px at calc(var(--fx) + 6%) calc(var(--fy) + 4%), rgba(255,178,76,.20), transparent 60%);
  mix-blend-mode: screen;
}
.dj-stage:hover .dj-spot{ opacity:.95; }

/* эквалайзер */
.dj-bars{
  position:absolute; left:8px; right:8px; bottom:40px; height:32px; pointer-events:none; display:grid; grid-template-columns: repeat(8, 1fr); gap:6px;
}
.dj-bars i{
  display:block; align-self:end; width:100%; height: var(--h, 8px);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.15));
  border-radius:4px; box-shadow:0 6px 12px var(--ps-shadow);
  transition: height .12s ease;
}

.dj-ticketbar{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.dj-ticketbar > span{ display:block; height:100%; width:var(--fest-pct,0%); background: linear-gradient(90deg, var(--ps-fern), var(--ps-amber)); transition: width .25s ease; }

@media (max-width: 1100px){ .dj-fests__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .dj-fests__grid{ grid-template-columns: 1fr; } }

/* ====== 17: Súčasnosť — digitálne archívy (scan-line + cursor) ====== */
.dj-now{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 16px, transparent 16px 32px),
    radial-gradient(600px 220px at 86% 14%, rgba(30,90,78,.10), transparent 60%);
}
.dj-now__grid{ display:grid; gap:1.2rem; grid-template-columns: 1.05fr 1fr 1fr; align-items:start; }

.dj-archive{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:clip;
  background: var(--ps-card); box-shadow:0 12px 22px var(--ps-shadow);
}
.dj-archive img{ display:block; width:100%; height:auto; max-width:350px; }
.dj-archive figcaption{ padding:.7rem .9rem; color:var(--ps-ink-dim); border-top:1px dashed rgba(255,255,255,.12); }

/* «скан-линия» + курсор-лупа */
.dj-scan{
  position:absolute; inset:0; pointer-events:none; opacity:.75;
  background:
    linear-gradient(0deg, rgba(255,255,255,.22) 0 2px, transparent 2px 100%) 0 var(--y,0)/100% 26px repeat-y,
    radial-gradient(220px 120px at 50% var(--y2,50%), rgba(255,255,255,.10), transparent 60%);
  mix-blend-mode: screen;
}
.dj-cursor{
  position:absolute; width:110px; height:110px; border-radius:999px; pointer-events:none;
  left: var(--cx, 60%); top: var(--cy, 40%); transform: translate(-50%, -50%);
  background: radial-gradient(60px 60px at 50% 50%, rgba(255,255,255,.26), transparent 60%);
  mix-blend-mode: screen; opacity:.0; transition: opacity .2s ease;
}
.dj-archive:hover .dj-cursor{ opacity:.95; }

.dj-databar{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.dj-databar > span{ display:block; height:100%; width:var(--data-pct,0%); background: linear-gradient(90deg, var(--ps-fern), var(--ps-amber)); transition: width .25s ease; }

@media (max-width: 1100px){ .dj-now__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .dj-now__grid{ grid-template-columns: 1fr; } }
/* ====== 18: Esej — pamäť miest (bez obrázkov) ====== */
.dj-essay{
  background:
    radial-gradient(600px 220px at 12% 18%, rgba(27,78,122,.10), transparent 60%),
    radial-gradient(600px 220px at 92% 0%,  rgba(255,178,76,.10), transparent 60%);
}
.dj-essay__wrap{
  display:grid; gap:1.2rem;
  grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr);
  align-items:start;
}
.dj-essay__cols{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 12px 22px var(--ps-shadow);
  padding:1rem 1rem 1.1rem;
  column-width: 320px;
  column-gap: 2rem;
}
.dj-essay__cols p{ break-inside: avoid-column; line-height:1.9; margin:0 0 .85rem; }
.dj-essay__cols em{ opacity:.95; }
.dj-essay__cols strong{ color: var(--ps-cream); }

/* drop-cap первого абзаца */
.dj-essay__cols p:first-child::first-letter{
  float:left; font-family:"Merriweather", serif; font-weight:700;
  font-size:2.8rem; line-height:1; margin:.1rem .48rem 0 0;
  color: var(--ps-amber); text-shadow:0 6px 12px var(--ps-shadow);
}

/* цитаты */
.dj-quote{
  display:block; break-inside: avoid-column;
  margin:.6rem 0 .9rem; padding:.65rem .9rem;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 18px var(--ps-shadow);
  position:relative;
}
.dj-quote::before{
  content:"“"; position:absolute; left:.5rem; top:-.85rem;
  font-family:"Merriweather", serif; font-size:2.4rem; color:var(--ps-amber);
}
.dj-quote.is-lit{ border-color: rgba(255,255,255,.22); box-shadow:0 14px 24px var(--ps-shadow); }

/* боковая колонка */
.dj-essay__notes{
  position: sticky; top: calc(var(--ps-header-h, 64px) + 16px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:.9rem 1rem;
  background: var(--ps-card);
  box-shadow:0 12px 22px var(--ps-shadow);
  height: fit-content;
}
.dj-essay__notes h3{ margin:.1rem 0 .45rem; font-family:"Merriweather", serif; }
.dj-essay__notelist{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.dj-essay__notelist li{ border-bottom:1px dashed rgba(255,255,255,.12); padding-bottom:.5rem; }
.dj-essay__notelist li:last-child{ border-bottom:0; }

/* прогресс чтения внутри секции */
.dj-essay__progress{ height:8px; background: rgba(255,255,255,.06); border-radius:999px; grid-column:1 / -1; overflow:hidden; }
.dj-essay__progress > span{
  display:block; height:100%; width:var(--djessay-pct,0%);
  background: linear-gradient(90deg, var(--ps-fern), var(--ps-amber));
  transition: width .25s ease;
}

/* адаптив */
@media (max-width: 980px){
  .dj-essay__wrap{ grid-template-columns: 1fr; }
  .dj-essay__notes{ position: static; }
}
@media (max-width: 640px){
  .dj-essay__cols{ column-width: auto; column-count: 1; }
}