/* Naslovnica, hero „Sljeme”: toranj (jantarni vidikovac, jarbol s trakama), stabla u katovima, kabina koja se njiše
   i noć na vrhu. Noć pali sunce („ugasi me”); jedan broj, --noc na <html> (0 dan, 1 noć, postavlja naslovnica.js),
   vodi sve boje heroja, zaglavlja i sekcije „Odakle krećete” (njezina noć je u naslovnica-sekcije.css), pa skrolanjem sve svijetli istim tempom.
   Noćni izgled crteža živi u kopiji crteža (.sv-noc-kopija) koja se pretapa preko dnevnog. */
/* vidikovac: jantarni prozori umjesto sivozelenog stakla s narančastim slojem */
.journey-art .ja-window-warm.sv-amber{ opacity: 1; }
.journey-art[data-state="playing"] .ja-window-warm.sv-amber{ animation: sv-tower-light 4s ease both; }
@keyframes sv-tower-light{ 0%, 8% { opacity: 0; } 32%, 100% { opacity: 1; } }
.journey-art .sv-mullion-light{ fill: none; stroke: #faf7e9; stroke-width: 2.2; }
.journey-art .sv-mullion{ fill: none; stroke: var(--ja-ink); stroke-width: .75; opacity: .7; }
.journey-art .sv-sheen{ fill: #fffdf7; stroke: none; opacity: 0; }
.journey-art .sv-soffit-ribs{ fill: none; stroke: #8d9581; stroke-width: .8; opacity: .7; }
.journey-art .sv-door-light{ fill: #f6cf86; stroke: none; }

/* jarbol: narančaste trake, sjena desnog ruba, dipoli i svjetla za zrakoplove */
.journey-art .sv-mast-shade{ fill: #d9dccd; stroke: none; }
.journey-art .sv-mast-band{ fill: var(--ja-orange); stroke: none; }
.journey-art .sv-mast-line{ fill: none; }
.journey-art .sv-beacon{ fill: var(--ja-orange); stroke: none; }
.journey-art .sv-beacon-core{ fill: #fff5eb; stroke: none; }
.journey-art .sv-beacon{ transform-box: fill-box; transform-origin: center; }

/* petlje samo dok je prizor u kadru i pokret je dopušten (ambient-visible to već uzima u obzir) */
body[data-journey="panorama"] .journey-art[data-state="finished"] .ambient-visible .sv-amber{ animation: sv-shimmer 5.2s ease-in-out infinite; }
body[data-journey="panorama"] .journey-art[data-state="finished"] .ambient-visible .sv-sheen{ animation: sv-sheen 6.5s ease-in-out infinite; }
body[data-journey="panorama"] .journey-art[data-state="finished"] .ambient-visible .sv-beacon{ animation: sv-beacon 2.4s ease-in-out infinite; }
body[data-journey="panorama"] .journey-art[data-state="finished"] .ambient-visible .sv-beacon--mid{ animation-delay: 1.2s; }
@keyframes sv-shimmer{ 0%, 100% { opacity: .9; } 50% { opacity: 1; } }
@keyframes sv-sheen{ 0% { transform: translateX(-46px); opacity: 0; } 30%, 60% { opacity: .45; } 100% { transform: translateX(78px); opacity: 0; } }
@keyframes sv-beacon{ 0%, 100% { opacity: 1; transform: scale(1); } 45% { opacity: .3; transform: scale(.75); } 55% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce){ .journey-art .sv-amber,.journey-art .sv-sheen,.journey-art .sv-beacon{ animation: none !important; } }
html.bez-petlji .journey-art .sv-amber,html.bez-petlji .journey-art .sv-sheen,html.bez-petlji .journey-art .sv-beacon{ animation: none !important; }

/* stabla: Geminijeva smreka u katovima (svjetlo slijeva, sjena zdesna) */
.journey-art .sv-trunk{ fill: #8a7f6c; stroke-width: 1.1; }
.journey-art .sv-root{ fill: none; stroke-width: 1.1; }
.journey-art .sv-tree-sun{ fill: #e2e8d8; stroke: none; }
.journey-art .sv-tree-shade{ fill: #8b9c83; stroke: none; }
.journey-art .ja-forest--far{ opacity: .68; }
.journey-art .ja-forest--near{ opacity: .95; }
.journey-art .sv-tree-line{ fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.journey-art .sv-tree-needles{ fill: none; stroke-width: .9; stroke-linecap: round; opacity: .55; }
.journey-art .sv-tree{ transform-box: fill-box; transform-origin: 50% 100%; }
/* vjetar: stabla su mirna; svakih 14 pa 20 s nalet (oko 1,9 s) prođe šumom slijeva nadesno (i u noćnoj kopiji; --d kasni po stablu, --a jačina i smjer) */
body[data-journey="panorama"] .journey-art[data-state="finished"] :is(.ambient-visible, .ambient-visible ~ .sv-noc-kopija) .sv-tree{ animation: sv-nalet 34s ease-in-out var(--d, 0s) infinite; }
.sv-tree--b{ --a: -.8; } .sv-tree--c{ --a: .6; }
.ja-forest > g{ --d: .1s; } .ja-forest > g:nth-of-type(n+3){ --d: .3s; }
.ja-forest--far > g:nth-of-type(n+6),.ja-forest--near > g:nth-of-type(n+5){ --d: .6s; }
.ja-forest--far > g:nth-of-type(n+8),.ja-forest--near > g:nth-of-type(n+6){ --d: 1s; }
@keyframes sv-nalet{ 0%, 17%, 22.5%, 58%, 63.5%, 100% { transform: rotate(0); } 18.5%, 59.5% { transform: rotate(calc(var(--a, 1) * 1.4deg)); } 20%, 61% { transform: rotate(calc(var(--a, 1) * -.5deg)); } 21.3%, 62.3% { transform: rotate(calc(var(--a, 1) * .2deg)); } }

/* staza od postaje do tornja: narančaste točkice putuju prema tornju; točka na kraju crte kod natpisa */
.journey-art .sv-path-flow{ fill: none; stroke: var(--ja-orange); stroke-width: 1.9; stroke-dasharray: 0 9; stroke-linecap: round; opacity: .85; }
body[data-journey="panorama"] .journey-art[data-state="finished"] .ambient-visible .sv-path-flow{ animation: sv-path-flow 2.2s linear infinite; }
@keyframes sv-path-flow{ to { stroke-dashoffset: -18; } }
.journey-art .sv-label-dot{ fill: var(--ja-orange); stroke: none; }

@media (prefers-reduced-motion: reduce){ .journey-art .sv-tree,.journey-art .sv-path-flow{ animation: none !important; } }
html.bez-petlji .journey-art .sv-tree,html.bez-petlji .journey-art .sv-path-flow{ animation: none !important; }

/* kabina: njihanje iz kretanja (--njihaj iz skripte) i blago njihanje na mjestu */
.journey-traveller>svg{ transform: rotate(var(--njihaj, 0deg)); transform-origin: 50% 2px; }
.journey-traveller{ pointer-events: auto; cursor: pointer; } /* klik je lagano zaljulja */
@media (prefers-reduced-motion: no-preference){
  html:not(.bez-petlji) .journey-traveller>svg{ animation: sv-idle 4.2s ease-in-out infinite; }
}
@keyframes sv-idle{ 0%, 100% { rotate: -.8deg; } 50% { rotate: 1deg; } }

/* kabina: Geminijev oblik (hvataljka s dva kotačića, kosa ovjesna ruka, tri okna, branik s brojem) */
.journey-cabin .jc-grip-bar{ fill: #333e33; stroke: none; }
.journey-cabin .jc-hanger{ fill: none; stroke: #333e33; stroke-width: 1.6; }
.journey-cabin .jc-mount{ fill: #e5e8df; stroke: #333e33; stroke-width: 1; }
.journey-cabin .jc-body{ fill: #f6f2e3; stroke: #333e33; stroke-width: 1.3; }
.journey-cabin .jc-panes{ fill: #b9c6b8; stroke: #333e33; stroke-width: 1; }
.journey-cabin .jc-reflect{ fill: #e4ece2; stroke: none; }
.journey-cabin .jc-divider-light{ fill: none; stroke: #f6f2e3; stroke-width: 1.7; }
.journey-cabin .jc-divider{ fill: none; stroke: #333e33; stroke-width: .7; }
.journey-cabin .jc-badge{ fill: #f6f2e3; stroke: none; }

/* nebo: tamni sloj ispod sadržaja; na dnu se pretopi u papir stranice */
.hero::before{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--noc, 0);
  background: radial-gradient(ellipse 60% 45% at 76% 58%, #2c3a3255, transparent 70%), linear-gradient(#111916, #1a241f 55%, #1d2822 calc(100% - 34px), var(--paper)); }
.hero > .scroll-cue{ position: relative; z-index: 1; }
.hero{ --ink: color-mix(in oklab, #eef0e6 calc(var(--noc, 0) * 100%), #272f2c); --muted: color-mix(in oklab, #a9b4a5 calc(var(--noc, 0) * 100%), #647067); color: var(--ink); }

/* prizor: noćna kopija crteža (tamne plohe, svijetle linije) leži točno preko dnevnog i pretapa se prema --noc */
.sv-noc-kopija{ position: absolute; pointer-events: none; opacity: var(--noc, 0); z-index: 1; }
.hero .sv-noc-kopija{ --ja-ink: #cdd6c9; }
.hero .sv-noc-kopija path[fill="url(#journey-departure-1-hill)"]{ fill: url(#journey-departure-1-hill-noc); }
.hero .sv-noc-kopija path[fill="url(#journey-departure-1-concrete)"]{ fill: url(#journey-departure-1-concrete-noc); }
.hero .sv-noc-kopija .ja-atmosphere{ stroke: #6f7f71; }
.hero .sv-noc-kopija .ja-atmosphere circle{ fill: #f1ead0; opacity: .95; }
.hero .sv-noc-kopija .ja-contours{ stroke: #8fa08a; opacity: .2; }
.hero .sv-noc-kopija .ja-ridge{ stroke: #8fa08a; opacity: .55; }
.hero .sv-noc-kopija .ja-forest{ stroke: #93a58c; }
.hero .sv-noc-kopija .sv-tree-sun{ fill: #3c4b40; }
.hero .sv-noc-kopija .sv-tree-shade{ fill: #26332b; }
.hero .sv-noc-kopija .sv-trunk{ fill: #4b4337; }
.hero .sv-noc-kopija .ja-ground-shadow{ fill: #000; fill-opacity: .22; }
.hero .sv-noc-kopija .ja-stone{ fill: #3a453d; }
.hero .sv-noc-kopija .ja-ivory{ fill: #414d43; }
.hero .sv-noc-kopija .ja-concrete{ fill: #333e36; }
.hero .sv-noc-kopija .ja-hairline{ stroke: #6f7d6c; }
.hero .sv-noc-kopija .ja-glass{ fill: #2b352e; }
.hero .sv-noc-kopija .sv-mullion-light{ stroke: #414d43; }
.hero .sv-noc-kopija .sv-mast-shade{ fill: #353f37; }
.hero .sv-noc-kopija .sv-soffit-ribs{ stroke: #6f7d6c; }
.hero .sv-noc-kopija .ja-path{ stroke: #6f7d6c; }
.hero .sv-noc-kopija .ja-platform{ fill: #39443b; stroke: #6f7d6c; }
.hero .sv-noc-kopija .ja-post{ stroke: #9aa894; }
.hero .sv-noc-kopija .ja-station-wall{ fill: #303a32; }
.hero .sv-noc-kopija .ja-cable-stub{ stroke: #9aa894; }
.hero .sv-noc-kopija .ja-terminal{ fill: #3d483f; stroke: #9aa894; }
.hero .sv-noc-kopija .ja-station-roof{ fill: #3a463d; }
.hero .sv-noc-kopija .ja-station-fascia{ fill: #2e3830; }
.hero .sv-noc-kopija .ja-roof-seams{ stroke: #56645a; }
.hero .sv-noc-kopija .ja-railing,.hero .sv-noc-kopija .ja-stairs{ stroke: #7f8d79; }
.hero .sv-noc-kopija .ja-labels > path{ stroke: #8f9a8a; }
.hero .sv-noc-kopija .ja-handnote{ fill: #d2c8a6; }
.hero .sv-noc-kopija .ja-region{ fill: #9aa894; }
.hero .sv-noc-kopija .ja-compass{ fill: #9aa894; stroke: #9aa894; }
.hero .sv-noc-kopija .pa-cloud{ stroke: #7d8c7f; }
.hero .sv-noc-kopija .pa-bird{ opacity: 0; }
.hero .sv-noc-kopija .pa-mist{ opacity: .14; }

/* svjetla se pale redom tek kad padne mrak; danju se gase odmah */
.hero .sv-noc-kopija .ja-shadow{ fill: #f0b85a; }
.hero .sv-noc-kopija .ja-station-window{ fill: #f3c06a; fill-opacity: .92; }
.hero .sv-noc-kopija .ja-station-sign{ opacity: 1; }
.sv-noc-sloj .sv-svjetlo{ opacity: 0; }
.hero .sv-noc-kopija .sv-noc-sloj .sv-svjetlo{ opacity: calc(var(--o, 1) * clamp(0, (var(--noc, 0) - .45) * 2.5, 1)); }
.sv-halo{ mix-blend-mode: screen; }
.sv-lampa-stup{ fill: none; stroke: #9aa894; stroke-width: 1.2; }
.sv-lampa{ fill: #ffe2a0; }
.sv-zvijezda{ fill: #f4f1de; }
.sv-mjesec-krater{ fill: #d9d1b3; }
.hero .sv-noc-kopija .sv-zvijezda{ animation: sv-trepni 3.6s ease-in-out infinite; animation-delay: var(--t, 0s); }
@keyframes sv-trepni{ 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* kabina nosi svjetlo niz cijelu stranicu */
.journey-cabin .jc-panes{ transition: fill 1s ease 1.2s; }
body.sv-noc-kabina .journey-cabin .jc-panes{ fill: #f6cf86; }
body.sv-noc-kabina .journey-cabin .jc-reflect{ opacity: .25; }
.journey-traveller{ transition: filter 1s ease 1.2s; }
body.sv-noc-kabina .journey-traveller{ filter: drop-shadow(0 0 7px #f5c26bcc) drop-shadow(0 3px 3px #25342320); }
body.sv-noc-kabina .journey-cable__future{ stroke: #848c80; opacity: .75; }

@media (prefers-reduced-motion: reduce){
  .hero::before,.hero *,.sv-noc-gumb,.journey-traveller,.journey-cabin *{ transition: none !important; }
  .sv-zvijezda{ animation: none !important; }
}
html.bez-petlji .sv-zvijezda{ animation: none !important; }

/* bilješka „01 / Sljeme”: bez ploče, tekst s narančastom točkom i crtom spuštenom do točke na stazi */
.departure-note.sv-plakat--staza{ background: none; border: 0; box-shadow: none; transform: none; padding: 0; }
.departure-note.sv-plakat--staza .sv-vodilica{ display: block; }
.departure-note .sv-vodilica{ display: none; position: absolute; pointer-events: none; left: 4px; top: calc(100% + 12px); width: 110px; height: 104px; overflow: visible; fill: none; stroke: #6f7768; stroke-width: 1.2; }
.sv-vodilica circle{ fill: var(--paper); stroke: var(--orange); stroke-width: 2; }
.sv-vodilica circle + circle{ fill: var(--orange); stroke: none; }
.sv-plakat--staza .eyebrow{ display: inline-flex; align-items: center; gap: 10px; }
.sv-plakat--staza .eyebrow::before{ content: ""; width: 9px; height: 9px; border: 2.5px solid var(--orange); border-radius: 50%; }
.sv-plakat--staza p{ font-weight: 600; }
.hero .sv-plakat--staza{ --muted: color-mix(in oklab, #c6cfc2 calc(var(--noc, 0) * 100%), #647067); color: color-mix(in oklab, #eef0e6 calc(var(--noc, 0) * 100%), #272f2c); }
.hero .sv-plakat--staza .sv-vodilica{ stroke: color-mix(in oklab, #aab6a5 calc(var(--noc, 0) * 100%), #6f7768); }
.hero .sv-vodilica circle:first-of-type{ fill: color-mix(in oklab, #18211c calc(var(--noc, 0) * 100%), #f2f1e7); }

/* noću tamna podloga otkrije gdje crtež prestaje: teren, izohipse, nebo i šuma mekano izblijede prema rubovima i dnu */
.hero .sv-noc-kopija path[fill="url(#journey-departure-1-hill)"],.hero .sv-noc-kopija .ja-contours,.hero .sv-noc-kopija .ja-remote-contours,
.hero .sv-noc-kopija .ja-ridge,.hero .sv-noc-kopija .ja-atmosphere > path,.hero .sv-noc-kopija .ja-forest,.hero .sv-noc-kopija .pa-mist,.hero .sv-noc-kopija .pa-cloud{ mask: url(#journey-departure-1-rub); }

/* zaglavlje */
html.sv-noc .zaglavlje{ --zt: clamp(0, (var(--noc, 0) - .5) * 10000, 1); --zg: calc(clamp(0, (var(--noc, 0) - .5) * 4 + .5, 1) / 2 + var(--zt) / 2); background-color: color-mix(in oklab, #111815 calc(var(--zg) * 100%), #f7f7f3); border-bottom-color: color-mix(in oklab, #2a352e calc(var(--zg) * 100%), #e3e5da); }
html.sv-noc .zaglavlje :is(.znak__ime,.izbornik__grana > a,.zaglavlje__izbornik){ color: color-mix(in oklab, #e9ece3 calc(var(--zt) * 100%), #16181a); }
html.sv-noc .zaglavlje :is(.izbornik__jezik,.izbornik__broj){ color: color-mix(in oklab, #c3ccbd calc(var(--zt) * 100%), #3b4046); }
html.sv-noc .zaglavlje .znak svg{ filter: invert(calc(var(--zt) * .9)) hue-rotate(calc(var(--zt) * 180deg)); }
html.sv-noc .hero .departure-note em{ color: color-mix(in oklab, #ff8a5c calc(var(--noc, 0) * 100%), var(--orange)); }

/* hero se noću bez reza nastavlja u drugu sekciju (ista noćna boja na dnu) */
html.sv-noc .hero::before{ background: radial-gradient(ellipse 60% 45% at 76% 58%, #2c3a3255, transparent 70%), linear-gradient(#111916, #1a241f 55%, #161e1a); }

/* ---------- sunce „ugasi me”: gumb preko sunca (noću mjeseca) i natpis u crtežu ---------- */
.sv-sunce-gumb{ position: absolute; z-index: 6; width: var(--d, 96px); height: var(--d, 96px); margin: calc(var(--d, 96px) / -2) 0 0 calc(var(--d, 96px) / -2); border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.sv-sunce-gumb:focus-visible{ outline: 2px solid var(--orange); outline-offset: 4px; }
.sv-okidac{ pointer-events: none; }
.sv-okidac .sv-ok-tekst{ font: italic 600 21px Georgia, serif; fill: var(--orange); }
.sv-okidac .sv-ok-crta{ fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sv-okidac .sv-ok-sjaj{ fill: url(#sv-ok-sjaj); }
.sv-okidac .sv-ok-dan{ display: inline; } .sv-okidac .sv-ok-noc{ display: none; }
.sv-noc-kopija .sv-okidac .sv-ok-dan{ display: none; } .sv-noc-kopija .sv-okidac .sv-ok-noc{ display: inline; }
.sv-okidac .sv-ok-sjaj,.sv-okidac .sv-ok-titraj{ transform-box: view-box; }
.sv-okidac .sv-ok-sjaj{ transform-origin: 723px 167px; }
.sv-okidac .sv-ok-titraj{ transform-origin: 690px 110px; }
@media (prefers-reduced-motion: no-preference){
  html:not(.bez-petlji) .sv-okidac .sv-ok-sjaj{ animation: sv-ok-sjaj 3.2s ease-in-out infinite; }
  html:not(.bez-petlji) .sv-okidac .sv-ok-titraj{ animation: sv-ok-titraj 2.8s ease-in-out infinite; }
}
@keyframes sv-ok-sjaj{ 0%, 100% { opacity: .55; scale: 1; } 50% { opacity: 1; scale: 1.12; } }
@keyframes sv-ok-titraj{ 0%, 100% { rotate: -2deg; translate: 0 0; } 50% { rotate: 2deg; translate: 0 -2px; } }
/* danju sunce mora izgledati kao sunce (u crtežu je blijedi krug), da poziv „ugasi me” ima smisla */
.hero .journey-art > svg:not(.sv-noc-kopija) .ja-atmosphere circle{ fill: #f6d38a !important; opacity: 1 !important; }

/* pretapanje: dnevna slika nestaje kako noćna dolazi (inače se usred svitanja vidi svijetli pravokutnik terena),
   a natpis se mijenja oko sredine, da se „ugasi me” i „upali dan” ne preklapaju */
.hero [data-art="departure"] svg:not(.sv-noc-kopija){ opacity: calc(1 - var(--noc, 0)); }
.hero [data-art="departure"] svg:not(.sv-noc-kopija) .sv-okidac{ opacity: clamp(0, (.5 - var(--noc, 0)) * 3, 1); }
.hero .sv-noc-kopija .sv-okidac{ opacity: clamp(0, (var(--noc, 0) - .5) * 3, 1); }

/* rubovi obiju slika mekano nestaju, pa usred pretapanja nema svijetlog pravokutnika terena */
html.sv-noc .hero [data-art="departure"] svg{ -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 94%, transparent), linear-gradient(180deg, #000 82%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 94%, transparent), linear-gradient(180deg, #000 82%, transparent); mask-composite: intersect; }

/* zora: topli sjaj koji je najjači na pola prijelaza (--zora iz noc.js), pa svitanje ne prolazi kroz sivu maglu */
.sv-zora{ position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: var(--zora, 0); mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 120% 70% at 70% 105%, #ff8a4c, #ff9e6b55 45%, transparent 75%), linear-gradient(180deg, #5b6fb033, #ffb48a66); }