/* ==========================================================================
   USAIndiaCFO — /indiacfo/ client stories: the second story, calm (Compare india-story2 b)
   site/india_story2.py · assets/js/stories-journey-calm.js
   Additive to assets/css/stories-journey.css (same kick rule, title and text
   styles). One text column: heading, story, two small bars from the story's
   own figures (2 years vs 4–5 years) that grow once in view, at the same
   speed, so the shorter one simply arrives first. Transform / opacity only.
   ========================================================================== */
html:not([data-v-india-story2="b"]) .sjc { display: none; }
html[data-v-india-story2="b"] .sj > article.sj__story:nth-of-type(2) { display: none; }

.sjc { margin-top: clamp(80px, 10vw, 150px); }
.sjc__col { max-width: 700px; margin: 0 auto; }
.sjc__title { max-width: 22ch; }
.sjc__text { max-width: 62ch; font-size: 16.5px; }

.sjc__bars { margin: 34px 0 0; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 20px; }
.sjc__row, .sjc__axis { display: grid; grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr) 6.2em; align-items: center; column-gap: 20px; }
.sjc__lab { font: 500 10.5px/1.45 Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }
.sjc__track { position: relative; height: 8px; border-radius: 99px; background: rgba(var(--ink-rgb), .055); }
.sjc__bar { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: 99px; transform-origin: 0 50%;
  transition: transform var(--t, 1s) cubic-bezier(.33, .1, .25, 1) var(--dl, 0s); }
.sjc__bar--lead { background: var(--bronze); --t: .8s; --dl: .1s; }
.sjc__bar--ink { background: var(--sand-834); --t: 1.6s; --dl: .1s; }
.sjc__bar--range { background: repeating-linear-gradient(135deg, var(--sand-834) 0 2px, transparent 2px 5px); --t: .4s; --dl: 1.7s; border-radius: 0 99px 99px 0; }
.sjc__row:has(.sjc__bar--range) .sjc__bar--ink { border-radius: 99px 0 0 99px; }
.sjc__val { font: 300 22px/1 Newsreader, Georgia, serif; letter-spacing: -.01em; color: var(--ink); text-align: right; white-space: nowrap;
  font-variant-numeric: lining-nums; transition: opacity .6s var(--ease) var(--dv, 0s); }
.sjc__row[data-k="0"] .sjc__val { color: var(--bronze-deep); --dv: .8s; }
.sjc__row[data-k="1"] .sjc__val { color: var(--ink-muted); --dv: 1.9s; }
.sjc__axis { margin-top: -6px; }
.sjc__axis-in { grid-column: 2; position: relative; height: 14px; border-top: 1px solid var(--line); }
.sjc__axis-in span { position: absolute; top: 6px; left: var(--x); translate: -50% 0; font: 500 9.5px/1 Inter, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.sjc__axis-in span:last-child { translate: -100% 0; }
.sjc__axis-in span:first-child { translate: 0 0; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .sjc__bars:not([data-on]) .sjc__bar { transform: scaleX(0); }
  .sjc__bars:not([data-on]) .sjc__val { opacity: 0; }
}
@media (max-width: 600px) {
  .sjc__row, .sjc__axis { grid-template-columns: minmax(0, 1fr) 5.4em; row-gap: 9px; column-gap: 14px; }
  .sjc__lab { grid-column: 1 / -1; }
  .sjc__axis-in { grid-column: 1; }
  .sjc__val { font-size: 20px; }
  .sjc__text { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sjc__bar, .sjc__val { transition: none; }
}
@media (max-width: 600px) {
  .sjc__axis-in span:nth-child(2), .sjc__axis-in span:nth-child(4) { display: none; }
}