/* Uniform Day: Fiil Gezegeni's gift ceremony (js/tasks/hediye.js).
   Shared task classes (.pill, .task-note, .love meter) stay in base.css;
   everything hediye-only lives here. The resident is an emoji face over its
   dashed gold name; the gift boxes wear the two harmony colors. */

.hd-hall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4em;
  margin-top: 1.2em;
}

/* The queue: the residents still waiting, fading toward the back. */
.hd-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em;
  min-height: 2.2em;
}
.hd-wait {
  --o: 0.75;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.18em 0.3em;
  opacity: var(--o);
  animation: hd-walk-in 0.75s cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
}
.hd-wait:nth-child(2) { --o: 0.6; }
.hd-wait:nth-child(3) { --o: 0.46; }
.hd-wait:nth-child(4) { --o: 0.34; }
.hd-wait:nth-child(5) { --o: 0.24; }
@keyframes hd-walk-in {
  from { opacity: 0; transform: translate(var(--fx, 140px), var(--fy, 0)) scale(0.8); }
  to   { opacity: var(--o); transform: none; }
}
.hd-wait.gone { animation: hd-step-up 0.42s ease forwards; }
@keyframes hd-step-up {
  to { opacity: 0; transform: translateY(28px) scale(0.85); }
}

/* The counter: one resident, its dashed name, and the full name it becomes. */
.hd-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  min-height: 7.2em;
}
.hd-face {
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  line-height: 1.1;
  opacity: 0;
}
.hd-guest {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4.4vw, 2rem);
  line-height: 1.15;
  opacity: 0;
}
.hd-face.in, .hd-guest.in { animation: hd-in 0.45s ease forwards; }
@keyframes hd-in {
  from { opacity: 0; transform: translateX(-42px); }
  to   { opacity: 1; transform: none; }
}
/* Uniformed: a little hop of pride, then off to the database photo. */
.hd-face.happy { animation: hd-happy 1.6s ease forwards; }
.hd-guest.happy { animation: hd-happy 1.6s ease 0.06s forwards; }
@keyframes hd-happy {
  0%   { opacity: 1; transform: none; }
  18%  { opacity: 1; transform: translateY(-10px); }
  30%  { opacity: 1; transform: none; }
  60%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(76px); }
}
/* Refused: the box is handed back, the shoulders say everything, and the
   resident walks off to the back of the queue. */
.hd-face.no { animation: hd-no 1.15s ease forwards; }
.hd-guest.no { animation: hd-no 1.15s ease 0.05s forwards; }
@keyframes hd-no {
  0%   { opacity: 1; transform: translateX(0) rotate(0deg); }
  12%  { transform: translateX(-9px) rotate(-4deg); }
  26%  { transform: translateX(9px) rotate(4deg); }
  40%  { transform: translateX(-8px) rotate(-3deg); }
  54%  { opacity: 1; transform: translateX(0) rotate(0deg); }
  100% { opacity: 0; transform: translateX(-150px) scale(0.88); }
}

/* The full name, assembled: gitmek, gold, scannable. */
.hd-result {
  min-height: 1.5em;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3.6vw, 1.7rem);
  opacity: 0;
}
.hd-result.pop { animation: hd-pop 0.5s ease forwards; }
@keyframes hd-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}

/* The table: one gift box per suffix, each wearing its harmony color (--gc
   comes inline from the scene file's gifts list). The bow is the box's only
   decoration: a ribbon crossing, drawn with two thin bars. */
.hd-table {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1em;
}
.hd-gift {
  --gc: var(--gold);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 4.6em;
  height: 3.9em;
  padding-bottom: 0.45em;
  border-radius: 0.55em;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--gc);
  background: linear-gradient(180deg, rgba(243, 234, 216, 0.08), rgba(243, 234, 216, 0.02));
  border: 1px solid var(--gc);
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}
.hd-bow::before, .hd-bow::after {
  content: '';
  position: absolute;
  background: var(--gc);
  opacity: 0.55;
  pointer-events: none;
}
/* the vertical ribbon */
.hd-bow::before { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
/* the lid seam */
.hd-bow::after { left: 0; right: 0; top: 0.85em; height: 1px; }
.hd-gift-label {
  position: relative;
  z-index: 1;
  font-size: 1.25em;
  background: var(--void-top, #0B0A1F);
  padding: 0 0.25em;
  border-radius: 0.3em;
}
.hd-gift:hover, .hd-gift:focus-visible {
  box-shadow: 0 0 14px color-mix(in srgb, var(--gc) 40%, transparent);
  outline: none;
}
.hd-gift:active { transform: scale(0.93); }

@media (max-width: 560px) {
  .hd-table { gap: 0.7em; }
  .hd-gift { width: 4em; height: 3.5em; }
}

/* Reduced motion: nobody walks, nobody hops. Arrivals and results simply
   appear; a refusal fades. */
@keyframes hd-fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hd-wait { animation: none; }
  .hd-face.in, .hd-guest.in { animation: none; opacity: 1; }
  .hd-result.pop { animation: none; opacity: 1; }
  .hd-wait.gone { animation: hd-fade 0.35s ease forwards; }
  .hd-face.happy, .hd-guest.happy { animation: hd-fade 0.7s ease forwards; }
  .hd-face.no, .hd-guest.no { animation: hd-fade 0.7s ease forwards; }
}