/* FV / hero motion (extracted from common.css) */

/* Hero動画：フェード切り替え用 */
.hero-video {
  transition: opacity 1s ease-in-out;
}

.fv-story-dim-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 16, 38, 0.28) 0%,
    rgba(0, 16, 38, 0.54) 52%,
    rgba(0, 16, 38, 0.74) 100%
  );
  opacity: var(--fv-story-dim-progress, 0);
  transition: opacity 0.28s linear;
}

#fv-block.fv-scroll-phase .fv-story-dim-overlay {
  opacity: 1;
}

/* FVテキスト：動画に合わせた“漂い”モーション（位置/デザインは保持） */
.hero-motion {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

[data-hero-motion="scroll"] {
  opacity: var(--fv-scroll-motion-progress, 0);
  transform: translate3d(0, calc((1 - var(--fv-scroll-motion-progress, 0)) * 14px), 0);
  transition: opacity 0.28s linear, transform 0.28s linear;
  pointer-events: none;
}

[data-hero-motion="scroll"].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* 16秒ストーリー演出：四方から集結して定位置へ */
.hero-assemble {
  position: relative;
  display: inline-block; /* レイアウトはそのまま、絶対配置の基準にする */
}
.hero-charline {
  display: inline-block;
  position: relative;
  padding-top: 20px;
}
/* 「本音で話そう。」だけ少し下にずらす＋右側に余白で「あの頃」と離す（縦書き） */
.hero-charline-second {
  margin-top: 0.5em;
  margin-right: 0.3em;
}
@media (max-width: 767px) {
  .hero-charline-second {
    margin-right: 0em;
  }
}
@media (min-width: 768px) {
  .hero-charline-second {
    margin-top: 0.65em;
  }
}

.hero-char {
  display: inline-block;
  position: relative;
  will-change: transform, opacity, filter;
  transform: translate3d(0,0,0);
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.8),  /* 輪郭を作る */
    0 2px 4px rgba(0, 0, 0, 0.45), /* 近影 */
    0 8px 20px rgba(0, 0, 0, 0.35); /* 遠影 */
}
.hero-assemble-target {
  display: inline-block;
  position: relative;
  /* 完成するまで非表示（JSでis-visibleを付与） */
  opacity: 0;
  visibility: hidden;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.8),  /* 輪郭を作る */
    0 2px 4px rgba(0, 0, 0, 0.45), /* 近影 */
    0 8px 20px rgba(0, 0, 0, 0.35); /* 遠影 */
}
.hero-assemble-target.is-visible {
  opacity: 1;
  visibility: visible;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.8),  /* 輪郭を作る */
    0 2px 4px rgba(0, 0, 0, 0.45), /* 近影 */
    0 8px 20px rgba(0, 0, 0, 0.35); /* 遠影 */
}
.hero-assemble .assemble-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.hero-assemble .assemble-piece {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  will-change: transform, opacity, filter;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.8),  /* 輪郭を作る */
    0 2px 4px rgba(0, 0, 0, 0.45), /* 近影 */
    0 8px 20px rgba(0, 0, 0, 0.35); /* 遠影 */
}
.hero-assemble .piece-1 { clip-path: inset(0 50% 50% 0); }   /* 左上 */
.hero-assemble .piece-2 { clip-path: inset(0 0 50% 50%); }   /* 右上 */
.hero-assemble .piece-3 { clip-path: inset(50% 50% 0 0); }   /* 左下 */
.hero-assemble .piece-4 { clip-path: inset(50% 0 0 50%); }   /* 右下 */

/* サブコピー：完成後は absolute で固定（レイヤー差し替え時のずれ防止） */
.hero-assemble[data-hero-assemble="sub"] .hero-assemble-target.is-pinned {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
  z-index: 1;
}
.hero-assemble[data-hero-assemble="sub"] {
  align-self: flex-end;
  flex-shrink: 0;
}
.hero-assemble[data-hero-assemble="sub"] .assemble-layer {
  z-index: 2;
}
.hero-assemble .hero-assemble-quad-final {
  clip-path: none !important;
  pointer-events: none;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .hero-motion {
    transform: none !important;
    opacity: 1 !important;
  }
  .hero-assemble .assemble-layer {
    display: none !important;
  }
  .hero-char {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* 暗い背景ブロック内：文字は白で統一（継承で白に）、背景も確実に暗く */
/* CLOSING + CTA セクション：背景やや透過で背面が透ける */
#closing-cta.closing-cta-section-bg {
  background-color: rgba(0, 30, 56, 0.92) !important;
}

.lp-on-dark {
  color: #fff !important;
  background-color: #001c38 !important;
}
#fv-block {
  background-color: #001c38 !important;
  position: relative;
  z-index: 1;
}
#fv-block .fv-viewport {
  position: relative;
  overflow: hidden;
  background-color: #001c38;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
}
#fv-block .fv-video-stage {
  background-color: #001c38;
}
#fv-block .hero-video {
  object-fit: cover;
  object-position: center center;
  transform: scale(1.05);
  transform-origin: center center;
}
#fv-block.is-hero-video-pending .hero-video {
  opacity: 0;
}
#fv-block.is-hero-video-ready .hero-video {
  opacity: 1;
  transition: opacity 0.28s ease;
}
#fv-block > div:last-child {
  background-color: #001c38 !important;
}

