/* =========================================================
   動き（PC / SP 共通）
   方針: 自動で動くのは「MV のオープニング」と「ロゴ帯」だけ。
         それ以外は、押す・乗せる・開くといった操作に反応する動きに限る。
   - 動く量はすべて prefers-reduced-motion: no-preference のときだけ。
     「視差効果を減らす」設定の人には、最初から完成した状態を見せる。
   - 既存の transform（矢印の回転・中央寄せ）を壊さないよう、
     移動・拡大は transform ではなく translate / scale プロパティで行う。
   - 速さ・イージングは tokens.css の --ease-* / --dur-*。
   ========================================================= */

/* ---------- フォーカス（キーボード操作で今どこにいるか） ---------- */
:focus-visible { outline: 2px solid var(--color-theme); outline-offset: 4px; border-radius: 4px; }
.about :focus-visible, .works :focus-visible, .contact :focus-visible { outline-color: var(--color-beige); }

/* ---------- 色の変化（視差効果を減らす設定でも残す） ---------- */
.btn-more, .btn-contact, .news-card__title, .gnav__sub a, .contact__title > span[aria-hidden] {
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out),
    background-size var(--dur-hover) var(--ease-out);
}
@media (hover: hover) {
  .btn-more:hover, .header .btn-contact:hover { background-color: var(--color-theme-deep); }
  .news-card a:hover .news-card__title { color: var(--color-theme); }
}

/* ---------- Contact: 丸枠の CONTACT がベージュで塗りつぶされ、文字が黒に反転する ----------
   丸枠（tone のロゴの o と同じ形）を「押せるボタン」として見せる。SP はタップ中に反転 */
