/* =========================================================
   KARI — work.css（Workページだけの見た目）
   共通の色・フォント・サイズは style.css の :root で設定しています。
   ---------------------------------------------------------
   1. Workページの設定値（位置・大きさ・動き）
   2. 写真の配置
   3. ページを横切る線とブランド名
   4. 選択状態（hover / キーボードのfocus）
   5. 動きを減らす設定
   6. ページ出現モーションの順番
   7. スマートフォン（画面幅760px以下）
   ========================================================= */


/* ---------------------------------------------------------
   1. 設定値
   --------------------------------------------------------- */
.page-work {
  /* 写真 */
  --work-photo-height: 52.8vh;   /* 写真の高さ（画面の高さに対する割合） */
  --work-photo-ratio: 2 / 3;     /* 縦長 2:3 */
  --work-photo-gap: 2.15vw;      /* 2枚の間隔 */
  --work-left: 26.16vw;          /* 左の写真の左端 */
  --work-stagger: 3.83vh;        /* 左は下へ・右は上へずらす量 */

  /* 横線の位置・長さは style.css の共通設定（--line-top など）を使います */

  /* ブランド名 */
  --font-size-work-name: clamp(18px, 1.6vw, 40px);

  /* 選択状態 */
  --work-select-duration: 1.4s;                       /* 選択状態が完成するまで */
  --work-release-duration: 0.9s;                      /* 選択を外した時に戻るまで */
  --work-ease: cubic-bezier(0.22, 0.61, 0.36, 1);     /* 静かに減速する動き */
  --work-opacity-selected: 0.75;
  --work-opacity-other: 0.46;
  --work-lift: -4px;                                  /* 浮き上がる量 */
  --work-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);      /* ごく薄い影 */

  height: 100vh;
  overflow: hidden;
}


/* ---------------------------------------------------------
   2. 写真の配置
   左の写真は少し下、右の写真は少し上。2枚の中心が線の高さにそろいます。
   --------------------------------------------------------- */
.work-list {
  position: absolute;
  top: calc(var(--line-top) - var(--work-photo-height) / 2);
  left: calc(var(--work-left) - var(--work-photo-gap) / 2);
  display: flex;
}
.work-item {
  --offset: var(--work-stagger);          /* 1枚目・3枚目…：下へ */
  position: relative;
  top: var(--offset);
}
.work-item:nth-child(even) {
  --offset: calc(var(--work-stagger) * -1); /* 2枚目・4枚目…：上へ */
}

/* 写真全体がリンク。左右に間隔の半分ずつ余白を持たせ、
   2枚の間をカーソルが通っても選択が途切れないようにしています */
.work-link {
  display: block;
  padding: 0 calc(var(--work-photo-gap) / 2);
}
.work-link:hover { opacity: 1; }          /* 共通のリンクhover（薄くなる）を打ち消す */
.work-link:focus-visible { outline: none; }

.work-photo {
  display: block;
  transition:
    transform var(--work-release-duration) var(--work-ease),
    box-shadow var(--work-release-duration) var(--work-ease);
}
.work-image {
  height: var(--work-photo-height);
  width: auto;
  max-width: none;
  aspect-ratio: var(--work-photo-ratio);
  object-fit: cover;
  background: var(--color-image-placeholder);
  transition: opacity var(--work-release-duration) var(--work-ease);
}


/* ---------------------------------------------------------
   3. ページを横切る1本の線 と ブランド名
   線は「移動」せず、左端を起点に長さだけが変わります。
   出現：左 → 右へ伸びる ／ 消失：右端から左へ縮む
   --------------------------------------------------------- */
/* 線そのもの（.page-line）は style.css の共通部品。
   Workページでは、ふだんは長さ0で、写真を選んだ時だけ伸びます */
.work-brands .page-line {
  transform: scaleX(0);
  transition: transform var(--work-release-duration) var(--work-ease) 0.1s;
}

.work-name {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--offset));  /* 線の高さ */
  z-index: 3;
  transform: translate(-50%, -76%);
  font-family: var(--font-serif);
  font-size: var(--font-size-work-name);
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--work-ease);
}


/* ---------------------------------------------------------
   4. 選択状態
   写真にカーソルを置く／Tabキーで移動すると、
   写真・影・線・ブランド名が同じ1.4秒で一緒に変化します。
   --------------------------------------------------------- */

/* どれか1枚が選ばれている時：選ばれていない写真は淡く */
.work-list:has(.work-link:is(:hover, :focus-visible)) .work-image {
  opacity: var(--work-opacity-other);
  transition-duration: var(--work-select-duration);
}

/* 選ばれた写真（上の行より優先されるよう .work-list から書いています） */
.work-list .work-link:is(:hover, :focus-visible) .work-image {
  opacity: var(--work-opacity-selected);
  transition-duration: var(--work-select-duration);
}
.work-link:is(:hover, :focus-visible) .work-photo {
  transform: translateY(var(--work-lift));
  box-shadow: var(--work-shadow);
  transition-duration: var(--work-select-duration);
}
.work-link:is(:hover, :focus-visible) .work-name {
  opacity: 1;
  transition-duration: var(--work-select-duration);
}

/* 線：どちらの写真が選ばれていても同じ1本が伸びたまま。
   写真を移った時は消えずに、ブランド名だけが切り替わります */
