/* ===== Tijdlijn: страница 2 ===== */

/* Заголовок страницы */
main > h1{
  font-family: "Cardo", serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 10px auto 6px;
  width: min(1120px, 92vw);
}

/* ===== Sectie 1: Prologue ribbon ===== */
.prologue-ribbon .ribbon-gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
}
.pr-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.pr-card figcaption{ color: var(--muted); font-size: .92rem; padding-top: 6px; }

/* Бегущая дорожка годов */
.year-track{
  --p: 0; /* прогресс от 0..1 из JS */
  position: relative;
  height: 44px;
  border-radius: 999px;
  margin: 0 0 14px;
  background: linear-gradient(90deg, rgba(77,179,226,.28), rgba(226,179,77,.28));
  box-shadow: inset 0 0 14px rgba(0,0,0,.45);
  overflow: clip;
}
.year-track .chip{
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  display: inline-block;
  padding: 6px 10px; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(12,19,32,.8);
  white-space: nowrap;
}
.year-track .chip:nth-child(1){ left: calc(6% + var(--p)*2%); }
.year-track .chip:nth-child(2){ left: calc(18% + var(--p)*4%); }
.year-track .chip:nth-child(3){ left: calc(32% + var(--p)*6%); }
.year-track .chip:nth-child(4){ left: calc(48% + var(--p)*6%); }
.year-track .chip:nth-child(5){ left: calc(62% + var(--p)*6%); }
.year-track .chip:nth-child(6){ left: calc(76% + var(--p)*4%); }
.year-track .chip:nth-child(7){ left: calc(88% + var(--p)*2%); }
.year-track .chip:nth-child(8){ left: calc(96% + var(--p)*1%); }

/* ===== Sectie 2: City & yards (вертикальный стержень) ===== */
.cy-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
  position: relative;
}
.cy-copy h3{ margin: 0 0 6px; font-family: "Cardo", serif; }
.cy-copy p{ margin: 0 0 10px; color: var(--muted); }
.cy-fig figcaption{ color: var(--muted); font-size: .92rem; padding-top: 6px; }

/* Вертикальный «спайн» с пульсами */
.spine{
  position: absolute; left: 50%; top: 0; bottom: 0; width: 6px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(77,179,226,.3), rgba(226,179,77,.3));
  border-radius: 999px;
  overflow: visible;
}
.spine .dot{
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  top: var(--p);
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffd27a 60%, transparent 70%);
  animation: dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(226,179,77,.0); transform: translate(-50%, -50%) scale(1); }
  50%{ box-shadow: 0 0 20px 6px rgba(226,179,77,.25); transform: translate(-50%, -50%) scale(1.12); }
}

/* ===== Sectie 3: Breakthroughs (flip-карточки) ===== */
.br-grid{ display: grid; gap: clamp(12px, 2vw, 20px); }
.flip-belt{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
}
.flip{
  perspective: 1000px;
  outline: none;
}
.flip-inner{
  position: relative;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  padding: 10px;
}
.flip:focus-visible .flip-inner,
.flip:hover .flip-inner{ transform: rotateY(180deg); }
.face{
  backface-visibility: hidden;
}
.face.front h3{
  margin: 6px 0 0;
  font-family: "Cardo", serif;
}
.face.back{
  position: absolute; inset: 10px;
  display: grid; place-items: center;
  transform: rotateY(180deg);
  color: var(--muted);
}

/* ===== Responsive ===== */
@media (max-width: 992px){
  .prologue-ribbon .ribbon-gallery{ grid-template-columns: 1fr 1fr; }
  .cy-grid{ grid-template-columns: 1fr 1fr; }
  .spine{ display: none; }
  .flip-belt{ grid-template-columns: 1fr; }
}
@media (max-width: 576px){
  .prologue-ribbon .ribbon-gallery{ grid-template-columns: 1fr; }
}
/* Подсветка, двигаем через переменную --x (0%..100%) */
.year-track::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(140px 60px at var(--x,50%) 50%, rgba(255,255,255,.08), transparent 70%);
  pointer-events: none;
}
/* Мобильный/планшет: чипы больше не absolute, не накладываются */
@media (max-width: 992px){
  .year-track{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    height: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .year-track .chip{
    position: static;           /* ключ: убираем absolute */
    transform: none;            /* центрирование больше не нужно */
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .88rem;
    padding: 6px 10px;
  }
}
@media (max-width: 576px){
  .year-track{ gap: 8px; }
  .year-track .chip{ font-size: .84rem; padding: 5px 9px; }
}
/* ===== Sectie 4: Waterlijn ===== */
.wl-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
}
.wl-graph{
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.wl-svg{ width: 100%; height: auto; display: block; }
.wl-graph figcaption{ color: var(--muted); font-size: .9rem; padding-top: 6px; }
.wl-copy h3{ margin: 0 0 6px; font-family: "Cardo", serif; }
.wl-copy p{ margin: 0; color: var(--muted); }
.wl-gallery{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 2vw, 20px);
}

