/* Margin Notes — N°01 motion stylesheet
 * ---------------------------------------------------------------------------
 * Three motion patterns for "Thinking in the margins":
 *   1. .rooms — five-stage timeline showing uncertainty volumes from
 *               COMPETITOR (2015) to MODEL (2026), with an arc rising
 *               through the bars and the |mn logo mark landing at the
 *               terminus. The marketer's career re-framed as a rising
 *               curve they hadn't been looking at.
 *   2. .rewrite-card — a single scratched line: "Learning is not the
 *                      right word." The .extend figure that follows it
 *                      answers what the right word is.
 *   3. .extend — a vermilion reach growing along an ink axis through
 *                four dashed capability barriers (AN APP / RESEARCH /
 *                1 AM ITERATION / A TOOL). Caveat "extending." writes
 *                itself at the tip.
 *
 * Tokens come from /design/tokens.css via the cascade. The original CSS
 * used --accent and --accent-ink which already point at vermilion in v9.1
 * (the article was authored against cadmium #FFB000 but kept the same
 * token names, so dropping the local :root makes the cascade resolve to
 * v9.1's vermilion automatically — same pattern as N°04's port).
 */

/* =========================================================
   ROOMS — the marketer's uncertainty, written as a running formula.
   ========================================================= */

.rooms {
  margin: 56px -120px 56px;
  position: relative;
}
.rooms__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  font-family: var(--font-mono);
}
.rooms__cap {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--mute-1);
  text-align: center;
  margin-top: 18px;
  letter-spacing: 0.005em;
}

/* Baseline — extends rightward with each stage. */
.rm-wall {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 880);
  stroke-dashoffset: var(--len, 880);
  opacity: 0;
  transition: stroke-dashoffset 900ms var(--ease) 60ms,
              opacity 600ms var(--ease) 40ms;
}
.rooms.stage-1 .rm-wall { opacity: 1; stroke-dashoffset: calc(var(--len, 980) * 0.86); }
.rooms.stage-2 .rm-wall { stroke-dashoffset: calc(var(--len, 980) * 0.62); }
.rooms.stage-3 .rm-wall { stroke-dashoffset: calc(var(--len, 980) * 0.14); }
.rooms.stage-4 .rm-wall { stroke-dashoffset: 0; }
.rooms.stage-5 .rm-wall { stroke-dashoffset: 0; }

/* MARKETER lane tag (no DOM element in current layout, kept for safety) */
.rm-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  fill: var(--mute-1);
  text-anchor: start;
  opacity: 0;
  transition: opacity 500ms var(--ease) 180ms;
}
.rooms.stage-1 .rm-tag { opacity: 1; }

/* Year axis — extends in sync with the baseline. */
.rm-year-axis {
  fill: none;
  stroke: var(--mute-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 880);
  stroke-dashoffset: var(--len, 880);
  transition: stroke-dashoffset 900ms var(--ease) 120ms;
}
.rooms.stage-1 .rm-year-axis { stroke-dashoffset: calc(var(--len, 980) * 0.86); }
.rooms.stage-2 .rm-year-axis { stroke-dashoffset: calc(var(--len, 980) * 0.62); }
.rooms.stage-3 .rm-year-axis { stroke-dashoffset: calc(var(--len, 980) * 0.14); }
.rooms.stage-4 .rm-year-axis { stroke-dashoffset: 0; }
.rooms.stage-5 .rm-year-axis { stroke-dashoffset: 0; }

/* Year markers (data-year). */
.rm-year-mark { opacity: 0; transition: opacity 500ms var(--ease) 200ms; }
.rm-year-tick {
  fill: none;
  stroke: var(--mute-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.rm-year-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  fill: var(--mute-1);
  text-anchor: middle;
}
.rooms.stage-1 .rm-year-mark[data-year="2015"] { opacity: 1; }
.rooms.stage-2 .rm-year-mark[data-year="2018"] { opacity: 1; }
.rooms.stage-3 .rm-year-mark[data-year="2024"] { opacity: 1; }
.rooms.stage-4 .rm-year-mark[data-year="2026"] { opacity: 1; }

/* Event bars (kept .rm-arrow naming for JS compatibility). */
.rm-arrow { opacity: 0; transition: opacity 600ms var(--ease); }
.rm-arrow .rm-arrow-stem {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 800ms var(--ease),
              stroke 240ms var(--ease);
}
.rm-arrow .rm-arrow-head {
  fill: var(--accent);
  stroke: none;
  opacity: 0;
  transition: opacity 300ms var(--ease) 600ms;
}
.rm-arrow.is-on { opacity: 1; }
.rm-arrow.is-on .rm-arrow-stem { stroke-dashoffset: 0; }
.rm-arrow.is-on .rm-arrow-head { opacity: 1; }

.rm-arrow-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  fill: var(--mute-1);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 400ms var(--ease) 700ms,
              fill 240ms var(--ease);
}
.rm-arrow.is-on .rm-arrow-tag { opacity: 1; fill: var(--prose); }

/* Plus operators between bars — vermilion-ink */
.rm-plus {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  fill: var(--accent-ink);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 500ms var(--ease) 200ms;
}
.rooms.stage-3 .rm-plus[data-stage="3"] { opacity: 1; }
.rooms.stage-4 .rm-plus[data-stage="4"] { opacity: 1; }

