/*
 * オトノミカ — シグネチャーモーメント（ヒーロー）
 * ナビ直下の装飾セクション。SEO上の h1 は article-list 側に置く。
 * prefers-reduced-motion: 波形アニメ停止を遵守。
 */

/* ---- Atmosphere (固定背景グロー) --------------------------------------- */
.ot-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ot-glow {
  position: absolute;
  border-radius: 50%;
}
.ot-glow--cyan {
  top: -8%; left: -6%; width: 44vw; height: 44vw;
  background: radial-gradient(circle, rgba(25,227,255,.15), transparent 62%);
  filter: blur(30px);
}
.ot-glow--purple {
  bottom: -12%; right: -8%; width: 50vw; height: 50vw;
  background: radial-gradient(circle, rgba(123,91,255,.17), transparent 60%);
  filter: blur(32px);
}
.ot-glow--pink {
  top: 38%; left: 54%; width: 30vw; height: 30vw;
  background: radial-gradient(circle, rgba(255,46,196,.12), transparent 62%);
  filter: blur(34px);
}
.ot-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(124,140,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,140,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 82% 60% at 50% 22%, #000 28%, transparent 80%);
          mask-image: radial-gradient(ellipse 82% 60% at 50% 22%, #000 28%, transparent 80%);
}

/* ---- Page wrap --------------------------------------------------------- */
.ot-page {
  position: relative;
  background: var(--ot-bg-base);
  color: var(--ot-text);
  font-family: var(--ot-font-jp);
  min-height: 100vh;
  overflow-x: hidden;
}
.ot-page-content { position: relative; z-index: 1; }

/* ---- Hero -------------------------------------------------------------- */
.ot-hero {
  max-width: var(--ot-maxw);
  margin: 0 auto;
  padding: 52px 24px 12px;
  text-align: center;
}

.ot-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px;
  border-radius: var(--ot-r-pill);
  border: 1px solid rgba(25,227,255,.4);
  background: rgba(25,227,255,.05);
  margin-bottom: 24px;
  font: 600 11px var(--ot-font-en);
  letter-spacing: 3px;
  color: var(--ot-cyan);
}
.ot-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ot-cyan);
  box-shadow: 0 0 8px var(--ot-cyan);
}

.ot-hero__title {
  font: 800 var(--ot-fs-hero)/1.2 var(--ot-font-jp);
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 0 26px rgba(25,227,255,.3);
  margin: 0 0 20px;
  /* 装飾テキスト: SEO h1 ではない */
}

/* "最短ルート" — シアン→紫→ピンクのグラデ文字 */
.ot-hero__grad {
  background: var(--ot-grad-trio);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ot-hero__lead {
  max-width: 600px;
  margin: 0 auto 0;
  font: 500 15px/1.9 var(--ot-font-jp);
  color: var(--ot-text-sub);
}

/* 波形 SVG */
.ot-hero__wave {
  margin: 26px auto 0;
  width: 380px;
  max-width: 82%;
  height: 30px;
  opacity: .8;
  display: block;
}
.ot-hero__wave svg { width: 100%; height: 100%; display: block; }

/* 波形アニメーション（reduced-motion 未設定時のみ） */
@media (prefers-reduced-motion: no-preference) {
  .ot-hero__wave svg path {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: ot-wave-draw 2.4s cubic-bezier(.4,0,.2,1) forwards;
  }
  @keyframes ot-wave-draw {
    to { stroke-dashoffset: 0; }
  }
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 600px) {
  .ot-hero { padding: 36px 16px 8px; }
  .ot-hero__badge { font-size: 9px; letter-spacing: 2px; }
}