/* ===== Sectie 5: Gilde-carrousel ===== */
.gtrack{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: clamp(12px, 2vw, 18px);
  overflow-x: auto;
  padding: 6px 12px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.gcard{
  scroll-snap-align: start;
  min-width: 300px;
  max-width: 350px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  padding: 10px;
}
.gcard h3{
  margin: 8px 0 4px;
  font-family: "Cardo", serif;
}
.gcard p{ color: var(--muted); margin: 0; }
.gtrack-hint{
  font-size: .82rem; color: var(--muted);
  margin-top: 6px; text-align: right;
  animation: hintPulse 2.6s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{ opacity:.6; transform: translateX(0); }
  50%{ opacity:1; transform: translateX(6px); }
}

/* ===== Sectie 6: Risk & insure ===== */
.ri-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
}
.ri-fig figcaption{ color: var(--muted); font-size: .92rem; padding-top: 6px; }

/* Конвойная лента */
.convoy-lane{
  position: relative;
  height: 18px; margin: 8px 0 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(77,179,226,.28), rgba(226,179,77,.28)),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,.1) 40px 42px);
  box-shadow: inset 0 0 12px rgba(0,0,0,.45);
  overflow: clip;
}
.convoy-lane .ship{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 10px; border-radius: 4px 10px 10px 4px / 4px 10px 10px 4px;
  background: linear-gradient(180deg, #fff, #dbe8ff);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  animation: sail 6s linear infinite;
}
.convoy-lane .ship:nth-child(1){ left: 10%; animation-delay: 0s; }
.convoy-lane .ship:nth-child(2){ left: 30%; animation-delay: .4s; }
.convoy-lane .ship:nth-child(3){ left: 50%; animation-delay: .8s; }
.convoy-lane .ship:nth-child(4){ left: 70%; animation-delay: 1.2s; }
.convoy-lane .ship:nth-child(5){ left: 90%; animation-delay: 1.6s; }
@keyframes sail{
  0%{ transform: translate(-50%, -50%) translateX(0); }
  100%{ transform: translate(-50%, -50%) translateX(-140%); }
}

/* Responsive для 4–6 */
@media (max-width: 992px){
  .wl-grid{ grid-template-columns: 1fr; }
  .ri-grid{ grid-template-columns: 1fr; }
}
/* ===== Sectie 7: Scheepstypen-lint ===== */
.types-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: clamp(12px, 2vw, 18px);
  overflow-x: auto;
  padding: 6px 12px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.type-card{
  position: relative;
  scroll-snap-align: start;
  min-width: 300px;
  max-width: 350px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  padding: 10px;
  overflow: hidden;
}
.type-card::after{
  /* спектральный блик — отзывается на hover */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg,
    rgba(77,179,226,.0) 0%,
    rgba(77,179,226,.12) 35%,
    rgba(226,179,77,.12) 65%,
    rgba(226,179,77,.0) 100%);
  transform: translateX(-40%);
  opacity: 0;
  transition: transform .7s cubic-bezier(.2,.9,.2,1), opacity .7s;
  pointer-events: none;
}
.type-card:hover::after,
.type-card:focus-within::after{
  opacity: 1;
  transform: translateX(0);
}
.type-card figcaption{ color: var(--muted); font-size: .92rem; padding-top: 6px; }
.types-hint{ font-size: .82rem; color: var(--muted); margin-top: 6px; text-align: right; }

