/* ============================================================
   ゆびさき探偵 ―辻見町事件簿― LP（index.html）専用スタイル
   演出仕様正本: _copy/index.md §7（コージー・ノワール）
   ============================================================ */

/* ---------- section 基本 ---------- */
.section { padding: 4rem 0; position: relative; }

.section-title {
  font-size: 1.5rem;
  text-align: center;
  color: var(--gold);
  margin: 0 0 1.8rem;
}

@media (min-width: 768px) {
  .section { padding: 5.5rem 0; }
  .section-title { font-size: 1.85rem; }
}

/* ============================================================
   §1 ヒーロー
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 4.5rem 0 5.5rem;
  background:
    linear-gradient(rgba(30, 42, 68, 0.7), rgba(20, 29, 49, 0.88)),
    url('../assets/img/scene_office_night.webp') center 30% / cover no-repeat;
}

.hero-icon {
  width: 120px;
  height: 120px;
  border-radius: 26px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);
}

.hero-title {
  font-size: clamp(1.7rem, 6.4vw, 2.7rem);
  font-weight: 800;
  color: var(--cream);
  margin: 1.4rem 0 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.hero-title small {
  display: block;
  margin-top: 0.7rem;
  font-size: clamp(0.9rem, 3vw, 1.15rem);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.hero-sub {
  max-width: 34em;
  margin: 1.4rem auto 0;
  font-size: 0.95rem;
  color: rgba(243, 236, 216, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hero .container { position: relative; z-index: 3; }

/* ---------- §7-B 街灯（1ページ1灯のみ） ---------- */
.lamp {
  position: absolute;
  right: clamp(-30px, 1vw, 4%);
  bottom: 40px;
  width: clamp(110px, 16vw, 180px);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}

.lamp img { display: block; width: 100%; }

/* 光のハロー */
.lamp::before {
  content: "";
  position: absolute;
  top: -6%;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(242, 166, 90, 0.5), rgba(232, 184, 75, 0.18) 55%, transparent 75%);
  pointer-events: none;
}

@keyframes lamp-flicker {
  0%   { opacity: 1; }
  25%  { opacity: 0.4; }
  50%  { opacity: 1; }
  75%  { opacity: 0.7; }
  100% { opacity: 1; }
}

.lamp.flicker::before {
  animation: lamp-flicker 0.4s steps(4, jump-none) 1;
}

/* ---------- §7-A 霧（ヒーロー下端・フッター上端のみ） ---------- */
.fog {
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 200%;
  height: 150px;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(closest-side, rgba(243, 236, 216, 0.85), transparent),
    radial-gradient(closest-side, rgba(243, 236, 216, 0.7), transparent),
    radial-gradient(closest-side, rgba(243, 236, 216, 0.85), transparent),
    radial-gradient(closest-side, rgba(243, 236, 216, 0.7), transparent);
  background-size: 46% 120%, 34% 95%, 46% 120%, 34% 95%;
  background-position: 0% 100%, 28% 80%, 50% 100%, 78% 80%;
  background-repeat: no-repeat;
}

.fog-a { opacity: 0.10; animation: fog-drift-a 80s linear infinite; }
.fog-b { opacity: 0.06; height: 110px; animation: fog-drift-b 120s linear infinite; }

@keyframes fog-drift-a {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes fog-drift-b {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.site-footer .fog { bottom: auto; top: -40px; }

/* ============================================================
   §7-E 足跡（セクション間の遷移装飾）
   ============================================================ */
.paw-divider {
  display: flex;
  justify-content: flex-end;
  padding: 0 8%;
  margin: -1.5rem 0;
  pointer-events: none;
}

.paw-divider--alt { justify-content: flex-start; }

.paw-divider img {
  width: clamp(90px, 14vw, 150px);
  opacity: 0.15;
  transition: opacity 1.1s ease;
}

.paw-divider img + img { transition-delay: 0.5s; }

.js .paw-divider img { opacity: 0; }
.js .paw-divider.visible img { opacity: 0.15; }

/* ============================================================
   §2 遊び方
   ============================================================ */
.howto-head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.4rem;
}

.howto-watson {
  width: clamp(64px, 10vw, 96px);
  flex-shrink: 0;
}

.howto-lead {
  max-width: 36em;
  margin: 0 auto 2.4rem;
  text-align: center;
  font-size: 0.95rem;
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step-card {
  background: rgba(243, 236, 216, 0.06);
  border: 1px solid rgba(232, 184, 75, 0.22);
  border-radius: 16px;
  padding: 1.3rem 1.3rem 1.1rem;
}

.step-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--gold);
}

.step-card p {
  margin: 0;
  font-size: 0.88rem;
}

/* ---------- デモ文章（便箋風カード + §7-D 赤い下線） ---------- */
.demo-lead {
  max-width: 34em;
  margin: 0 auto 1.6rem;
  text-align: center;
  font-size: 0.95rem;
}

.letter {
  max-width: 560px;
  margin: 0 auto;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 2.55em,
      rgba(30, 42, 68, 0.12) 2.55em,
      rgba(30, 42, 68, 0.12) calc(2.55em + 1px)
    ),
    var(--cream);
  color: var(--navy);
  border-radius: 6px;
  border: 1px solid rgba(30, 42, 68, 0.25);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  padding: 1.8rem 1.4rem;
}

.letter p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 2.55;
  font-size: clamp(0.82rem, 3.4vw, 1rem);
}

/* 赤い下線（レンガ赤 #A84B3D。血赤禁止） */
.trace-target {
  position: relative;
  display: inline-block;
}

