/* TOP MV fade-up v3: 恒久背景は初期フレームから完成表示し、foregroundだけを順番に動かす。 */
@keyframes sect-mv-fade-up {
  from { opacity: 0; transform: translate3d(0, var(--sect-mv-rise-y, 10px), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/*
 * 背景・黄色面・コピー背面装飾は演出対象にしない。
 * style.cssの旧試作（sect-motion-ready）より優先し、初期フレームから最終状態を保証する。
 */
html.sect-mv-v2 :is(
  .hero-background, .hero-left-shape, .hero-foreground, .hero-copy__cloud,
  .sp-hero-background, .sp-hero-foreground
) {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* 旧黄色スイープを完全に無効化する。 */
html.sect-mv-v2 .top-hero::before,
html.sect-mv-v2 .top-hero-sp::before {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* style.cssに旧試作が残っていても、動かす要素の時間軸はこの専用レイヤーだけが決定する。 */
html.sect-mv-v2.sect-mv-run :is(
  .hero-people, .hero-copy__eyebrow, .hero-copy__headline > *,
  .hero-copy__tagline, .hero-jobs, .hero-pickup,
  .sp-hero-people, .sp-hero-eyebrow, .sp-hero-headline > *,
  .sp-hero-tagline, .sp-hero-jobs, .sp-hero-pickup
) {
  animation: none;
  clip-path: none;
}

/*
 * 同期bootstrapが初回paint前にこの状態を確定する。
 * JS無効時はclass自体が付かず全表示、外部JS失敗時はheadのtimerが完成表示へ戻す。
 */
html.sect-mv-v2.sect-mv-pending :is(
  .hero-people, .hero-copy__eyebrow, .hero-copy__headline > *,
  .hero-copy__tagline, .hero-jobs, .hero-pickup,
  .sp-hero-people, .sp-hero-eyebrow, .sp-hero-headline > *,
  .sp-hero-tagline, .sp-hero-jobs, .sp-hero-pickup
) {
  opacity: 0;
  transform: translate3d(0, var(--sect-mv-rise-y, 10px), 0);
  clip-path: none;
  animation: none;
}

html.sect-mv-v2 :is(.hero-people, .sp-hero-people) { --sect-mv-rise-y: 12px; }
html.sect-mv-v2 :is(.hero-copy__eyebrow, .hero-copy__headline > *, .sp-hero-eyebrow, .sp-hero-headline > *) { --sect-mv-rise-y: 10px; }
html.sect-mv-v2 :is(.hero-copy__tagline, .sp-hero-tagline) { --sect-mv-rise-y: 8px; }
html.sect-mv-v2 :is(.hero-jobs, .sp-hero-jobs) { --sect-mv-rise-y: 8px; }
html.sect-mv-v2 :is(.hero-pickup, .sp-hero-pickup) { --sect-mv-rise-y: 9px; }

/* t=0はopening終了直後。人物→コピー→タグライン→CTA/PICK UPを明確に分離する。 */
html.sect-mv-v2.sect-mv-active :is(.hero-people, .sp-hero-people) {
  animation: sect-mv-fade-up 1.02s cubic-bezier(.2, .65, .3, 1) 0s both;
}
html.sect-mv-v2.sect-mv-active :is(.hero-copy__eyebrow, .sp-hero-eyebrow) {
  animation: sect-mv-fade-up .9s cubic-bezier(.2, .65, .3, 1) .42s both;
}
html.sect-mv-v2.sect-mv-active :is(.hero-copy__headline > *, .sp-hero-headline > *) {
  animation: sect-mv-fade-up .94s cubic-bezier(.2, .65, .3, 1) var(--sect-mv-word-delay, .5s) both;
}
html.sect-mv-v2.sect-mv-active :is(.hero-copy__headline > :nth-child(2), .sp-hero-headline > :nth-child(2)) { --sect-mv-word-delay: .54s; }
html.sect-mv-v2.sect-mv-active :is(.hero-copy__headline > :nth-child(3), .sp-hero-headline > :nth-child(3)) { --sect-mv-word-delay: .58s; }
html.sect-mv-v2.sect-mv-active :is(.hero-copy__headline > :nth-child(4), .sp-hero-headline > :nth-child(4)) { --sect-mv-word-delay: .62s; }
html.sect-mv-v2.sect-mv-active :is(.hero-copy__headline > :nth-child(5), .sp-hero-headline > :nth-child(5)) { --sect-mv-word-delay: .66s; }
html.sect-mv-v2.sect-mv-active :is(.hero-copy__headline > :nth-child(6), .sp-hero-headline > :nth-child(6)) { --sect-mv-word-delay: .7s; }
html.sect-mv-v2.sect-mv-active :is(.hero-copy__headline > :nth-child(7), .sp-hero-headline > :nth-child(7)) { --sect-mv-word-delay: .74s; }
html.sect-mv-v2.sect-mv-active :is(.hero-copy__headline > :nth-child(8), .sp-hero-headline > :nth-child(8)) { --sect-mv-word-delay: .78s; }
html.sect-mv-v2.sect-mv-active :is(.hero-copy__headline > :nth-child(9), .sp-hero-headline > :nth-child(9)) { --sect-mv-word-delay: .82s; }
html.sect-mv-v2.sect-mv-active :is(.hero-copy__headline > :nth-child(n+10), .sp-hero-headline > :nth-child(n+10)) { --sect-mv-word-delay: .86s; }
html.sect-mv-v2.sect-mv-active :is(.hero-copy__tagline, .sp-hero-tagline) {
  animation: sect-mv-fade-up .88s cubic-bezier(.2, .65, .3, 1) 1.22s both;
}
html.sect-mv-v2.sect-mv-active :is(.hero-jobs, .sp-hero-jobs) {
  animation: sect-mv-fade-up .88s cubic-bezier(.2, .65, .3, 1) 1.48s both;
}
html.sect-mv-v2.sect-mv-active :is(.hero-pickup, .sp-hero-pickup) {
  animation: sect-mv-fade-up .98s cubic-bezier(.2, .65, .3, 1) 1.58s both;
}

@media (max-width: 767px) {
  html.sect-mv-v2 .sp-hero-people { --sect-mv-rise-y: 10px; }
  html.sect-mv-v2 :is(.sp-hero-eyebrow, .sp-hero-headline > *) { --sect-mv-rise-y: 8px; }
  html.sect-mv-v2 .sp-hero-tagline { --sect-mv-rise-y: 6px; }
  html.sect-mv-v2 .sp-hero-jobs { --sect-mv-rise-y: 7px; }
  html.sect-mv-v2 .sp-hero-pickup { --sect-mv-rise-y: 8px; }
}

html.sect-mv-complete :is(
  .hero-people, .hero-copy__eyebrow, .hero-copy__headline > *,
  .hero-copy__tagline, .hero-jobs, .hero-pickup,
  .sp-hero-people, .sp-hero-eyebrow, .sp-hero-headline > *,
  .sp-hero-tagline, .sp-hero-jobs, .sp-hero-pickup
) {
  opacity: 1;
  transform: none;
  clip-path: none;
  animation: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.sect-mv-v2 :is(
    .hero-background, .hero-left-shape, .hero-people, .hero-foreground,
    .hero-copy__cloud, .hero-copy__eyebrow, .hero-copy__headline > *,
    .hero-copy__tagline, .hero-jobs, .hero-pickup,
    .sp-hero-background, .sp-hero-people, .sp-hero-foreground,
    .sp-hero-eyebrow, .sp-hero-headline > *, .sp-hero-tagline,
    .sp-hero-jobs, .sp-hero-pickup
  ) {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
}