/* von.sk — holding page
   Typography: Bricolage Grotesque (display) + Instrument Sans (text), self-hosted.
   Motif: KST turistická značka (white–colour–white) and a rázcestník. */

/* ---------- fonts ---------- */

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url(fonts/bricolage-grotesque-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/instrument-sans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */

:root {
    --paper: #e9ebe1;
    --plate: #fbfbf6;
    --ink: #17281e;
    --ink-soft: #55655a;
    --post-light: #33503d;
    --post-dark: #16241b;
    --hairline: rgba(23, 40, 30, .16);
    --traveller: #74827a;

    --cervena: #c42e28;
    --modra: #1b54a6;
    --zelena: #2e7d46;
    --zlta: #dda315;

    --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --gutter: clamp(1.25rem, 5vw, 5rem);
    --measure: 1320px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--cervena);
    outline-offset: 3px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
}

.skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    padding: .6rem 1rem;
    background: var(--plate);
    border: 1px solid var(--hairline);
    border-radius: 4px;
}

/* ---------- top bar ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter) 0;
}

.wordmark {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 88%;
    font-size: 1.4rem;
    letter-spacing: -.02em;
    text-decoration: none;
}

.wordmark__dot {
    color: var(--cervena);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ---------- KST marker chip ---------- */

.marker {
    display: block;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 3px;
    border: 1px solid var(--hairline);
    background:
        linear-gradient(
            to bottom,
            #fff 0 32%,
            var(--marker-colour) 32% 68%,
            #fff 68% 100%
        );
}

.marker--cervena {
    --marker-colour: var(--cervena);
}

.marker--modra {
    --marker-colour: var(--modra);
}

.marker--zelena {
    --marker-colour: var(--zelena);
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6.5rem) var(--gutter) clamp(3.5rem, 9vw, 7rem);
}

.contours {
    position: absolute;
    inset: -10% -20% auto;
    width: 140%;
    height: 120%;
    color: var(--ink);
    opacity: .07;
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    gap: clamp(2.75rem, 6vw, 4.5rem);
    align-items: center;
}

@media (min-width: 62rem) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: clamp(2rem, 5vw, 5rem);
    }
}

.hero__status {
    margin-bottom: clamp(1rem, 2vw, 1.4rem);
}

