/* ============================================================
   SUPERJETS — /timeline/  "FLIGHT · 1903 → today"
   Skrolaš navzdol, čas teče vodoravno. Pas po sredini je vzletna steza (letnice so
   pobarvane nanjo kot oznake steze), zgoraj vojaška proga, spodaj civilna, na dnu sled
   rekorda hitrosti, ki se riše, ko letiš skozi čas.
   ============================================================ */
/* Tema ima na html in body overflow-x: hidden — zaradi tega je body skrolni vsebnik in
   position: sticky ne prime (oder bi ob skrolanju odpeljal). clip obreže enako, a vsebnika
   ne ustvari. Omejeno na to stran, da se ostale strani ne spremenijo. */
html:has(.tl), html:has(.tl) body { overflow-x: clip; }

.tl {
  --mil: #ff7a1a;
  --civ: #8fd3ff;
  --exp: #b9a6ff;
  --rot: #7fe3c0;
  --txt: #eef3fa;
  --dim: #7d8ba0;
  --faint: #45526a;
  --glass: rgba(6, 10, 18, 0.62);
  --navh: 66px;
  position: relative;
  background: #04070d;
  color: var(--txt);
}
.tl-stage {
  position: sticky; top: var(--navh);
  height: calc(100vh - var(--navh)); height: calc(100svh - var(--navh));
  overflow: hidden; isolation: isolate;
}
.tl-sky, .tl-skyfb { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.tl-skyfb { background: linear-gradient(180deg, var(--sky-top, #12203a), var(--sky-bot, #9b6f3c)); transition: background 0.6s; }
.tl-sky + .tl-skyfb { display: none; }
.tl-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── steza ─────────────────────────────────────────────── */
.tl-track { position: absolute; top: 0; left: 0; height: 100%; z-index: 5; will-change: transform; pointer-events: none; }
.tl-track > * { pointer-events: auto; }

/* ── revolver: štiri proge, kartice vedno pokonci (samo manjše in bledejše zadaj) ───────────────────────────────────── */
.tl-lane3d { position: absolute; left: 0; width: 100%; will-change: transform, opacity; transform-origin: 50% 50%; pointer-events: none; }
.tl-lane3d.front { pointer-events: auto; }
.tl-lane3d .strip { position: absolute; left: 0; top: 0; will-change: transform; }
.tl-lane3d .lane-name { position: absolute; left: clamp(16px, 2.4vw, 34px); top: -30px; z-index: 3; font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--c); }
.tl-lane3d .lane-name b { color: var(--dim); font-weight: 500; margin-left: 6px; }
.tl-lane3d.mil { --c: var(--mil); } .tl-lane3d.civ { --c: var(--civ); } .tl-lane3d.exp { --c: var(--exp); } .tl-lane3d.rot { --c: var(--rot); }
.tl-lane3d:not(.front) .tl-card { box-shadow: none; }
.tl-lane3d .lane-name { transition: opacity 0.25s; padding: 5px 9px; margin-left: -9px; border-radius: 6px; background: rgba(4, 8, 16, 0.72); }
.tl-lane3d:not(.front) .lane-name { opacity: 0; }
.tl-stage.at-start .tl-lane3d .lane-name { opacity: 0; }   /* ime samo na sprednji progi — zadnja imena so silila v HUD */

/* ── paralaksa: daleč (letnice desetletij) in blizu (sledi hitrosti) ── */
.tl-far { position: absolute; top: 0; left: 0; height: 100%; z-index: 1; pointer-events: none; will-change: transform; }
.tl-far span { position: absolute; top: 24%; font: 700 min(38vh, 340px)/1 var(--font-display); color: transparent;
  -webkit-text-stroke: 1px rgba(238, 243, 250, 0.09); letter-spacing: -0.02em; white-space: nowrap; }
.tl-near { position: absolute; top: 0; left: 0; height: 100%; z-index: 6; pointer-events: none; will-change: transform; }
.tl-near i { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(238, 243, 250, 0.85), transparent); }
.tl-runway { position: absolute; height: 1px; transform: translateY(-0.5px);
  background: linear-gradient(90deg, rgba(238, 243, 250, 0), rgba(238, 243, 250, 0.5) 1.5%, rgba(238, 243, 250, 0.5));
  box-shadow: 0 0 10px rgba(255, 122, 26, 0.35), 0 0 1px rgba(238, 243, 250, 0.8); }
/* merilo časa: drobna oznaka za leto, višja svetleča za desetletje (namesto ceste) */
.tl-tick { position: absolute; height: 12px; border-left: 1px solid rgba(238, 243, 250, 0.32);
  font: 500 9.5px/1 var(--font-mono); color: rgba(238, 243, 250, 0.42); padding: 15px 0 0 0; letter-spacing: 0.08em;
  transform: translateX(-0.5px); text-indent: -1.2em; }
.tl-tick.dec { height: 30px; border-left: 1px solid var(--mil); color: var(--txt); padding: 36px 0 0; text-indent: -1.1em;
  font: 700 22px/1 var(--font-display); letter-spacing: 0.02em; text-shadow: 0 0 16px rgba(255, 122, 26, 0.55); }
.tl-tick.dec::before { content: ""; position: absolute; left: -3.5px; top: -3.5px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mil); box-shadow: 0 0 12px var(--mil), 0 0 3px #fff; }
.tl-tick.dim { opacity: 0.4; font-size: 0; }

/* laserska črta "zdaj" na sredini zaslona */
.tl-now { position: absolute; left: 50%; width: 1px; z-index: 1;   /* za karticami: vidna le med njimi in na osi */ pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 122, 26, 0.85) 12%, rgba(255, 122, 26, 0.85) 88%, transparent);
  box-shadow: 0 0 12px rgba(255, 122, 26, 0.6); transition: box-shadow 0.3s, opacity 0.3s; opacity: 0.75; }
