/*
 * トップの「動き」まわり。参考は tonmana.co.jp。
 *
 * 中身は3つ。
 *   1. 社名が流れ続ける帯（マーキー）
 *   2. 見出しが1文字ずつ立ち上がる
 *   3. 帯の視差（スクロールに対して少しずれて動く）
 *
 * マーキーは translateX だけで作る。同じ中身を2つ並べて、
 * 1つ分ぶん動かして先頭に戻す。継ぎ目が出ないのはこのため。
 * JS で位置を計算する作りにすると、スクロールのたびに再計算が
 * 走って重くなるので、CSS アニメーションに寄せている。
 */

:root {
  --lh-accent: #e4581e;
  --lh-ink: #1a1a1a;
}

/* ---------- 1. 流れる社名 ---------- */

.lh-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1.6rem 0;
  user-select: none;
  pointer-events: none;
}

.lh-marquee__track {
  display: flex;
  width: max-content;
}

.lh-marquee__row {
  display: flex;
  flex: none;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem;
  white-space: nowrap;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  letter-spacing: 0.06em;
  line-height: 1;
}

.lh-marquee--left .lh-marquee__row {
  animation: lh-marquee-left 42s linear infinite;
}

.lh-marquee--right .lh-marquee__row {
  animation: lh-marquee-right 58s linear infinite;
}

@keyframes lh-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes lh-marquee-right {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* 塗り。主張しすぎると本文が読めなくなるので薄く敷く */
.lh-marquee--ghost .lh-marquee__row {
  color: transparent;
  -webkit-text-stroke: 1px rgba(26, 26, 26, 0.18);
}

.lh-marquee--solid .lh-marquee__row {
  color: rgba(26, 26, 26, 0.06);
}

.lh-marquee--accent {
  background: var(--lh-ink);
}

.lh-marquee--accent .lh-marquee__row {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
}

.lh-marquee--accent .lh-marquee__sep {
  color: var(--lh-accent);
}

.lh-marquee__sep {
  font-size: 0.5em;
  transform: translateY(-0.15em);
}

/* 帯を重ねる箱。ヒーローの下に敷いて、地の模様として使う */
.lh-marquee-stack {
  position: relative;
  padding: clamp(2rem, 6vw, 5rem) 0;
  overflow: hidden;
}

.lh-marquee-stack .lh-marquee + .lh-marquee {
  margin-top: -0.4em;
}

/* ---------- 2. 見出しの文字送り ---------- */

/*
 * 1文字ずつ span に割ってから、下から出す。
 * overflow:hidden の枠に入れて、枠の外から入ってくるように見せる。
 */
.lh-split {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.lh-split__char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

.lh-split.is-in .lh-split__char {
  transform: none;
  opacity: 1;
  transition:
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s linear;
}

/* 空白は詰まって見えるので幅を確保する */
.lh-split__char--space {
  width: 0.35em;
}

/* ---------- 3. 視差 ---------- */

.lh-parallax {
  will-change: transform;
}

/* ---------- 動きを減らす設定の人には止める ---------- */

@media (prefers-reduced-motion: reduce) {
  .lh-marquee__row {
    animation: none !important;
  }
  .lh-split__char {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .lh-parallax {
    transform: none !important;
  }
}