/* トップの動き（motion.js が html に .motion を付けたときだけ効く）。中身・配置は変えない。
   印刷・動きを減らす設定・JS なしでは、はじめから全部見えている。 */
@media screen {
  /* 文：下からふわっと。同時に入ったものは motion.js が少しずつずらす。
     :where で詳細度を下げ、下の .is-in が必ず勝つようにする */
  .motion main[data-reveal] :where(.index-title, .index-list li, .section-label, .ch-body > p, .ch-body > dl > div, .ch-body > .sub-title, .ch-body > .maker, .ch-body > aside, .promise-title, .vision > p, .promise li) {
    opacity: 0; transform: translateY(20px);
    transition: opacity 1s ease var(--m-delay, 0ms), transform 1.2s cubic-bezier(.16,1,.3,1) var(--m-delay, 0ms);
  }
  .motion main[data-reveal] .is-in { opacity: 1; transform: none; }

  /* 縦書きの見出し：一行ずつ、上から墨がにじむように書かれていく */
  .motion .ch-title.tate:not([data-split]) { visibility: hidden; }
  .ch-title .m-line { display: block; }
  .motion .ch-title .m-line {
    -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 58%); mask-image: linear-gradient(180deg, #000 42%, transparent 58%);
    -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 100%; mask-position: 0 100%;
    transition: -webkit-mask-position 1.6s cubic-bezier(.45,0,.2,1), mask-position 1.6s cubic-bezier(.45,0,.2,1);
    transition-delay: calc(var(--m-delay, 0ms) + var(--line, 0) * 520ms);
  }
  .motion .ch-title.is-in .m-line { -webkit-mask-position: 0 0; mask-position: 0 0; }

  /* 「目指すこと」「しないこと」の縦の列も、右の列から順に上から書く（PC・タブレット） */
  @media (min-width: 761px) {
    .motion main[data-reveal] :is(.promise-title, .vision > p, .promise li) {
      opacity: 1; transform: none;
      -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 58%); mask-image: linear-gradient(180deg, #000 42%, transparent 58%);
      -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-position: 0 100%; mask-position: 0 100%;
      transition: -webkit-mask-position 1.5s cubic-bezier(.45,0,.2,1) calc(var(--m-delay, 0ms) * 2.6), mask-position 1.5s cubic-bezier(.45,0,.2,1) calc(var(--m-delay, 0ms) * 2.6);
    }
    .motion main[data-reveal] :is(.promise-title, .vision > p, .promise li).is-in { -webkit-mask-position: 0 0; mask-position: 0 0; }
  }

  /* 四つの仕事：指を置くと、上の線が左から灯る */
  .index-list a { position: relative; }
  .index-list a::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--champagne); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.16,1,.3,1); }
  .index-list a:is(:hover, :focus-visible)::before { transform: scaleX(1); }
  .index-list .index-text { transition: color .4s ease; }
  .index-list a:hover .index-text { color: var(--on-night); }

  .hero-photo img { will-change: translate; }
}