/* =====================================================
   projects.css — projects.html 固有スタイル
   ===================================================== */

/* ===== SCROLL AREA ===== */
.scroll-area {
  position: relative;
  margin-top: 15vw;
  padding-bottom: 120px;
  padding-left: 15%; padding-right: 15%;
  overflow: visible;
}

/* ===== WAVY LINES (2本のウェービーライン) ===== */
body { position: relative; isolation: isolate; }
.wavy-svg {
  position: absolute; top: 0; left: 0;
  width: 100%; pointer-events: none;
  z-index: 0; overflow: visible;
}
.wavy-path {
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: none;
}
.wavy-path-a { stroke: var(--gold); stroke-width: 2.0; }
.wavy-path-b { stroke: var(--gold); stroke-width: 2.0; opacity: 0.7; }

/* ===== PROJECT SECTION ===== */
@keyframes sectionReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.proj-section {
  position: relative;
  width: 70%;
  margin-bottom: clamp(100px, 14vw, 160px);
  opacity: 0;
  contain: layout;   /* 各セクションのレイアウト計算を隔離 */
}
.proj-section.visible {
  animation: sectionReveal .75s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.proj-section.left  { margin-left: 0;    margin-right: auto; }
.proj-section.right { margin-left: auto; margin-right: 0;    }

/* プロジェクト番号 (JSでtop/leftを設定) */
.proj-num {
  position: absolute;
  font-family: var(--font-en);
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 300; line-height: 1;
  color: var(--gold);
  pointer-events: none; z-index: 0;
}

/* クラスター (JSでサイズを設定) */
.cluster { position: relative; }

/* ===== CARD BASE ===== */
.card {
  position: absolute; overflow: hidden;
  cursor: default;
  will-change: transform, opacity;   /* GPU レイヤーに昇格 */
  backface-visibility: hidden;       /* Chromium での余分な再描画を抑止 */
  transition: box-shadow .4s ease, transform .3s ease, border .3s ease, outline .25s ease .15s;
}
.card img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(78%) sepia(8%);
  transition: filter .5s, transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* サブカードを遅延フェードインしてペイントを分散 */
@keyframes cardFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.proj-section.visible .card.sub1 {
  animation: cardFadeIn .4s ease .2s both;
}
.proj-section.visible .card.sub2 {
  animation: cardFadeIn .4s ease .35s both;
}

/* メインカード (インタラクティブ) */
.card.main {
  z-index: 2; cursor: pointer;
  outline: solid 20px transparent;
}

/* 引力エフェクト中: メインカードのみ角丸なし */
.card.main.gathered {
  outline: solid 20px rgb(244, 241, 232);
}

.card.main:hover {
  box-shadow: 28px 28px 0px #84744a79;
  z-index: 10 !important; transform: translateY(-4px) !important;
}
.card.main:hover img { filter: saturate(100%) sepia(0%); transform: scale(1.04); }

/* カードオーバーレイ */
.card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 12, 4, 0)    0%,
    rgba(18, 12, 4, .55)  30%,
    rgba(18, 12, 4, .80)  50%,
    rgba(18, 12, 4, .55)  70%,
    rgba(18, 12, 4, 0)   100%
  );
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: clamp(14px, 2vw, 24px) 8vw;
  opacity: 0;
  transition: opacity .6s ease .2s;
  will-change: opacity;
  -webkit-transform: translateZ(0); /* Safari合成レイヤー強制 */
}
.card:hover .card-overlay { opacity: 1; transition: opacity .6s ease .1s; }
.card-overlay::before     { display: none; }

.card-overlay h2 {
  font-family: var(--font-ja);
  font-size: clamp(14px, 1.5vw, 20px); font-weight:500;
  color: rgba(255, 255, 255, 0.796); letter-spacing: .08em; line-height: 1.55;
  margin-bottom: 3px; text-align: center;
  transform: translateY(14px); transition: transform .5s ease .25s;
}
.card:hover .card-overlay h2 { transform: translateY(0); }

.card-overlay h3 {
  font-family: var(--font-en);
  font-size: clamp(12px, 1.1vw, 16px); font-weight: 500;
  color: #d4a843; letter-spacing: .1em;
  margin-bottom: 50px; text-align: center;
  transform: translateY(14px); transition: transform .5s ease .35s;
}
.card:hover .card-overlay h3 { transform: translateY(0); }

