/* Kasa Başı's customers (prototypes/shell/customers.js): made at random, each cut from one hue,
   faceless, in the house outline (design/kasa/kasa-basi-brief.md, decision 17). The shell links it,
   as it does the hero's and the goods'.

   Every colour is a token (ui/tokens.css): six hues, each in the six roles agy drew the parts in,
   picked by the customer's data-hue. Every move answers the printed receipt, and waiting is still. */

/* ---- the customers' materials --------------------------------------------- */

.customer {
  display: block;
  overflow: visible;
}

.customer path,
.customer circle,
.customer ellipse,
.customer rect,
.customer polygon {
  stroke: var(--customer-line);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.customer .thin { stroke-width: 2; }
.customer .flat { stroke: none; }

.customer[data-hue="teal"] .skin { fill: var(--customer-teal-skin); }
.customer[data-hue="teal"] .cloth { fill: var(--customer-teal-cloth); }
.customer[data-hue="teal"] .cloth-shade { fill: var(--customer-teal-cloth-shade); }
.customer[data-hue="teal"] .cloth-light { fill: var(--customer-teal-cloth-light); }
.customer[data-hue="teal"] .hair { fill: var(--customer-teal-hair); }
.customer[data-hue="teal"] .hair-shade { fill: var(--customer-teal-hair-shade); }
.customer[data-hue="violet"] .skin { fill: var(--customer-violet-skin); }
.customer[data-hue="violet"] .cloth { fill: var(--customer-violet-cloth); }
.customer[data-hue="violet"] .cloth-shade { fill: var(--customer-violet-cloth-shade); }
.customer[data-hue="violet"] .cloth-light { fill: var(--customer-violet-cloth-light); }
.customer[data-hue="violet"] .hair { fill: var(--customer-violet-hair); }
.customer[data-hue="violet"] .hair-shade { fill: var(--customer-violet-hair-shade); }
.customer[data-hue="blue"] .skin { fill: var(--customer-blue-skin); }
.customer[data-hue="blue"] .cloth { fill: var(--customer-blue-cloth); }
.customer[data-hue="blue"] .cloth-shade { fill: var(--customer-blue-cloth-shade); }
.customer[data-hue="blue"] .cloth-light { fill: var(--customer-blue-cloth-light); }
.customer[data-hue="blue"] .hair { fill: var(--customer-blue-hair); }
.customer[data-hue="blue"] .hair-shade { fill: var(--customer-blue-hair-shade); }
.customer[data-hue="rose"] .skin { fill: var(--customer-rose-skin); }
.customer[data-hue="rose"] .cloth { fill: var(--customer-rose-cloth); }
.customer[data-hue="rose"] .cloth-shade { fill: var(--customer-rose-cloth-shade); }
.customer[data-hue="rose"] .cloth-light { fill: var(--customer-rose-cloth-light); }
.customer[data-hue="rose"] .hair { fill: var(--customer-rose-hair); }
.customer[data-hue="rose"] .hair-shade { fill: var(--customer-rose-hair-shade); }
.customer[data-hue="mustard"] .skin { fill: var(--customer-mustard-skin); }
.customer[data-hue="mustard"] .cloth { fill: var(--customer-mustard-cloth); }
.customer[data-hue="mustard"] .cloth-shade { fill: var(--customer-mustard-cloth-shade); }
.customer[data-hue="mustard"] .cloth-light { fill: var(--customer-mustard-cloth-light); }
.customer[data-hue="mustard"] .hair { fill: var(--customer-mustard-hair); }
.customer[data-hue="mustard"] .hair-shade { fill: var(--customer-mustard-hair-shade); }
.customer[data-hue="slate"] .skin { fill: var(--customer-slate-skin); }
.customer[data-hue="slate"] .cloth { fill: var(--customer-slate-cloth); }
.customer[data-hue="slate"] .cloth-shade { fill: var(--customer-slate-cloth-shade); }
.customer[data-hue="slate"] .cloth-light { fill: var(--customer-slate-cloth-light); }
.customer[data-hue="slate"] .hair { fill: var(--customer-slate-hair); }
.customer[data-hue="slate"] .hair-shade { fill: var(--customer-slate-hair-shade); }

/* A visitor is the child's own drawing, and a drawing that stays a card keeps its paper. */
.customer .card { fill: var(--surface-paper); }

/* The question in a bubble, since a customer has no face to ask it with. */
.customer .bubble { fill: var(--surface-paper); }
.customer .ask { fill: none; stroke-width: 4.5; }
.customer .ask-dot { fill: var(--customer-line); stroke: none; }

/* ---- what each state shows ------------------------------------------------ */

.customer-arm-point,
.customer-arm-hold,
.customer-held,
.customer-puzzle { display: none; }

.customer[data-state="point"] .customer-arm-point,
.customer[data-state="hold"] .customer-arm-hold,
.customer[data-state="hold"] .customer-held,
.customer[data-state="puzzled"] .customer-puzzle { display: inline; }

/* Pointing is puzzled too: the customer points at what was left on the belt, or at a word on the
   receipt, and asks (the brief's section 5). The question is what shows when the arm does not: a
   short customer's or a child's pointing hand is below the counter's top (Kasa Başı's B4). */
.customer[data-state="point"] .customer-puzzle { display: inline; }

/* A visitor is a drawing with no arms to move, so holding up is its question too, and what it
   holds up floats beside it (customers.js). */
.customer-visitor[data-state="hold"] .customer-puzzle { display: inline; }

/* Pivots in the frame's own units: the neck for the head, the feet for the hop. */
.customer-body,
.customer-back,
.customer-head,
.customer-drawn,
.customer-puzzle {
  transform-box: view-box;
}
.customer-back,
.customer-head { transform-origin: 100px 104px; }
/* A drawing tips from where it stands on the counter. */
.customer-drawn { transform-origin: 100px 154px; }
.customer-body { transform-origin: 100px 200px; }
.customer-puzzle { transform-origin: 138px 44px; }

/* ---- the moves -------------------------------------------------------------- */

/* A line that does not match: the head tips to one side, and the question comes up. It holds. A
   visitor points and holds up the same way. */
.customer[data-state="puzzled"] .customer-back,
.customer[data-state="puzzled"] .customer-head,
.customer[data-state="puzzled"] .customer-drawn,
.customer-visitor[data-state="point"] .customer-drawn,
.customer-visitor[data-state="hold"] .customer-drawn { animation: customer-tilt .45s ease-out both; }
.customer[data-state="puzzled"] .customer-puzzle,
.customer[data-state="point"] .customer-puzzle,
.customer-visitor[data-state="hold"] .customer-puzzle { animation: customer-pop .4s ease-out .15s both; }

/* A receipt that matches: a little hop, and they are on their way. */
.customer[data-state="happy"] .customer-body { animation: customer-hop .7s ease-out both; }

@keyframes customer-tilt {
  from { transform: rotate(0); }
  to { transform: rotate(-9deg); }
}

@keyframes customer-pop {
  from { opacity: 0; transform: scale(.3); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes customer-hop {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-12px); }
  60% { transform: translateY(0); }
  78% { transform: translateY(-4px); }
}

/* Reduced motion keeps every pose and drops the travel. */
@media (prefers-reduced-motion: reduce) {
  .customer * {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
}