/* ============================================================
   Blabb — How it works animation polish
   Additive stylesheet for the refined #how sequence
   ============================================================ */

:root {
  --blabb-gold: #DCB04B;
  --blabb-gold-soft: #E5C46C;
  --blabb-cream: #F3EFE4;
  --blabb-fog: #A6A194;
  --blabb-green: #65D99B;

  --blabb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --blabb-ease-pop: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  --blabb-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------
   Shared fade state used by step copy swaps
   ------------------------------------------------------------ */
.k-fade {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  filter: blur(5px) !important;
}

#flow-panel .k-flow-step-num,
#flow-panel .k-flow-title,
#flow-panel .k-flow-body,
#flow-panel .k-flow-meta {
  transition:
    opacity 0.34s ease,
    transform 0.42s var(--blabb-ease-out),
    filter 0.34s ease;
}

/* ------------------------------------------------------------
   Tabs + progress polish
   ------------------------------------------------------------ */
.k-flow-tab {
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s var(--blabb-ease-out),
    box-shadow 0.3s ease;
}

.k-flow-tab:active {
  transform: translateY(1px) scale(0.985);
}

.k-flow-tab.selected {
  transform: translateY(-1px);
}

.k-tab-prog {
  transform-origin: left center;
  transition: transform 0.18s linear;
}

/* ------------------------------------------------------------
   Refine overlay container
   ------------------------------------------------------------ */
#flow-widget {
  position: relative;
}

#flow-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#flow-refine {
  display: flex !important;
  position: absolute;
  inset: 0;
  z-index: 5;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(16px, 3vw, 36px);
  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.985);

  transition:
    opacity 0.55s ease,
    transform 0.65s var(--blabb-ease-out),
    visibility 0s linear 0.55s;
}

#flow-refine.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;

  transition:
    opacity 0.55s ease,
    transform 0.65s var(--blabb-ease-out);
}

/* Card frame + kicker so Refine matches the Transcribe / Types stages */
.flow-refine-inner {
  width: 100%;
  max-width: 620px;
  padding: clamp(18px, 2.6vw, 30px);
  text-align: left;
  background: rgba(20, 21, 27, 0.58);
  border: 1px solid rgba(246, 234, 198, 0.10);
  border-radius: 18px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
}
.fr-kicker {
  display: block;
  margin-bottom: 0.9em;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blabb-fog);
}

/* ------------------------------------------------------------
   Refine line / tokens
   ------------------------------------------------------------ */
#frLine {
  display: block !important;
  width: 100%;
  gap: 0 !important;

  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.08rem, 1.1vw + 0.8rem, 1.58rem);
  line-height: 1.92;
  letter-spacing: 0.005em;
  color: var(--blabb-cream);
  /* smoothly shrink when the min-height lock is released after removals settle */
  transition: min-height 0.6s var(--blabb-ease-out);
  /* no text-wrap: balance — it produces a phantom empty line with many inline-block tokens */
}

#frLine .fr-tok {
  display: inline-block;
  position: relative;
  vertical-align: bottom;

  max-width: none;
  margin: 0 0.30em 0.10em 0;
  padding: 0;

  transform-origin: 50% 70%;
  will-change: transform, opacity, max-width, margin-right, filter;

  transition:
    max-width 0.58s var(--blabb-ease-out),
    margin-right 0.58s var(--blabb-ease-out),
    opacity 0.38s ease,
    transform 0.48s var(--blabb-ease-out-back),
    filter 0.38s ease;
}

/* Base visible words pop in */
#frLine .fr-tok.is-in {
  animation: fr-pop-in 0.72s var(--blabb-ease-pop) both;
}

/* Inserted word starts collapsed, then pops open */
#frLine .fr-tok.fr-tok-insert {
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  transform: translateY(0.35em) scale(0.70);
  filter: blur(5px);
  color: var(--blabb-green);
}

#frLine .fr-tok.fr-tok-insert.is-in {
  max-width: 12em;
  margin-right: 0.30em;
  opacity: 1;
  transform: none;
  filter: blur(0);
  animation: fr-pop-in 0.72s var(--blabb-ease-pop) both;
}

/* Removed words: first pop out, then collapse */
#frLine .fr-tok.is-remove {
  animation: fr-pop-out 0.56s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

/* Final collapsed state */
#frLine .fr-tok.is-gone {
  max-width: 0 !important;
  margin-right: 0 !important;
  opacity: 0 !important;
  transform: scale(0.55);
  filter: blur(6px);
  pointer-events: none;
}

/* While a token is collapsed (mid-removal, before display:none) or an insert is still hidden,
   kill its line box so it can't create a phantom empty line. */
#frLine .fr-tok.is-gone,
#frLine .fr-tok.fr-tok-insert:not(.is-in) {
  overflow: hidden;
  white-space: nowrap;
  line-height: 0;
  margin-bottom: 0;
}

