/* Adapted from UI Vault sections/Content Workspace/model-003 ("publishing
   flow"), rebuilt for order: one text slot on the left that each phase
   replaces, the illustration on the right, and the rail along the bottom.
   The model stacked intro copy, context copy, rail, geometry and assets on
   the same absolute layer; here every phase has its own place.

   Motion comes from the UI Vault too: GSAP + ScrollTrigger (the engine of
   model-003 and motion/effects/scroll) scrubbed by scroll, and the semantic
   icon motions of assets/icons (stack → lift, calendar-check → pop,
   paper-plane → fly), Phosphor icons via Iconify as in the rest of the
   landing.

   Progressive enhancement: the base styles below are a calm vertical
   timeline (phones, tablets, reduced motion, or no GSAP). flow.js adds
   .is-animated at ≥1024px, and only then the sticky stage exists. */

.mira-flow {
  --flow-ease: cubic-bezier(.22, 1, .36, 1);
  /* The rail uses TikTok's cyan → pink instead of --ui-progress (on
     request, 2026-09-23): the flow ends publishing to TikTok. */
  /* Blended in oklch through blue and violet: in sRGB the middle goes grey. */
  --flow-progress: linear-gradient(90deg, var(--brand-tiktok-cyan) 0%, var(--brand-tiktok-pink) 100%);
  --flow-progress: linear-gradient(90deg in oklch increasing hue, var(--brand-tiktok-cyan) 0%, var(--brand-tiktok-pink) 100%);
  --flow-track: color-mix(in srgb, var(--brand-tiktok-pink) 12%, var(--ui-gray-100));

  position: relative;
  padding: 110px 0 96px;
  overflow-x: clip;
  background: linear-gradient(180deg, var(--ui-gray-100) 0%, var(--ui-gray-50) 100%);
  color: var(--ui-text);
}

.mira-flow__container {
  width: min(720px, calc(100% - 48px));
  margin: 0 auto;
}

/* =========================================================
   HEADER (no divider under it, on request)
========================================================= */

.mira-flow__header h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(42px, 9vw, 64px);
  line-height: .96;
  letter-spacing: -.07em;
}

.mira-flow__header h2 span {
  display: block;
  color: var(--ui-muted);
}

.mira-flow__header p {
  max-width: 460px;
  margin: 22px 0 0;
  color: var(--ui-muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* =========================================================
   STATIC TIMELINE (base)
========================================================= */

.mira-flow__stage {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
}

.mira-flow__copy { display: contents; }

.mira-flow__state {
  position: relative;
  padding: 0 0 40px 64px;
}

/* the thread that links the phases */
.mira-flow__state::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 4px;
  left: 21px;
  width: 2px;
  border-radius: 999px;
  background: var(--ui-soft);
}

.mira-flow__state:last-child::before { display: none; }

.mira-flow__state--intro { order: 1; }
.mira-flow__canvas { order: 2; }
.mira-flow__state--content { order: 3; }
.mira-flow__state--schedule { order: 4; }
.mira-flow__state--accounts { order: 5; }
.mira-flow__state--publish { order: 6; }
.mira-flow__state--final { order: 7; padding-bottom: 0; }
.mira-flow__state--final::before { display: none; }

.mira-flow__state-label {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  color: var(--ui-muted);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mira-flow__state-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--ui-soft);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font-size: 20px;
  letter-spacing: 0;
}

.mira-flow__state--final .mira-flow__state-icon {
  border-color: var(--ui-success);
  background: var(--ui-success);
  color: var(--ui-on-accent);
}

.mira-flow__state h3 {
  max-width: 460px;
  margin: 0;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1;
  letter-spacing: -.06em;
}

.mira-flow__state h3 span { color: var(--ui-muted); }

.mira-flow__state p {
  max-width: 420px;
  margin: 14px 0 0;
  color: var(--ui-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Static canvas: only the four pieces, as a tidy 2×2 under the intro. */
.mira-flow__canvas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 48px 64px;
}

.mira-flow__board,
.mira-flow__plan,
.mira-flow__final,
.mira-flow__rail { display: none; }

/* =========================================================
   ASSETS (shared)
========================================================= */

.mira-flow__asset {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(var(--ui-shadow-rgb), .1);
}

.mira-flow__asset--video,
.mira-flow__asset--image {
  min-height: 190px;
  background: var(--ui-gray-100);
}

.mira-flow__asset img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mira-flow__asset-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ui-shadow-rgb), .02) 35%, rgba(var(--ui-shadow-rgb), .66));
}