.tl-now::after { content: ""; position: absolute; left: -4px; bottom: 36px; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--mil); box-shadow: 0 0 14px var(--mil); }
.tl-stage.turning .tl-now { opacity: 1; box-shadow: 0 0 22px rgba(255, 122, 26, 0.95); }
.tl-lane { position: absolute; left: 0; font: 600 10px/1 var(--font-mono); letter-spacing: 0.28em; text-transform: uppercase; }
.tl-lane.mil { color: var(--mil); } .tl-lane.civ { color: var(--civ); }

/* ── kartice letal ─────────────────────────────────────── */
.tl-card { position: absolute; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--txt);
  background: rgba(8, 12, 20, 0.78); border: 1px solid rgba(238, 243, 250, 0.1); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transform-origin: 0 50%; will-change: transform, opacity; transition: border-color 0.2s, box-shadow 0.2s; }
.tl-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); z-index: 2; }
.tl-card.mil { --c: var(--mil); } .tl-card.civ { --c: var(--civ); } .tl-card.exp { --c: var(--exp); } .tl-card.rot { --c: var(--rot); }
.tl-card .ph { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #0a111d; }
.tl-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(.2, .7, .2, 1); }
.tl-card .cap { padding: 9px 11px 10px 13px; display: grid; gap: 3px; }
.tl-card .cap b { font: 700 14px/1.15 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.tl-card .cap span { font: 500 10.5px/1.2 var(--font-mono); color: var(--dim); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-card .yr { position: absolute; top: 8px; right: 8px; z-index: 2; font: 600 10.5px/1 var(--font-mono); padding: 4px 6px; border-radius: 4px;
  background: rgba(4, 7, 13, 0.72); color: var(--c); letter-spacing: 0.06em; }
.tl-card:hover, .tl-card:focus-visible { border-color: var(--c); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--c); outline: none; }
.tl-card:hover img { transform: scale(1.06); }

/* ── veliki trenutki ───────────────────────────────────── */
.tl-gate { position: absolute; overflow: hidden; border-radius: 16px; background: #05080f; border: 1px solid rgba(238, 243, 250, 0.14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.tl-gate .g-img { position: absolute; inset: 0 -12% 0 -12%; will-change: transform; }
.tl-gate .g-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); }
.tl-gate::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(4, 7, 13, 0.94) 0%, rgba(4, 7, 13, 0.72) 34%, rgba(4, 7, 13, 0.08) 70%),
  linear-gradient(0deg, rgba(4, 7, 13, 0.7), transparent 45%); }