.card-overlay p {
  font-size: clamp(11px, .95vw, 14px); font-weight: 500;
  color: rgba(255, 255, 255, 0.796); line-height: 1.85;
  text-align: justify;
  transform: translateY(14px); transition: transform .5s ease .45s;
}
.card:hover .card-overlay p { transform: translateY(0); }

/* サブカードはメインより手前 */
.card.sub1 { z-index: 4; }
.card.sub2 { z-index: 4; }
.card.sub3 { z-index: 3; }
.card.sub4 { z-index: 3; }

/* サブカード3・4の遅延フェードイン */
.proj-section.visible .card.sub3 {
  animation: cardFadeIn .4s ease .48s both;
}
.proj-section.visible .card.sub4 {
  animation: cardFadeIn .4s ease .60s both;
}

/* ===== GHOST TITLE (PCのみ: ホバー時に余白へ大きく薄く表示) ===== */
.ghost-title {
  position: absolute;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 10vw;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  white-space: normal;
  word-break: break-word;
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.proj-section.ghost-active .ghost-title {
  opacity: 0.3;
}

/* ===== RESPONSIVE ===== */

/* タブレット (≤900px): タッチデバイス向け調整 */
@media (max-width: 900px) {
  nav a small { display: none; }
  .scroll-area  { padding-left: 8%; padding-right: 8%; }
  .proj-section { margin-bottom: clamp(70px, 10vw, 110px); }
  .ghost-title  { display: none !important; }

  /* オーバーレイを常時表示 */
  .card.main .card-overlay { opacity: 1; }
  .card.main .card-overlay h2,
  .card.main .card-overlay h3,
  .card.main .card-overlay p  { transform: none !important; }
  .card-overlay h3 {
    margin-bottom: 30px; 
  }
  .card-overlay p {
    font-size: clamp(12px, .95vw, 14px);
  }

  /* ホバーアニメーションを無効化 */
  .card,
  .card.main,
  .card img,
  .card.main img,
  .card.main .card-overlay { transition: none !important; }

  /* hover時のビジュアル変化をリセット */
  .card.main:hover {
    box-shadow:none;
    transform: none !important;
  }
  .card.main:hover img {
    filter: saturate(78%) sepia(8%) !important;
    transform: none !important;
  }

  /* mainカードをsubより常に上に */
  .card.main         { z-index: 5 !important; }
  .card.sub1,
  .card.sub2         { z-index: 3 !important; }
}

/* スマホ (≤600px): JSの絶対配置番号を非表示、HTML番号を表示 */
@media (max-width: 600px) {
  .proj-num     { display: none !important; }
  .proj-section { padding-top: 12px; }
  .proj-section-num {
    display: block;
    font-family: var(--font-en);
    font-size: clamp(36px, 10vw, 56px);
    font-weight: 300; line-height: 1;
    color: var(--gold);
    margin-bottom: 10px;
  }
  .scroll-area { margin-top: 8vw; }
}
@media (min-width: 601px) {
  .proj-section-num { display: none; }
}

/* スマホ横 / 小型タブレット (≤640px) */
@media (max-width: 640px) {
  nav        { display: none; }
  .hamburger { display: flex; }
  .scroll-area  { padding-left: 5%; padding-right: 5%; }
  .proj-section { margin-bottom: clamp(56px, 9vw, 90px); }
  .proj-section.left,
  .proj-section.right {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .card-overlay h2 { font-size: 13px; }
  .card-overlay h3 { font-size: 11px; margin-bottom: 20px; }
  .card-overlay p  { font-size: 12px; line-height: 2; }
  .card.main .card-overlay { opacity: 1; }
  .card.main .card-overlay h2,
  .card.main .card-overlay h3,
  .card.main .card-overlay p  { transform: none !important; }
  .card.main .card-overlay::before { transform: scaleX(1) !important; }
}

/* スマホ (≤420px) */
@media (max-width: 420px) {
  .scroll-area { padding-left: 4%; padding-right: 4%; }
  .proj-section.left,
  .proj-section.right { width: 96% !important; }
  .card-overlay h2 { font-size: 12px; }
  .card-overlay p  { font-size: 10px; line-height: 1.6; display: block; }
}