.mira-flow__asset-meta {
  position: absolute;
  right: 16px;
  bottom: 14px;
  left: 16px;
  color: var(--ui-on-photo);
}

.mira-flow__asset-meta > span,
.mira-flow__asset-type {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mira-flow__asset-meta > span { opacity: .8; }

.mira-flow__asset-meta strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.mira-flow__asset-play {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--ui-on-photo-rgb), .92);
  color: var(--ui-on-photo-glyph);
  font-size: 18px;
}

.mira-flow__asset--scene {
  padding: 20px;
  background: var(--ui-surface);
}

.mira-flow__asset--scene .mira-flow__asset-type { color: var(--ui-muted); }

.mira-flow__asset--scene blockquote {
  margin: 14px 0 16px;
  font-size: var(--fs-body);
  font-style: italic;
  line-height: 1.45;
}

.mira-flow__asset-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-gray-100);
  color: var(--ui-muted);
  font-size: var(--fs-label);
}

.mira-flow__asset--caption {
  padding: 20px;
  background: var(--ui-deep);
  color: var(--ui-bg);
}

.mira-flow__asset--caption .mira-flow__asset-type { opacity: .7; }

.mira-flow__asset--caption p {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.035em;
}

/* =========================================================
   ANIMATED STAGE (≥1024px, set by flow.js)
========================================================= */

.mira-flow.is-animated {
  height: 540vh;
  padding: 0;
}

.mira-flow.is-animated .mira-flow__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.mira-flow.is-animated .mira-flow__container {
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(1440px, calc(100% - 80px));
  height: 100vh;
  padding: 136px 0 28px;
}

.mira-flow.is-animated .mira-flow__header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  gap: 56px;
  align-items: end;
}

.mira-flow.is-animated .mira-flow__header h2 { font-size: clamp(40px, 4.4vw, 76px); }

.mira-flow.is-animated .mira-flow__header p {
  max-width: 380px;
  margin: 0;
  font-size: var(--fs-body);
}

.mira-flow.is-animated .mira-flow__stage {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(300px, .34fr) minmax(0, .66fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px 56px;
  margin-top: 28px;
}

/* ---------- text slot ---------- */

.mira-flow.is-animated .mira-flow__copy {
  position: relative;
  display: block;
  grid-row: 1;
  grid-column: 1;
}

.mira-flow.is-animated .mira-flow__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
}

.mira-flow.is-animated .mira-flow__state::before { display: none; }

.mira-flow.is-animated .mira-flow__state-label { gap: 12px; }

.mira-flow.is-animated .mira-flow__state-icon { position: static; flex: none; }

.mira-flow.is-animated .mira-flow__state h3 { font-size: clamp(34px, 3.3vw, 56px); }

/* ---------- canvas ---------- */

.mira-flow.is-animated .mira-flow__canvas {
  position: relative;
  display: block;
  grid-row: 1;
  grid-column: 2;
  min-height: 0;
  margin: 0;
}

/* Pieces sit on the canvas centre; flow.js moves them with x/y. The
   `translate` below is separate from GSAP's transform, for the magnet. */
.mira-flow.is-animated .mira-flow__asset {
  --mx: 0px;
  --my: 0px;
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  translate: var(--mx) var(--my);
  transition: translate 300ms var(--flow-ease);
  will-change: transform, opacity;
}

.mira-flow.is-animated .mira-flow__asset--video { width: 200px; height: 250px; min-height: 0; }
.mira-flow.is-animated .mira-flow__asset--image { width: 176px; height: 220px; min-height: 0; }
.mira-flow.is-animated .mira-flow__asset--scene { width: 290px; }
.mira-flow.is-animated .mira-flow__asset--caption { width: 250px; }

/* Panels are centred with inset + auto margins (no transform), so flow.js
   can measure where each tile sits. */
.mira-flow.is-animated .mira-flow__board,
.mira-flow.is-animated .mira-flow__plan,
.mira-flow.is-animated .mira-flow__final {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  height: fit-content;
  margin: auto;
}

.mira-flow__board,
.mira-flow__week {
  padding: 20px;
  border: 1px solid var(--ui-soft);
  border-radius: 20px;
  background: var(--ui-surface);
  box-shadow: 0 30px 80px rgba(var(--ui-shadow-rgb), .08);
}

.mira-flow.is-animated .mira-flow__board { width: min(640px, 94%); }

.mira-flow__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ui-gray-100);
}

