/* The lokanta: da/de/ta/te ayı's lunch rush (js/tasks/serve.js).
   Shared task classes (.pill, .task-note, .love meter) stay in base.css;
   everything serve-only lives here. The customer is a word, the plates are
   round, the fork is azure like every instruction. */

.serve-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  margin-top: 1.2em;
}

/* The waiting line: the next customers, fading toward the back of the queue. */
.serve-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6em;
  min-height: 2.2em;
}
.serve-wait {
  --o: 0.7; /* the queue fades toward its back; the keyframes reuse this */
  font-family: var(--serif);
  font-size: 0.85rem;
  color: var(--lavender);
  border: 1px solid rgba(154, 147, 184, 0.3);
  border-radius: 999px;
  padding: 0.25em 0.85em;
  white-space: nowrap;
  opacity: var(--o);
  animation: serve-walk-in 0.75s cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
}
.serve-wait:nth-child(2) { --o: 0.55; }
.serve-wait:nth-child(3) { --o: 0.42; }
.serve-wait:nth-child(4) { --o: 0.3; }
/* A new customer walks in from off the counter and settles at the back. */
@keyframes serve-walk-in {
  from { opacity: 0; transform: translate(var(--fx, 160px), var(--fy, 0)) scale(0.82); }
  to   { opacity: var(--o); transform: none; }
}
/* Called up: the front of the line steps down toward the counter. */
.serve-wait.gone { animation: serve-step-up 0.42s ease forwards; }
@keyframes serve-step-up {
  to { opacity: 0; transform: translateY(30px) scale(0.86); }
}

/* The counter: one hungry customer, then the dish it becomes. */
.serve-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  min-height: 5.6em;
}
.serve-guest {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  line-height: 1.15;
  color: var(--gold);
  opacity: 0;
}
.serve-guest.in { animation: serve-in 0.45s ease forwards; }
@keyframes serve-in {
  from { opacity: 0; transform: translateX(-46px); }
  to   { opacity: 1; transform: none; }
}
/* Fed: it lingers over its dish, then leaves happy out the right. */
.serve-guest.happy { animation: serve-happy 1.6s ease forwards; }
@keyframes serve-happy {
  0%   { opacity: 1; transform: none; }
  55%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(72px); }
}
/* Refused. Two temperaments, picked by luck in serve.js.
   Furious: it flushes red, shakes off the insult, swells, and storms out.
   Sad: it just droops, greys, and trudges away still a name, door still shut. */
