@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- Lenis (Smooth Scroll) 必須設定 --- */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* --- カスタムCSS --- */
body {
  cursor: none;
  background-color: #050505; /* 初期の背景色は黒 */
  overflow-x: hidden;
  /* Lenisを使う場合、ここに scroll-behavior: smooth; を書かないこと。
     Lenisが制御するためです。
  */
}

.bg-black-haci {
  background-color: #050505 !important;
}

/* カスタムカーソル */
#cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  /* ブランドイエローに変更 */
  background-color: #f5c518;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, background-color 0.3s;
  /* differenceモードについて:
     - 黒背景(#000)の上 → #F5C518 (黄色) に見えます
     - 白背景(#FFF)の上 → #0A3A97 (濃い青) に見えます（補色反転）
     - 黄背景(#F5C518)の上 → 黒っぽく見えます
     視認性は確保されます。
  */
  mix-blend-mode: difference;
}

#cursor.hovered {
  width: 60px;
  height: 60px;
  background-color: transparent;
  /* ボーダーもブランドイエローに */
  border: 1px solid #f5c518;
}

/* アニメーション用 */
.js-fade-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 {
  transition-delay: 0.1s;
}
.delay-200 {
  transition-delay: 0.2s;
}
.delay-300 {
  transition-delay: 0.3s;
}

/* ユーティリティ */
.img-overflow {
  overflow: hidden;
  position: relative;
}
.poster-img {
  transition: opacity 0.5s ease;
  z-index: 10;
}
.group:hover .poster-img {
  opacity: 0;
}
.video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s ease-out;
}

/* スクロール再生用 */
.js-scroll-video.is-playing .poster-img {
  opacity: 0;
  filter: grayscale(0);
}
.js-scroll-video.is-playing video {
  opacity: 1;
}

/* Worksテキストアニメーション */
.work-text-title {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-text-sub {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.1s;
}
.js-scroll-video.is-playing .work-text-title,
.js-scroll-video.is-playing .work-text-sub {
  opacity: 1;
  transform: translateY(0);
}

/* メニュー開閉アニメーション */
body.menu-open #menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open .menu-link {
  transform: translateY(0);
  opacity: 1;
}
body.menu-open .menu-link:nth-child(1) {
  transition-delay: 0.1s;
}
body.menu-open .menu-link:nth-child(2) {
  transition-delay: 0.2s;
}
body.menu-open .menu-link:nth-child(3) {
  transition-delay: 0.3s;
}
body.menu-open .menu-link:nth-child(4) {
  transition-delay: 0.4s;
}

body.menu-open #line-top {
  transform: translateY(5px) rotate(45deg);
  background-color: #f5c518; /* ブランドイエロー */
}
body.menu-open #line-bottom {
  width: 2rem;
  transform: translateY(-5px) rotate(-45deg);
  background-color: #f5c518;
}

/* HACI.STUDIO コンタクトフォーム用カスタムカラー */

/* 入力欄：フォーカス時の枠線色と、青枠の削除 */
.haci-input-focus:focus {
  border-color: #ffcc00 !important; /* 下線を黄色に */
  outline: none !important; /* デフォルトの枠線を消す */
  box-shadow: none !important; /* ブラウザの影（リング）を消す */
}

/* 送信ボタン：ホバー時の背景色 */
.haci-btn-hover:hover {
  background-color: #ffcc00 !important;
  color: #000000 !important;
}

/* ドロップダウンなどの背景色用 */
.haci-bg-black {
  background-color: #050505 !important;
  color: #ffffff !important;
}

/* 送信ボタンをテキストリンク風にするカスタムCSS */
.haci-submit-minimal {
  background-color: transparent !important; /* 背景透明 */
  border: none !important;
  border-bottom: 1px solid #ffffff !important; /* 下線のみ白 */
  border-radius: 0 !important;
  color: #ffffff !important; /* 文字色白 */
  padding: 0 0 10px 0 !important; /* パディング調整 */
  text-align: left !important;
  width: auto !important; /* 横幅なりゆき */
  -webkit-appearance: none !important; /* iPhone等のデフォルトスタイル削除 */
}

/* ホバー時の動き */
.haci-submit-minimal:hover {
  color: #ffcc00 !important; /* 文字黄色 */
  border-bottom-color: #ffcc00 !important; /* 下線黄色 */
  padding-right: 20px !important; /* 少し右に動くアニメーション */
}

/* single-works.php 用のスタイル */
/* 本文内のYouTube埋め込みなどをレスポンシブに */
.entry-content iframe,
.entry-content video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin-bottom: 2rem;
}

/* 画像 */
.entry-content img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 2rem;
}

/* 見出し */
.entry-content h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid #ffcc00;
  padding-left: 1rem;
}

.entry-content h3 {
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* 段落 */
.entry-content p {
  margin-bottom: 1.5rem;
}

/* リンク */
.entry-content a {
  color: #ffcc00;
  text-decoration: underline;
}

/* NEWS一覧のスタイル */
/* ページネーションのスタイル */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #333;
  margin: 0 4px;
  transition: all 0.3s;
}

.page-numbers.current,
.page-numbers:hover:not(.dots) {
  background-color: #ffcc00;
  color: #050505;
  border-color: #ffcc00;
}

.page-numbers.dots {
  border: none;
  color: #666;
}

.page-numbers.prev,
.page-numbers.next {
  border: none;
  width: auto;
  border: none !important;
}

/* NEWS詳細ページのスタイル */
/* 記事本文内のスタイル調整（フォント指定は親要素に任せる） */
.post-content h2 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 3em;
  margin-bottom: 1em;
  color: white;
  letter-spacing: -0.02em;
}

.post-content h3 {
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: 2.5em;
  margin-bottom: 1em;
  color: #ffcc00;
}

.post-content p {
  margin-bottom: 2em;
  text-align: justify;
  line-height: 2;
}

/* 行間を広めに確保 */
.post-content img {
  width: 100%;
  height: auto;
  margin: 2em 0;
  border-radius: 4px;
}

.post-content a {
  color: #ffcc00;
  border-bottom: 1px solid #ffcc00;
  padding-bottom: 1px;
  transition: opacity 0.3s;
}

.post-content a:hover {
  opacity: 0.7;
}

.post-content blockquote {
  border-left: 2px solid #ffcc00;
  padding-left: 1.5em;
  color: #999;
  margin: 2em 0;
}

.post-content ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 2em;
  color: #ccc;
}

.post-content ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin-bottom: 2em;
  color: #ccc;
}