.mira-flow__panel-head small,
.mira-flow__panel-head strong { display: block; }

.mira-flow__panel-head small {
  margin-bottom: 4px;
  color: var(--ui-muted);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mira-flow__panel-head strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.mira-flow__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ui-gray-100);
  color: var(--ui-primary);
  font-size: var(--fs-label);
  font-weight: 700;
}

/* "0 of 4 sent": counts up as each post goes out and the bar fills
   (flow.js). Plain text + bar, no pill, icon or status dot: the landing
   avoids "live status" chips (DESIGN-SYSTEM §4). */
.mira-flow__sent {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ui-muted);
  font-size: var(--fs-label);
  font-weight: 700;
}

.mira-flow__sent b { color: var(--ui-text); }
.mira-flow__sent b { font-variant-numeric: tabular-nums; }

.mira-flow__sent-bar {
  width: 56px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-gray-100);
}

.mira-flow__sent-bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--ui-success);
  transform: scaleX(0);
  transform-origin: left center;
}

.mira-flow__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mira-flow__tile {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 12px;
  background: var(--ui-gray-50);
}

.mira-flow__tile-icon {
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  place-items: center;
  border-radius: 10px;
  background: var(--ui-deep);
  color: var(--ui-bg);
  font-size: 18px;
}

.mira-flow__tile-type {
  color: var(--ui-muted);
  font-size: var(--fs-label);
}

.mira-flow__tile strong { font-size: var(--fs-small); }

.mira-flow.is-animated .mira-flow__plan { width: min(720px, 96%); }
/* The badges fly from the account cards up into the week: the week paints
   over the cards, and days with a post over the empty ones. */
.mira-flow.is-animated .mira-flow__week { position: relative; z-index: 2; }
.mira-flow.is-animated .mira-flow__day.has-post { z-index: 1; }

.mira-flow__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.mira-flow__day {
  position: relative;
  overflow: visible;
  display: flex;
  min-height: 112px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-radius: 12px;
  background: var(--ui-gray-50);
}

/* Soft wash of the account colour on days that carry a post (from the
   accounts phase on). */
.mira-flow__day-tint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--acc);
  opacity: 0;
}

.mira-flow__day-name {
  position: relative;
  color: var(--ui-muted);
  font-size: var(--fs-label);
  font-weight: 700;
}

.mira-flow__post {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 10px;
  background: var(--ui-deep);
  color: var(--ui-bg);
  font-size: var(--fs-label);
  font-weight: 700;
}

.mira-flow__post > iconify-icon,
.mira-flow__post > span:not([class]) { position: relative; z-index: 1; }

.mira-flow__post iconify-icon { font-size: 18px; }

/* Colour layers under the content: the account colour (accounts phase),
   then green once the post is sent (publish phase). flow.js fades them. */
.mira-flow__post-fill,
.mira-flow__post-sent {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
}

.mira-flow__post-fill { background: var(--acc); }
.mira-flow__post-sent { background: var(--ui-success); }

.mira-flow__post-account,
.mira-flow__post-check {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.mira-flow__post-account {
  top: -12px;
  left: -8px;
  width: 30px;
  height: 30px;
  z-index: 2;
  overflow: hidden;
  border: 2px solid var(--ui-surface);
  background: var(--acc);
  box-shadow: 0 0 0 2px var(--acc);
}

.mira-flow__post-check {
  right: -8px;
  bottom: -10px;
  width: 26px;
  height: 26px;
  z-index: 2;
  border: 2px solid var(--ui-surface);
  background: var(--ui-success);
  color: var(--ui-on-accent);
  font-size: 14px;
}

.mira-flow__accounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mira-flow__account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ui-soft);
  border-radius: 16px;
  background: var(--ui-surface);
}

/* Profile photo with a ring in the account's colour, so the colour still
   ties the account to its posts. */
.mira-flow__avatar {
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
  overflow: hidden;
  border: 2px solid var(--ui-surface);
  border-radius: 999px;
  background: var(--acc);
  box-shadow: 0 0 0 2px var(--acc);
}

.mira-flow__avatar img,
.mira-flow__post-account img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.mira-flow__account strong,
.mira-flow__account span span { display: block; white-space: nowrap; }
.mira-flow__account strong { font-size: var(--fs-small); }
.mira-flow__account span span { color: var(--ui-muted); font-size: var(--fs-label); }

/* ---------- final ---------- */

