/* ===========================================================
   canvas-nav.css — sistemos schemos navigacijos sluoksnis.

   Prisideda PRIE styles.css (jo neperrašo). Visos spalvos —
   esami :root tokenai, jokių naujų atspalvių.

   Trys būsenos:
     .canvas-nav-on   — JS pakėlė kamerą (nustato canvas-nav.js)
     .reduced-nav     — prefers-reduced-motion → normalus srautas
     (be klasės)      — JS neveikia / <noscript> → normalus srautas
   =========================================================== */

/* ---------- Statinis srautas (numatytas, saugus) ----------
   Kol JS nepatvirtino, kad kamera veikia, puslapis yra
   įprastas slenkamas dokumentas. Taip <noscript> ir JS klaida
   duoda tvarkingą svetainę be jokių papildomų taisyklių. */
#viewport { position: relative; }
#world    { position: static; }
#bg       { display: none; }
#rail     { display: none; }

/* ===========================================================
   AKTYVUS režimas — kamera virš lentos
   =========================================================== */
html.canvas-nav-on,
html.canvas-nav-on body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Statinė body tekstūra išjungiama — foną piešia canvas */
html.canvas-nav-on body {
    background-image: none;
    background-color: var(--ink);
}

html.canvas-nav-on #viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    touch-action: none;
}

html.canvas-nav-on #bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

html.canvas-nav-on #world {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;              /* mazgai absoliutūs — konteineris dydžio neturi */
    height: 0;
    z-index: 1;
    transform-origin: 0 0;
    will-change: transform;
    backface-visibility: hidden;
}

/* ---------- Mazgas = sekcija lentoje ---------- */
html.canvas-nav-on .node {
    position: absolute;
    /* Mazgo plotis = lango plotis (su paraštėmis), NE fiksuotas.
       Fiksuotas 1200/1440 px reiškė, kad siauresniame lange sekcija
       nukirsdavo antraštę ir kraštines korteles.
       Turinys, kuris netelpa į plotį, persirikiuoja ŽEMYN, o mazgas
       tampa aukštesnis — tada jį nuslenka kamera (žr. `papildomos`). */
    width: min(1200px, calc(100vw - 120px));
    /* Nutolę mazgai nepiešiami — bet TIK piešimas izoliuojamas.
       ⚠️ `content-visibility: auto` čia NETINKA: jis praleidžia ir
       IŠDĖSTYMĄ, todėl offsetHeight grąžina contain-intrinsic-size
       pakaitalą, o ne tikrą aukštį — kamera kadruotų pagal melagingą
       dydį (patikrinta: visi mazgai „866px", nors turinys 2× žemesnis). */
    contain: paint;
    /* Sekcijos savo fono nebeturi per visą plotį — jos yra kortelės lentoje */
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    box-shadow: var(--shadow-lg);
}