.work-brands:has(.work-link:is(:hover, :focus-visible)) .page-line {
  transform: scaleX(1);
  transition-duration: var(--work-select-duration);
  transition-delay: 0s;
}

/* キーボード操作の時だけ、写真の外側に細い枠を表示 */
.work-link:focus-visible .work-photo {
  outline: 1px solid var(--color-text);
  outline-offset: 6px;
}


/* ---------------------------------------------------------
   5. 動きを減らす設定がONの時
   動きは止めますが、選ばれた写真・ブランド名・線はそのまま表示されます。
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .work-photo,
  .work-image,
  .work-brands .page-line,
  .work-name {
    transition: none !important;
  }
  .work-link:is(:hover, :focus-visible) .work-photo {
    transform: none;
  }
}


/* ---------------------------------------------------------
   6. ページ出現モーションの順番（動き自体は style.css の共通設定）
   work → brand → niejta → floreisen の順に、ごく小さな時間差で現れます
   --------------------------------------------------------- */
.page-work .page-title    { --enter-order: 0; }
.page-work .page-subtitle { --enter-order: 1; }
.work-item:nth-child(1) .work-photo { --enter-order: 2; }
.work-item:nth-child(2) .work-photo { --enter-order: 3; }


/* ---------------------------------------------------------
   6-2. タブレット（画面幅761〜1199px）
   PCと同じ2枚横並び。縦長の画面でも写真が右のナビにかからないよう、
   写真の高さの上限を画面の幅に合わせます（2枚の右端がナビの手前に収まる大きさ）
   --------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1199px) {
  .page-work {
    --work-photo-height: min(52.8vh, 39vw);
  }
}


/* ---------------------------------------------------------
   7. スマートフォン（画面幅760px以下）
   ・左に floreisen、右に niejta。どちらも画面の左右の端で見切れます（意図したデザイン）
   ・中央に work / brand。それを貫く縦の線が、ページを開いている間くり返し動きます
     伸びる 1.7秒 → 表示 2.8秒 → 上から下へ消える 1.7秒 → 非表示 2.8秒 → くり返し
   ・PCのホバー表現（透明度・影・ブランド名）は使いません
   ・タップした時のページ移動（消える → 白い画面 → 次のページ）は main.js の「7.」
   --------------------------------------------------------- */
@media (max-width: 760px) {
  .page-work {
    --sp-work-top: 49.17vw;          /* 画像の上位置 */
    --sp-work-width: 51.37vw;        /* 画像1枚の幅（縦長 2:3） */
    --sp-work-left: -7.76vw;         /* 左の画像（floreisen）の左端。画面の外から始まる */
    --sp-work-right: 56.33vw;        /* 右の画像（niejta）の左端。画面の外まで続く */
    --sp-vline-overhang: 4.75vw;     /* 縦の線が画像の上辺・下辺からはみ出す長さ（上下同じ） */
    --sp-vline-top: calc(var(--sp-work-top) - var(--sp-vline-overhang));
    --sp-vline-height: calc(var(--sp-work-width) * 1.5 + var(--sp-vline-overhang) * 2);
    --sp-vline-cycle: 9s;            /* 1.7 + 2.8 + 1.7 + 2.8 秒 */
  }

  /* work / brand は画面の中央に */
  .page-work .page-heading {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  /* 画像 */
  .page-work .work-list {
    top: var(--sp-work-top);
    left: 0;
    width: 100%;
    height: calc(var(--sp-work-width) * 1.5);
    display: block;
    overflow: hidden;                /* 画面の外へはみ出た部分を切り取り、横にスクロールしないように */
  }
  .page-work .work-item {
    position: absolute;
    top: 0;
    width: var(--sp-work-width);
  }
  .page-work .work-item:nth-child(1) { left: var(--sp-work-right); }
  .page-work .work-item:nth-child(2) { left: var(--sp-work-left); }
  .page-work .work-link { padding: 0; }
  .page-work .work-image {
    width: 100%;
    height: auto;
  }

  /* PCのホバー表現は使わない */
  :root .page-work .work-list .work-image { opacity: 1; }
  :root .page-work .work-list .work-photo { transform: none; box-shadow: none; }
  .page-work .work-name { display: none; }

  /* 縦の線 */
  :root .page-work .work-brands .page-line {
    top: var(--sp-vline-top);
    left: 50%;
    width: var(--sp-line-weight);
    height: var(--sp-vline-height);
    background: var(--sp-line-color);
    transform: none;
    transform-origin: center top;
    transition: none;
  }
  .page-pre .page-work .page-line { opacity: 0; }
  .page-entering .page-work .page-line {
    animation: work-vline-loop var(--sp-vline-cycle) linear infinite backwards;
    animation-delay: var(--enter-stagger);
  }
}

/* 縦の線のくり返し（9秒で1周）
   0〜1.7秒：上から下へ伸びる / 〜4.5秒：表示 / 〜6.2秒：上から下へ消える / 〜9秒：非表示 */
@keyframes work-vline-loop {
  0%       { transform: scaleY(0); transform-origin: center top;    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  18.889%  { transform: scaleY(1); transform-origin: center top; }
  50%      { transform: scaleY(1); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  68.889%  { transform: scaleY(0); transform-origin: center bottom; }
  100%     { transform: scaleY(0); transform-origin: center bottom; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .page-entering .page-work .page-line { animation: none; }
}