/* HaraTeck 合同会社 コーポレートサイト ― 追加スタイル
   Tailwind CDN で表現しきれない部分のみをここに置く。 */

:root {
  --color-primary:    #18181B;
  --color-foreground: #09090B;
  --color-accent:     #2563EB;
  --color-accent-soft:#EFF4FE;
  --color-background: #FAFAFA;
  --color-muted:      #E8ECF0;
  --color-border:     #E4E4E7;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-feature-settings: "palt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Focus-visible: キーボード操作時だけ明確なリング */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* インタラクティブな要素にポインタを明示 */
a, button, summary, [role="button"] {
  cursor: pointer;
}

/* ヘッダーがスクロール後に背景を得る用クラス (JS から付ける) */
#site-header.is-scrolled {
  background-color: rgba(250, 250, 250, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--color-border);
}

/* ---- reveal (IntersectionObserver でフェードイン) ---- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Reduced motion: アニメを無効化 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 和文の読みやすさ */
p, li, dd, dt, blockquote {
  line-height: 1.8;
}

/* Tailwind typography の prose に乗る日本語の読みやすさ調整 */
.prose :where(p, li) {
  line-height: 1.9;
}

/* セレクション色はインラインで指定済み */

/* モバイルメニュー展開時に body のスクロールは維持（ここではロックしない） */

/* prose 内 code を控えめに */
.prose code {
  background: var(--color-muted);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: 500;
}
.prose code::before,
.prose code::after {
  content: "";
}