.mira-flow.is-animated .mira-flow__final {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.mira-flow__signal {
  position: relative;
  display: grid;
  width: 290px;
  height: 290px;
  place-items: center;
}

.mira-flow__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 1px solid color-mix(in srgb, var(--ui-success) 40%, transparent);
  border-radius: 50%;
}

.mira-flow__ring:nth-child(1) { width: 130px; height: 130px; }
.mira-flow__ring:nth-child(2) { width: 210px; height: 210px; }
.mira-flow__ring:nth-child(3) { width: 290px; height: 290px; }

.mira-flow__core {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 6px solid var(--ui-success);
  border-radius: 999px;
  background: var(--brand-tiktok-black);
  box-shadow: 0 24px 60px rgba(var(--ui-shadow-rgb), .2);
}

/* The real TikTok logo (on request: identical to the original, not the
   Phosphor redraw): the note in white over its cyan and pink offsets, on
   TikTok's black, inside the green ring. Brand colours, so no theme swap. */
.mira-flow__tiktok { width: 44px; height: 44px; }
.mira-flow__tiktok-cyan { fill: var(--brand-tiktok-cyan); }
.mira-flow__tiktok-pink { fill: var(--brand-tiktok-pink); }
.mira-flow__tiktok-note { fill: #FFFFFF; }

.mira-flow__status {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ui-muted);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mira-flow__status span:last-child { color: var(--ui-success); }

.mira-flow__status i {
  width: 36px;
  height: 1px;
  background: var(--ui-soft);
}

/* ---------- rail ---------- */

.mira-flow.is-animated .mira-flow__rail {
  position: relative;
  display: block;
  grid-row: 2;
  grid-column: 1 / -1;
  height: 92px;
}

.mira-flow__rail ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mira-flow__rail-base,
.mira-flow__rail-fill {
  position: absolute;
  top: 22px;
  left: 12.5%;
  width: 75%;
  height: 4px;
  margin-top: -1px;
  border-radius: 999px;
}

.mira-flow__rail-base { background: var(--flow-track); }

/* Uncovered with clip-path (flow.js), not scaled, so each stretch keeps its
   colour: cyan at Content, pink only at Publish. */
.mira-flow__rail-fill {
  background: var(--flow-progress);
  clip-path: inset(0 100% 0 0 round 999px);
}

.mira-flow__orb {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 12.5%;
  width: 14px;
  height: 14px;
  border: 3px solid var(--brand-tiktok-pink);
  border-radius: 50%;
  background: var(--ui-surface);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-tiktok-pink) 18%, transparent);
  transform: translate(-50%, -50%);
}

.mira-flow__node {
  position: absolute;
  z-index: 3;
  top: 0;
  left: var(--at);
  display: flex;
  width: 240px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  text-align: center;
}

.mira-flow__node-dot {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--ui-soft);
  border-radius: 999px;
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-size: 20px;
  transition:
    background-color .35s ease,
    border-color .35s ease,
    color .35s ease,
    transform .45s var(--flow-ease);
}

.mira-flow__node-label strong,
.mira-flow__node-label span { display: block; }

.mira-flow__node-label strong {
  color: var(--ui-muted);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .35s ease;
}

.mira-flow__node-label span {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: var(--fs-label);
  opacity: 0;
  transition: opacity .35s ease;
}

/* Each node's colour is the rail's colour right under it (same oklch path). */
.mira-flow__node:nth-child(1) { --node: var(--brand-tiktok-cyan); }
.mira-flow__node:nth-child(2) { --node: color-mix(in oklch increasing hue, var(--brand-tiktok-cyan) 66.7%, var(--brand-tiktok-pink)); }
.mira-flow__node:nth-child(3) { --node: color-mix(in oklch increasing hue, var(--brand-tiktok-cyan) 33.3%, var(--brand-tiktok-pink)); }
.mira-flow__node:nth-child(4) { --node: var(--brand-tiktok-pink); }

/* A step already passed stays filled in its colour, so it never looks
   undone again (on request). Black ink, as on TikTok's own cyan/pink. */
.mira-flow__node.is-done .mira-flow__node-dot {
  border-color: var(--node);
  background: var(--node);
  color: var(--brand-tiktok-black);
}

.mira-flow__node.is-active .mira-flow__node-dot {
  border-color: var(--ui-deep);
  background: var(--ui-deep);
  color: var(--ui-bg);
  transform: scale(1.08);
}

.mira-flow__node.is-active .mira-flow__node-label strong,
.mira-flow__node.is-done .mira-flow__node-label strong { color: var(--ui-text); }

