/*
 * アニメーション
 *
 * 方針は2つ。
 *   1. 動きは「塗る」動作に寄せる。斜線は下から伸び、縦組みは読む向きに現れる。
 *      要素が跳ねたり回ったりはしない。塗装会社のサイトで浮ついて見えると困る。
 *   2. 位置は変えない。移動は24px以内、不透明度と切り抜きが主役。
 *      大きく動かすとスクロール中に読めない時間が生まれる。
 *
 * `.has-anim` は wp_head のインラインスクリプトが <html> に付ける。
 * JSが無い環境ではこのファイルの指定は一切効かず、最初から見えている。
 */

/* ---------------------------------------------------------- 基本の出現 */

.has-anim [data-reveal],
.has-anim [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.has-anim [data-reveal].is-in,
.has-anim [data-reveal-group].is-in > * {
  opacity: 1;
  transform: none;
}

/* 順に現れる。80msずつずらすと、速すぎず待たされもしない。 */
.has-anim [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 80ms; }
.has-anim [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 160ms; }
.has-anim [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 240ms; }
.has-anim [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 320ms; }
.has-anim [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 400ms; }
.has-anim [data-reveal-group].is-in > *:nth-child(7) { transition-delay: 440ms; }
.has-anim [data-reveal-group].is-in > *:nth-child(8) { transition-delay: 480ms; }
.has-anim [data-reveal-group].is-in > *:nth-child(9) { transition-delay: 520ms; }

/* 9個を超える一覧は待ち時間が目立つので、そこで頭打ちにする。 */
.has-anim [data-reveal-group].is-in > *:nth-child(n+10) { transition-delay: 560ms; }

/* ---------------------------------------------------------- セクション見出し */

/*
 * ゴールドの斜線は下端から伸びる。rotate のあとに scaleY を掛けているので、
 * 傾いた軸に沿って伸びる＝一筆で引いたように見える。
 */
.has-anim .section-head > .section-head__rule,
.has-anim .page-head__inner > .page-head__rule {
  opacity: 1;
  transform: rotate(var(--angle-rule)) scaleY(0);
  transform-origin: bottom center;
  transition: transform 700ms var(--ease);
}

.has-anim .section-head.is-in > .section-head__rule,
.has-anim .page-head__inner.is-in > .page-head__rule {
  transform: rotate(var(--angle-rule)) scaleY(1);
}

/*
 * 欧文ラベル・見出し・リードの遅れは、上の nth-child の段差がそのまま効く
 * （80 / 160 / 240ms）。斜線が伸びきる前に見出しが出るので間延びしない。
 */

/* ---------------------------------------------------------- ローディング */

/*
 * 進捗はロゴが白く塗られていく量で示す。
 * 棒グラフを別に置かないのは、このサイトで進捗を表すなら
 * 「塗られていく」以外にないため。読み込みも塗装も、少しずつ面が埋まる。
 *
 * 8秒の保険は wp_head のインラインスクリプトが持っている（inc/enqueue.php）。
 * CSSアニメーションでも試したが、長いdelayの指定はブラウザによって発火せず、
 * ローディングが居座った。ここではCSSに保険を持たせない。
 */
.has-anim .loader {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 200;
  /*
   * 中央に置かない。ヘッダーのロゴと同じ左のガターに揃えることで、
   * ローディングが引いたあとヘッダーへ視線が続く。
   * このサイトは本文の中央揃えを使わないという規律で通している。
   */
  align-content: center;
  justify-content: start;
  justify-items: start;
  gap: var(--sp-4);
  padding-inline: var(--gutter);
  background: var(--navy-deep);
}

.has-anim .loader.is-done {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity 550ms var(--ease),
    transform 550ms var(--ease),
    visibility 550ms;
}

.loader__logo {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2rem, 6vw, 3.25rem);
  letter-spacing: .04em;
  line-height: 1;
}

/* 塗られる前。輪郭だけ見えている状態。 */
.loader__base {
  color: rgba(255, 255, 255, .22);
}

/*
 * 塗られた分。--p を0%から100%へ動かすと左から白く埋まる。
 * 内側の span を折り返さないでおくことで、幅が変わっても字が動かない。
 */
.loader__fill {
  position: absolute;
  inset: 0;
  width: var(--p, 0%);
  overflow: hidden;
  color: var(--paper);
  transition: width 400ms var(--ease);
}

.loader__fill > span {
  display: block;
  white-space: nowrap;
}

.loader__name {
  font-size: var(--fs-small);
  letter-spacing: .24em;
  color: rgba(255, 255, 255, .55);
}

/* ---------------------------------------------------------- Hero */

/*
 * 導入の順番は「文字 → 白いペンキ → 写真」。
 *
 *   0.12s  キャッチが右から左へ出る（読む向き）
 *   0.45s  リード、0.65s「創業40年」
 *   0.90s  白いペンキが左から右へ、写真の面を塗りつぶす
 *   1.60s  ペンキが乾くように引き、
 *   1.55s  その下から写真がふわっと現れる
 *
 * 塗る → 現れる、という順にしているのは、写真が「塗り上がったもの」に
 * 見えるようにするため。先に写真を出してから塗ると、単に何かで隠しただけになる。
 */

