/* Funnel (#provoz): pinned horizontal timeline, a vanilla port of Hyperiux "Timeline" (21st.dev) in the OWN Build kit (1. 11. 2026).
   No JS: the track is a native horizontal scroller with everything visible. With JS (.tl-js) GSAP pins the
   section and scrubs the track sideways; the ink line fills, each step's stem and dot grow and its lines rise. */
#provoz.tl-sec{padding:0;--pitch:250px;--txt:300px;--rail-h:min(66vh,600px)}
#provoz .tl-pin{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
#provoz .tl-pin::-webkit-scrollbar{display:none}
#provoz.tl-js .tl-pin{height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
#provoz .tl-track{display:flex;align-items:center;gap:clamp(48px,6vw,110px);width:max-content;padding:96px var(--gutter);will-change:transform}
#provoz.tl-js .tl-track{padding-top:0;padding-bottom:0}

/* intro card: the section head */
#provoz .rn-chain{font-family:var(--mono);text-transform:uppercase;color:var(--label)}
#provoz .rn-chain i{font-style:normal;opacity:.4}
#provoz .tl-intro{flex:none;width:min(440px,34vw);display:flex;flex-direction:column;align-items:flex-start}
#provoz .tl-intro .kick{width:100%;margin-bottom:var(--kick-gap,28px)}
#provoz .tl-intro h2{margin:0}
#provoz .tl-intro .rn-chain{margin:28px 0 0;font-size:11px;line-height:1.9;letter-spacing:.08em}
#provoz .tl-intro .rn-chain i{margin:0 3px}
#provoz .tl-lead{margin:14px 0 22px;font-size:17px;line-height:1.55;color:var(--muted);max-width:40ch}

/* rail: base hairline + ink fill, items alternate above/below it */
#provoz .tl-rail{position:relative;flex:none;height:var(--rail-h);width:calc(7 * var(--pitch) + var(--txt))}
#provoz .tl-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;display:flex;align-items:center}
#provoz .tl-base{position:absolute;left:0;right:0;height:1px;background:var(--line)}
#provoz .tl-fill{position:absolute;left:0;right:0;height:2px;background:var(--ink);transform-origin:0 50%}
#provoz .tl-cap{position:relative;z-index:1;width:9px;height:9px;border-radius:50%;background:var(--ink);flex:none;margin-left:-4px}
#provoz .tl-cap-end{margin-left:auto;margin-right:-4px;background:var(--card);box-shadow:inset 0 0 0 2px var(--ink)}
#provoz .tl-items{list-style:none;margin:0;padding:0;position:absolute;inset:0}
#provoz .tl-it{position:absolute;top:0;bottom:0;left:calc(var(--i) * var(--pitch));width:var(--txt)}
#provoz .tl-stem{position:absolute;left:0;width:1px;height:calc(50% - 14px);background:var(--ink)}
#provoz .tl-up .tl-stem{bottom:50%;transform-origin:50% 100%}
#provoz .tl-dn .tl-stem{top:50%;transform-origin:50% 0}
#provoz .tl-dot{position:absolute;left:-6px;width:13px;height:13px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1.5px var(--ink),0 0 0 6px var(--ground)}
#provoz .tl-up .tl-dot{top:8px}
#provoz .tl-dn .tl-dot{bottom:8px}
#provoz .tl-txt{position:absolute;left:24px;right:12px;display:flex;flex-direction:column}
#provoz .tl-up .tl-txt{top:0}
#provoz .tl-dn .tl-txt{bottom:0}
#provoz .tl-hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#provoz .tl-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-s);background:var(--card);border:1px solid var(--hl)}
#provoz .tl-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#provoz .tl-no{color:var(--label)}
#provoz .tl-t{margin:0;font-size:22px;line-height:1.2;font-weight:500;letter-spacing:-.015em}
#provoz .tl-a{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
#provoz .tl-b{position:relative;margin:8px 0 0;padding-left:15px;font-size:14px;line-height:1.5;color:var(--muted)}
#provoz .tl-b::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1px rgba(20,20,20,.28);opacity:var(--dot,1);transform:scale(var(--dot,1))}
#provoz .tl-it:last-child .tl-ic{border-style:dashed;background:var(--ground)}

@media (max-width:900px){
  #provoz.tl-sec{--pitch:min(62vw,300px);--txt:min(72vw,320px);--rail-h:min(70vh,560px)}
  #provoz .tl-intro{width:min(78vw,420px)}
}
@media (max-width:600px){
  #provoz.tl-sec{--rail-h:min(68svh,520px)}
  #provoz .tl-t{font-size:20px}
  #provoz .tl-lead{font-size:16px}
}
@media (prefers-reduced-motion:reduce){#provoz .tl-track{will-change:auto}}
@media (forced-colors:active){#provoz .tl-fill,#provoz .tl-stem,#provoz .tl-cap{background:CanvasText}#provoz .tl-dot{background:Highlight}}