/* =============================================================================
   motion.css — セクション横断で共有するスクロール演出
   読みの単位ごとに data-motion（title / copy / media / cta …）と --enter の値（0 → 1）を持ち、
   js/motion.js がスクロール位置から --enter を進める。JS なし・一時停止中・
   prefers-reduced-motion のいずれでも内容は完全に表示される。
   ============================================================================= */

[data-motion] {
  --enter: 1;
}

.scroll-choreography [data-motion] {
  transition: opacity .12s linear, transform .16s var(--motion-ease),
    clip-path .16s var(--motion-ease);
}

/* 大きなタイトルは自身のベースラインから現れる。本文の移動量はそれより小さい。 */
.scroll-choreography [data-motion="title"] {
  opacity: var(--enter);
  transform: translate3d(0, calc((1 - var(--enter)) * 38px), 0);
  clip-path: inset(-12% -8% calc((1 - var(--enter)) * 95%) -8%);
}

.scroll-choreography [data-motion="copy"] {
  opacity: var(--enter);
  transform: translate3d(0, calc((1 - var(--enter)) * 22px), 0);
}

/* 画像は固定された矩形の中で開く。内側の動きがレイアウトを変えることはない。 */
.scroll-choreography [data-motion="media"] {
  opacity: 1;
  clip-path: inset(0 calc((1 - var(--enter)) * 100%) 0 0 round var(--photo-radius));
}

.scroll-choreography .culture-card:nth-child(even) [data-motion="media"],
.scroll-choreography .company-gallery figure:nth-child(even)[data-motion="media"] {
  clip-path: inset(0 0 0 calc((1 - var(--enter)) * 100%) round var(--photo-radius));
}

.scroll-choreography [data-motion="media"] > img {
  transform: translate3d(0, var(--photo-y, 0px), 0)
    scale(calc(1.09 + (1 - var(--enter)) * .08));
  /* ここでも scale を明示している。ホバーズーム（.hover-zoom、components.css）が scale に
     乗っており、このショートハンドで上書きするとそのトランジションが消えてズームがカクつくため。 */
  transition: transform .3s var(--motion-ease), scale .6s var(--motion-ease);
}

.scroll-choreography .culture-card-media > img {
  transform: translate3d(0, var(--photo-y, 0px), 0)
    scale(calc(1.09 + (1 - var(--enter)) * .07));
}

/* 主張のあとに応答が続く。CTA は矢印とともに最後に現れる。 */
.scroll-choreography [data-motion="cta"] {
  opacity: var(--enter);
  transform: translate3d(0, calc((1 - var(--enter)) * 16px), 0);
}

.scroll-choreography [data-motion="cta"] .arrow {
  translate: calc((1 - var(--enter)) * -13px) calc((1 - var(--enter)) * 13px);
}

.scroll-choreography [data-motion].is-visible {
  clip-path: none;
}

.scroll-choreography .case-heading [data-motion="title"] {
  transform: translateX(calc((1 - var(--enter)) * -34px));
  clip-path: inset(-12% calc((1 - var(--enter)) * 100%) -12% -8%);
}

@media (max-width: 760px) {
  .scroll-choreography [data-motion="title"] {
    transform: translateY(calc((1 - var(--enter)) * 25px));
  }

  .scroll-choreography [data-motion="copy"] {
    transform: translateY(calc((1 - var(--enter)) * 15px));
  }
}

/* 一時停止と動きの抑制時は、スクロール途中でもすべての読みの単位を表示する。 */
.motion-paused [data-motion],
.motion-reduced [data-motion] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}

.motion-paused .hero-display,
.motion-reduced .hero-display,
.motion-paused [data-motion="cta"] .arrow,
.motion-reduced [data-motion="cta"] .arrow {
  translate: none !important;
}

.motion-paused [data-motion="media"] > img,
.motion-reduced [data-motion="media"] > img {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-choreography [data-motion] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* スクロールに連動した色付きの登場演出。左端の文字から順に進む。 */
.scroll-choreography h2.latin-color-reveal {
  opacity: 1;
  transform: none;
  clip-path: none;
}

.latin-color-reveal > span {
  white-space: pre;
}

.latin-color-reveal > span.rc {
  animation: latin-color-arrival 1s linear both paused;
  animation-delay: calc(-1s * clamp(0, (var(--enter,1) - var(--letter-offset)) / .38, 1));
}

.motion-paused .latin-color-reveal > span.rc,
.motion-reduced .latin-color-reveal > span.rc {
  animation: none;
}

/* 欧文のセクションタイトルは 1 文字ずつ現れる（シアン → オレンジ → 白、不透明度も文字ごと）。
   base.css の --enter に連動した h2 の不透明度ではなく固定の .9 にする。そうしないと
   オレンジに光る瞬間の下で見出し全体がフェードしてしまう。 */
h2.latin-color-reveal,
h2.about-title {
  opacity: .9 !important;
}

@keyframes latin-color-arrival {
  0% { opacity: 0; color: var(--c-cyan); text-shadow: -10px 0 15px #40b7e980; }
  25% { opacity: .8; color: var(--c-cyan); text-shadow: -5px 0 12px #40b7e966; }
  55% { opacity: 1; color: var(--c-orange); text-shadow: 0 0 12px #ff8a3340; }
  100% { opacity: 1; color: inherit; text-shadow: none; }
}

@keyframes duo-light {
  0% { transform: translate3d(-4%,3%,0) rotate(-3deg) scale(1); }
  50% { transform: translate3d(3%,-2%,0) rotate(2deg) scale(1.08); }
  100% { transform: translate3d(-2%,-4%,0) rotate(-1deg) scale(1.03); }
}