.contact__title::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; /* 枠線との間にすき間が出ないよう少し広げる */
  background: var(--color-beige); clip-path: inset(0 100% 0 0 round 999px);
}
.contact__title > span[aria-hidden] { z-index: 1; }
.contact__cta:is(:hover, :focus-visible, :active) .contact__title::before { clip-path: inset(0 0 0 0 round 999px); }
.contact__cta:is(:hover, :focus-visible, :active) .contact__title > span[aria-hidden] { color: var(--color-black); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* ---------- MV オープニング（ページ全体で唯一の演出） ----------
     "heart and more" を左から順に下からせり上げ、o の中の写真を中心から左右に開く。
     波形は左から描かれ、最後に本文とヘッダーが静かに現れる。合計 約 2 秒。 */
  .mv__heart, .mv__and, .mv__m, .mv__o, .mv__r, .mv__e, .mv__tagline {
    animation: mv-rise 1.1s var(--ease-out) both;
  }
  .mv__heart   { animation-delay: 0.10s; }
  .mv__and     { animation-delay: 0.28s; }
  .mv__m       { animation-delay: 0.38s; }
  .mv__o       { animation-delay: 0.48s; }
  .mv__r       { animation-delay: 0.58s; }
  .mv__e       { animation-delay: 0.66s; }
  .mv__tagline { animation-delay: 0.95s; animation-name: mv-fade; }
  .mv__photo { animation: mv-photo 1.3s var(--ease-out) 0.55s both; }
  .mv__photo > img { animation: mv-photo-img 1.8s var(--ease-out) 0.55s both; }
  .mv__wave { animation: mv-wipe 1.8s var(--ease-in-out) 0.45s both; }

  /* ---------- 背景の波形: ゆっくり横に流れ続ける ----------
     SVG 1 枚（--wave-w）分だけ動かすと、繰り返しの位置が元に戻るので継ぎ目なくループする。
     端で縦線が急に消えないよう、両端をぼかす */
  .wave { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .wave::before { animation: wave-flow var(--dur-wave) linear infinite; }
  .wave--md-dark::before, .wave--md-footer::before { animation-duration: var(--dur-wave-md); }
  @keyframes wave-flow { to { translate: calc(var(--wave-w) * -1) 0; } }
  .mv__intro, .mv__contact, .mv__scroll { animation: mv-fade 1s var(--ease-out) 1.35s both; }
  .header { animation: mv-fade 1s var(--ease-out) 1.2s both; }
  /* SCROLL DOWN の矢印だけ、オープニング後にゆっくり上下させて下へ促す */
  .mv__scroll img { animation: mv-nudge 1.8s var(--ease-in-out) 2.4s infinite alternate; }

  @keyframes mv-rise { from { opacity: 0; translate: 0 32%; } to { opacity: 1; translate: 0 0; } }
  @keyframes mv-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mv-photo { from { clip-path: inset(0 50% 0 50% round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
  @keyframes mv-photo-img { from { scale: 1.25; } to { scale: 1; } }
  @keyframes mv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes mv-nudge { from { translate: 0 -2px; } to { translate: 0 4px; } }

  /* ---------- ロゴ帯（"heart and more" が流れ続ける） ----------
     A・B 2 ユニット分動かすと最初と同じ並びに戻るので、継ぎ目なくループする。
     ホバー中は止める。 */
  .marquee__track { animation: marquee var(--dur-marquee-pc) linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  @keyframes marquee { to { translate: -2067.2px 0; } }  /* 1033.6px × 2 */

  /* ---------- 画面に入ったときの表示（写真と図だけ。文章は動かさない） ----------
     .has-reveal は main.js が付ける（JS が動かない環境では最初から表示）。 */
  .pill-photo[data-reveal] { transition: clip-path var(--dur-reveal) var(--ease-out); }
  .pill-photo[data-reveal] > img { transition: scale 1.8s var(--ease-out); }
  .has-reveal .pill-photo[data-reveal]:not(.is-in) { clip-path: inset(100% 0 0 0); }
  .has-reveal .pill-photo[data-reveal]:not(.is-in) > img { scale: 1.12; }

  /* About の図: 汲み取る → デザインする → 伝える の順に現れる */
  [data-reveal="venn"] > * { transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out); }
  .has-reveal [data-reveal="venn"]:not(.is-in) > * { opacity: 0; translate: 0 12px; }
  [data-reveal="venn"] .venn-word--design { transition-delay: 0.3s; }
  [data-reveal="venn"] .venn-icon--star { transition-delay: 0.3s; }
  [data-reveal="venn"] .venn-word--convey, [data-reveal="venn"] .venn-icon--convey { transition-delay: 0.6s; }

  /* ---------- ボタン・リンク（押せることを矢印の動きで伝える） ---------- */
  /* ナビ・CONTACT ボタンの文字: 下から同じ文字がせり上がって入れ替わる */
  .roll > span, .roll::after { transition: translate var(--dur-roll) var(--ease-out); }
  :is(a, button):is(:hover, :focus-visible) > .roll > span,
  :is(a, button):is(:hover, :focus-visible) > .roll::after { translate: 0 -100%; }

  /* CONTACT の塗り */
  .contact__title::before { transition: clip-path 0.7s var(--ease-out); }

  /* 文中のおばけ: 画面に入ったとき 1 回だけ、ひょこっと顔を出す */
  .has-reveal .contact__ghost:not(.is-in) { opacity: 0; }
  .contact__ghost.is-in { animation: ghost-peek 1.1s var(--ease-out) 0.3s both; transform-origin: 50% 100%; }
  @keyframes ghost-peek {
    0% { opacity: 0; translate: 0 12px; rotate: 0deg; }
    55% { opacity: 1; translate: 0 -5px; rotate: -8deg; }
    80% { translate: 0 0; rotate: 4deg; }
    100% { opacity: 1; translate: 0 0; rotate: 0deg; }
  }

  .btn-more img, .btn-contact img, .contact__go img, .contact__top img, .mv__contact img, .news-card__thumb img {
    transition: translate var(--dur-hover) var(--ease-out), rotate var(--dur-hover) var(--ease-out);
  }
  @media (hover: hover) {
    .btn-more:hover img { translate: 4px 0; }
    .contact__cta:hover .contact__go img { translate: 10px 0; }
    .contact__top:hover img { translate: 0 -4px; }
    .btn-contact:hover img, .mv__contact:hover img { rotate: -8deg; }
    .news-card a:hover .news-card__thumb img { translate: 0 -6px; }
  }
}

/* ---------- PC ---------- */
@media (min-width: 1024px) {
  /* サブメニューの項目: 左の短い線と同じ線が、文字の下に伸びる */
  .gnav__sub a {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    padding-bottom: 2px;
  }
  @media (hover: hover) {
    .gnav__sub a:hover { background-size: 100% 1.5px; }
  }

  /* サブメニューの開閉（開く・閉じるの判定は style.css）
     ＋ の縦棒が倒れて − になり、短い線が伸びてから項目が上から順に現れる */
  @media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .gnav__plus::after { transition: rotate var(--dur-ui) var(--ease-in-out); }
    .gnav__sub { transition: opacity 0.25s var(--ease-out), visibility 0s linear 0.25s; }
    .gnav__sub::before { scale: 0 1; transform-origin: left center; transition: scale 0.3s var(--ease-out); }
    .gnav__sub li { opacity: 0; translate: 0 -6px; transition: opacity 0.2s var(--ease-out), translate 0.2s var(--ease-out); }
    .gnav__has-sub:is(:hover, :focus-within) .gnav__sub { transition: opacity 0.25s var(--ease-out), visibility 0s; }
    .gnav__has-sub:is(:hover, :focus-within) .gnav__sub::before { scale: 1 1; }
    .gnav__has-sub:is(:hover, :focus-within) .gnav__sub li {
      opacity: 1; translate: 0 0; transition-duration: 0.5s; transition-delay: 0.12s;
    }
    .gnav__has-sub:is(:hover, :focus-within) .gnav__sub li + li { transition-delay: 0.2s; }
  }
}

/* ---------- SP ---------- */
@media (max-width: 1023px) {
  @media (prefers-reduced-motion: no-preference) {
    .marquee__track { animation-duration: var(--dur-marquee-sp); animation-name: marquee-sp; }
    @keyframes marquee-sp { to { translate: -761.8px 0; } }  /* 380.9px × 2 */

    /* メニュー: 緑の面が上から下りてきて、項目が少し遅れて順に現れる */
    .gnav {
      clip-path: inset(0 0 100% 0);
      transition: clip-path var(--dur-ui) var(--ease-in-out), visibility 0s linear var(--dur-ui);
    }
    .header.is-open .gnav {
      clip-path: inset(0 0 0 0);
      transition: clip-path var(--dur-ui) var(--ease-in-out), visibility 0s;
    }
    .gnav__list > li, .gnav .btn-contact {
      opacity: 0; translate: 0 14px;
      transition: opacity 0.25s var(--ease-out), translate 0.25s var(--ease-out);
    }
    .header.is-open .gnav__list > li, .header.is-open .gnav .btn-contact {
      opacity: 1; translate: 0 0;
      transition-duration: 0.6s;
      transition-delay: calc(0.22s + var(--i, 0) * 0.06s);
    }
    .gnav__list > li:nth-child(2) { --i: 1; }
    .gnav__list > li:nth-child(3) { --i: 2; }
    .gnav__list > li:nth-child(4) { --i: 3; }
    .gnav .btn-contact { --i: 4; }
    .sp-menu { transition: color var(--dur-ui) var(--ease-in-out); }
    .sp-menu__roll > span { transition: translate var(--dur-ui) var(--ease-in-out); }
  }
}