.tl-gate .g-year { position: absolute; right: 3%; bottom: -0.12em; z-index: 1; font: 700 clamp(120px, 22vh, 260px)/1 var(--font-display);
  color: transparent; -webkit-text-stroke: 1.5px rgba(238, 243, 250, 0.55); letter-spacing: -0.02em; will-change: transform; }
.tl-gate .g-txt { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); z-index: 2; max-width: min(44ch, 42%); }
.tl-gate .g-k { font: 600 11px/1 var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--c); display: flex; align-items: center; gap: 10px; }
.tl-gate .g-k::before { content: ""; width: 26px; height: 1px; background: var(--c); }
.tl-gate h3 { font: 700 clamp(30px, 5vh, 56px)/0.98 var(--font-display); text-transform: uppercase; margin: 14px 0 0; }
.tl-gate p { font: 400 clamp(14px, 1.9vh, 17px)/1.6 var(--font-body); color: #c6d0dd; margin: 16px 0 0; }
.tl-gate a { display: inline-flex; gap: 8px; margin-top: 20px; font: 600 12px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.tl-gate.mil { --c: var(--mil); } .tl-gate.civ { --c: var(--civ); } .tl-gate.exp { --c: var(--exp); } .tl-gate.rot { --c: var(--rot); }

/* naslov na začetku steze */
.tl-open { position: absolute; top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.tl-open .k { font: 600 11px/1 var(--font-mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--mil); }
.tl-open h1 { font: 700 clamp(64px, 11vw, 168px)/0.86 var(--font-display); text-transform: uppercase; margin: 16px 0 0; letter-spacing: -0.01em; }
.tl-open h1 em { font-style: normal; display: block; font-size: 0.34em; letter-spacing: 0.06em; color: var(--dim); margin-top: 12px; }
.tl-open p { max-width: 40ch; font: 400 16px/1.6 var(--font-body); color: #c6d0dd; margin: 22px 0 0; }
.tl-open .go { margin-top: 26px; font: 600 11px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); display: flex; gap: 12px; align-items: center; }
.tl-open .go i { width: 44px; height: 1px; background: var(--dim); position: relative; overflow: hidden; }
.tl-open .go i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--mil); animation: tl-go 1.6s ease-in-out infinite; }
@keyframes tl-go { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.tl-end { position: absolute; top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.tl-end .k { font: 600 11px/1 var(--font-mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--civ); }
.tl-end h2 { font: 700 clamp(40px, 6vw, 90px)/0.92 var(--font-display); text-transform: uppercase; margin: 14px 0 0; }
.tl-end p { max-width: 38ch; color: #c6d0dd; margin: 16px 0 0; line-height: 1.6; }

/* ── HUD ───────────────────────────────────────────────── */
.tl-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 8; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: 16px clamp(16px, 2.4vw, 34px) 0; pointer-events: none; }
.tl-hud > * { pointer-events: auto; }
.tl-inst { font-family: var(--font-mono); }
.tl-inst .l { font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.28em; color: var(--dim); text-transform: uppercase; }
.tl-odo { display: flex; font: 700 56px/1 var(--font-display); margin-top: 6px; letter-spacing: 0.01em; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
.tl-odo .col { height: 1em; overflow: hidden; width: 0.62em; text-align: center; }
.tl-odo .col i { display: flex; flex-direction: column; font-style: normal; transition: transform 0.55s cubic-bezier(.2, .9, .25, 1); }
.tl-odo .col i b { display: block; height: 1em; font-weight: 700; }
.tl-era { font: 600 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mil); margin-top: 8px; }
.tl-rec { text-align: right; justify-self: end; }
.tl-rec .v { font: 700 34px/1 var(--font-display); margin-top: 7px; font-variant-numeric: tabular-nums; }
.tl-rec .v small { font: 600 12px var(--font-mono); color: var(--dim); margin-left: 6px; }
.tl-rec .m { font: 600 11px/1 var(--font-mono); color: var(--mil); margin-top: 7px; letter-spacing: 0.1em; }
.tl-rec .n { font: 500 10.5px/1.3 var(--font-mono); color: var(--dim); margin-top: 5px; max-width: 26ch; margin-left: auto; }
.tl-chips { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid rgba(238, 243, 250, 0.12);
  backdrop-filter: blur(10px); margin-top: 4px; }
.tl-chips button { all: unset; cursor: pointer; font: 600 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 15px;
  border-radius: 999px; color: var(--dim); transition: background 0.2s, color 0.2s; display: flex; gap: 8px; align-items: center; }
.tl-chips button i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--txt)); }
.tl-chips button[data-m="mil"] { --c: var(--mil); } .tl-chips button[data-m="civ"] { --c: var(--civ); } .tl-chips button[data-m="exp"] { --c: var(--exp); } .tl-chips button[data-m="rot"] { --c: var(--rot); }
.tl:not(.v) .tl-chips button[data-m="all"] { display: none; }   /* na računalniku so vse tri proge vedno vidne (valj) */
.tl-chips button.on { background: var(--txt); color: #05080f; }
.tl-chips button:focus-visible { outline: 2px solid var(--mil); outline-offset: 2px; }
.tl-chips button .n { opacity: 0.6; }

/* gumb nazaj na začetek (v HUD pod obdobjem) in na koncu steze */
.tl-back, .tl-again { all: unset; cursor: pointer; font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--txt); padding: 9px 13px; border-radius: 999px; border: 1px solid rgba(238, 243, 250, 0.22); background: var(--glass);
  backdrop-filter: blur(8px); transition: border-color 0.2s, background 0.2s; }
