/* "Scara netului" (includes/stories/scara-netului.php): the ladder from net to gross, and its foot
   under a magnifier ([csn_pretul_treptei] has its own pretul-treptei.css).
   The server's markup is the final state; with script the kit (csn-story.js) shows each step's. */

/* ---- The whole ladder ---- */
.sn .sn-rail { stroke: var(--ink); stroke-width: 3; stroke-linecap: butt; }
.sn .sn-rail2 { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Notes sit on the paper, never on a line: a halo of the paper's colour round each letter. */
.sn .st-note, .sn .st-small, .sn .sn-endt { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.sn .sn-grid { stroke: var(--line); }
.sn .sn-net { fill: var(--acc); }
.sn .sn-tax { fill: var(--acc-pale); stroke: var(--acc); stroke-width: 1; }
.sn .sn-rung { transform-box: fill-box; transform-origin: 0 50%; }
.sn .sn-stub { fill: var(--ink-3); fill-opacity: .45; }
.sn .sn-crack { fill: var(--paper); }
.sn .sn-endt { font: 500 12.5px var(--mono); fill: var(--ink-2); }
.sn .sn-end--key .sn-endt { font-weight: 700; fill: var(--ink); }
.sn .sn-big { font-size: 36px; }
.sn .sn-note { font-size: 19px; fill: var(--ink-3); }
.sn .sn-climber { transform: translateY(var(--c2)); }
.sn .sn-climber circle { fill: var(--paper); stroke: var(--pencil); stroke-width: 3; }
.story--scara[data-state="0"] .sn-climber { transform: translateY(var(--c0)); }
.story--scara[data-state="1"] .sn-climber { transform: translateY(var(--c1)); }

/* ---- The foot, under the magnifier ---- */
.sn--foot .sn-rung-l { stroke: var(--acc); stroke-width: 2; stroke-linecap: round; stroke-opacity: .7; }
.sn--foot .sn-rung-l--broken { stroke: var(--ink-3); stroke-opacity: .5; stroke-width: 3; stroke-linecap: butt; }
.sn--foot .sn-dot { fill: var(--acc); }
.sn--foot .sn-dot4 { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.sn--foot .sn-rail0 { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.sn--foot .sn-rail4 { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 5 4; stroke-linejoin: round; }
.sn--foot .sn-rail--below { stroke-dasharray: 1 5; stroke-linecap: round; stroke-width: 2.2; }
.sn--foot .sn-minhl { stroke: var(--hl); stroke-width: 12; }
.sn--foot .sn-mindot { fill: var(--paper); stroke: var(--acc); stroke-width: 3; }
.sn--foot .sn-mark { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.sn--foot .sn-mark-t { font-size: 13px; fill: var(--ink-3); }
.sn--foot .sn-zig { fill: none; stroke: var(--ink-3); stroke-width: 1.3; }
.sn--foot .sn-key0 { stroke: var(--ink); stroke-width: 2.5; }
.sn--foot .sn-key4 { stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 5 4; }
.st--s.sn .sn-endt { font-size: 11.5px; }
.st--s.sn .sn-ntick { font-size: 12.5px; }
.st--s.sn .sn-big { font-size: 26px; }
.st--s.sn .sn-note { font-size: 16px; }
.st--s.sn--foot .sn-minhl { stroke-width: 9; }
.st--s.sn--foot .sn-mark-t { font-size: 12px; }

/* ---- The states ---- */
/* A rung not climbed yet waits as a stub on the rail, and grows its bar when the reader reaches it. */
.scrolly.is-live .story--scara .sn-rung.is-before { opacity: 1; transform: scaleX(.035); }
.scrolly.is-live .story--scara .sn-rung { transition: transform .8s cubic-bezier(.2, .75, .25, 1) calc(var(--i, 0) * 55ms), opacity .3s ease; }
.scrolly.is-live .story--scara .sn-rail2.is-before { opacity: 0; stroke-dashoffset: 1; }
.scrolly.is-live .story--scara .sn-rail2 { transition: stroke-dashoffset 1.3s ease .45s, opacity .2s linear .45s; }
.scrolly.is-live .story--scara .sn-climber { transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
/* The camera goes down to the foot: the ladder grows towards its foot as it fades, the magnifier settles in. */
.scrolly.is-live .story--scara .sn-panel { transition: opacity .55s ease, transform .8s cubic-bezier(.3, .7, .2, 1); }
.scrolly.is-live .story--scara .sn-panel--ladder { transform-origin: 14% 92%; }
.scrolly.is-live .story--scara .sn-panel--ladder.is-after { transform: scale(2.4); }
.scrolly.is-live .story--scara .sn-panel--foot.is-before { transform: scale(.72); transform-origin: 14% 92%; }
.scrolly.is-live .story--scara .story__stage { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.scrolly.is-live .story--scara .sn-panel--ladder.is-after, .scrolly.is-live .story--scara .sn-panel--foot.is-before { transform: none; }
}

@media (prefers-reduced-motion: reduce) { .story--scara * { transition-delay: 0s !important; } }