/* ============================================================
   Obscura — top.css（TOP画面 / SC-01 専用）
   common.css の後に読み込む前提（トークン・部品は common 側）。
   ヒーロー / トラスト帯 / 各セクション / FAQ / CTA帯 /
   ドロップゾーンオーバーレイ。
   ============================================================ */

/* ---------- eyebrow（セクション見出しの上ラベル） ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 18px;
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lens); box-shadow: 0 0 0 4px rgba(200, 153, 63, 0.18); }

/* ============================================================
   HERO（暗室 + 投影されるデモ）
   ============================================================ */
.hero { background: radial-gradient(120% 120% at 78% 0%, var(--ink-2), var(--ink) 60%); color: var(--text-inv); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding-block: 86px 96px; }
.hero__title { font-size: clamp(2.3rem, 5.4vw, 3.6rem); font-weight: 700; margin-bottom: 22px; }
.hero__lead { color: var(--text-inv-mute); font-size: 1.06rem; max-width: 30em; margin-bottom: 30px; }
.hero__lead strong { color: var(--lens-soft); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__assure { list-style: none; display: flex; flex-wrap: wrap; gap: 18px 24px; padding: 0; margin: 30px 0 0; }
.hero__assure li { position: relative; padding-left: 22px; font-size: 0.86rem; color: var(--text-inv-mute); }
.hero__assure li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 11px; height: 6px; border-left: 2px solid var(--lens); border-bottom: 2px solid var(--lens); transform: rotate(-45deg); }

/* blurword: 製品の核（くっきり→ぼかし）をタイトルで体現 */
.blurword { position: relative; color: var(--lens-soft); display: inline-block; }
.blurword::after {
  content: attr(data-blurword); position: absolute; inset: 0;
  color: var(--lens-soft); filter: blur(10px); opacity: 0.8;
  animation: breathe 4.2s var(--ease) infinite;
}
@keyframes breathe { 0%, 100% { filter: blur(11px); opacity: 0.5; } 50% { filter: blur(5px); opacity: 0.85; } }

/* hero demo frame */
.hero__demo { margin: 0; }
.frame { position: relative; border: 1px solid var(--line-inv); border-radius: var(--radius); padding: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); }
.frame .scene { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.frame__caption { display: flex; gap: 8px; margin-top: 12px; }
.tag-detect, .tag-blur { font-size: 0.66rem; letter-spacing: 0.12em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-inv); color: var(--text-inv-mute); }
.tag-blur { border-color: rgba(200,153,63,0.5); color: var(--lens-soft); }
.hero__demo-note { margin-top: 14px; font-size: 0.72rem; color: var(--text-inv-mute); letter-spacing: 0.06em; text-align: right; }

/* detect → blur アニメーション */
.face-blur { opacity: 0; }
.detect { opacity: 0; }
@keyframes detectIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes blurIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.scene .detect { animation: detectCycle 6s var(--ease) infinite; }
.scene .face-blur { animation: blurCycle 6s var(--ease) infinite; }
@keyframes detectCycle { 0%, 8% { opacity: 0; } 18%, 50% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes blurCycle { 0%, 40% { opacity: 0; } 52%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scene .detect { animation: none; opacity: 0; }
  .scene .face-blur { animation: none; opacity: 1; }
  .blurword::after { animation: none; }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust { background: var(--ink); color: var(--text-inv); border-top: 1px solid var(--line-inv); }
.trust__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { padding: 26px 8px; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--line-inv); }
.trust__item:first-child { border-left: 0; }
.trust__k { color: var(--lens); font-size: 0.78rem; letter-spacing: 0.1em; }
.trust__item p { font-size: 0.95rem; color: var(--text-inv); font-weight: 500; line-height: 1.5; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block: 92px; }
.section--alt { background: var(--paper-2); }
.section__head { max-width: 640px; margin-bottom: 48px; }
.section__title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 14px; }
.section__sub { color: var(--text-mute); font-size: 1.02rem; }

/* steps（実手順＝連番に意味あり） */
.steps { list-style: none; counter-reset: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0; margin: 0; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; position: relative; }
.section--alt .step { background: #fff; }
.step__num { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--lens); }
.step__title { font-size: 1.2rem; margin: 12px 0 10px; }
.step p { color: var(--text-mute); font-size: 0.95rem; }

