/* =========================================================
   HOME / OVERVIEW（ヒーロー）: LEFT aligned safe version
========================================================= */

/* ヒーロー全体 */
#home-overview.home-overview-cover.hero {
  padding: 0 !important;

  min-height: 120px;
  height: clamp(120px, 48svh, 640px);

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  overflow: hidden;

  background-image:
    radial-gradient(
      circle at center,
      rgba(140, 140, 200, 0.18),
      rgba(230, 230, 240, 0.6)
    ),
    url('../../images/bg/home-cover.png');

  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
}

/* 光レイヤー */
#home-overview.home-overview-cover.hero::before {
  content: "";
  position: absolute;
  inset: -80%;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at 30% 35%,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0) 36%
    ),
    radial-gradient(
      circle at 75% 65%,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0) 60%
    ),
    conic-gradient(
      from 0deg,
      rgba(175, 207, 255, 0.24),
      rgba(214, 208, 255, 0.24),
      rgba(205, 238, 255, 0.24),
      rgba(175, 207, 255, 0.24)
    );

  mix-blend-mode: normal;

  transform: translate3d(0, 0, 0) rotate(0deg);
  transform-origin: 50% 50%;

  opacity: 0.60;
  animation:
    softGlowSpin 114s linear infinite,
    softBreath   10s  ease-in-out infinite;

  will-change: transform, opacity;
}

/* ドットレイヤー */
#home-overview.home-overview-cover.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background-image: url('../../images/bg/dot.png');
  background-repeat: repeat;

  opacity: 0.22;
}

@keyframes softGlowSpin {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, 0, 0) rotate(360deg); }
}

@keyframes softBreath {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.75; }
}

/* =========================================================
   Inner layout: 左寄せ基準で安定させる
========================================================= */

#home-overview .hero__inner {
  position: relative;
  z-index: 2;
  text-align: left;
  /* padding-left: 3.6rem; */
}

/* タイトル */
#home-overview .hero__title {
  margin: var(--space-md) auto 0;
  text-align: left;
  color: var(--color-gray-600);
  animation: colorChange 12s infinite alternate ease-in-out;

  font-family: var(--font-family-serif);
  font-size: clamp(7.2rem, 12vw, 14.4rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0;
}

/* タイトル色アニメ */
@keyframes colorChange {
  0%   { color: #666; }
  15%  { color: #8994b4; }
  30%  { color: #7d9ea5; }
  45%  { color: #7aaf8e; }
  60%  { color: #9eab61; }
  75%  { color: #ce8272; }
  90%  { color: #b67b8c; }
}

@media (max-width: 800px) {
  #home-overview .hero__title {
    animation: none;
  }
}

/* サブコピーの段間 */
#home-overview .hero__subcopy {
  margin: var(--space-sm) 0 -1.8rem;
}

/* =========================================================
   Typewriter（LEFT aligned safe）
   - 文字は常に全文を入れて、clip-pathで見える範囲だけ増減
   - 日本語が途中で切れる問題を避ける
========================================================= */

.subcopy-type {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--color-gray-800);
  font-size: var(--font-size-md);
  font-family: var(--font-family-serif);
}

.subcopy-type__text {
  display: inline-block;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  position: relative;
  padding-right: .4em;  /* カーソル分の余白 */
}

/* カーソル */
.subcopy-type__text::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.1em;
  background: currentColor;
  margin-left: .18em;
  transform: translateY(.15em);
  animation: caretBlink .8s step-end infinite;
}

@keyframes caretBlink{
  50% { opacity: 0; }
}

/* 動きを減らしたいユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .subcopy-type__text {
    clip-path: inset(0 0 0 0) !important;
  }
  .subcopy-type__text::after {
    display: none;
    animation: none;
  }
}