/* ---------- Datif Gezegeni: the pointing (b.datif) ---------- */

/* The visual grammar of the Planet of Direction. One word standing still,
   and Datif, the suffix -A, a little way off to the right wearing a badge
   shaped like an arrowhead. The experiencer taps him and the pointing plays
   out, stage by stage, and the wings are different pointings: rolling (he
   walks up), looking (the word's last vowel lights in its family colour),
   the A turning into a or e, then one of (latched) / (clashing, bridged) /
   (bending) / (the last letter turning soft) / nothing, then hooked, then
   settled, then the pull. The stages are classes on .datif-box driven by
   the engine's clock (js/engine.js, b.datif), so this file only ever
   describes a state and never the order. The two-way harmony wears the two
   family hexes in --fam, the same as VOWEL_COLOR in the engine. */
.datif {
  margin-top: 1.6em;
  display: flex;
  justify-content: center;
}
.datif-row {
  position: relative;
  display: flex;
  align-items: baseline;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.8vw, 2.2rem);
  line-height: 1.3;
  color: var(--cream);
}
/* The word: gold because it is Turkish, letter by letter so the deciding
   vowel can light up, the last letter can turn soft, and a pronoun's e can
   bend. A pronoun wears the one azure, the way ben, sen and o do. */
.datif-word {
  display: inline-flex;
  align-items: baseline;
  color: var(--gold);
}
.datif-word.datif-pronoun { color: var(--azure, #74B0FF); }
.datif-ch, .datif-last { display: inline-block; }
.datif-vowel, .datif-last, .datif-bent { transition: color 0.4s ease, text-shadow 0.4s ease; }

/* The gap: the latch and the bridge live here, folded to nothing until
   their stage. */
.datif-gap {
  display: inline-flex;
  align-items: baseline;
}
.datif-latch, .datif-bridge {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-1.2em);
  transition: max-width 0.4s ease, opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.datif-latch { color: var(--lavender); }
.datif-bridge { color: var(--pink, #F2A0C4); }

/* Datif: a button that reads as a badge, not a button. Cream on a thin rim
   with a point on its left edge aimed at the word, a dash and the capital A
   he has not chosen yet. He waits a little way to the right of the word. */
.datif-a {
  position: relative;
  display: inline-block;
  font: inherit;
  color: var(--cream);
  background: none;
  border: 1px solid rgba(243, 234, 216, 0.35);
  border-radius: 0.3em;
  padding: 0 0.32em 0 0.42em;
  margin-left: 0.7em;
  cursor: pointer;
  transform: translateX(2.4em);
  transition: transform 0.9s cubic-bezier(0.35, 0.6, 0.3, 1), margin-left 0.5s ease,
    border-color 0.4s ease, padding 0.5s ease;
  will-change: transform;
}
/* The point of the arrowhead. */
.datif-a::before {
  content: '';
  position: absolute;
  left: -0.42em;
  top: 50%;
  width: 0.55em;
  height: 0.55em;
  margin-top: -0.28em;
  border-left: 1px solid rgba(243, 234, 216, 0.35);
  border-bottom: 1px solid rgba(243, 234, 216, 0.35);
  transform: rotate(45deg);
  transition: opacity 0.4s ease, border-color 0.4s ease;
}
.datif-a:hover, .datif-a:focus-visible {
  text-shadow: 0 0 14px rgba(232, 193, 106, 0.8);
  border-color: rgba(232, 193, 106, 0.6);
}
.datif-a:hover::before, .datif-a:focus-visible::before { border-color: rgba(232, 193, 106, 0.6); }
.datif-a:focus-visible { outline: none; }
.datif-dash {
  display: inline-block;
  max-width: 1em;
  color: var(--lavender);
  opacity: 0.8;
  transition: max-width 0.4s ease, opacity 0.4s ease;
}
/* The A inside the badge: the letter that is not a letter yet. */
.datif-slot {
  display: inline-block;
  transition: color 0.3s ease;
}
.datif-slot.chosen {
  color: var(--fam, var(--gold));
  text-shadow: 0 0 14px currentColor;
}
/* Waiting: the clerk shifts his weight. */
.datif-box:not(.rolling) .datif-a { animation: datif-idle 1.6s ease-in-out infinite; }
@keyframes datif-idle {
  0%, 100% { transform: translateX(2.4em) translateY(0); }
  50% { transform: translateX(2.4em) translateY(-2px); }
}

/* ROLLING: he walks up to the word and stops short of it. */
.datif-box.rolling .datif-a { transform: translateX(0.5em); }

/* LOOKING: the word's last vowel lights in its family colour. That is what
   he is reading, and it stays lit from here on. */
.datif-box.looking .datif-vowel {
  color: var(--fam, var(--gold));
  text-shadow: 0 0 16px currentColor;
}

/* TURNING: a letter flips on its edge and comes back as another letter.
   The A becomes a or e; a pronoun's e becomes a; a final k becomes ğ. */
.datif-slot.turning, .datif-last.turning, .datif-bent.turning {
  animation: datif-turn 0.64s cubic-bezier(0.4, 0, 0.4, 1);
}
@keyframes datif-turn {
  0% { transform: rotateX(0deg) scale(1); }
  45% { transform: rotateX(90deg) scale(1.35); text-shadow: 0 0 22px rgba(232, 193, 106, 0.95); }
  55% { transform: rotateX(-90deg) scale(1.35); text-shadow: 0 0 22px rgba(232, 193, 106, 0.95); }
  100% { transform: rotateX(0deg) scale(1); }
}

/* LATCHED (the airport, the post office): a name is a VIP. The apostrophe
   drops in between the name and the clerk, and the clerk hangs outside it. */
.datif-box.latched .datif-latch {
  max-width: 0.5em;
  opacity: 0.9;
  transform: translateY(0);
}

/* CLASHING (the telescope, o): the word's last vowel and the clerk's vowel
   stand nose to nose, and neither will give ground. clash-shake is in
   base.css. */
.datif-box.clashing .datif-last,
.datif-box.clashing .datif-slot { animation: clash-shake 0.4s ease infinite; }
.datif-box.clashing .datif-slot { animation-delay: 0.2s; }
/* BRIDGED: y (or o's private n) drops in from above and lies down between
   the two vowels. */
.datif-box.bridged .datif-bridge {
  max-width: 1em;
  opacity: 1;
  transform: translateY(0);
  text-shadow: 0 0 12px currentColor;
}

/* BENDING (the post office): the pull is so strong the pronoun buckles. The
   whole word leans towards the clerk while its e turns into a. */
.datif-box.bending .datif-word { animation: datif-buckle 1.2s ease; }
@keyframes datif-buckle {
  0% { transform: none; }
  30% { transform: skewX(-12deg) translateX(0.12em); }
  60% { transform: skewX(8deg); }
  100% { transform: none; }
}
.datif-bent.bent-done {
  color: var(--fam, var(--gold));
  text-shadow: 0 0 14px currentColor;
}

/* HOOKED: the clerk steps onto the word. The dash, the rim, the point and
   the gap all go, because he is part of a word now, not a badge. */
.datif-box.hooked .datif-dash { max-width: 0; opacity: 0; }
.datif-box.hooked .datif-a {
  transform: none;
  margin-left: 0;
  padding: 0;
  border-color: transparent;
}
.datif-box.hooked .datif-a::before { opacity: 0; }

/* SETTLED: the pointed form takes the stage as scannable markup, glows
   warm and lifts once. */
.datif-box.settled .datif-row {
  animation: datif-settle 0.7s ease;
  text-shadow: 0 0 18px rgba(232, 193, 106, 0.45);
}
@keyframes datif-settle {
  0% { transform: scale(1); }
  35% { transform: scale(1.12) translateY(-4px); }
  100% { transform: scale(1); }
}
/* THE PULL: loose dust from all around slides in towards the word. A word
   wearing -A is where things go. */
.datif-pull {
  position: absolute;
  left: 50%;
  top: 40%;
  font-size: 0.9em;
  color: var(--gold);
  pointer-events: none;
  animation: datif-pull 1.1s cubic-bezier(0.3, 0, 0.7, 1) forwards;
}
@keyframes datif-pull {
  0% { opacity: 0; transform: translate(var(--hx, 80px), var(--hy, -40px)) scale(1); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(0, 0) scale(0.3); }
}

/* THE SMOOTH SKIN (.datif-smooth; Ahmet 2026-09-05: the look of Şimdi's
   mission beats, ported from css/simdi.css .simdi-smooth). Glass instead of
   a rim: the clerk is a soft rounded chip with a faint fill and a shadow, he
   travels on a long eased curve and lands with a small settle, letters
   MORPH (fade, blur, lift) instead of flipping on their edge, the two
   vowels lean at each other instead of shaking, and the finished word
   blooms. Everything the engine schedules stays the same; only what each
   stage looks like changes. */
.datif-smooth .datif-a {
  color: var(--cream);
  background: rgba(243, 234, 216, 0.06);
  border: 1px solid rgba(243, 234, 216, 0.14);
  border-radius: 0.5em;
  padding: 0.05em 0.42em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1), margin-left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.7s ease, background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}
.datif-smooth .datif-a::before { display: none; }
.datif-smooth .datif-a:hover, .datif-smooth .datif-a:focus-visible {
  text-shadow: none;
  border-color: rgba(232, 193, 106, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 18px rgba(232, 193, 106, 0.18);
}
.datif-smooth:not(.rolling) .datif-a { animation: datif-float 2.6s ease-in-out infinite; }
@keyframes datif-float {
  0%, 100% { transform: translateX(var(--from, 3.2em)) translateY(0); }
  50% { transform: translateX(var(--from, 3.2em)) translateY(-1.5px); }
}
.datif-smooth .datif-a { --from: 3.2em; }
/* Landing: a small overshoot, then rest. */
.datif-smooth.rolling:not(.hooked) .datif-a { animation: datif-land 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes datif-land {
  0% { transform: translateX(var(--from, 3.2em)) scale(1); }
  70% { transform: translateX(0.42em) scale(1.02); }
  100% { transform: translateX(0.5em) scale(1); }
}
.datif-smooth.hooked .datif-a {
  animation: none;
  transform: none;
  margin-left: 0;
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
/* Reading: the vowel breathes up into its colour rather than snapping. */
.datif-smooth .datif-vowel { transition: color 0.9s ease, text-shadow 0.9s ease; }
.datif-smooth.looking .datif-vowel { text-shadow: 0 0 22px currentColor; }
/* Morphing: the old letter dissolves upward, the new one condenses in. */
.datif-smooth .datif-slot.turning, .datif-smooth .datif-last.turning, .datif-smooth .datif-bent.turning {
  animation: datif-morph 0.64s ease-in-out;
}
@keyframes datif-morph {
  0% { opacity: 1; filter: blur(0); transform: translateY(0); }
  45% { opacity: 0; filter: blur(4px); transform: translateY(-0.35em); }
  55% { opacity: 0; filter: blur(4px); transform: translateY(0.3em); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.datif-smooth .datif-slot.chosen, .datif-smooth .datif-bent.bent-done { transition: color 0.5s ease, text-shadow 0.5s ease; }
/* Leaning: the two vowels tilt toward each other, no shaking. */
.datif-smooth.clashing .datif-last { animation: datif-lean-r 0.5s ease-in-out infinite; }
.datif-smooth.clashing .datif-slot { animation: datif-lean-l 0.5s ease-in-out infinite; }
@keyframes datif-lean-r { 50% { transform: translateX(3px) rotate(4deg); } }
@keyframes datif-lean-l { 50% { transform: translateX(-3px) rotate(-4deg); } }
/* Centred on every screen: the clerk waits to the RIGHT by transform, which
   the layout does not see, so the row leans left by half of what stands out
   and eases back to centre as he comes in. */
.datif-smooth .datif-row { transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1); transform: translateX(-1.4em); }
.datif-smooth.rolling .datif-row { transform: translateX(0); }
@media (max-width: 520px) {
  .datif-smooth .datif-row { font-size: clamp(1.25rem, 5.6vw, 1.7rem); transform: translateX(-1em); }
  .datif-smooth .datif-a { --from: 2.2em; padding: 0.05em 0.3em; margin-left: 0.4em; }
}
/* Bloom: the finished word warms and breathes once. The pull dust still
   slides in, because that is the lesson, not decoration. */
.datif-smooth.settled .datif-row { animation: datif-bloom 1.4s ease-out; text-shadow: 0 0 18px rgba(232, 193, 106, 0.35); }
@keyframes datif-bloom {
  0% { transform: scale(1); text-shadow: 0 0 0 rgba(232, 193, 106, 0); }
  40% { transform: scale(1.04); text-shadow: 0 0 34px rgba(232, 193, 106, 0.7); }
  100% { transform: scale(1); text-shadow: 0 0 18px rgba(232, 193, 106, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .datif-smooth .datif-a, .datif-smooth .datif-slot.turning, .datif-smooth .datif-last.turning,
  .datif-smooth .datif-bent.turning, .datif-smooth.settled .datif-row, .datif-smooth.clashing .datif-last,
  .datif-smooth.clashing .datif-slot, .datif-smooth.bending .datif-word { animation: none; }
  .datif-smooth .datif-row { transition: none; transform: none; }
}

/* Reduced motion: the engine settles the word straight from the tap, so
   none of the staging plays; the GESTURE is never skipped, Datif still has
   to be tapped. */
@media (prefers-reduced-motion: reduce) {
  .datif-a, .datif-last, .datif-dash, .datif-slot, .datif-vowel, .datif-latch, .datif-bridge, .datif-bent { transition: none; }
  .datif-box:not(.rolling) .datif-a { animation: none; }
  .datif-slot.turning, .datif-last.turning, .datif-bent.turning, .datif-box.settled .datif-row, .datif-pull,
  .datif-box.clashing .datif-last, .datif-box.clashing .datif-slot, .datif-box.bending .datif-word { animation: none; }
  .datif-pull { opacity: 0; }
}