/* ============================================================
   app/static/css/style.css
   Sprint 4.36: アクセシビリティ対応・UX ポリッシュ
   accessibility.agent.md / se-ux-ui-designer.agent.md 知見適用
   ============================================================ */

/* ---- AC3: .sr-only — スクリーンリーダー専用要素（視覚的非表示） ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- AC5: :focus-visible — キーボードフォーカス可視化 ---- */
/* ドロップゾーン */
.hero-zone:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 3px;
}

/* ボタン類 */
button:focus-visible,
#submit:focus-visible,
#reset-btn:focus-visible,
#download-btn:focus-visible,
#hz-change-file-btn:focus-visible,
#hz-prev-btn:focus-visible,
#hz-next-btn:focus-visible,
#rebuild-btn:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* フォーム要素 */
select:focus-visible,
input[type="number"]:focus-visible,
input[type="checkbox"]:focus-visible,
textarea:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* リンク */
a:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* ---- AC6: .dropzone--dragover — ドラッグオーバー状態 ---- */
.dropzone--dragover {
  border: 2px dashed #005fcc !important;
  background-color: #e8f0fe !important;
  box-shadow:
    0 22px 48px rgba(0, 95, 204, 0.16),
    0 0 0 3px rgba(0, 95, 204, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
}

/* ---- B. UX ポリッシュ: 変換成功アニメーション ---- */
@keyframes conversionSuccess {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  60% {
    opacity: 1;
    transform: translateY(-1px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.conversion-success {
  animation: conversionSuccess 0.3s ease-out both;
}