/* BGグラデ
=========================================*/
:root {
  /* マウス追従の光の中心位置（JSで更新） */
  --mx: 50%;
  --my: 50%;
}

body {
  margin: 0;
  color: #111;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 薄いグラデ（下でずっと動いてるやつ） */
.bg-hero {
  position: fixed;
  inset: 0;
  z-index: -2;

  --c1: #f2e3ff;
  --c2: #c5e8ff;
  --c3: #b9ffd9;
  --spot: rgba(0, 70, 120, .12);

  background:
    /* マウスを追う「白い光」 */
    radial-gradient(55rem 55rem at var(--mx) var(--my),
      rgba(255,255,255,0.35) 0%,
      rgba(255,255,255,0.15) 25%,
      rgba(255,255,255,0.03) 50%,
      transparent 75%),
    /* もう1枚の柔らかい光 */
    radial-gradient(60rem 60rem at calc(100% - var(--mx)) calc(100% - var(--my)),
      rgba(255,255,255,0.25) 0%,
      transparent 60%),
    /* ベースのグラデーション */
    linear-gradient(120deg, var(--c1) 0%, var(--c2) 50%, var(--c3) 100%);

  background-attachment: fixed;
  filter: saturate(105%) contrast(103%) brightness(103%);
  background-size:
    auto auto,
    auto auto,
    200% 200%;
  background-position:
    center center,
    center center,
    0% 50%;
  animation: heroGradShift 6s linear infinite;
}

@keyframes heroGradShift {
  0%   { background-position: center center, center center,   0% 50%; }
  50%  { background-position: center center, center center, 100% 50%; }
  100% { background-position: center center, center center,   0% 50%; }
}

/* 濃い紺グラデ（上にかぶせるレイヤー） */
.navy-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    rgba(2, 16, 36, 1) 0%,
    rgba(69, 69, 79, 1) 100%
  );
  opacity: 0; /* 最初は透明 */
  transition: opacity 0.8s cubic-bezier(0.25, 0.0, 0.25, 1);
 /* ← ここが「じわっと」 */
  pointer-events: none;
}

/* コンテンツの見た目。お好みで調整OK */
section {

}

section span {
  position: sticky;
  top: 20px;
}


/* タイトル文字が一文字ずつ
=========================================*/
.baseline-anim {
  font-size: 80px;
  font-weight: 900;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  display: inline-flex;
  gap: 8px;
}

/* 最初は下に隠しておくけど、まだアニメは始めない */
.baseline-anim span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
}

/* ← ここから「画面に入ったら付くクラス」 */
.baseline-anim.is-active span {
  animation-name: popUpOnce;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* ディレイも is-active が付いたときだけ有効にする */
.baseline-anim.is-active span:nth-child(1) { animation-delay: 0s; }
.baseline-anim.is-active span:nth-child(2) { animation-delay: 0.1s; }
.baseline-anim.is-active span:nth-child(3) { animation-delay: 0.2s; }
.baseline-anim.is-active span:nth-child(4) { animation-delay: 0.3s; }
.baseline-anim.is-active span:nth-child(5) { animation-delay: 0.4s; }
.baseline-anim.is-active span:nth-child(6) { animation-delay: 0.5s; }
.baseline-anim.is-active span:nth-child(7) { animation-delay: 0.6s; }

@keyframes popUpOnce {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  70% {
    transform: translateY(-10%);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1; /* 最後はちゃんと見えている状態で固定 */
  }
}