.has-anim .hero__catch,
.has-anim .hero__lead,
.has-anim .hero__foot {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

.has-anim .hero.is-in .hero__catch { transition-delay: 120ms; }
.has-anim .hero.is-in .hero__lead { transition-delay: 450ms; }
.has-anim .hero.is-in .hero__foot { transition-delay: 650ms; }

.has-anim .hero.is-in .hero__catch,
.has-anim .hero.is-in .hero__lead,
.has-anim .hero.is-in .hero__foot {
  opacity: 1;
  transform: none;
}

/*
 * 白いペンキ。前縁だけが刷毛の形をした帯で、右へ140pxはみ出させてある。
 * 左から右へ動かすと、刷毛の縁が写真の面を塗りつぶしていく。
 * 親（.hero__media）に20度のマスクが効いているので、白も同じ形に切り抜かれる。
 */
.has-anim .hero__paint {
  /* 刷毛の縁の幅。狭い画面で140pxのままだと、写真の面に対して縁が太すぎる。 */
  --wipe: 140px;

  display: block;
  position: absolute;
  inset: 0 calc(var(--wipe) * -1) 0 0;
  z-index: 1;
  background: var(--paper);
  pointer-events: none;
  -webkit-mask-image: url(../images/mask/brush-wipe.png), linear-gradient(#000, #000);
  mask-image: url(../images/mask/brush-wipe.png), linear-gradient(#000, #000);
  -webkit-mask-size: var(--wipe) 100%, calc(100% - var(--wipe)) 100%;
  mask-size: var(--wipe) 100%, calc(100% - var(--wipe)) 100%;
  -webkit-mask-position: right center, left center;
  mask-position: right center, left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: translateX(-102%);
  transition:
    transform 700ms var(--ease) 900ms,
    opacity 550ms linear 1600ms;
}

@media (max-width: 767px) {
  .has-anim .hero__paint {
    --wipe: 72px;
  }
}

.has-anim .hero.is-in .hero__paint {
  transform: translateX(0);
  opacity: 0;
}

/* 写真はペンキの下で待ち、ペンキが引くのに合わせて現れる。 */
.has-anim .hero__media img {
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 800ms var(--ease) 1550ms,
    transform 1600ms var(--ease) 1550ms;
}

.has-anim .hero.is-in .hero__media img {
  opacity: 1;
  transform: none;
}

/*
 * 導入中はヘッダーを出さない。
 * 透過ヘッダーの文字は白なので、白いペンキが左上を通るとロゴが消える。
 * 塗りが通り過ぎてから出す。JSは開始時にクラスを付けるだけで、
 * 戻すタイミングはアニメーション側（forwards）に任せる。
 */
.has-anim body.hatta-intro .site-header {
  opacity: 0;
  animation: hatta-header-in 600ms var(--ease) 1700ms forwards;
}

@keyframes hatta-header-in {
  to {
    opacity: 1;
  }
}

/*
 * 2回目以降は演出を飛ばす。
 * 同じセッション内でページを行き来するたびに2秒待たされるのは煩わしい。
 * クラスはJSが sessionStorage を見て付ける。
 */
.has-anim .hero.no-intro .hero__paint {
  display: none;
}

.has-anim .hero.no-intro .hero__catch,
.has-anim .hero.no-intro .hero__lead,
.has-anim .hero.no-intro .hero__foot,
.has-anim .hero.no-intro .hero__media img {
  transition: none;
}

@media (min-width: 1024px) {

  /*
   * 縦組みは読む向き（右から左）に現れる。左のinsetを100%から0へ動かすと、
   * 右端から左へ塗り広げたように列が出てくる。
   * 横組みのSPでは向きが逆になるので、この幅でしか使わない。
   */
  .has-anim .hero__catch {
    clip-path: inset(0 0 0 100%);
    transform: none;
    transition:
      opacity 200ms var(--ease),
      clip-path 1100ms var(--ease);
  }

  .has-anim .hero.is-in .hero__catch {
    clip-path: inset(0 0 0 0);
  }
}

/* ---------------------------------------------------------- ホバー */

/*
 * 押せるものだけ反応させる。事業内容・工程・安全の写真はリンクではないので
 * 動かさない。動く＝押せる、を崩さない。
 */

.work-list a {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}

.work-list a:hover {
  transform: translateX(4px);
}

.voice-card {
  transition: border-left-color var(--dur-base) var(--ease);
}

.voice-card:hover {
  border-left-color: var(--gold-dark);
}

/* ---------------------------------------------------------- 減らす設定 */

/*
 * prefers-reduced-motion では tokens.css が duration を潰すが、
 * それだけでは opacity:0 のまま止まる可能性がある。確実に見せる。
 */
@media (prefers-reduced-motion: reduce) {

  .has-anim [data-reveal],
  .has-anim [data-reveal-group] > *,
  .has-anim .hero__catch,
  .has-anim .hero__lead,
  .has-anim .hero__foot {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .has-anim .hero__media img {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ペンキが画面の途中で止まったままになると写真が隠れる。出さない。 */
  .has-anim .hero__paint {
    display: none !important;
  }

  .has-anim body.hatta-intro .site-header {
    opacity: 1 !important;
    animation: none !important;
  }

  .has-anim .section-head > .section-head__rule,
  .has-anim .page-head__inner > .page-head__rule {
    transform: rotate(var(--angle-rule)) !important;
  }

  .work-list a:hover {
    transform: none !important;
  }
}