/* The uncertainty arc — vermilion curve through the bar tips */
.rm-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 900);
  stroke-dashoffset: var(--len, 900);
  opacity: 0;
  transition: stroke-dashoffset 1100ms var(--ease) 250ms,
              opacity 400ms var(--ease) 250ms;
}
.rooms.stage-2 .rm-arc { opacity: 1; stroke-dashoffset: calc(var(--len, 900) * 0.94); }
.rooms.stage-3 .rm-arc { stroke-dashoffset: calc(var(--len, 900) * 0.66); }
.rooms.stage-4 .rm-arc { stroke-dashoffset: 0; }
.rooms.stage-5 .rm-arc { stroke-dashoffset: 0; }

/* m,n signature at the arc terminus — Sacramento, vermilion-ink */
.rm-signature {
  /* Text-specific rules removed — element is now a <g> containing the
     |mn logo mark. Keep only the shared fade-in + slide-up transition. */
  opacity: 0;
  transform: translateY(6px);
  transform-box: fill-box;
  transition: opacity 800ms var(--ease) 1000ms,
              transform 800ms var(--ease) 1000ms;
}
.rooms.stage-5 .rm-signature {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   SCRATCH-REWRITE (scoped variant for this article)
   ========================================================= */

.rewrite-card {
  margin: 64px 0 24px;
  padding: 0;
  text-align: center;
}
.rewrite-card__line {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 4px 16px;
}
.rewrite-card__line svg.rewrite-stroke {
  position: absolute;
  left: -2%;
  top: 38%;
  width: 104%;
  height: 32px;
  overflow: visible;
  pointer-events: none;
}
.rewrite-card__line svg.rewrite-stroke path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset 600ms var(--ease);
}
.rewrite-card.is-scratched .rewrite-card__line svg.rewrite-stroke path { stroke-dashoffset: 0; }
.rewrite-card.is-scratched .rewrite-card__line { color: var(--mute-2); }

/* =========================================================
   EXTEND — vermilion reach growing along an ink axis through
   four dashed capability barriers.
   ========================================================= */

.extend {
  margin: 8px -100px 64px;
  position: relative;
}
.extend__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  font-family: var(--font-mono);
}
.extend__cap {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--mute-1);
  text-align: center;
  margin-top: 14px;
}

/* Origin marker — vermilion-ink filled dot. */
.ex-origin {
  fill: var(--accent-ink);
  stroke: none;
  opacity: 0;
  transition: opacity 500ms var(--ease) 40ms;
}
.extend.stage-1 .ex-origin { opacity: 1; }

.ex-origin-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  fill: var(--mute-1);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 500ms var(--ease) 100ms;
}
.extend.stage-1 .ex-origin-tag { opacity: 1; }

.ex-axis {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.extend.stage-1 .ex-axis { opacity: 1; }

/* Vertical dashed barriers */
.ex-barrier {
  fill: none;
  stroke: var(--mute-3);
  stroke-width: 1.1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 500ms var(--ease) 200ms,
              stroke 360ms var(--ease),
              stroke-width 360ms var(--ease);
}
.extend.stage-1 .ex-barrier { opacity: 1; }
.ex-barrier.is-passed {
  stroke: var(--accent-ink);
  stroke-width: 1.3;
  stroke-dasharray: 4 3;
}

.ex-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  fill: var(--mute-1);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 500ms var(--ease) 240ms,
              fill 360ms var(--ease);
}
.extend.stage-1 .ex-label { opacity: 1; }
.ex-label.is-passed { fill: var(--accent-ink); }

/* Hand-drawn check tick — vermilion-ink */
.ex-tick {
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 360ms var(--ease) 80ms;
}
.ex-tick.is-on { opacity: 1; }

/* The vermilion reach — grows over the axis in stages */
.ex-reach {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1100ms var(--ease);
}
.extend.stage-2 .ex-reach { stroke-dashoffset: calc(var(--len, 600) * 0.76); }
.extend.stage-3 .ex-reach { stroke-dashoffset: calc(var(--len, 600) * 0.46); }
.extend.stage-4 .ex-reach { stroke-dashoffset: calc(var(--len, 600) * 0.20); }
.extend.stage-5 .ex-reach { stroke-dashoffset: 0; }

/* Caveat caption at the tip */
.ex-caption {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 44px;
  fill: var(--accent-ink);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(6px);
  transform-box: fill-box;
  transition: opacity 700ms var(--ease) 400ms,
              transform 700ms var(--ease) 400ms;
}
.extend.stage-5 .ex-caption {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Mobile (≤900px)
   ========================================================= */
@media (max-width: 900px) {
  .rooms { margin: 40px 0; }
  .rm-arrow-tag { font-size: 8px; }
  .rm-tag { font-size: 9px; }
  .rm-year-text { font-size: 8.5px; }
  .rewrite-card__line { font-size: 24px; }
  .extend { margin: 8px 0 40px; }
  .ex-label { font-size: 8.5px; }
  .ex-caption { font-size: 22px; }
}

/* Reduced motion — show the fully-resolved state */
@media (prefers-reduced-motion: reduce) {
  .rooms .rm-wall,
  .rooms .rm-year-axis,
  .rooms .rm-year-mark,
  .rooms .rm-arrow,
  .rooms .rm-arrow .rm-arrow-stem,
  .rooms .rm-arrow .rm-arrow-head,
  .rooms .rm-arrow-tag,
  .rooms .rm-plus,
  .rooms .rm-arc,
  .rooms .rm-signature {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .rewrite-card .rewrite-card__line svg.rewrite-stroke path {
    stroke-dashoffset: 0 !important;
  }
  .extend .ex-origin,
  .extend .ex-origin-tag,
  .extend .ex-axis,
  .extend .ex-barrier,
  .extend .ex-label,
  .extend .ex-tick,
  .extend .ex-reach,
  .extend .ex-caption {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}