.tl-back { position: absolute; z-index: 8; left: clamp(16px, 2.4vw, 34px); bottom: 104px; display: inline-flex; }
.tl-back[hidden] { display: none; }
.tl-again { margin-top: 26px; display: inline-flex; font-size: 12px; padding: 12px 18px; border-color: var(--mil); color: var(--mil); }
.tl-back:hover, .tl-again:hover { border-color: var(--mil); background: rgba(255, 122, 26, 0.12); }
.tl-back:focus-visible, .tl-again:focus-visible { outline: 2px solid var(--mil); outline-offset: 2px; }
.tl.v .tl-back { position: fixed; right: 16px; bottom: 18px; z-index: 30; margin: 0; }

/* ── sled rekorda (spodaj) ─────────────────────────────── */
.tl-trace { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; height: 92px; padding: 0 clamp(16px, 2.4vw, 34px) 12px;
  background: linear-gradient(0deg, rgba(4, 7, 13, 0.92), rgba(4, 7, 13, 0)); cursor: pointer; }
.tl-trace svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tl-trace .full { fill: none; stroke: rgba(238, 243, 250, 0.2); stroke-width: 1.5; }
.tl-trace .done { fill: none; stroke: var(--mil); stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(255, 122, 26, 0.7)); }
.tl-trace .area { fill: url(#tlArea); }
.tl-trace .ph { stroke: var(--txt); stroke-width: 1; }
.tl-trace .dot { fill: var(--mil); stroke: #04070d; stroke-width: 2; }
.tl-trace text { font: 600 9.5px var(--font-mono); fill: var(--dim); letter-spacing: 0.08em; }
.tl-trace .cap { fill: var(--dim); letter-spacing: 0.24em; }

/* ── navpični način (telefon) ──────────────────────────── */
.tl.v .tl-stage { position: relative; top: 0; height: auto; overflow: visible; display: flex; flex-direction: column; }
.tl.v .tl-hud { order: -1; }   /* v DOM je za stezo; na telefonu mora biti prvi, da se prilepi na vrh */
.tl.v .tl-sky, .tl.v .tl-skyfb, .tl.v .tl-grain { position: fixed; }
.tl.v .tl-track { position: relative; height: auto; transform: none !important; padding: 0 50px 40px 16px; }   /* desno prostor za trak */
/* navpični časovni trak (telefon) */
.tl-rail { display: none; }
.tl.v .tl-rail { display: block; position: fixed; right: 0; width: 46px; bottom: 84px; z-index: 25; touch-action: none; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.tl.v .tl-rail.on { opacity: 1; pointer-events: auto; }
.tl-rail .line, .tl-rail .fill { position: absolute; right: 12px; top: 0; width: 2px; border-radius: 2px; }
.tl-rail .line { bottom: 0; background: rgba(238, 243, 250, 0.16); }
.tl-rail .fill { background: var(--mil); box-shadow: 0 0 10px rgba(255, 122, 26, 0.7); }
.tl-rail span { position: absolute; right: 18px; transform: translateY(-50%); font: 500 9px/1 var(--font-mono); letter-spacing: 0.04em; color: rgba(238, 243, 250, 0.5); }
.tl-rail span::after { content: ""; position: absolute; right: -9px; top: 50%; width: 6px; height: 1px; background: rgba(238, 243, 250, 0.35); }
.tl-rail .thumb { position: absolute; right: 2px; transform: translateY(-50%); padding: 5px 6px; border-radius: 6px; font: 700 10px/1 var(--font-mono);
  color: #0a0f18; background: var(--mil); box-shadow: 0 0 14px rgba(255, 122, 26, 0.7); transition: transform 0.15s; }
.tl-rail.drag .thumb { transform: translateY(-50%) scale(1.35); transform-origin: right center; }
.tl-rail.drag span { color: rgba(238, 243, 250, 0.85); }
.tl.v .tl-hud { position: sticky; top: var(--navh); grid-template-columns: 1fr auto; gap: 10px; padding: 10px 16px; background: rgba(4, 7, 13, 0.78);
  backdrop-filter: blur(10px); border-bottom: 1px solid rgba(238, 243, 250, 0.08); }
.tl.v .tl-hud .tl-chips { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; flex-wrap: wrap;
  border-radius: 18px; gap: 3px; }
/* telefon: pet gumbov se zloži v dve vrstici, brez števil — prej so padli čez rob zaslona */
.tl.v .tl-chips button { padding: 8px 11px; font-size: 10px; letter-spacing: 0.1em; gap: 6px; }
.tl.v .tl-chips button .n { display: none; }
.tl.v .tl-odo { font-size: 34px; margin-top: 4px; }
.tl.v .tl-rec .v { font-size: 20px; }
.tl.v .tl-rec .n { display: none; }
.tl.v .tl-trace { display: none; }
.tl.v .tl-open, .tl.v .tl-end { position: relative; height: auto; padding: 40px 0 30px; }
.tl.v .tl-open h1 { font-size: clamp(56px, 18vw, 96px); }
.tl.v .yv { position: sticky; top: calc(var(--navh) + var(--hudh, 150px));   /* točno pod HUD-om */ z-index: 3; margin: 26px 0 12px; font: 700 28px/1 var(--font-display);
  display: flex; align-items: center; gap: 12px; }
.tl.v .yv::after { content: ""; flex: 1; height: 1px; background: rgba(238, 243, 250, 0.2); }
.tl.v .gridv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tl.v .tl-card { position: relative; aspect-ratio: 0.86; }
.tl.v .tl-gate { position: relative; height: 72vh; margin: 16px 0; }
.tl.v .tl-gate .g-txt { max-width: none; left: 18px; right: 18px; top: auto; bottom: 22px; transform: none; }
.tl.v .tl-gate::after { background: linear-gradient(0deg, rgba(4, 7, 13, 0.96) 10%, rgba(4, 7, 13, 0.2) 65%); }
.tl.v .tl-gate .g-year { top: 12px; bottom: auto; right: 12px; font-size: 96px; }

@media (prefers-reduced-motion: reduce) {
  .tl-odo .col i, .tl-card img { transition: none; }
  .tl-open .go i::after { animation: none; }
}