/* ===== Sectie 8: Routes & arcs ===== */
.ra-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
}
.route-map{
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.routes-svg{ width: 100%; height: auto; display: block; }
.route-map figcaption{ color: var(--muted); font-size: .9rem; padding-top: 6px; }

/* ===== Sectie 9: Crew rhythm ===== */
.cr-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
}
.tact-list{
  grid-column: 1 / -1;
  list-style: none; padding: 0; margin: 0 0 8px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.tact{
  display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px;
}
.tact .label{ color: var(--ink); font-weight: 600; }
.tact .bar{
  position: relative; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.tact .bar::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--brand));
  box-shadow: 0 0 16px rgba(0,0,0,.25) inset;
  transition: width 1200ms cubic-bezier(.2,.9,.2,1);
}
.tact-list.active .tact:nth-child(1) .bar::before{ width: 92%; }
.tact-list.active .tact:nth-child(2) .bar::before{ width: 68%; transition-delay: .12s; }
.tact-list.active .tact:nth-child(3) .bar::before{ width: 54%; transition-delay: .24s; }
.tact-list.active .tact:nth-child(4) .bar::before{ width: 40%; transition-delay: .36s; }

.cr-fig figcaption{ color: var(--muted); font-size: .92rem; padding-top: 6px; }

/* Responsive 7–9 */
@media (max-width: 992px){
  .ra-grid{ grid-template-columns: 1fr; }
  .cr-grid{ grid-template-columns: 1fr; }
  .tact{ grid-template-columns: 100px 1fr; }
}
/* ===== Sectie 10: Materials & care ===== */
.mc-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
}
.mc-copy h3{ margin: 0 0 6px; font-family: "Cardo", serif; }
.mc-copy p{ margin: 0; color: var(--muted); }
.mc-fig figcaption{ color: var(--muted); font-size: .92rem; padding-top: 6px; }

.mc-bars{
  list-style: none; padding: 0; margin: 0 0 8px 0;
  grid-column: 1 / -1;
  display: grid; gap: 10px;
}
.mc-bar{
  display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center;
}
.mc-bar .label{ font-weight: 600; }
.mc-bar .fill{
  position: relative; display: block; height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.1); overflow: hidden;
}
.mc-bar .fill::before{
  content:""; position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--brand));
  transition: width 1400ms cubic-bezier(.2,.9,.2,1);
  box-shadow: inset 0 0 16px rgba(0,0,0,.25);
}

/* ===== Sectie 11: Nav instruments (компас) ===== */
.ni-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
}
.compass{
  --angle: 0deg;   /* меняется из JS */
  place-self: center;
  width: 220px; height: 220px; position: relative;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.06), rgba(255,255,255,.015) 60%, transparent 62%);
  box-shadow: var(--shadow-md);
}
.compass .ring{
  position: absolute; inset: 14px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.35);
  transform: rotate(var(--angle));
  transition: transform 300ms linear;
}
.compass .needle{
  position: absolute; left: 50%; top: 16%; width: 4px; height: 44%;
  background: #fff; border-radius: 2px; transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(0,0,0,.35);
}
.compass .pivot{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--brand);
}

.ni-fig figcaption{ color: var(--muted); font-size: .92rem; padding-top: 6px; }

/* ===== Sectie 12: War & safeguard ===== */
.ws2-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
}
.shield-lane{
  grid-column: 1 / -1;
  position: relative; height: 18px; border-radius: 999px; margin: 8px 0 12px;
  background:
    linear-gradient(90deg, rgba(77,179,226,.28), rgba(226,179,77,.28)),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,.1) 40px 42px);
  overflow: clip; box-shadow: inset 0 0 12px rgba(0,0,0,.45);
}
.shield{
  --dur: 2.6s;
  position: absolute; top: 50%;
  width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff, #ffd27a 60%, transparent 70%);
  animation: shieldPulse var(--dur) ease-in-out infinite;
}
.shield:nth-child(1){ left: 12%; }
.shield:nth-child(2){ left: 28%; animation-delay: .2s; }
.shield:nth-child(3){ left: 44%; animation-delay: .4s; }
.shield:nth-child(4){ left: 60%; animation-delay: .6s; }
.shield:nth-child(5){ left: 76%; animation-delay: .8s; }
.shield:nth-child(6){ left: 90%; animation-delay: 1.0s; }

