/* sprints — /emprendedores: five words gain weight as a scroll front passes each row
   (the crossing's grammar without the alignment), and each row draws its weeks: one
   hairline segment per week, ending in the mark as the sprint's full stop.
   Base layout (grid, dock column, notes, coda) is styles.css's .words; the reveal of
   notes and coda reuses fx/el-cruce.css under html.fx-cruce. Contact on a reacted row
   (.is-again, one frame) puts its figure and weeks back at the start, so they run again. */

.sprints-intro {
  grid-column: 2;
  margin: 0 0 clamp(32px, 4vw, 56px) calc(max(56px, 8vw) + var(--s-3));
  font-weight: 500;
  font-size: var(--text-size);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 34ch;
  color: var(--fg2-ink);
}

@media (max-width: 719px) { .sprints-intro { margin-left: 0; } }

/* ---------- The weeks ---------- */
.weeks {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 14px;
  margin-top: 6px;
}

@media (min-width: 1600px) { .weeks { grid-column: 2; } }
@media (max-width: 719px) { .weeks { grid-column: 1; } }

.weeks i {
  display: block;
  width: clamp(28px, 3.4vw, 52px);
  height: 1px;
  background: var(--fg2-ink);
  transform-origin: left center;
}

.weeks svg {
  flex: none;
  width: 11px;
  height: 11px;
  fill: var(--white);
  transform: rotate(-10deg);
  margin-left: 2px;
}

.is-accent + .row-note + .weeks svg { fill: var(--blue); }

/* ---------- Motion: the weeks draw as the row reacts ---------- */
html.fx-sprints .weeks i {
  transform: scaleX(0);
  transition: transform var(--t-short) var(--ease-react);
}
html.fx-sprints .weeks svg {
  opacity: 0;
  transform: rotate(-10deg) scale(.6);
  transition: opacity var(--t-micro) var(--ease-react), transform var(--t-short) var(--ease-react);
}
html.fx-sprints .row.is-reacted:not(.is-again) .weeks i { transform: scaleX(1); }
html.fx-sprints .row.is-reacted .weeks i:nth-child(1) { transition-delay: .15s; }
html.fx-sprints .row.is-reacted .weeks i:nth-child(2) { transition-delay: .27s; }
html.fx-sprints .row.is-reacted .weeks i:nth-child(3) { transition-delay: .39s; }
html.fx-sprints .row.is-reacted .weeks i:nth-child(4) { transition-delay: .51s; }
html.fx-sprints .row.is-reacted:not(.is-again) .weeks svg { opacity: 1; transform: rotate(-10deg) scale(1); transition-delay: calc(.15s + var(--n, 2) * .12s); }

/* ---------- Uno a uno (the quiet section) ---------- */
.uno .uno-note {
  margin-top: clamp(32px, 4vw, 48px);
  font-weight: 500;
  font-size: var(--text-size);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 34ch;
  text-wrap: pretty;
}

.uno .silent-note { margin-top: 16px; }

@media print, (prefers-reduced-motion: reduce) {
  html.fx-sprints .weeks i { transform: none; transition: none; }
  html.fx-sprints .weeks svg { opacity: 1; transform: rotate(-10deg); transition: none; }
}

/* ---------- The figures: what each sprint does, in the site's own strokes ---------- */
.fig {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-top: clamp(16px, 2vw, 24px);
  overflow: visible;
  --hair: rgba(255, 255, 255, .42);
  --hair-2: rgba(255, 255, 255, .7);
}
/* Dashed strokes (the route's path, the hours) keep the SVG's own scale: with non-scaling-stroke Chrome
   measures a pathLength dash in screen pixels and a 1-unit dash stops short of the end of the path. */
.fig line:not(.i-tick), .fig circle { vector-effect: non-scaling-stroke; }

/* Choreography of a row once it reacts: the note at once, the weeks from .15 s, the figure
   from .45 s (--fig-delay), after the word has settled. Before that the figure waits dimmed. */
