/* THE JOURNEY — the chrome shared by the three stations.
   ‏kidma.ai (הרובוט)  ->  journey/points (זיקית מנקודות)  ->  journey/real (זיקית אמיתית)

   Each station is its own page with its own renderer and its own assets, and
   that is deliberate: they are three separate WebGL2 apps, each wanting a
   full-screen canvas and between 2 and 6 MB of geometry. Putting them in one
   document would load all of it up front to show one of them.

   What makes it read as ONE thing instead of three links is this file: the
   same rail, the same button, and a veil that hands the screen over in the
   colour of wherever you are going. */

.jv-veil{position:fixed;inset:0;z-index:900;pointer-events:none;
  background:var(--jv-veil,#e8e8ea);opacity:0;
  transition:opacity .40s cubic-bezier(.4,0,.2,1)}
/* leaving: the veil is the DESTINATION's background, so the fade already puts
   the next page's colour on screen before the navigation happens */
.jv-veil.is-out{opacity:1}
/* arriving: it starts as THIS page's own background and lifts. Same colour as
   the page behind it, so a browser that never runs the script just shows the
   page - there is nothing to get stuck on. */
.jv-veil.is-in{opacity:1;transition:none}
.jv-veil.is-lift{opacity:0;transition:opacity .55s cubic-bezier(.4,0,.2,1)}

/* ---- the two chameleon stations ----------------------------------------
   ⚠ THE JOURNEY CHROME COSTS NO VERTICAL SPACE, AND IT HAS TO BE THAT WAY.
   Both stations compose the figure into one half of the window and the words
   into the other, and that copy column already fills the height it has: at
   1280x720 it measured 514px between a wordmark that ends at y=89 and a panel
   hint that starts at y=665. A "you are here" rail above the heading and a
   button below it added ~100px, and the measurement showed exactly what that
   costs - the rail landed under the wordmark's descender and the button
   under the hint. So:

   * where you are is carried by the EYEBROW, which was already there;
   * the button rides in the stats row, pinned to its far end;
   * the panel hint, which is a development affordance, is hidden here.

   Getting this wrong is not subtle and it is not visible on a big monitor,
   which is why the numbers above are written down. */
body.jv-station .hero{
  /* Never let the copy ride up into the fixed wordmark, at any height. It is
     DERIVED from where the wordmark actually is - the same expression the
     .brand uses for its top, plus the mark's own height (150px wide on a
     469x221 viewBox is 71 tall) and a 14px gap. Typing a constant here is
     how it silently stops clearing the day the mark is resized. */
  padding-block-start:calc(clamp(40px,7.5vh,88px) + 85px);
  /* scales with HEIGHT, not width: the station's original 5vw bottom padding
     is 64px on any wide window, and on a 700px-tall one that alone pushed the
     hero 55px past the viewport with every word already visible */
  padding-block-end:clamp(20px,3vh,44px);
}
body.jv-station .hint{display:none}
body.jv-station .facts{align-items:center;row-gap:1rem}
/* The button sits below the stats and is the largest interactive thing on the
   station - the point of a journey is that you keep going. Dropping the
   "1 source image" stat and the sentence that repeated it is what paid for
   the room: measured, the copy column lost 46px and the button costs 74.

   ⚠ FILLED INK, NOT FILLED LIME. The dark station makes this button solid
   brand lime because that is its primary action; here the same move would
   be unreadable - these pages measured the brand lime at 1.07:1 against
   their own #e8e8ea, which is why even the wordmark runs dark on them. Ink
   is the same emphasis with the contrast the background allows. */
body.jv-station .jv-go--lead{font-size:clamp(15px,1.25vw,17.5px);
  padding:.82rem 1.5rem;margin-block-start:clamp(20px,3vh,30px);font-weight:700;
  --jv-ink:#f4f5f2;--jv-line:#17181c;
  --jv-go-bg:#17181c;--jv-go-bg-h:#2b2d33}
body.jv-station .jv-go--lead:hover{--jv-line:#2b2d33}
body.jv-station .jv-go--lead .jv-chev{opacity:.62}

/* ---- the button that moves you on --------------------------------------- */
.jv-go{display:inline-flex;align-items:center;gap:10px;pointer-events:auto;
  margin-block-start:1.7rem;padding:.72rem 1.15rem;border-radius:999px;
  font:inherit;font-size:.92rem;font-weight:600;text-decoration:none;
  color:var(--jv-ink,#17181c);border:1px solid var(--jv-line,#c3c3ca);
  background:var(--jv-go-bg,rgba(255,255,255,.55));
  transition:border-color .2s,background .2s,transform .2s}
.jv-go:hover{border-color:var(--jv-ink,#17181c);
  background:var(--jv-go-bg-h,rgba(255,255,255,.9))}
.jv-go:active{transform:translateY(1px)}
.jv-go:focus-visible{outline:2px solid var(--jv-acc,#C9F03C);outline-offset:3px}
/* ⚠ The chevron IS directional - it means "onward" - so it has to point the
   way the page reads: left in Hebrew, right in Latin. The two borders only
   draw a corner and are not themselves directional, so they stay physical and
   it is the ROTATION that flips. Doing it the other way round, with
   border-inline-*, needs the side AND the angle to change together and gets
   silently wrong the first time someone tries it in one line. */
.jv-go .jv-chev{width:7px;height:7px;flex:0 0 auto;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(135deg);opacity:.75;      /* RTL: points left */
  transition:translate .2s}
.jv-go:hover .jv-chev{translate:-3px 0;opacity:1}
[dir="ltr"] .jv-go .jv-chev{transform:rotate(-45deg)}   /* LTR: points right */
[dir="ltr"] .jv-go:hover .jv-chev{translate:3px 0}
.jv-go .jv-sub{font-weight:400;opacity:.62;font-size:.84em}

/* ---- the pull: a reason to look at the button ---------------------------
   The entry station is a page that says "we are full". Nothing on it moves
   except the figure, so the one thing you are meant to click had no way of
   asking. This is the smallest gesture that does: the chevron leans toward
   the reading edge every few seconds and comes back.

   ⚠ It animates TRANSLATE, not margin or position - a compositor property,
   so it never lays the page out again. And it stops the moment you hover,
   because at that point the button has your attention and a moving target
   is just harder to hit. */
@keyframes jv-pull{
  0%,72%,100%{translate:0 0}
  80%{translate:-4px 0}
  88%{translate:-1px 0}
}
[dir="ltr"] .jv-pull .jv-chev{animation-name:jv-pull-ltr}
@keyframes jv-pull-ltr{
  0%,72%,100%{translate:0 0}
  80%{translate:4px 0}
  88%{translate:1px 0}
}
.jv-pull .jv-chev{animation:jv-pull 4.2s ease-in-out 1.6s infinite}
.jv-pull:hover .jv-chev,.jv-pull:focus-visible .jv-chev{animation:none}
@media (prefers-reduced-motion:reduce){.jv-pull .jv-chev{animation:none}}

/* ---- phones: the figure owns the top, the words own the bottom -----------
   ⚠ THE STATIONS HAD THIS UPSIDE DOWN AND IT PUT THE COPY ON THE ANIMAL'S
   FACE. Their own mobile rule pinned the copy to the TOP over a downward
   scrim, so at 375px the head sat at 62% of the viewport - directly behind
   the paragraph - and all you saw of the chameleon was a body below the
   text. The robot station has always done the opposite (.fix{align-content:
   end}), and that is the one everybody says looks right.

   Two halves to the fix and BOTH are needed: this flips the layout, and the
   renderers drop their mobile camY so the head rises into the space it just
   got. Doing only this leaves the head still low, only behind a scrim
   instead of a paragraph. */
@media (max-width:860px){
  body.jv-station .hero{
    align-items:flex-end;
    padding-block-start:0;
    padding-block-end:clamp(16px,2.6vh,28px);
  }
  body.jv-station .copy{
    /* ⚠ THE FADE IS MEASURED IN THE PADDING, NOT IN PERCENT. The copy box is
       whatever height its own text needs - it differs between the two
       stations and with every font size - so a percentage stop lands
       somewhere different on each of them. Twice now the eyebrow ended up on
       the animal's chin in the half-transparent part. Tying both to one
       length makes it structural: solid from the first line of text down,
       and every pixel of fading happens above it. */
    --jv-fade:4.4rem;
    max-width:none;
    padding-block:var(--jv-fade) 0;
    background:linear-gradient(to top,
      var(--bg) calc(100% - var(--jv-fade)),
      rgba(232,232,234,.42) calc(100% - var(--jv-fade)*.42),
      rgba(232,232,234,0) 100%);
  }
  body.jv-station .facts{border-top-color:rgba(210,210,215,.7)}
  body.jv-station .jv-go--lead{width:100%;justify-content:center}
  /* Every line the copy loses is a line of the animal's face you get back.
     The block runs about 58% of a 812px phone; at the desktop type scale the
     eyes sat right on the scrim edge. */
  body.jv-station h1{font-size:clamp(1.72rem,7.6vw,2.1rem);margin-block-end:.85rem}
  body.jv-station .lede{line-height:1.55;margin-block-end:1.25rem}
}

/* ⚠ "Move the mouse" is wrong on a phone, and it was the last line of the
   paragraph on both stations. Swapped on POINTER TYPE rather than width - a
   narrow desktop window still has a mouse, and a large tablet does not. */
.jv-touch{display:none}
@media (pointer:coarse){
  .jv-mouse{display:none}
  .jv-touch{display:inline}
}

@media (prefers-reduced-motion:reduce){
  .jv-veil,.jv-veil.is-lift{transition:none}
  .jv-go,.jv-go .jv-chev{transition:none}
  .jv-go:active{transform:none}
}