@media (max-width: 767px) {
  #fv-block .fv-viewport {
    height: var(--fv-vh, 100svh);
    min-height: var(--fv-vh, 100svh);
    max-height: 100lvh;
  }
  #fv-block .hero-video {
    transform: scale(1.08);
    min-height: 100%;
    min-width: 100%;
  }
}

#fv-intro-transition.fv-intro-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
#fv-intro-transition.fv-intro-transition-overlay.is-active {
  visibility: visible;
  pointer-events: none;
}
#fv-intro-transition .fv-intro-transition-layer {
  position: absolute;
  inset: 0;
  background: #faf9f6;
  opacity: var(--fv-intro-overlay-opacity, 0);
  clip-path: polygon(
    var(--fv-intro-wipe-top, 100%) 0,
    100% 0,
    100% 100%,
    var(--fv-intro-wipe-bottom, 100%) 100%
  );
  will-change: clip-path, opacity;
  transition: none;
}
#fv-intro-transition .fv-intro-transition-title {
  margin: 0;
  color: var(--brand-color);
  font-family: var(--font-serif);
  font-size: clamp(0.72rem, 1.05vw, 0.92rem);
  letter-spacing: 0.28em;
  opacity: var(--fv-intro-title-opacity, 0);
  transform: translate3d(0, var(--fv-intro-title-y, 14px), 0);
  transition: none;
}
#fv-intro-transition .fv-intro-transition-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 1.25rem;
  clip-path: polygon(
    var(--fv-intro-wipe-top, 100%) 0,
    100% 0,
    100% 100%,
    var(--fv-intro-wipe-bottom, 100%) 100%
  );
  will-change: clip-path;
}
#fv-intro-transition .fv-intro-transition-sub {
  margin: 0;
  color: var(--brand-color);
  font-family: var(--font-serif);
  font-size: clamp(1.06rem, 2.25vw, 1.8rem);
  letter-spacing: 0.12em;
  text-align: center;
  opacity: var(--fv-intro-title-opacity, 0);
  transform: translate3d(0, calc(var(--fv-intro-title-y, 14px) * 0.7), 0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: none;
}
#fv-intro-transition .transition-scroll-hint {
  opacity: calc(var(--fv-intro-title-opacity, 0) * 0.9);
}
@media (prefers-reduced-motion: reduce) {
  #fv-intro-transition .fv-intro-transition-layer,
  #fv-intro-transition .fv-intro-transition-title,
  #fv-intro-transition.fv-intro-transition-overlay {
    transition: none !important;
  }
}

/* FVフィルター：白のオーバーレイ（下から上に向かって弱く、上はゼロ） */
#fv-block [class*="bg-gradient-to-t"] {
  background: linear-gradient(to top, rgba(255,255,255,0.45), rgba(255,255,255,0.18), transparent) !important;
}

/* SP：FVテキストの位置調整（上ずれを抑えて下寄りに） */
@media (max-width: 767px) {
  #fv-block .fv-copy-wrap {
    bottom: 20%;
  }
  #fv-block .fv-copy-text {
    padding-right: 0.75rem;
  }
}

/*
 * 768px以上：縦書きは固定の text-6xl だと上にはみ出すため vh 連動（字サイズのみ）。
 * 位置は高さのある画面では従来寄り（bottom 〜23%）、縦が短いときだけ下げる（別ブロック）。
 */
@media (min-width: 768px) {
  #fv-block .fv-copy-wrap {
    bottom: 25%;
  }
  #fv-block .fv-copy-text {
    font-size: clamp(2.05rem, 4.45vh, 3.75rem);
    line-height: 1.68;
  }
  #fv-block .hero-charline {
    padding-top: 0.35rem;
  }
  #fv-block .hero-charline-second {
    margin-top: 0.4em;
  }
  #fv-block .fv-copy-wrap .hero-assemble-target {
    font-size: clamp(0.95rem, 2.05vh, 1.5rem);
    line-height: 1.68;
    padding-top: clamp(0.85rem, 2.25vh, 2.75rem);
  }
  #fv-block .fv-copy-wrap > .flex {
    gap: clamp(1.25rem, 3vh, 4rem);
  }
}
@media (min-width: 1024px) {
  #fv-block .fv-copy-text {
    font-size: clamp(2.2rem, 4.6vh, 4.5rem);
  }
}

/* 768px以上かつ縦幅が短いときだけ下寄せ（iPad横・ウィンドウ縦短縮。字サイズは上のまま） */
@media (min-width: 768px) and (max-height: 920px) {
  #fv-block .fv-copy-wrap {
    bottom: clamp(16%, 14vh, 22%);
  }
}