/* Tamsūs mazgai — ta pati kalba kaip iki šiol (hero / darbai / kontaktai) */
html.canvas-nav-on .node.node-dark {
    border-color: var(--ink-line);
    background: var(--ink);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

/* Sekcijos viduje — paraštės mažesnės, nes mazgas jau turi savo rėmą */
html.canvas-nav-on .node > .container {
    max-width: 100%;
    padding: 0 3rem;
}

/* ---------- Mazgas turi tilpti į ekraną ----------
   Stotyje zoom == 1 (DOM 1:1, aštrus tekstas), todėl mazgą tildome
   PLATESNIU išdėstymu (daugiau stulpelių = mažiau aukščio), o ne
   mastelio mažinimu ir ne teksto slėpimu.
   Lentoje sekcija yra KORTELĖ, ne pilno ekrano juosta. */

/* Platesni mazgai ten, kur turinys natūraliai platus — tas pats
   turinys išsidėsto į daugiau stulpelių, todėl mazgas žemesnis. */
html.canvas-nav-on .node.services,
html.canvas-nav-on .node.work,
html.canvas-nav-on .node.contact { width: min(1440px, calc(100vw - 120px)); }
/* Netelpantis turinys PERSIRIKIUOJA ŽEMYN (o ne susispaudžia).
   Kortelė išlaiko skaitomą plotį; jei į eilutę telpa mažiau —
   likusios nusileidžia į kitą eilutę, mazgas tampa aukštesnis,
   o aukštį jau tvarko kamera (nuslenka iki apačios). */
html.canvas-nav-on .node .services-grid,
html.canvas-nav-on .node .benefits-grid {
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

html.canvas-nav-on .node .work-grid,
html.canvas-nav-on .node .ws-main,
html.canvas-nav-on .node .about-content,
html.canvas-nav-on .node .contact-content,
html.canvas-nav-on .node .hero-grid,
html.canvas-nav-on .node .testimonials-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Tekstas NIEKADA neslepiamas — vietoj to sutankinamas išdėstymas,
   kad mazgas tilptų į langą esant zoom == 1 (DOM 1:1 → aštrus
   tekstas, veikianti klaviatūra, matomas paieškos robotams). */
html.canvas-nav-on section.node { padding: 2.5rem 0; }
html.canvas-nav-on .node.services,
html.canvas-nav-on .node.why-choose { padding: 2.5rem 0; }
html.canvas-nav-on .node.hero { padding: 3rem 0; }

html.canvas-nav-on .node .section-header { margin-bottom: 1.5rem; }
html.canvas-nav-on .node .work-head { margin-bottom: 1.5rem; }

/* Paslaugų kortelės — tankiau, bet visas tekstas vietoje */
html.canvas-nav-on .node .service-card { padding: 1.25rem 1.15rem; }
html.canvas-nav-on .node .service-icon { height: 34px; margin-bottom: .75rem; }
html.canvas-nav-on .node .service-icon svg { width: 26px; height: 26px; }
html.canvas-nav-on .node .service-card h3 { font-size: 1rem; margin-bottom: .4rem; }
html.canvas-nav-on .node .service-price { margin-bottom: .75rem; font-size: .82rem; }
html.canvas-nav-on .node .service-features { margin-bottom: .75rem; }
html.canvas-nav-on .node .service-features li {
    font-size: .82rem;
    line-height: 1.4;
    margin-bottom: .3rem;
}
html.canvas-nav-on .node .service-description {
    font-size: .8rem;
    line-height: 1.45;
}
html.canvas-nav-on .node .service-card .btn { margin-top: .75rem; padding: .5rem .9rem; font-size: .78rem; }

/* „Kodėl mes" — atsiliepimai lieka DOM'e, rodomi kompaktiškiau */
html.canvas-nav-on .node .testimonials-grid { gap: 1rem; margin-top: 1.25rem; }
html.canvas-nav-on .node .tst-text { font-size: .82rem; line-height: 1.5; }
html.canvas-nav-on .node .benefit p { font-size: .85rem; line-height: 1.5; }

/* Darbai — produktų juosta lentoje kompaktiškesnė */
html.canvas-nav-on .node .ws-mock-row { padding: .32rem .7rem; font-size: .76rem; }
html.canvas-nav-on .node .ws-card { padding: 1rem; }
html.canvas-nav-on .node .work-grid { gap: 1rem; }
html.canvas-nav-on .node .ws-main,
html.canvas-nav-on .node .ws-side { gap: 1rem; }
html.canvas-nav-on .node .ws-card p { font-size: .82rem; line-height: 1.45; }
html.canvas-nav-on .node .ws-card h3 { font-size: 1rem; }
html.canvas-nav-on .node .ws-cover { max-height: 90px; }
html.canvas-nav-on .node .ws-cover img { max-height: 78px; width: auto; }
html.canvas-nav-on .node .ws-mock { margin-top: .6rem; }
html.canvas-nav-on .node .work-sub { font-size: .95rem; }

/* Kontaktai — forma + rekvizitai + footeris viename mazge */
html.canvas-nav-on .node.contact .contact-content { gap: 2rem; }
html.canvas-nav-on .node.contact .form-field { margin-bottom: .6rem; }
html.canvas-nav-on .node.contact textarea { rows: 3; min-height: 84px; }
html.canvas-nav-on .node.contact .contact-details { gap: .5rem; margin: 1rem 0; }
html.canvas-nav-on .node.contact .lead { font-size: .95rem; }
html.canvas-nav-on .node .footer-min { padding: 1rem 0 0; margin-top: 1.25rem; }
html.canvas-nav-on .node .footer-min-row { font-size: .78rem; }

html.canvas-nav-on .node.hero {
    margin-top: 0;          /* navbar nebestumdo — jis fiksuotas virš viewport */
    padding: 5rem 0 4.5rem;
}

html.canvas-nav-on section.node {
    padding: 4.5rem 0;
}

html.canvas-nav-on .node.services  { padding: 4.5rem 0; }
html.canvas-nav-on .node.why-choose { padding: 4.5rem 0; }

/* Nusėdus — jokių filtrų, kad plonas Inter tekstas liktų aštrus */
html.canvas-nav-on #world.settled .node { filter: none !important; }

/* ---------- Jungčių sluoksnis ---------- */
html.canvas-nav-on .edges-layer {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
    color: var(--primary);
}

.edges-layer .edge-base {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    opacity: .18;
}

.edges-layer .edge-live {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    opacity: 0;
    transition: opacity .35s var(--ease);
}

.edges-layer .edge.on .edge-live { opacity: .75; }

.edges-layer .edge-node {
    fill: currentColor;
    opacity: .30;
}

.edges-layer .edge.on .edge-node { opacity: .7; }

/* ---------- Atvykimo animacija (scenos perdavimas) ---------- */
html.canvas-nav-on .node .section-header h2,
html.canvas-nav-on .node .work-title,
html.canvas-nav-on .node .contact-info h2 {
    position: relative;
}

/* violetinis plaukelis po antrašte — nusibraižo atvykus */
html.canvas-nav-on .node .section-header h2::after,
html.canvas-nav-on .node .work-title::after,
html.canvas-nav-on .node .contact-info h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -.5rem;
    height: 1px;
    width: 100%;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .42s var(--ease);
}

html.canvas-nav-on .node.node-dark .section-header h2::after,
html.canvas-nav-on .node.node-dark .work-title::after,
html.canvas-nav-on .node.node-dark .contact-info h2::after {
    background: var(--primary-bright);
}

html.canvas-nav-on .node.arrived .section-header h2::after,
html.canvas-nav-on .node.arrived .work-title::after,
html.canvas-nav-on .node.arrived .contact-info h2::after {
    transform: scaleX(1);
}

/* mono etiketė + kortelių pakopos */
html.canvas-nav-on .node .work-eyebrow,
html.canvas-nav-on .node .hero-eyebrow,
html.canvas-nav-on .node .section-subtitle {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .32s var(--ease), transform .32s var(--ease);
}

html.canvas-nav-on .node.arrived .work-eyebrow,
html.canvas-nav-on .node.arrived .hero-eyebrow,
html.canvas-nav-on .node.arrived .section-subtitle {
    opacity: 1;
    transform: none;
}

html.canvas-nav-on .node .service-card,
html.canvas-nav-on .node .step,
html.canvas-nav-on .node .benefit,
html.canvas-nav-on .node .ws-card {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

html.canvas-nav-on .node.arrived .service-card,
html.canvas-nav-on .node.arrived .step,
html.canvas-nav-on .node.arrived .benefit,
html.canvas-nav-on .node.arrived .ws-card {
    opacity: 1;
    transform: none;
}

/* 40 ms pakopos — iš viso ≤400 ms */
html.canvas-nav-on .node.arrived .service-card:nth-child(1),
html.canvas-nav-on .node.arrived .step:nth-child(1),
html.canvas-nav-on .node.arrived .benefit:nth-child(1) { transition-delay: .04s; }
html.canvas-nav-on .node.arrived .service-card:nth-child(2),
html.canvas-nav-on .node.arrived .step:nth-child(2),
html.canvas-nav-on .node.arrived .benefit:nth-child(2) { transition-delay: .08s; }
html.canvas-nav-on .node.arrived .service-card:nth-child(3),
html.canvas-nav-on .node.arrived .step:nth-child(3),
html.canvas-nav-on .node.arrived .benefit:nth-child(3) { transition-delay: .12s; }
html.canvas-nav-on .node.arrived .service-card:nth-child(4),
html.canvas-nav-on .node.arrived .step:nth-child(4),
html.canvas-nav-on .node.arrived .benefit:nth-child(4) { transition-delay: .16s; }

/* ---------- Navbar ----------
   Kameros režime viršutinė juosta PASLĖPTA: ji buvo suprojektuota
   slenkamam puslapiui ir ant lentos atrodo prilipdyta. Navigacija
   vyksta per lentą + progreso juostą dešinėje.
   ⚠️ Struktūriškai navbar VIS TIEK privalo likti už #world ribų —
   position:fixed transformuoto protėvio viduje virsta absolute.
   Kituose puslapiuose ir reduced-motion režime juosta lieka.

   Nuorodos nedingsta iš DOM (SEO/klaviatūra) — tik nerodomos. */
html.canvas-nav-on .navbar {
    position: fixed;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}

/* Pradžioje (pirmoji stotis) juosta MATOMA — vartotojas iškart mato
   navigaciją ir „Susisiekite". Pajudėjus gilyn ji pasitraukia į viršų,
   kad neuždengtų lentos. Klasę valdo canvas-nav.js kameros ciklas. */
html.canvas-nav-on .navbar.nav-vaizde {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* Klaviatūra juosta GRĮŽTA: pasiekus ją Tab'u ji išnyra ir veikia.
   (`visibility:hidden` būtų išmetęs nuorodas iš tab tvarkos —
   Apskaita ir Susisiekite taptų nepasiekiamos klaviatūra.) */
html.canvas-nav-on .navbar:focus-within {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* Judesio jautrumas: kam judesys sumažintas, juosta tiesiog lieka
   vietoje — jokio slydimo į viršų ir atgal. */
@media (prefers-reduced-motion: reduce) {
    html.canvas-nav-on .navbar {
        transition: none;
    }
}

/* ---------- Progreso juosta (dešinėje) ---------- */
/* Juosta turi SAVO koridorių — mazgai po ja nelenda.
   Plotis atspindi taškelio + etiketės vietą (žr. `--rail-w`). */
html.canvas-nav-on {
    --rail-w: 56px;
}

html.canvas-nav-on #rail {
    display: flex;
    position: fixed;
    /* Atitraukta nuo krašto, kad po taškeliu centruota etiketė
       (plačiausia — „Kaip dirbame", 88 px) tilptų į abi puses.
       Juostos PLOTIS (`--rail-w`) NEdidinamas — keičiasi tik padėtis. */
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    /* Didesnis tarpas: etiketė rodoma PO taškeliu, todėl tarp taškelių
       turi tilpti ir ji, ir pelės žymeklis (kitaip žymeklis uždengia
       tekstą — būtent taip ir buvo su .75rem). */
    gap: 1.65rem;
    z-index: 90;
    width: var(--rail-w);
    align-items: center;
    /* Fonas po taškeliais — kad ant šviesaus turinio jie nesusilietų */
    padding: .5rem 0;
}

/* Taškelis ir etiketė vienas PO kitu (ne greta): etiketė centruojama
   po taškeliu, todėl telpa nedidinant pačios juostos pločio.
   `position: relative` — etiketė pozicionuojama jo atžvilgiu. */
.rail-tick {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: .15rem 0;
    cursor: pointer;
    color: var(--text-light);
}

/* Taškeliai NE vienoje linijoje — pakaitomis pasislenka į šonus.
   Anksčiau tokį „zigzagą" atsitiktinai duodavo greta esanti etiketė
   (kiekvieno mygtuko plotis skyrėsi pagal teksto ilgį). Perkėlus
   etiketę po taškeliu tas efektas dingtų, todėl poslinkis dabar
   nurodytas AIŠKIAI — nepriklauso nuo teksto ilgio, o etiketė
   lieka centruota po savo taškeliu (ji pozicionuojama tick'o atžvilgiu). */
.rail-tick:nth-child(odd)  { transform: translateX(-7px); }
.rail-tick:nth-child(even) { transform: translateX(7px); }

.rail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    flex: none;
}

.rail-tick.on .rail-dot {
    opacity: 1;
    background: var(--primary);
    transform: scale(1.5);
}

/* Etiketė — PO taškeliu, centruota jo atžvilgiu.
   ⚠️ `position: absolute` + `left: 50%` + `translateX(-50%)`: etiketė
   išeina iš 56 px juostos srauto ir plečiasi Į ABI PUSES vienodai,
   todėl ilgas tekstas („Kaip dirbame") telpa ekrane NEdidinant
   `--rail-w`. Su ankstesniu flex-greta sprendimu etiketė augdavo tik
   į dešinę ir nubėgdavo už ekrano krašto (patikrinta: 1467 px prie
   1440 px lango). `right: auto` neleidžia tėvo justify nukelti. */
.rail-label {
    position: absolute;
    /* VIRŠ taškelio, ne po juo: pelės žymeklis piešiamas žemiau-dešiniau
       nuo aktyvaus taško, todėl po taškeliu esantį tekstą jis uždengdavo
       (net ir su padidintais tarpais). Virš taškelio žymeklis netrukdo. */
    bottom: calc(100% + .3rem);
    left: 50%;
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transform: translateX(-50%) translateY(3px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    white-space: nowrap;
    pointer-events: none;
}

.rail-tick:hover .rail-label,
.rail-tick:focus-visible .rail-label {
    opacity: .9;
    transform: translateX(-50%);
}

/* Ant tamsios stoties juosta persidažo */
html.canvas-nav-on.on-dark .rail-tick { color: var(--bone-dim); }
html.canvas-nav-on.on-dark .rail-tick.on .rail-dot { background: var(--primary-bright); }

/* ---------- Praleisti į turinį ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--primary);
    color: #fff;
    padding: .7rem 1.1rem;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
    left: 0;
}

/* Fokuso žiedas niekada nenukerpamas */
html.canvas-nav-on .node { overflow: visible; }
html.canvas-nav-on .node > * { border-radius: inherit; }

/* ---------- Aukšti mazgai: vidinė slinktis ----------
   Kai sekcija netelpa į langą, kamera ją lygiuoja pagal viršų, o
   likusi dalis pasiekiama slenkant MAZGO viduje. Tekstas lieka
   DOM'e 1:1 (aštrus, pasiekiamas klaviatūra ir robotams) — tai
   geriau nei mažinti mastelį arba slėpti turinį.
   `overscroll-behavior: contain` neleidžia slinkčiai „prasimušti"
   į kamerą, kai pasiekiamas mazgo galas. */
/* ---------- Aukšti mazgai NEBEAPKARPOMI ----------
   Anksčiau netelpanti sekcija buvo apribota max-height + vidine
   slinktimi. Realiai tai reiškė, kad dalis turinio (pvz. „Darbuose"
   — 20 %, visas Sklypų patikros ir TopChess blokas) tiesiog
   nesimatė: vidinė slinktis be juostos yra nematoma vartotojui.

   Dabar mazgas rodomas VISAS, o jei netelpa — kamera jį apkeliauja
   (žr. canvas-nav.js `span`). Turinys svarbiau už kadravimą. */
html.canvas-nav-on .node.is-tall {
    max-height: none;
    overflow: visible;
}

/* Užuomina, kad mazge yra daugiau turinio */
html.canvas-nav-on .node.is-tall::after {
    content: '';
    position: sticky;
    display: block;
    bottom: 0;
    height: 40px;
    margin-top: -40px;
    pointer-events: none;
    background: linear-gradient(transparent, var(--bg-white));
}

html.canvas-nav-on .node.is-tall.node-dark::after {
    background: linear-gradient(transparent, var(--ink));
}

/* ---------- Mobile ----------
   Iki 768 px zoom metafora kainuoja daugiau nei duoda:
   paliekame kamerą, bet TIK vertikalią (šoniniai poslinkiai
   nunulinami JS'e per ZOOM_OUT_MOB) ir mazgus per visą plotį. */
/* ===========================================================
   Mobilus — įprastas slenkamas puslapis (kameros čia NĖRA).
   Sekcijos elgiasi kaip visada: viena po kitos, natūralaus
   aukščio, be jokio kadravimo ar apkarpymo.
   =========================================================== */
@media (max-width: 767px) {
    /* Lentos apipavidalinimas nuimamas — sekcija vėl yra sekcija */
    html.static-nav .node,
    html.static-nav .node.services,
    html.static-nav .node.work,
    html.static-nav .node.contact {
        width: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
        margin: 0;
    }

    /* Tamsios sekcijos atgauna savo foną (jį anksčiau davė .node-dark) */
    html.static-nav .node.hero,
    html.static-nav .node.work,
    html.static-nav .node.contact { background: var(--ink); }
}

/* ===========================================================
   REDUCED MOTION — tikras opt-out, ne dekoratyvinis
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
    html, body {
        height: auto !important;
        overflow: visible !important;
    }
    #viewport { position: relative !important; inset: auto !important; touch-action: auto !important; }
    #world    { position: static !important; transform: none !important; width: auto; height: auto; }
    .node     { position: relative !important; left: auto !important; top: auto !important;
                width: auto !important; opacity: 1 !important; filter: none !important;
                border: 0; border-radius: 0; box-shadow: none; background: none; }
    #bg, #rail, .edges-layer { display: none !important; }
}

/* ===========================================================
   STATINIS SRAUTAS — mobilus IR reduced-motion
   -----------------------------------------------------------
   Abu atvejai elgiasi vienodai: įprastas slenkamas dokumentas.
   Telefone kameros nėra sąmoningai — sekcijos ten 2–3× aukštesnės
   už ekraną, tad kadravimas rodytų tik turinio fragmentą.
   =========================================================== */
html.reduced-nav #bg,
html.reduced-nav #rail,
html.reduced-nav .edges-layer,
html.static-nav #bg,
html.static-nav #rail,
html.static-nav .edges-layer { display: none !important; }

html.reduced-nav .node,
html.static-nav .node {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    filter: none !important;
}

/* ===========================================================
   MOBILUS EFEKTAS — „lentos" kalba be kameros
   -----------------------------------------------------------
   Turinys slenkasi ĮPRASTAI (nieko nekarpo), o metafora išlieka
   TARP sekcijų: kiekviena sekcija atvyksta kaip mazgas — jungties
   linija, mono etiketė, švelnus pakilimas. Efektas pririštas prie
   slinkties, o ne prie kameros, todėl nieko neužstoja.
   =========================================================== */

/* Fonas — tas pats techninis tinklelis kaip desktope (statinis) */
html.static-nav body {
    background-image:
        linear-gradient(rgba(20, 22, 26, .030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 22, 26, .030) 1px, transparent 1px);
    background-size: 72px 72px;
    background-attachment: fixed;
}

/* Jungtis tarp sekcijų — vertikali linija su mazgo tašku.
   Tai ta pati schemos kalba, tik statinė. */
html.static-nav .node + .node::before {
    content: '';
    position: absolute;
    top: -34px;
    left: 50%;
    width: 1px;
    height: 34px;
    background: linear-gradient(var(--primary-line), var(--primary));
    opacity: .5;
}

html.static-nav .node + .node::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2px;
    border-radius: 1px;
    background: var(--primary);
    opacity: .8;
}

html.static-nav .node {
    position: relative !important;
    margin-top: 34px;           /* vieta jungčiai */
    /* Nuoroda #sekcija sustoja PO fiksuota juosta, ne po ja
       (permetimo nebėra, bet meniu nuorodoms tai vis tiek būtina) */
    scroll-margin-top: 62px;
}

html.static-nav .node:first-of-type { margin-top: 0; }
html.static-nav .node:first-of-type::before,
html.static-nav .node:first-of-type::after { display: none; }

/* Sekcijos atvykimas — pakyla ir išryškėja įslinkus į ekraną.
   Valdo IntersectionObserver (žr. canvas-nav.js `stebetiStatiskai`).

   ⚠️ Judesio DYDIS svarbus: <16 px mobiliajame nebeskaitomas kaip
   tyčinis judesys (paskęsta slinkime). 32 px + .56 s — reikšmės,
   ties kuriomis reveal'as realiai matomas, bet dar neatrodo lėtas.
   Animuojamos TIK `opacity` ir `transform` — abi eina tiesiai į
   kompozitorių, todėl pigu mobiliajam GPU (jokio layout/paint).
   ❌ Nedėti čia `scale` — žr. pastabą apie mastelį žemiau. */
html.static-nav .node .section-header,
html.static-nav .node .work-head,
html.static-nav .node .hero-content,
html.static-nav .node .service-card,
html.static-nav .node .step,
html.static-nav .node .benefit,
html.static-nav .node .ws-card,
html.static-nav .node .contact-content {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .56s var(--ease), transform .56s var(--ease);
}

html.static-nav .node.matomas .section-header,
html.static-nav .node.matomas .work-head,
html.static-nav .node.matomas .hero-content,
html.static-nav .node.matomas .service-card,
html.static-nav .node.matomas .step,
html.static-nav .node.matomas .benefit,
html.static-nav .node.matomas .ws-card,
html.static-nav .node.matomas .contact-content {
    opacity: 1;
    transform: none;
}

/* Kortelės atvyksta pakopomis — ritmas, ne vienas blyksnis */
html.static-nav .node.matomas .service-card:nth-child(2),
html.static-nav .node.matomas .step:nth-child(2),
html.static-nav .node.matomas .benefit:nth-child(2),
html.static-nav .node.matomas .ws-card:nth-child(2) { transition-delay: .08s; }
html.static-nav .node.matomas .service-card:nth-child(3),
html.static-nav .node.matomas .step:nth-child(3),
html.static-nav .node.matomas .benefit:nth-child(3),
html.static-nav .node.matomas .ws-card:nth-child(3) { transition-delay: .16s; }
html.static-nav .node.matomas .service-card:nth-child(4),
html.static-nav .node.matomas .step:nth-child(4),
html.static-nav .node.matomas .benefit:nth-child(4),
html.static-nav .node.matomas .ws-card:nth-child(4) { transition-delay: .24s; }

/* -----------------------------------------------------------
   PERMETIMO efektas — PAŠALINTAS (2026-08-26)
   -----------------------------------------------------------
   Čia buvo `.node.atvyko` mastelio animacija (.955 → 1.012),
   lydėjusi permetimą tarp sekcijų. Pašalinta kartu su pačiu
   permetimu — priežastys išsamiai surašytos `canvas-nav.js`
   (ties „Mobilus: ĮPRASTAS slinkimas").

   Trumpai: mastelis yra RADIALINIS — ties transformacijos centru
   turinys pajuda ~0 px, todėl 2,5–4,5 % pokytis ant viso ekrano
   sekcijos akiai buvo ne judesys, o teksto neryškumo blyksnis
   (Chrome keisdamas mastelį iš naujo rasterizuoja sluoksnį).

   ❌ NEGRĄŽINTI mastelio animacijos ant sekcijų su tekstu.
   Norint „zoom" pojūčio — taikyti TIK paveikslėliui (vaiko
   elementui) ir ne mažiau kaip 8–12 %, kad būtų matoma.

   Judesys mobiliajame dabar gyvena `.matomas` reveal'e žemiau —
   `opacity` + `translateY` (tik kompozitoriaus savybės).
   ----------------------------------------------------------- */

/* Antraštės plaukelis nusibraižo — kaip desktope */
html.static-nav .node .section-header h2::after,
html.static-nav .node .work-title::after,
html.static-nav .node .contact-info h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: -.45rem;
    height: 1px; width: 100%;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .55s var(--ease) .1s;
}

html.static-nav .node .section-header h2,
html.static-nav .node .work-title,
html.static-nav .node .contact-info h2 { position: relative; }

html.static-nav .node.matomas .section-header h2::after,
html.static-nav .node.matomas .work-title::after,
html.static-nav .node.matomas .contact-info h2::after { transform: scaleX(1); }

html.static-nav .node.node-dark .section-header h2::after,
html.static-nav .node.node-dark .work-title::after,
html.static-nav .node.node-dark .contact-info h2::after { background: var(--primary-bright); }

/* Judesio atsisakius — viskas matoma iškart, jokių perėjimų.
   ⚠️ Taikoma VISOMS būsenoms (ne tik .static-nav): reduced-motion
   režime uždedama `.reduced-nav`, todėl apsiribojus `.static-nav`
   turinys liktų paslėptas (patikrinta — realiai taip ir buvo). */
@media (prefers-reduced-motion: reduce) {
    .node,
    .node * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .node + .node::before,
    .node + .node::after { display: none !important; }
}

/* Tas pats saugiklis klasės lygmeniu — jei JS nusprendė reduced-nav */
html.reduced-nav .node,
html.reduced-nav .node * {
    opacity: 1 !important;
    transform: none !important;
}

/* Konteineriai grįžta į normalų srautą — jokio fixed/transform */
html.static-nav,
html.static-nav body {
    height: auto;
    overflow: visible;
}

html.static-nav #viewport {
    position: relative;
    inset: auto;
    overflow: visible;
    touch-action: auto;         /* natūralus telefono slinkimas + pinch */
}

html.static-nav #world {
    position: static;
    transform: none !important;
    width: auto;
    height: auto;
    will-change: auto;
}

/* Viršutinė juosta statiniame sraute veikia kaip visada */
html.static-nav .navbar {
    position: fixed;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* Hero atgauna tarpą po fiksuota juosta */
html.static-nav .node.hero { margin-top: 70px; }