/* FamCare motion layer — load AFTER famcare.css.
   Four motions, and only four. Each one carries information the still
   interface cannot: that a layout changed, that an item moved rather than
   vanished, how three quantities compare, that the person changed.

   Nothing here animates on hover, on entrance, or for delight. If you are
   about to add a fifth, write down what a user would misread without it.
   If you can't, don't add it. */

:root {
  /* Duration. Longer than these and the product feels slow to someone
     checking one fact; shorter and the change isn't perceived at all. */
  --fc-dur-quick: 120ms;   /* acknowledgement — a control responding */
  --fc-dur-base:  220ms;   /* the default: a layout or value settling */
  --fc-dur-slow:  380ms;   /* only when distance must be read as travel */

  /* Easing. Decelerate for things arriving and settling; standard for
     things both leaving and arriving. No bounce, no overshoot — this is
     a medical record, not a game. */
  --fc-ease-out:    cubic-bezier(0.2, 0.8, 0.3, 1);
  --fc-ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --fc-ease-in:     cubic-bezier(0.6, 0, 1, 1);
}

/* ============================================================
   1 — DENSITY
   Comfortable ↔ compact re-lays out every surface at once. Without a
   transition the page appears to break. This is the strongest case in
   the product: the motion IS the explanation.
   ============================================================ */

.fc-page,
.fc-card,
.fc-appt,
.fc-hero,
.fc-hero__panel,
.fc-row,
.fc-table td,
.fc-table th,
.fc-stack,
.fc-cluster {
  transition:
    padding var(--fc-dur-base) var(--fc-ease-in-out),
    gap     var(--fc-dur-base) var(--fc-ease-in-out),
    border-radius var(--fc-dur-base) var(--fc-ease-in-out);
}

.fc-display-1,
.fc-display-2,
.fc-hero-numeral {
  transition: font-size var(--fc-dur-base) var(--fc-ease-in-out);
}

/* The toggle itself acknowledges the press before the page starts moving. */
.fc-segmented__opt {
  transition:
    background-color var(--fc-dur-quick) var(--fc-ease-out),
    color            var(--fc-dur-quick) var(--fc-ease-out);
}

/* ============================================================
   2 — FOLLOW-UP CLOSING
   The copy promises "closed follow-ups move to the appointment they
   belonged to. Nothing disappears." Without motion the user has to take
   that on faith — the item simply vanishes, which reads as deletion.
   The item travels toward the appointment, then the gap closes.

   Add .is-closing to the <article>, remove it from the DOM on animationend.
   ============================================================ */

.fc-appt.is-closing {
  animation: fc-followup-leave var(--fc-dur-slow) var(--fc-ease-in) forwards;
  pointer-events: none;
}

@keyframes fc-followup-leave {
  0%   { opacity: 1; transform: none; }
  55%  { opacity: 0.15; transform: translateX(28px) scale(0.98); }
  100% { opacity: 0; transform: translateX(28px) scale(0.98);
         margin-top: calc(var(--fc-space-4) * -1); max-height: 0;
         padding-top: 0; padding-bottom: 0; }
}

/* The counter it lands on registers the arrival, or the claim is unproven. */
.fc-navitem__count.is-receiving,
.fc-badge.is-receiving {
  animation: fc-receive var(--fc-dur-base) var(--fc-ease-out);
}

@keyframes fc-receive {
  0%   { transform: none; }
  40%  { transform: scale(1.18); }
  100% { transform: none; }
}

/* ============================================================
   3 — REFILL RUNWAY
   Three bars whose only job is comparison. Growing from zero on first
   paint makes the relationship legible before any number is read — the
   6-days bar is visibly a stub next to the 44-days bar. Runs once, on
   entry; never on re-render.
   ============================================================ */

.fc-runway__fill {
  transform-origin: left center;
  animation: fc-runway-grow var(--fc-dur-slow) var(--fc-ease-out) both;
}

/* Staggered only enough to read as three separate quantities, not as a
   decorative cascade. */
.fc-runway > *:nth-child(1) .fc-runway__fill { animation-delay: 0ms; }
.fc-runway > *:nth-child(2) .fc-runway__fill { animation-delay: 60ms; }
.fc-runway > *:nth-child(3) .fc-runway__fill { animation-delay: 120ms; }

@keyframes fc-runway-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Same reasoning, same restraint, for the attention meter. */
.fc-meter__bar {
  transform-origin: bottom center;
  animation: fc-meter-grow var(--fc-dur-base) var(--fc-ease-out) both;
}
.fc-meter__bar:nth-child(2) { animation-delay: 50ms; }
.fc-meter__bar:nth-child(3) { animation-delay: 100ms; }

@keyframes fc-meter-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ============================================================
   4 — PERSON SWITCH
   Changing care person replaces every value on the screen at once. With
   no transition that reads as a page error. A short dip and return says
   "same page, different person" — and the context line, the thing that
   actually changed, settles last so the eye lands on it.

   Set data-switching on .fc-main for the duration of the swap.
   ============================================================ */

.fc-main[data-switching] .fc-page {
  animation: fc-switch-body var(--fc-dur-base) var(--fc-ease-in-out);
}

@keyframes fc-switch-body {
  0%   { opacity: 1; }
  45%  { opacity: 0.25; }
  100% { opacity: 1; }
}

.fc-main[data-switching] .fc-context {
  animation: fc-switch-context var(--fc-dur-slow) var(--fc-ease-out);
}

@keyframes fc-switch-context {
  0%   { opacity: 0; transform: translateY(-4px); }
  40%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}

/* ============================================================
   REDUCED MOTION
   Not a courtesy — a requirement, and one the base package was missing.
   Vestibular triggers here are the travel and the scale. Opacity is
   retained where it still carries meaning (the switch, the close), so a
   user who reduces motion doesn't lose the information the motion was
   there to deliver.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .fc-page, .fc-card, .fc-appt, .fc-hero, .fc-hero__panel, .fc-row,
  .fc-table td, .fc-table th, .fc-stack, .fc-cluster,
  .fc-display-1, .fc-display-2, .fc-hero-numeral {
    transition: none;
  }

  .fc-runway__fill,
  .fc-meter__bar {
    animation: none;
    transform: none;
  }

  .fc-navitem__count.is-receiving,
  .fc-badge.is-receiving {
    animation: none;
  }

  /* Kept, without travel or scale — the meaning survives. */
  .fc-appt.is-closing {
    animation: fc-followup-leave-reduced var(--fc-dur-base) linear forwards;
  }

  @keyframes fc-followup-leave-reduced {
    from { opacity: 1; }
    to   { opacity: 0; max-height: 0; margin-top: calc(var(--fc-space-4) * -1);
           padding-top: 0; padding-bottom: 0; }
  }

  .fc-main[data-switching] .fc-page { animation: none; }
  .fc-main[data-switching] .fc-context {
    animation: fc-switch-context-reduced var(--fc-dur-base) linear;
  }
  @keyframes fc-switch-context-reduced {
    from { opacity: 0; } to { opacity: 1; }
  }
}