/* ------------------------------------------------------------------
   DjangoThreekUtils.fly — 写した先へ文字が飛んで入る動き (.dtu-fly-*)

   PJ 所有 class は再定義せず、DTU 所有のものだけを定義する。
   札 (.dtu-fly-ghost) と一言 (.dtu-fly-hint) は body 直下に一時的に作り、終われば消す。
   呼ばれない画面には何も無いので no-op。
   ------------------------------------------------------------------ */

/* 飛ぶ札。位置 (left/top) と動き (transform) は JS が書く。
   見た目を pj で変えたいときは fly.to の className で class を足す。 */
.dtu-fly-ghost {
  position: fixed;
  top: 0;
  left: 0;
  /* 🚨 DTU の重なりの最上段より上 (dialog.yesno / viewer = 2147483640、datepicker = 2147483641)。
     飛ぶのは確認ダイアログや DTU の窓 (2147482000) の中からもありうるので、Bootstrap のモーダル
     (1050 系) 基準にすると窓の下に隠れて「押しても何も起きない」に戻る。ほんの一瞬しか出ず
     pointer-events: none なので、上に描いてもクリックは奪わない。 */
  z-index: 2147483642;
  box-sizing: border-box;
  max-width: 20rem;
  padding: 2px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  transform-origin: left top;
}

/* 見えない所へ入ったときの一言。枠の端 (入る先の方向) に一瞬だけ出す。
   animation の長さはここに書かない — dtu-fly.js が HINT_MS を animation-duration に書き、
   同じ時間で消す (時間の正本を JS の 1 か所にするため)。 */
.dtu-fly-hint {
  position: fixed;
  z-index: 2147483642; /* 札と同じ理由 (上の .dtu-fly-ghost を参照) */
  transform: translateX(-50%);
  padding: 3px 14px;
  border-radius: 999px;
  background: #1f2937;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  animation: dtu-fly-hint ease-out forwards;
}

@keyframes dtu-fly-hint {
  0% { opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* 読み上げ専用の領域 (見た目には出さない)。JS が 1 つだけ作って使い回す。
   ライブリージョンは「前からある領域の中身が変わった」ときに読まれるため、毎回作り直さない。 */
.dtu-fly-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 着地した要素を光らせる。PJ の枠線や背景は触らず、外側に広がる輪だけを足す。 */
.dtu-fly-lit {
  animation: dtu-fly-lit 0.7s ease-out;
}

@keyframes dtu-fly-lit {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
}

/* 動きを減らす設定の人には、輪を広げず静かに縁取るだけ。一言もふわっと出さずそのまま出す。 */
@media (prefers-reduced-motion: reduce) {
  .dtu-fly-hint {
    animation: none;
  }

  .dtu-fly-lit {
    animation: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45);
  }
}