.mira-flow__node.is-active .mira-flow__node-label span { opacity: 1; }

/* =========================================================
   ICON MOTION (UI Vault assets/icons, semantic motion)
   Plays once when a node or a text state becomes active.
========================================================= */

.mira-flow [data-motion].is-active iconify-icon { display: inline-block; }

.mira-flow [data-motion="lift"].is-active .mira-flow__node-dot iconify-icon,
.mira-flow [data-motion="lift"].is-active .mira-flow__state-icon iconify-icon {
  animation: mira-flow-lift .55s var(--flow-ease) .15s;
}

.mira-flow [data-motion="pop"].is-active .mira-flow__node-dot iconify-icon,
.mira-flow [data-motion="pop"].is-active .mira-flow__state-icon iconify-icon {
  animation: mira-flow-pop .45s var(--flow-ease) .15s;
}

.mira-flow [data-motion="fly"].is-active .mira-flow__node-dot iconify-icon,
.mira-flow [data-motion="fly"].is-active .mira-flow__state-icon iconify-icon {
  animation: mira-flow-fly .65s var(--flow-ease) .15s;
}

@keyframes mira-flow-lift { 50% { transform: translateY(-6px); } }
@keyframes mira-flow-pop { 45% { transform: scale(1.2); } 70% { transform: scale(.96); } }
@keyframes mira-flow-fly { 55% { transform: translate(7px, -7px) rotate(-4deg); } }

/* =========================================================
   RESPONSIVE (only the system breakpoints)
========================================================= */

@media (max-width: 1279.98px) {
  .mira-flow.is-animated .mira-flow__container { width: min(1200px, calc(100% - 48px)); }
  .mira-flow.is-animated .mira-flow__header { grid-template-columns: 1fr; }
  .mira-flow.is-animated .mira-flow__header p { display: none; }
  .mira-flow.is-animated .mira-flow__stage {
    grid-template-columns: minmax(260px, .36fr) minmax(0, .64fr);
    gap: 16px 36px;
  }
  .mira-flow.is-animated .mira-flow__asset--video { width: 170px; height: 214px; }
  .mira-flow.is-animated .mira-flow__asset--image { width: 150px; height: 188px; }
  .mira-flow.is-animated .mira-flow__asset--scene { width: 236px; }
  .mira-flow.is-animated .mira-flow__asset--caption { width: 210px; }
  .mira-flow__node { width: 200px; }
  .mira-flow__account { padding: 10px; gap: 10px; }
  .mira-flow__avatar { width: 34px; height: 34px; }
}

@media (max-width: 479.98px) {
  .mira-flow__container { width: calc(100% - 40px); }
  .mira-flow__canvas { grid-template-columns: 1fr 1fr; margin-left: 0; }
  .mira-flow__asset--scene,
  .mira-flow__asset--caption { grid-column: 1 / -1; }
}

/* =========================================================
   ANIMATED STAGE ON PHONES AND TABLETS (<1024px, set by flow.js)
   The desktop story in one column (2026-09-24, on request): header, the
   text slot, the canvas, and the rail as a strip of dots. flow.js lays the
   pieces out as a 2×2 cluster on a narrow canvas and scales the panels
   (board, week + accounts, final) as a whole to fit it (`scale`).
========================================================= */

