/* ---------- Bağlaç Gezegeni: the knot (b.bag) ---------- */

/* Bağlaç comes from bağ, a tie. Two halves of a sentence and the relative
   who holds them together. The engine's clock (js/engine.js, b.bag) adds
   the classes in order: a (the first half is here), tied (the relative has
   dropped into the gap), b (the second half is held), settled (one
   sentence). This file only says what each state looks like. */
.bag {
  margin-top: 1.4em;
  display: flex;
  justify-content: center;
  width: 100%;
}
.bag-row {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.35em;
  row-gap: 0.2em;
  padding: 0.5em 0.9em 0.75em;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.4vw, 1.8rem);
  line-height: 1.35;
  color: var(--cream);
  text-align: center;
}
.bag-a, .bag-b, .bag-knot {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.bag-a { transform: translateX(-18px); }
.bag-b { transform: translateX(18px); }
.bag-knot {
  transform: translateY(-26px) scale(1.25);
  padding: 0 0.28em;
  border-radius: 0.4em;
  font-style: italic;
}
.bag.a .bag-a { opacity: 1; transform: none; }
.bag.tied .bag-knot {
  opacity: 1;
  transform: none;
  background: rgba(232, 193, 106, 0.1);
  box-shadow: 0 0 0 1px rgba(232, 193, 106, 0.35);
}
.bag.b .bag-b { opacity: 1; transform: none; }

/* Ama Teyze: whatever you hand her comes back turned the other way. The
   second half arrives upside down and turns over. */
.bag-flip .bag-b { transform: rotateX(180deg); transform-origin: 50% 55%; }
.bag-flip.b .bag-b { transform: none; transition-duration: 0.45s, 0.9s; }
.bag-flip.tied .bag-knot { animation: bag-slam 0.45s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes bag-slam {
  0% { transform: translateY(-26px) scale(1.4); }
  60% { transform: translateY(2px) scale(0.96); }
  100% { transform: none; }
}

/* The thread: a gold line under the whole sentence, drawn from the knot
   outwards once both halves are held. */
.bag-thread {
  position: absolute;
  left: 0.9em;
  right: 0.9em;
  bottom: 0.3em;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 193, 106, 0.7) 20%, rgba(232, 193, 106, 0.7) 80%, transparent);
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.bag.settled .bag-thread { transform: scaleX(1); }
.bag.settled .bag-knot { box-shadow: 0 0 0 1px rgba(232, 193, 106, 0.5), 0 0 18px rgba(232, 193, 106, 0.18); }

@media (prefers-reduced-motion: reduce) {
  .bag-a, .bag-b, .bag-knot, .bag-thread { transition: none; animation: none; }
}

/* ---------- İle in her casual clothes: the clerk wearing -(y)lA (b.datif, suffix: "lA") ---------- */
/* The badge reads -lA: an l that never changes, already in the case pink,
   and an A that reads the last vowel. The badge is a letter wider than
   plain -A, so the row starts a little further left, the way -DA's does. */
.datif-smooth.datif-com .datif-a { --from: 3.5em; }
.datif-smooth.datif-com .datif-row { transform: translateX(-1.6em); }
.datif-smooth.datif-com.rolling .datif-row { transform: translateX(0); }
@media (max-width: 520px) {
  .datif-smooth.datif-com .datif-row { transform: translateX(-1.2em); }
  .datif-smooth.datif-com .datif-a { --from: 2.6em; }
}
@media (prefers-reduced-motion: reduce) {
  .datif-smooth.datif-com .datif-row { transition: none; transform: none; }
}
/* Two words in one beat stand one under the other. */
.datif + .datif { margin-top: 0.6em; }