.trace-target::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.18em;
  height: 2px;
  width: 100%;
  background: var(--brick);
}

.js .trace-target::after {
  width: 0;
  transition: width 0.6s ease-out;
}
.js .demo.traced .trace-target::after { width: 100%; }

.demo-caption {
  max-width: 34em;
  margin: 1.5rem auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: rgba(243, 236, 216, 0.92);
}

.js .demo-caption {
  opacity: 0;
  transition: opacity 0.8s ease 0.6s;
}
.js .demo.traced .demo-caption { opacity: 1; }

/* 自分ごと化の一文 */
.self-line {
  margin: 3.2rem auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 2.3;
  color: var(--cream);
}

/* ============================================================
   §3 特徴（feature-grid・5枚）
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

@media (min-width: 700px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card--last { grid-column: 1 / -1; }
}

.feature-card {
  position: relative;
  overflow: hidden;
  background: rgba(243, 236, 216, 0.05);
  border: 1px solid rgba(232, 184, 75, 0.2);
  border-radius: 18px;
  padding: 1.6rem 1.4rem;
}

.feature-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1.12rem;
  color: var(--gold);
}

.feature-card p {
  margin: 0;
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

.feature-img {
  display: block;
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 14px;
  margin: 0 0 1rem;
}

.feature-img--wide {
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 3 / 2;
}

.feature-img--small { width: 84px; height: 84px; object-fit: contain; }

/* 特徴4: 夜の街をカード背景に薄く */
.feature-card--town::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/img/bg_downtown_night.webp') center / cover no-repeat;
  opacity: 0.25;
  pointer-events: none;
}
.feature-card--town h3 { position: relative; z-index: 1; }

/* 特徴5: 最後の事件簿（暗色 + §7-C 猫の目） */
.feature-card--last {
  background: var(--navy-deep);
  border-color: rgba(232, 184, 75, 0.32);
  padding-bottom: 5.4rem;
  text-align: left;
}

/* ---------- §7-C 暗闇に浮かぶ猫の目 ---------- */
.cat-eyes {
  position: absolute;
  bottom: 1.4rem;
  right: 1.8rem;
  display: flex;
  gap: 18px;
  pointer-events: none;
}

.cat-eyes .eye {
  width: 30px;
  height: 22px;
  background: radial-gradient(circle at 50% 45%, #f6d878 0%, var(--gold) 55%, #b8862e 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 0 14px rgba(232, 184, 75, 0.55);
  position: relative;
}

/* 縦に細い瞳孔 */
.cat-eyes .eye::after {
  content: "";
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 72%;
  background: var(--navy-deep);
  border-radius: 50%;
}

.js .cat-eyes { opacity: 0; }

@keyframes eyes-open {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes eyes-blink {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(0.1); }
  100% { transform: scaleY(1); }
}

.js .cat-eyes.awake {
  animation: eyes-open 1.2s ease-out forwards;
}

.js .cat-eyes.blink .eye {
  animation: eyes-blink 0.3s ease-in-out 1;
}

.js .cat-eyes.done { opacity: 1; }

/* ============================================================
   §4 スクリーンショット（横スクロールギャラリー）
   ============================================================ */
.shots-banner {
  margin: 0 auto 1.2rem;
  max-width: 760px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(232, 184, 75, 0.25);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}
.shots-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.shots {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.4rem 0.2rem 1.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.shot {
  position: relative;
  flex: 0 0 auto;
  width: clamp(200px, 56vw, 250px);
  margin: 0;
  scroll-snap-align: center;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(232, 184, 75, 0.25);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}

.shot--left img { object-position: left center; }

.shot img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.shot figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 0.9rem 0.7rem;
  background: linear-gradient(transparent, rgba(20, 29, 49, 0.92));
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--cream);
  text-align: center;
}

/* ============================================================
   §5 無料で遊べます
   ============================================================ */
.free-box {
  max-width: 620px;
  margin: 0 auto;
  background: rgba(243, 236, 216, 0.05);
  border: 1px solid rgba(232, 184, 75, 0.2);
  border-radius: 18px;
  padding: 1.7rem 1.5rem;
}

.free-box > p { margin: 0 0 0.9rem; font-size: 0.92rem; }

.free-box ul {
  margin: 0;
  padding-left: 1.2rem;
}

.free-box li {
  margin: 0.45rem 0;
  font-size: 0.88rem;
}

.free-box strong { color: var(--gold); }

/* ============================================================
   §6 CTA 再掲
   ============================================================ */
.cta-final {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 5rem 0;
  background:
    linear-gradient(rgba(30, 42, 68, 0.78), rgba(20, 29, 49, 0.9)),
    url('../assets/img/bg_station_night.webp') center 35% / cover no-repeat;
}

.cta-final .container { position: relative; z-index: 2; }

.cta-copy {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.05rem, 4vw, 1.4rem);
  line-height: 2.3;
  color: var(--cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   prefers-reduced-motion: 全演出停止・静止状態で成立させる
   （アニメ/トランジション自体は style.css 共通網で停止済み）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fog-a { opacity: 0.10; transform: none; }
  .fog-b { opacity: 0.06; transform: none; }
  .lamp.flicker::before { opacity: 1; }
  .js .paw-divider img { opacity: 0.15; }
  .js .trace-target::after { width: 100%; }
  .js .demo-caption { opacity: 1; }
  .js .cat-eyes,
  .js .cat-eyes.awake,
  .js .cat-eyes.done { opacity: 1; }
}