/* TSV GROUP - Nasa cesta timeline (o-tsv) */
.tsv-journey { position: relative; }

/* ===== Desktop: vinuta cesta ===== */
.tsv-road { position: relative; width: 100%; aspect-ratio: 1200 / 980; }
.tsv-road svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tsv-road-path { transition: stroke-dashoffset 2.8s ease-in-out; }
.tsv-road-dash { opacity: 0; transition: opacity 1.2s ease 1.6s; }
.tsv-journey.on .tsv-road-dash { opacity: .9; }

.tsv-ms { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.tsv-ms-dot {
    position: absolute; width: 20px; height: 20px; border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: var(--c, #C8493B); border: 4px solid #fff;
    box-shadow: 0 0 0 3px var(--c, #C8493B), 0 4px 10px rgba(0,0,0,.25);
    transition: transform .5s cubic-bezier(.34,1.56,.64,1) var(--d, 0s);
}
.tsv-journey.on .tsv-ms-dot { transform: translate(-50%, -50%) scale(1); }
.tsv-ms-card {
    position: absolute; left: 0; width: 252px;
    transform: translate(-50%, calc(-100% - 26px)) translateY(14px);
    background: #fff; border: 1px solid #e2e6ee; border-radius: 16px;
    box-shadow: 0 10px 28px -12px rgba(34, 43, 73, .25);
    padding: 16px 18px 14px; text-align: left;
    opacity: 0; transition: opacity .6s ease var(--d, 0s), transform .6s ease var(--d, 0s);
}
.tsv-journey.on .tsv-ms-card { opacity: 1; transform: translate(-50%, calc(-100% - 26px)); }
.tsv-ms-year { display: block; font-size: 1.5rem; font-weight: 800; color: #222b49; line-height: 1.1; }
.tsv-ms-card p { margin: 6px 0 0; font-size: .815rem; line-height: 1.45; color: #4b5269; }
.tsv-ms-logo { height: 26px; width: auto; margin-bottom: 8px; display: block; }

/* 2026 - zvyraznena nova era */
.tsv-ms-card.tsv-ms-2026 {
    width: 280px; border: 2px solid #222b49;
    box-shadow: 0 14px 40px -10px rgba(34, 43, 73, .45);
}
.tsv-ms-2026 .tsv-ms-year { font-size: 1.75rem; }
.tsv-ms-badge {
    display: inline-block; background: #222b49; color: #fff;
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    border-radius: 50rem; padding: .28em .9em; margin-bottom: 8px;
}
.tsv-ms-2026 .tsv-ms-logo { height: 34px; }
@keyframes tsvPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--c), 0 0 0 0 rgba(34, 43, 73, .35); }
    50%      { box-shadow: 0 0 0 3px var(--c), 0 0 0 14px rgba(34, 43, 73, 0); }
}
.tsv-journey.on .tsv-ms-dot.tsv-dot-2026 { animation: tsvPulse 2.4s ease-out 2.8s 3; }

/* ===== Mobil/tablet: vertikalna os ===== */
.tsv-vline { position: relative; max-width: 480px; margin: 0 auto; padding-left: 2.4rem; }
.tsv-vline::before {
    content: ""; position: absolute; left: .55rem; top: .4rem; bottom: .4rem; width: 6px; border-radius: 3px;
    background: linear-gradient(180deg, #C8493B 0%, #C8493B 62%, #222b49 88%);
}
.tsv-vitem { position: relative; padding-bottom: 1.75rem; opacity: 0; transform: translateY(14px); transition: opacity .55s ease var(--d, 0s), transform .55s ease var(--d, 0s); }
.tsv-journey.on .tsv-vitem { opacity: 1; transform: none; }
.tsv-vitem::before {
    content: ""; position: absolute; left: -2.27rem; top: .3rem; width: 16px; height: 16px; border-radius: 50%;
    background: var(--c, #C8493B); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c, #C8493B);
}
.tsv-vitem .tsv-ms-year { font-size: 1.3rem; }
.tsv-vitem p { margin: 4px 0 0; font-size: .9rem; line-height: 1.5; color: #4b5269; }
.tsv-vitem .tsv-ms-logo { height: 24px; margin: 2px 0 6px; }
.tsv-vitem.tsv-vitem-2026 { background: #fff; border: 2px solid #222b49; border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 10px 30px -12px rgba(34, 43, 73, .4); }
.tsv-vitem.tsv-vitem-2026::before { left: -3.27rem; }

@media (prefers-reduced-motion: reduce) {
    .tsv-ms-dot, .tsv-ms-card, .tsv-vitem, .tsv-road-path, .tsv-road-dash { transition: none !important; animation: none !important; }
}