/* llegadas: /llegadas (and /en/arrivals), the market side of arriving, in the grammar of /emprendedores.
   Rows, notes, reveal and choreography come from styles.css + fx/sprints.css (html.fx-sprints, .row.is-reacted /
   .is-again). This file adds the language link and the four figures. Base rules = final state (no JS, reduced
   motion); the start state hangs from html.fx-sprints on a row that has not reacted yet. */

.nav-side { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 32px); }
.nav-lang { font-weight: 500; }
.words-coda a { color: var(--white); text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* pathLength dashes keep the SVG's own scale (see fx/sprints.css on non-scaling-stroke). */
.fig.fig-mirar .m-line, .fig.fig-adaptar .a-fit, .fig.fig-arrancar .k-line { vector-effect: none; }

/* 01 Mirar: from where you stand, sight lines to the market; one point is the one that matters. */
.fig-mirar .m-eye { fill: var(--white); }
.fig-mirar .m-line { stroke: var(--hair); stroke-dasharray: 1; stroke-dashoffset: 0; }
.fig-mirar .m-line.is-key { stroke: var(--blue); stroke-width: 2.5; }
.fig-mirar .m-pt { fill: var(--hair-2); }
.fig-mirar .m-pt.is-key { fill: var(--blue); transform-box: fill-box; transform-origin: center; transform: scale(1.6); }
html.fx-sprints .fig-mirar .m-line { transition: stroke-dashoffset var(--t-base) var(--ease-settle); transition-delay: calc(var(--fig-delay) + var(--i) * .08s); }
html.fx-sprints .fig-mirar .m-pt.is-key { transition: transform var(--t-short) var(--ease-react) calc(var(--fig-delay) + .9s); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-mirar .m-line { stroke-dashoffset: 1; }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-mirar .m-pt.is-key { transform: scale(1); }

/* 02 Adaptar: a straight line steps back; the blue one follows the market's shape. */
.fig-adaptar .a-flat { stroke: var(--hair); opacity: .5; }
.fig-adaptar .a-curve { stroke: var(--hair-2); stroke-dasharray: 2 6; fill: none; }
.fig-adaptar .a-fit { stroke: var(--blue); stroke-width: 3; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.fx-sprints .fig-adaptar .a-flat { transition: opacity var(--t-short) var(--ease-leave) calc(var(--fig-delay) + .2s); }
html.fx-sprints .fig-adaptar .a-fit { transition: stroke-dashoffset var(--t-long) var(--ease-settle) calc(var(--fig-delay) + .3s); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-adaptar .a-flat { opacity: 1; }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-adaptar .a-fit { stroke-dashoffset: 1; }

/* 03 Competir: who is already here, side by side; the blue one finds its gap. */
.fig-competir .c-base { stroke: var(--hair); }
.fig-competir .c-bar { stroke: var(--hair-2); stroke-width: 2; stroke-linecap: butt; }
.fig-competir .c-you { stroke: var(--blue); stroke-width: 4; stroke-linecap: butt; transform-box: fill-box; transform-origin: center bottom; }
html.fx-sprints .fig-competir .c-bar { transition: opacity var(--t-short) var(--ease-react); transition-delay: calc(var(--fig-delay) + var(--i) * .06s); }
html.fx-sprints .fig-competir .c-you { transition: transform var(--t-short) var(--ease-react) calc(var(--fig-delay) + .7s); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-competir .c-bar { opacity: .35; }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-competir .c-you { transform: scaleY(0); }

/* 04 Arrancar: the right people, one line each, from the first day. */
.fig-arrancar .k-line { stroke: var(--hair-2); stroke-dasharray: 1; stroke-dashoffset: 0; }
.fig-arrancar .k-you { fill: var(--blue); }
.fig-arrancar .k-p { fill: var(--white); transform-box: fill-box; transform-origin: center; }
html.fx-sprints .fig-arrancar .k-line { transition: stroke-dashoffset var(--t-short) var(--ease-settle); transition-delay: calc(var(--fig-delay) + var(--i) * .14s); }
html.fx-sprints .fig-arrancar .k-p { transition: transform var(--t-short) var(--ease-react), fill var(--t-short) var(--ease-react); transition-delay: calc(var(--fig-delay) + .3s + var(--i) * .14s); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-arrancar .k-line { stroke-dashoffset: 1; }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-arrancar .k-p { transform: scale(.4); fill: var(--hair); }

@media print, (prefers-reduced-motion: reduce) {
  html.fx-sprints .llegadas .fig * { transition: none !important; }
}