@media (max-width: 1023.98px) {
  .mira-flow.is-animated { height: 540vh; height: 540svh; }

  .mira-flow.is-animated .mira-flow__sticky { height: 100vh; height: 100svh; }

  /* 108px clears the floating navbar (it ends at 92px on every width) */
  .mira-flow.is-animated .mira-flow__container {
    width: min(720px, calc(100% - 48px));
    height: 100vh;
    height: 100svh;
    padding: 108px 0 14px;
  }

  .mira-flow.is-animated .mira-flow__header { display: block; }
  .mira-flow.is-animated .mira-flow__header h2 { font-size: clamp(34px, 8.6vw, 56px); }

  .mira-flow.is-animated .mira-flow__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 128px minmax(0, 1fr) auto;
    gap: 12px;
    margin-top: 18px;
  }

  .mira-flow.is-animated .mira-flow__copy { grid-row: 1; grid-column: 1; }
  .mira-flow.is-animated .mira-flow__canvas { grid-row: 2; grid-column: 1; }

  .mira-flow.is-animated .mira-flow__state { justify-content: flex-start; }
  .mira-flow.is-animated .mira-flow__state-label { min-height: 36px; margin-bottom: 8px; }
  .mira-flow.is-animated .mira-flow__state-icon { width: 36px; height: 36px; font-size: 18px; }
  .mira-flow.is-animated .mira-flow__state h3 { font-size: clamp(26px, 6.6vw, 40px); }
  .mira-flow.is-animated .mira-flow__state p { margin-top: 8px; }

  .mira-flow.is-animated .mira-flow__asset--video { width: 150px; height: 188px; }
  .mira-flow.is-animated .mira-flow__asset--image { width: 132px; height: 166px; }
  .mira-flow.is-animated .mira-flow__asset--scene { width: 210px; padding: 16px; }
  .mira-flow.is-animated .mira-flow__asset--caption { width: 190px; padding: 16px; }
  .mira-flow.is-animated .mira-flow__asset--caption p,
  .mira-flow.is-animated .mira-flow__asset-meta strong { font-size: 18px; }

  .mira-flow.is-animated .mira-flow__board,
  .mira-flow.is-animated .mira-flow__plan { width: 100%; }

  /* rail: the dots and the line; the labels go (four would collide) */
  .mira-flow.is-animated .mira-flow__rail { grid-row: 3; height: 44px; }
  .mira-flow.is-animated .mira-flow__node { width: auto; }
  .mira-flow.is-animated .mira-flow__node-label { display: none; }
  .mira-flow.is-animated .mira-flow__node-dot { width: 40px; height: 40px; font-size: 18px; }
  .mira-flow.is-animated .mira-flow__rail-base,
  .mira-flow.is-animated .mira-flow__rail-fill,
  .mira-flow.is-animated .mira-flow__orb { top: 20px; }
}

/* Phones: the week becomes an agenda (only the four days with a post, one
   row each), the board a 2×2, the accounts three compact cards. */
@media (max-width: 767.98px) {
  .mira-flow.is-animated .mira-flow__board,
  .mira-flow.is-animated .mira-flow__week { padding: 14px; }
  .mira-flow.is-animated .mira-flow__panel-head { padding-bottom: 12px; margin-bottom: 12px; }
  .mira-flow.is-animated .mira-flow__panel-head strong { font-size: 20px; }

  .mira-flow.is-animated .mira-flow__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mira-flow.is-animated .mira-flow__tile { padding: 12px; }

  .mira-flow.is-animated .mira-flow__days { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mira-flow.is-animated .mira-flow__day:not(.has-post) { display: none; }
  .mira-flow.is-animated .mira-flow__day {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 6px 12px;
  }
  .mira-flow.is-animated .mira-flow__day-name { width: 36px; flex: none; }
  .mira-flow.is-animated .mira-flow__post {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 40px 9px 50px;
  }
  .mira-flow.is-animated .mira-flow__post-account { top: calc(50% - 15px); left: 10px; }
  .mira-flow.is-animated .mira-flow__post-check { top: calc(50% - 13px); right: 8px; bottom: auto; }

  .mira-flow.is-animated .mira-flow__accounts { gap: 8px; margin-top: 10px; }
  .mira-flow.is-animated .mira-flow__account {
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    padding: 10px 6px;
    text-align: center;
  }
  .mira-flow.is-animated .mira-flow__account > span:last-child { min-width: 0; max-width: 100%; }
  .mira-flow.is-animated .mira-flow__account strong { overflow: hidden; text-overflow: ellipsis; }
  .mira-flow.is-animated .mira-flow__account span span { display: none; }

  .mira-flow.is-animated .mira-flow__sent > span:first-child { white-space: nowrap; }
  .mira-flow.is-animated .mira-flow__sent-bar { width: 40px; }

  /* the rail keeps clear of the back-to-top button in the corner */
  .mira-flow.is-animated .mira-flow__rail { margin: 0 30px; }

  .mira-flow.is-animated .mira-flow__status { flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
  .mira-flow.is-animated .mira-flow__status i { width: 18px; }
}

/* Short phones (iPhone SE and the like): a smaller title, and the step's
   one-line description goes, so the canvas keeps room for the week. */
@media (max-width: 1023.98px) and (max-height: 740px) {
  .mira-flow.is-animated .mira-flow__header h2 { font-size: clamp(28px, 7.4vw, 40px); }
  .mira-flow.is-animated .mira-flow__stage { grid-template-rows: 88px minmax(0, 1fr) auto; margin-top: 14px; }
  .mira-flow.is-animated .mira-flow__state p { display: none; }
  .mira-flow.is-animated .mira-flow__state h3 { font-size: clamp(24px, 6.4vw, 34px); }
}