/* Превью Panchronia в карточке «Веб-проекты» на главной (логика — panchronia-demo.js).
   Как в самом атласе: пергамент, крупный год, глобус с границами, лента правителей и золотой ползунок.
   Без текста — одинаково на всех языках. Декор: клики проходят к ссылке-карточке. */
.project-preview.pv-panchronia {
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(201,138,75,.22), transparent 70%),
    linear-gradient(160deg, #f8efdf, #ecdcbf);
}
.project-preview.pv-panchronia::before { background: radial-gradient(closest-side at 30% 30%, rgba(255,255,255,.45), transparent 70%); }
.pc { position: absolute; inset: 0; color: #6b4a1f; }

/* Год — как заголовок атласа */
.pc-year {
  position: absolute; left: 24px; top: 26px; margin: 0;
  font: 400 64px/1 Georgia, "Times New Roman", serif; letter-spacing: -2px; font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(180deg, #a87634, #6e4716); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pc-era { position: absolute; left: 26px; top: 100px; display: flex; gap: 5px; }
.pc-era i { width: 22px; height: 6px; border-radius: 3px; background: rgba(168,118,52,.22); transition: background .5s ease; }
.pc-era i.on { background: #b07d36; }

/* Глобус */
.pc-globe {
  position: absolute; right: 18px; top: 14px; width: 168px; height: 168px; overflow: visible;
  filter: drop-shadow(0 14px 22px rgba(110,71,22,.22));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.project.live:hover .pc-globe { transform: translateY(-6px) scale(1.03); }
.pc-ocean { fill: url(#pcOcean); }
.pc-grid { fill: none; stroke: rgba(110,71,22,.14); stroke-width: .7; }
.pc-land path { stroke: #fbf4e6; stroke-width: .6; stroke-linejoin: round; transition: fill .9s ease; }
.pc-land .pc-base { fill: #d4bb8c; stroke: none; } /* суша без государств */
.pc-shade { fill: url(#pcShade); pointer-events: none; }
.pc-ring { fill: none; stroke: #b8863a; stroke-width: 3; }

/* Лента времени: дорожки правителей и стилей, линейка с событиями, ползунок по центру */
.pc-tl {
  position: absolute; left: 14px; right: 14px; bottom: 14px; height: 76px; overflow: hidden;
  border-radius: 14px; background: rgba(255,252,245,.82); border: 1px solid rgba(110,71,22,.1);
  box-shadow: 0 10px 24px rgba(110,71,22,.12);
}
.pc-strip { position: absolute; left: 0; top: 0; bottom: 0; will-change: transform; }
.pc-lane { position: absolute; left: 0; height: 9px; }
.pc-lane:nth-child(1) { top: 9px; } .pc-lane:nth-child(2) { top: 22px; } .pc-lane:nth-child(3) { top: 35px; }
.pc-lane span { position: absolute; top: 0; height: 100%; border-radius: 3px; background: #ecdcc0; transition: background .3s ease; }
.pc-lane span.on { background: #b07d36; }
.pc-lane.st span { background: #ece0f3; } .pc-lane.st span.on { background: #9b6bd6; }
.pc-ruler { position: absolute; left: 0; top: 51px; height: 20px; }
.pc-ruler b { position: absolute; top: 0; font: 600 8.5px/1 system-ui, sans-serif; color: rgba(110,71,22,.5); transform: translateX(-50%); }
.pc-ruler i { position: absolute; top: 12px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--c); opacity: .75; transition: transform .3s ease, opacity .3s ease; }
.pc-ruler i.on { transform: scale(1.7); opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.pc-head { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #b07d36; }
.pc-head::before { content: ""; position: absolute; left: -4px; top: 0; border: 5px solid transparent; border-top-color: #b07d36; }
.pc-tl::before, .pc-tl::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 1; }
.pc-tl::before { left: 0; background: linear-gradient(90deg, #fffcf5, rgba(255,252,245,0)); }
.pc-tl::after { right: 0; background: linear-gradient(-90deg, #fffcf5, rgba(255,252,245,0)); }

@media (max-width: 560px) {
  .pc-year { font-size: 52px; left: 18px; top: 24px; }
  .pc-era { left: 20px; top: 86px; }
  .pc-globe { width: 148px; height: 148px; right: 12px; top: 12px; }
}
@media (max-width: 340px) {
  .pc-year { font-size: 44px; }
  .pc-globe { width: 132px; height: 132px; }
}