.fig { --fig-delay: .45s; }
html.fx-sprints .fig { transition: opacity var(--t-short) var(--ease-react); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig { opacity: .55; }
.fig line, .fig polyline { stroke: var(--hair); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.fig circle { fill: var(--hair-2); }

/* From 1000px the figure takes a third column, centred on the word; the weeks stay under the note. */
@media (min-width: 1000px) {
  .sprints .row { grid-template-columns: var(--dock-col) 1fr minmax(260px, 400px); column-gap: clamp(24px, 4vw, 72px); }
  .sprints .row-word, .sprints .row-note, .sprints .weeks { grid-column: 2; }
  .sprints .fig { grid-column: 3; grid-row: 1 / span 3; align-self: center; justify-self: end; margin-top: 0; }
}
@media (max-width: 719px) { .fig { grid-column: 1; max-width: 300px; } }

/* 01 Foco: ten dots on the table; a ring closes on the one that matters, which turns blue. The rest step back. */
.fig-foco .f-dot { transform-box: fill-box; transform-origin: center; }
.fig-foco .f-dot.is-one { fill: var(--blue); transform: scale(1.7); }
.fig-foco .f-dot:not(.is-one) { opacity: .4; }
.fig-foco .f-ring { fill: none; stroke: var(--blue); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
html.fx-sprints .fig-foco .f-dot { transition-delay: var(--fig-delay); transition: opacity var(--t-short) var(--ease-react) calc(var(--fig-delay) + .6s), fill var(--t-short) var(--ease-react) calc(var(--fig-delay) + .6s), transform var(--t-short) var(--ease-react) calc(var(--fig-delay) + .6s); }
html.fx-sprints .fig-foco .f-ring { transition-delay: var(--fig-delay); transition: transform var(--t-long) var(--ease-settle), opacity var(--t-short) var(--ease-react); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-foco .f-dot { opacity: 1; fill: var(--hair-2); transform: scale(1); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-foco .f-ring { transform: scale(4); opacity: 0; }

/* 02 Rumbo: from where you are, several ways. One becomes the way and reaches its destination; one is crossed out. */
.fig-rumbo .r-path { transform-box: fill-box; }
.fig-rumbo .r-path.is-way { stroke: var(--blue); stroke-width: 3; }
.fig-rumbo .r-path:not(.is-way) { opacity: .35; }
.fig-rumbo .r-cross { stroke: var(--hair-2); stroke-width: 1.5; }
.fig-rumbo .r-start { fill: var(--white); }
.fig-rumbo .r-end { fill: var(--blue); transform-box: fill-box; transform-origin: center; }
html.fx-sprints .fig-rumbo .r-path { transition-delay: var(--fig-delay); transition: opacity var(--t-short) var(--ease-react) calc(var(--fig-delay) + .3s), stroke var(--t-short) var(--ease-react) calc(var(--fig-delay) + .3s), stroke-width var(--t-short) var(--ease-react) calc(var(--fig-delay) + .3s); }
html.fx-sprints .fig-rumbo .r-cross { transition-delay: var(--fig-delay); transition: opacity var(--t-micro) var(--ease-react) calc(var(--fig-delay) + .9s); }
html.fx-sprints .fig-rumbo .r-end { transition-delay: var(--fig-delay); transition: transform var(--t-short) var(--ease-react) calc(var(--fig-delay) + .75s), opacity var(--t-short) var(--ease-react) calc(var(--fig-delay) + .75s); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-rumbo .r-path { opacity: 1; stroke: var(--hair); stroke-width: 1; }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-rumbo .r-cross { opacity: 0; }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-rumbo .r-end { transform: scale(0); opacity: 0; }

/* 03 Oferta: a paragraph (six lines) that becomes one headline: the lines step back, the headline draws in blue. */
.fig-oferta .o-head { stroke: var(--blue); stroke-width: 6; transform-box: fill-box; transform-origin: left center; }
.fig-oferta .o-line { opacity: .3; }
html.fx-sprints .fig-oferta .o-head { transition-delay: var(--fig-delay); transition: transform var(--t-long) var(--ease-settle) calc(var(--fig-delay) + .3s); }
html.fx-sprints .fig-oferta .o-line { transition: opacity var(--t-short) var(--ease-leave); transition-delay: calc(var(--fig-delay) + var(--i) * .05s); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-oferta .o-head { transform: scaleX(0); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-oferta .o-line { opacity: 1; }

/* 04 Ruta: five changes climbing, each with its owner (the dot) and its date (the tick), lit in order as the path draws. */
.fig-ruta .u-path { stroke: var(--hair-2); stroke-dasharray: 1; stroke-dashoffset: 0; }
.fig-ruta .u-dot { fill: var(--blue); transform-box: fill-box; transform-origin: center; }
.fig-ruta .u-tick { stroke: var(--hair-2); transform-box: fill-box; transform-origin: center top; }
html.fx-sprints .fig-ruta .u-path { transition-delay: var(--fig-delay); transition: stroke-dashoffset var(--t-long) var(--ease-settle); }
html.fx-sprints .fig-ruta .u-dot, html.fx-sprints .fig-ruta .u-tick { transition: opacity var(--t-short) var(--ease-react), transform var(--t-short) var(--ease-react), fill var(--t-short) var(--ease-react); transition-delay: calc(var(--fig-delay) + .15s + var(--i) * .22s); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-ruta .u-path { stroke-dashoffset: 1; }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-ruta .u-dot { fill: var(--hair-2); transform: scale(.5); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-ruta .u-tick { opacity: 0; transform: scaleY(0); }

/* 05 IA: a day as a ring of twenty-four hours; the hours that come back grow outwards in blue. */
.fig-ia .i-tick { stroke-dasharray: 1; stroke-dashoffset: 0; }
.fig-ia .i-tick.is-back { stroke: var(--blue); stroke-width: 3; }
.fig-ia .i-hub { fill: var(--white); }
html.fx-sprints .fig-ia .i-tick { transition-delay: var(--fig-delay); transition: stroke-dashoffset var(--t-base) var(--ease-settle), stroke var(--t-short) var(--ease-react), stroke-width var(--t-short) var(--ease-react); }
html.fx-sprints .fig-ia .i-tick.is-back { transition-delay: calc(var(--fig-delay) + .2s + var(--i) * .04s); }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-ia .i-tick { stroke: var(--hair); stroke-width: 1; }
html.fx-sprints .row:is(:not(.is-reacted), .is-again) .fig-ia .i-tick.is-back { stroke-dashoffset: .6; }

html.fx-sprints .row:not(.is-reacted) .fig *,
html.fx-sprints .row:not(.is-reacted) .weeks i,
html.fx-sprints .row:not(.is-reacted) .weeks svg { transition-delay: 0s; transition-duration: var(--t-micro); }
html.fx-sprints .row.is-again .fig *,
html.fx-sprints .row.is-again .weeks i,
html.fx-sprints .row.is-again .weeks svg { transition: none !important; }

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