/* features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.section:not(.section--alt) .feature { background: var(--paper); }
.feature__title { font-size: 1.12rem; margin-bottom: 10px; }
.feature__title::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--lens); margin-bottom: 14px; opacity: 0.55; }
.feature p { color: var(--text-mute); font-size: 0.94rem; }
.feature--accent { background: var(--ink); border-color: var(--ink); color: var(--text-inv); }
.feature--accent .feature__title { color: var(--text-inv); }
.feature--accent p { color: var(--text-inv-mute); }
.feature--accent .feature__title::before { opacity: 1; }

/* usecases */
.usecases { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.section:not(.section--alt) .usecases { background: var(--paper); }
.usecase { padding: 30px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.usecase:nth-child(2n) { border-right: 0; }
.usecase:nth-last-child(-n+2) { border-bottom: 0; }
.usecase h3 { font-size: 1.1rem; margin-bottom: 8px; }
.usecase p { color: var(--text-mute); font-size: 0.94rem; }

/* faq */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 22px; }
.faq__item summary { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; padding: 18px 30px 18px 0; cursor: pointer; list-style: none; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--lens); transition: transform 0.2s; }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { color: var(--text-mute); font-size: 0.95rem; padding: 0 0 20px; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background: radial-gradient(100% 140% at 50% 0%, var(--ink-2), var(--ink)); color: var(--text-inv); text-align: center; }
.cta-band__inner { padding-block: 84px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta-band__title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.cta-band__sub { color: var(--text-inv-mute); margin-bottom: 8px; }
.cta-band__fine { font-size: 0.7rem; letter-spacing: 0.14em; color: var(--text-inv-mute); margin-top: 6px; }

/* ============================================================
   DROPZONE OVERLAY（画面全体ドラッグ＆ドロップ）
   ============================================================ */
.dropzone-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(24, 23, 34, 0.88);
  backdrop-filter: blur(6px);
  pointer-events: none; /* ドラッグイベントはwindowで拾うため透過させちらつき防止 */
}
.dropzone-overlay[data-active] { display: flex; animation: dzFade 0.18s var(--ease); }
@keyframes dzFade { from { opacity: 0; } to { opacity: 1; } }
.dropzone-overlay__inner {
  width: min(560px, 92vw);
  padding: 56px 32px;
  border: 2px dashed var(--lens);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-inv);
  background: rgba(200, 153, 63, 0.06);
}
.dropzone-overlay__inner svg { margin: 0 auto 18px; color: var(--lens); }
.dropzone-overlay__title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.dropzone-overlay__sub { margin-top: 8px; font-size: 0.74rem; letter-spacing: 0.16em; color: var(--text-inv-mute); text-transform: uppercase; }
/* アップロード進捗（オーバーレイ内・割合表示。.progress 部品は common.css 側） */
.dropzone-overlay__progress .progress { margin-top: 18px; }
.progress__bar--determinate { animation: none; margin-left: 0; transition: width 0.2s var(--ease); }

/* ============================================================
   PRICING（料金セクション）
   未ログインでも登録前に料金がわかるようTOPに出す。
   カードは「無料お試し」＋ yml の point.packages を並べる。
   ============================================================ */
.pricing {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 0;
  margin: 0;
}
.price-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
}
/* 無料枠は主役なのでレンズ色で強調する */
.price-card--free { border-color: var(--lens); box-shadow: 0 0 0 3px rgba(200, 153, 63, 0.12); }
.price-card__badge {
  position: absolute; top: -11px; left: 22px;
  font-size: 0.7rem; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--lens); color: #fff; white-space: nowrap;
}
.price-card__label { font-size: 0.86rem; color: var(--text-mute); margin: 0 0 10px; }
.price-card__price { margin: 0 0 6px; display: flex; align-items: baseline; gap: 4px; }
.price-card__price strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.price-card__price span { font-size: 0.76rem; color: var(--text-mute); }
.price-card__points { margin: 0 0 4px; font-size: 0.98rem; }
.price-card__per { margin: 0; font-size: 0.84rem; color: var(--text-mute); }
/* ボタンはカード下端にそろえる */
.price-card .btn { margin-top: auto; }
.price-card--free .btn { margin-top: 18px; }
.pricing__note { margin: 22px 0 0; font-size: 0.84rem; color: var(--text-mute); }

/* ============================================================
   RESPONSIVE（TOP専用）
   ============================================================ */
@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; padding-block: 60px 70px; }
  .hero__demo { max-width: 440px; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .pricing { grid-template-columns: 1fr; }
  .trust__row { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(1), .trust__item:nth-child(2) { border-bottom: 1px solid var(--line-inv); }
  .trust__item:nth-child(odd) { border-left: 0; }
  .steps { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .usecases { grid-template-columns: 1fr; }
  .usecase { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .usecase:last-child { border-bottom: 0 !important; }
  .section { padding-block: 64px; }
}