.serve-guest.furious { animation: serve-furious 1.15s ease forwards; }
@keyframes serve-furious {
  /* opacity is named here on purpose: these rules replace .in's animation,
     so without it the guest falls back to its base opacity of 0 and storms
     out invisibly. */
  0%   { opacity: 1; color: var(--gold); transform: translateX(0) rotate(0deg) scale(1); }
  8%   { color: #E8776A; transform: translateX(-11px) rotate(-5deg) scale(1.04); }
  18%  { transform: translateX(12px) rotate(5deg) scale(1.04); }
  28%  { transform: translateX(-12px) rotate(-5deg) scale(1.06); }
  38%  { transform: translateX(11px) rotate(4deg) scale(1.06); }
  50%  { opacity: 1; color: #E8776A; transform: translateX(0) rotate(0deg) scale(1.12); }
  100% { color: #E8776A; opacity: 0; transform: translateX(-170px) rotate(-16deg) scale(0.86); }
}
/* The other temper: it recoils, stamps its foot twice, puffs up, and sweeps
   out the OTHER way, nose in the air. Same anger, different choreography. */
.serve-guest.huff { animation: serve-huff 1.2s ease forwards; }
@keyframes serve-huff {
  0%   { opacity: 1; color: var(--gold); transform: translate(0, 0) rotate(0deg) scale(1); }
  12%  { opacity: 1; color: #E8776A; transform: translate(15px, 0) rotate(4deg) scale(1.02); }
  26%  { transform: translate(-7px, -11px) rotate(-3deg) scale(1.09); }
  38%  { transform: translate(-7px, 7px) rotate(-2deg) scale(1.04); }
  50%  { transform: translate(-7px, -9px) rotate(-2deg) scale(1.1); }
  62%  { opacity: 1; color: #E8776A; transform: translate(-7px, 5px) rotate(1deg) scale(1.13); }
  100% { opacity: 0; color: #E8776A; transform: translate(155px, -30px) rotate(17deg) scale(0.85); }
}

/* The plated dish: evde, parkta, İstanbul'da. Root gold, suffix violet
   (morphemes.css), popping up under the customer as it eats. */
.serve-result {
  min-height: 1.5em;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3.6vw, 1.7rem);
  opacity: 0;
}
/* The fork, still in the word it was eaten with. Azure, like the button that
   served it, so the mark and the cutlery are visibly the same thing. */
.serve-forked { color: #74B0FF; }
.serve-result.pop { animation: serve-pop 0.5s ease forwards; }
@keyframes serve-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}

/* The tray: one azure fork, four round plates. */
.serve-tray {
  display: flex;
  align-items: center;
  gap: 0.9em;
}
.serve-plate {
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--gold);
  background: radial-gradient(circle at 50% 40%, rgba(243, 234, 216, 0.09), rgba(243, 234, 216, 0.02) 62%, transparent);
  border: 1px solid rgba(232, 193, 106, 0.4);
  box-shadow: inset 0 0 0 6px rgba(243, 234, 216, 0.05);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.serve-plate:hover, .serve-plate:focus-visible {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 6px rgba(243, 234, 216, 0.09), 0 0 12px rgba(232, 193, 106, 0.25);
  outline: none;
}
.serve-plate:active { transform: scale(0.92); }

/* The fork is the apostrophe. Azure, like every instruction; dashed until
   it is picked up, solid and lit while it waits for the plate. */
.serve-fork {
  position: relative; /* the label hangs off it */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1rem;
  color: #74B0FF;
  background: none;
  border: 1px dashed rgba(116, 176, 255, 0.45);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
/* An apostrophe and a comma are the same ink at different heights, so a
   centred serif quote reads as a comma. The sans cut is a straight tine, and
   it sits high in the circle where an apostrophe belongs (and where it looks
   most like the fork it stands for). */
.serve-fork-glyph {
  font-family: var(--sans);
  font-size: 3.6em;
  font-weight: 500;
  line-height: 0;
  transform: translateY(0.19em);
}
/* The tray tells you what the mark is. Text comes from the scene file. */
.serve-fork-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.4em;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  white-space: nowrap;
  color: #74B0FF;
  opacity: 0.8;
}
.serve-fork:hover, .serve-fork:focus-visible {
  border-color: rgba(116, 176, 255, 0.8);
  outline: none;
}
.serve-fork.on {
  border-style: solid;
  border-color: #74B0FF;
  background: rgba(116, 176, 255, 0.12);
  box-shadow: 0 0 12px rgba(116, 176, 255, 0.35);
}

@media (max-width: 560px) {
  .serve-tray { gap: 0.55em; }
  .serve-plate, .serve-fork { width: 3em; height: 3em; }
}

/* Reduced motion: nobody walks in, nobody storms out. The queue simply is,
   and a refusal fades. The temperaments survive as colour alone, since a
   word that shakes and rockets off is the definition of what this asks us
   not to do. */
@keyframes serve-fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .serve-wait { animation: none; }
  .serve-guest.in { animation: none; opacity: 1; }
  .serve-result.pop { animation: none; opacity: 1; }
  .serve-wait.gone { animation: serve-fade 0.35s ease forwards; }
  .serve-guest.happy { animation: serve-fade 0.7s ease forwards; }
  .serve-guest.furious,
  .serve-guest.huff { color: #E8776A; animation: serve-fade 0.7s ease forwards; }
}