.hero__title {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 84%;
    font-size: clamp(3rem, 8.5vw, 6.25rem);
    line-height: .94;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.hero__lede {
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
    max-width: 34ch;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    color: var(--ink-soft);
}

/* ---------- rázcestník ---------- */

.signpost {
    position: relative;
    padding: 1.5rem 0 3.25rem 26px;
}

.signpost__post {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(
        to right,
        var(--post-light) 0 4px,
        var(--post-dark) 4px 13px,
        #0d1712 13px 100%
    );
}

.signpost__arms {
    display: flex;
    flex-direction: column;
    gap: clamp(.5rem, 1.2vw, .8rem);
}

.arm {
    width: var(--w, 100%);
    filter: drop-shadow(0 2px 0 rgba(23, 40, 30, .13));
}

.arm__plate {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 3.1rem;
    padding: 0 3.25rem 0 0;
    background: var(--plate);
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}

.arm__band {
    display: block;
    width: 10px;
    align-self: stretch;
    flex: none;
    background: var(--arm-colour);
}

.arm__label {
    padding: .6rem 0;
    font-family: var(--display);
    font-weight: 700;
    font-stretch: 80%;
    font-size: clamp(.95rem, 1.5vw, 1.2rem);
    line-height: 1.15;
    letter-spacing: .015em;
    text-transform: uppercase;
}

.arm__mode {
    margin-left: auto;
    padding-left: .75rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

.arm--cervena {
    --arm-colour: var(--cervena);
}

.arm--modra {
    --arm-colour: var(--modra);
}

.arm--zelena {
    --arm-colour: var(--zelena);
}

.arm--zlta {
    --arm-colour: var(--zlta);
}

.signpost__note {
    margin-top: 1.25rem;
    padding-left: 26px;
    font-size: .82rem;
    color: var(--ink-soft);
}

/* brush past an arm and it swings on the post — the transform sits on the plate,
   so it never fights the load animation, which sits on the arm itself */

@media (hover: hover) {
    .arm {
        transition: filter .3s ease;
    }

    .arm__plate {
        transform-origin: 0 50%;
        transition: transform .3s cubic-bezier(.2, .9, .3, 1);
    }

    .arm:hover {
        filter: drop-shadow(0 5px 0 rgba(23, 40, 30, .15));
    }

    /* rotate only, pivoting where the plate meets the post — a translate would
       tear the arm off the post and show paper through the join */
    .arm:hover .arm__plate {
        transform: rotate(-1.1deg);
    }

    .arm:hover .arm__mode {
        color: var(--ink);
    }
}

/* one orchestrated moment: the arms swing into place on load */

.has-js .arm {
    opacity: 0;
    transform: rotate(-7deg);
    transform-origin: 8px 50%;
    animation: swing-in .7s cubic-bezier(.16, .9, .3, 1) forwards;
    animation-delay: calc(.12s + var(--i, 0) * .085s);
}

.arm:nth-child(1) { --i: 0; }
.arm:nth-child(2) { --i: 1; }
.arm:nth-child(3) { --i: 2; }
.arm:nth-child(4) { --i: 3; }
.arm:nth-child(5) { --i: 4; }
.arm:nth-child(6) { --i: 5; }

@keyframes swing-in {
    from {
        opacity: 0;
        transform: rotate(-7deg);
    }
    60% {
        opacity: 1;
        transform: rotate(.8deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

/* ---------- steps ---------- */

.steps-section {
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
    border-top: 1px solid var(--hairline);
}

.eyebrow {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.section-title {
    margin-top: .5rem;
    font-family: var(--display);
    font-weight: 700;
    font-stretch: 86%;
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -.02em;
}

.steps {
    --steps-gap: clamp(2rem, 4vw, 3rem);
    --trail: 13px;              /* centre of a marker chip, i.e. where the trail runs */

    position: relative;
    display: grid;
    gap: var(--steps-gap);
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

/* the dashed trail that runs through the waypoints */
.steps::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 6px;
    bottom: 6px;
    width: 0;
    border-left: 2px dashed rgba(23, 40, 30, .25);
}

@media (min-width: 48rem) {
    .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steps::before {
        left: 0;
        right: 0;
        top: 13px;
        bottom: auto;
        width: auto;
        height: 0;
        border-left: 0;
        border-top: 2px dashed rgba(23, 40, 30, .25);
    }
}

/* stacked: the chip hangs in the left margin so the trail has a lane of its own */
.step {
    position: relative;
    padding-left: 58px;         /* leaves the trail and its traffic a lane of their own */
}

.step__marker {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;                 /* traffic passes behind the waypoint, not over it */
    box-shadow: 0 0 0 7px var(--paper);
}

@media (min-width: 48rem) {
    .step {
        padding-left: 0;
    }

    .step__marker {
        position: relative;
        left: auto;
        top: auto;
        margin-bottom: 1.1rem;
    }
}

/* ---------- the journey along the trail ---------- */

/* One leg of the route: chip N to chip N+1, the last one running off the end of
   the trail. Everything is measured from the chip centre, so the leg lands exactly
   on the next waypoint whatever the column width or gap works out to be. */
.step__leg {
    position: absolute;
    left: var(--trail);
    top: var(--trail);
    width: 0;
    height: calc(100% + var(--steps-gap));
    z-index: 1;
    pointer-events: none;
}

.step:last-child .step__leg {
    height: calc(100% - var(--trail) - 6px);
}

.traveller {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    color: var(--traveller);
    transform: translate(9px, -50%);
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* block, or the inline line box hangs the icon a few px above the trail */
.traveller svg {
    display: block;
    width: auto;
}

.step:nth-child(1) .traveller svg { height: 14px; }
.step:nth-child(2) .traveller svg { height: 16px; }
.step:nth-child(3) .traveller svg { height: 18px; transform: scaleX(-1); }

.step:nth-child(1) .traveller { animation-name: travel-y-1; }
.step:nth-child(2) .traveller { animation-name: travel-y-2; }
.step:nth-child(3) .traveller { animation-name: travel-y-3; }

@media (min-width: 48rem) {
    .step__leg {
        width: calc(100% + var(--steps-gap));
        height: 0;
    }

    .step:last-child .step__leg {
        width: calc(100% - var(--trail));
        height: 0;
    }

    /* riding on the trail: the few px push the wheels down onto the line */
    .traveller {
        transform: translate(-50%, calc(-100% + 4px));
    }

    .step:nth-child(1) .traveller { animation-name: travel-x-1; }
    .step:nth-child(2) .traveller { animation-name: travel-x-2; }
    .step:nth-child(3) .traveller { animation-name: travel-x-3; }
}

/* three legs, one after another, then a breath before it starts over */

/* Horizontal legs need no fade: waiting for its turn, a vehicle is parked dead on a
   waypoint, and the chip's paper ring hides it until it pulls out from behind. Only the
   train has to fade, because the last leg ends on open trail with no chip to duck behind. */

@keyframes travel-x-1 {
    0% { left: 0; }
    30%, 100% { left: 100%; }
}

@keyframes travel-x-2 {
    0%, 30% { left: 0; }
    60%, 100% { left: 100%; }
}

@keyframes travel-x-3 {
    0%, 60% { left: 0; opacity: 1; }
    86% { opacity: 1; }
    90% { left: 100%; opacity: 0; }
    100% { left: 100%; opacity: 0; }
}

@keyframes travel-y-1 {
    0% { top: 0; opacity: 0; }
    3% { opacity: 1; }
    27% { opacity: 1; }
    30% { top: 100%; opacity: 0; }
    100% { top: 100%; opacity: 0; }
}

@keyframes travel-y-2 {
    0%, 30% { top: 0; opacity: 0; }
    33% { opacity: 1; }
    57% { opacity: 1; }
    60% { top: 100%; opacity: 0; }
    100% { top: 100%; opacity: 0; }
}

@keyframes travel-y-3 {
    0%, 60% { top: 0; opacity: 0; }
    63% { opacity: 1; }
    87% { opacity: 1; }
    90% { top: 100%; opacity: 0; }
    100% { top: 100%; opacity: 0; }
}

/* the journey starts when the section is actually looked at */
.has-js .js-reveal .traveller {
    animation-play-state: paused;
}

.has-js .js-reveal.is-in .traveller {
    animation-play-state: running;
}

.step__title {
    font-family: var(--display);
    font-weight: 700;
    font-stretch: 88%;
    font-size: 1.2rem;
    letter-spacing: -.01em;
}

.step__text {
    margin-top: .4rem;
    max-width: 34ch;
    color: var(--ink-soft);
}

.has-js .js-reveal .step {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.16, .9, .3, 1);
    transition-delay: calc(var(--i, 0) * .1s);
}

.step:nth-child(1) { --i: 0; }
.step:nth-child(2) { --i: 1; }
.step:nth-child(3) { --i: 2; }

.has-js .js-reveal.is-in .step {
    opacity: 1;
    transform: none;
}

/* ---------- flash notice ---------- */

.flash {
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 1.75rem) var(--gutter) 0;
}

.flash__inner {
    display: flex;
    align-items: stretch;
    max-width: 62ch;
    background: var(--plate);
    border: 1px solid var(--hairline);
    border-radius: 2px;
    filter: drop-shadow(0 2px 0 rgba(23, 40, 30, .1));
}

.flash__band {
    width: 10px;
    flex: none;
    background: var(--zlta);
}

.flash__text {
    padding: .75rem 1.1rem;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.flash__text strong {
    font-family: var(--display);
    font-weight: 700;
    font-stretch: 90%;
    font-size: 1.02em;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* ---------- footer ---------- */

.footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2rem) var(--gutter) clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--hairline);
}

.footer__brand {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 88%;
    font-size: 1.05rem;
    letter-spacing: -.02em;
}

.footer__year {
    font-size: .8rem;
    color: var(--ink-soft);
}

/* ---------- small screens ---------- */

@media (max-width: 30rem) {
    .arm__plate {
        padding-right: 2.5rem;
        gap: .7rem;
    }

    .arm__mode {
        font-size: .62rem;
        letter-spacing: .1em;
    }

    .signpost {
        padding-left: 20px;
    }

    .signpost__post {
        width: 14px;
        background: linear-gradient(
            to right,
            var(--post-light) 0 3px,
            var(--post-dark) 3px 10px,
            #0d1712 10px 100%
        );
    }

    .signpost__note {
        padding-left: 20px;
    }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .arm,
    .arm__plate {
        transition: none;
    }

    .arm:hover .arm__plate {
        transform: none;
    }

    .has-js .arm {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .has-js .js-reveal .step {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .traveller {
        display: none;
    }
}