/* Capitalized word ("They") reads as an edit — green, like the inserted word */
#frLine .fr-tok.is-cap {
  animation: fr-cap-pop 0.64s var(--blabb-ease-pop) both;
  color: var(--blabb-green);
  text-shadow: 0 0 18px rgba(101, 217, 155, 0.18);
}

/* Punctuation reveal */
#frLine .fr-punct {
  display: inline-block;
  max-width: 0;
  margin-left: 0;  /* while hidden, take no space — the preceding word's margin gives the normal gap */
  margin-right: 0;
  opacity: 0;
  transform: translateY(0.22em) scale(0.4);
  color: var(--blabb-gold);

  transition:
    max-width 0.48s var(--blabb-ease-out),
    margin-left 0.48s var(--blabb-ease-out),
    margin-right 0.48s var(--blabb-ease-out),
    opacity 0.36s ease,
    transform 0.48s var(--blabb-ease-out-back);
}

/* Cancel the preceding word's right margin so the mark hugs it ("week." not "week ."),
   then restore that margin on the right so the next word keeps its normal space. */
#frLine .fr-punct.is-in {
  max-width: 1.2em;
  margin-left: -0.3em;
  margin-right: 0.3em;
  opacity: 1;
  transform: none;
  animation: fr-punct-pop 0.58s var(--blabb-ease-pop) both;
}

/* ------------------------------------------------------------
   Refine notes
   ------------------------------------------------------------ */
.fr-notes {
  margin-top: 2.4em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

#frNoteRemove,
#frNoteAdd,
#frNotePunct,
.fr-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;

  margin-top: 0;
  padding: 0.46em 0.86em;

  border-radius: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  /* section 2 "on your screen" box: soft gold outline + wash */
  color: var(--blabb-fog);
  background: rgba(220, 176, 75, 0.05);
  border: 1px solid rgba(220, 176, 75, 0.2);

  opacity: 0;
  transform: translateY(12px) scale(0.96);
  filter: blur(5px);

  transition:
    opacity 0.5s ease,
    transform 0.55s var(--blabb-ease-out),
    filter 0.5s ease;
}

#frNoteRemove.is-in,
#frNoteAdd.is-in,
#frNotePunct.is-in,
.fr-note.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  animation: fr-note-pop 0.62s var(--blabb-ease-pop) both;
}

/* Uniform gold box; the accent survives only on the label text */
#frNoteRemove { color: #EBA3A3; }
#frNoteAdd { color: var(--blabb-green); }
#frNotePunct { color: var(--blabb-gold-soft); }

/* the detail sits in a <b> — keep it the same normal weight as the rest of the pill */
.fr-note b { font-weight: 400; }

/* ------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------ */
@keyframes fr-pop-in {
  0% {
    opacity: 0;
    transform: translateY(0.42em) scale(0.68);
    filter: blur(6px);
  }
  55% {
    opacity: 1;
    transform: translateY(-0.10em) scale(1.07);
    filter: blur(0);
  }
  74% {
    transform: translateY(0.03em) scale(0.982);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes fr-pop-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  32% {
    opacity: 1;
    transform: translateY(-0.12em) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.55em) scale(0.58);
    filter: blur(5px);
  }
}

@keyframes fr-cap-pop {
  0% {
    opacity: 0.65;
    transform: translateY(0.18em) scale(0.82);
  }
  52% {
    opacity: 1;
    transform: translateY(-0.08em) scale(1.09);
  }
  76% {
    transform: translateY(0.02em) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fr-punct-pop {
  0% {
    opacity: 0;
    transform: translateY(0.22em) scale(0.4);
  }
  55% {
    opacity: 1;
    transform: translateY(-0.06em) scale(1.22);
  }
  100% {
    transform: none;
  }
}

@keyframes fr-note-pop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
    filter: blur(0);
  }
  100% {
    transform: none;
  }
}

/* ------------------------------------------------------------
   Reduced motion safety
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .k-fade,
  #flow-panel .k-flow-step-num,
  #flow-panel .k-flow-title,
  #flow-panel .k-flow-body,
  #flow-panel .k-flow-meta,
  .k-flow-tab,
  .k-tab-prog,
  #flow-refine,
  #frLine .fr-tok,
  #frLine .fr-tok.fr-tok-insert,
  #frLine .fr-tok.is-remove,
  #frLine .fr-tok.is-gone,
  #frLine .fr-tok.is-cap,
  #frLine .fr-punct,
  #frNoteRemove,
  #frNoteAdd,
  #frNotePunct,
  .fr-note {
    transition: none !important;
    animation: none !important;
  }

  #frLine .fr-tok.is-gone {
    display: none !important;
  }
}