.shield-lane:hover .shield{ --dur: 1.4s; }

@keyframes shieldPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(226,179,77,.0); transform: translate(-50%, -50%) scale(1); }
  50%{ box-shadow: 0 0 22px 6px rgba(226,179,77,.25); transform: translate(-50%, -50%) scale(1.18); }
}

/* Responsive 10–12 */
@media (max-width: 992px){
  .mc-grid{ grid-template-columns: 1fr; }
  .ni-grid{ grid-template-columns: 1fr; justify-items: center; }
  .ws2-grid{ grid-template-columns: 1fr; }
  .mc-bar{ grid-template-columns: 140px 1fr; }
}
/* ===== Sectie 13: Knowledge line ===== */
.kl-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
  position: relative;
}
.learning-rail{
  position: absolute; left: 50%; top: 0; bottom: 0; width: 6px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(77,179,226,.3), rgba(226,179,77,.3));
  border-radius: 999px;
}
.learning-rail .cursor{
  --y: 10%; /* меняется JS по hover/focus шага */
  position: absolute; left: 50%; top: var(--y);
  transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffd27a 60%, transparent 70%);
  box-shadow: 0 0 18px rgba(226,179,77,.25);
  transition: top 400ms cubic-bezier(.2,.9,.2,1);
}
.kl-steps{
  grid-column: 1 / -1;
  list-style: none; padding: 0; margin: 0 0 8px 0;
  display: grid; gap: 10px;
}
.kl-step{
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  padding: 12px;
  outline: none;
}
.kl-step h3{ margin: 0 0 4px; font-family: "Cardo", serif; }
.kl-step p{ margin: 0; color: var(--muted); }
.kl-step:hover,
.kl-step:focus-visible{ box-shadow: var(--shadow-md); }

.kl-fig figcaption{ color: var(--muted); font-size: .92rem; padding-top: 6px; }

/* ===== Sectie 14: Modern & future ===== */
.mf-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
}
.mf-spark{
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.spark-svg{ width: 100%; height: auto; display: block; }
.mf-spark figcaption{ color: var(--muted); font-size: .9rem; padding-top: 6px; }

.mf-copy h3{ margin: 0 0 6px; font-family: "Cardo", serif; }
.mf-copy p{ margin: 0; color: var(--muted); }
.mf-fig figcaption{ color: var(--muted); font-size: .92rem; padding-top: 6px; }

/* Responsive 13–14 */
@media (max-width: 992px){
  .kl-grid{ grid-template-columns: 1fr; }
  .learning-rail{ display: none; } /* на узких — скрываем вертикальную рейку */
  .mf-grid{ grid-template-columns: 1fr; }
}
/* ==== Fix: city-yards spine не перекрывает текст ==== */
.cy-grid{
  position: relative;
  /* Позиция границы между 2-й и 3-й колонкой при шаблоне 1.1fr 1fr 1fr */
  --spine-x: 67.8%;
}

/* Спайн уводим под контент и ставим точно в «гаттер» */
.cy-grid .spine{
  left: var(--spine-x);           /* раньше было 50% — попадало по центру текста */
  transform: translateX(-50%);
  z-index: 0;                     /* ниже текста */
  opacity: .35;                   /* чуть мягче, чтобы глаз не цеплялся */
  pointer-events: none;           /* не мешает выделению/кликам */
}

/* Любые элементы контента в этой сетке — поверх спайна */
.cy-grid > *:not(.spine){
  position: relative;
  z-index: 1;
}

/* На мобильных спайн и так скрыт (оставляем как было), но если нужно явно: */
@media (max-width: 992px){
  .cy-grid .spine{ display: none; }
}
/* Spine dots — позиционирование без инлайна */
.spine .dot{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffd27a 60%, transparent 70%);
  box-shadow: 0 0 12px rgba(226,179,77,.25);
  pointer-events: none;
}

/* Проценты по классам */
.spine .dot.p10{ top: 10%; }
.spine .dot.p34{ top: 34%; }
.spine .dot.p61{ top: 61%; }
.spine .dot.p88{ top: 88%; }