/* ============================================================================
   pontsukapon — src/assets/css/app/pareidol.css
   ----------------------------------------------------------------------------
   Pareidol LP / 法務ページ用のアプリ固有CSS。
   読み込み順は tokens.css → shell.css → themes.css → **このファイル**。

   移植元： E:/MIYARYO/games/Pareidol/web/style.css ＋ index.html の <style>
   （移植元は読むだけ・書き換えていない）

   書き換え規則（themes.css 末尾の規約に従った）
     1. 裸の要素セレクタ（html / body / a / section / * のリセット）は全削除。
        特に危険だった section{max-width:900px; padding:64px} は
        html[data-app="pareidol"] .lp section にスコープした。
     2. 残る全セレクタの頭に html[data-app="pareidol"] を付けた。
        LP専用は .lp 配下へ。
     3. html{background} / body{background} / body{overflow-x} は削除。
        shell.css §3 が同じことをしている（＝雲が成立する前提そのもの）。
     4. 変数名は書き換えていない（themes.css のレガシー別名が橋渡し）。
        唯一の例外：旧 --accent（テラコッタ #c4763b）は --accent-hover に改名。
        シェルの --accent は主アクセント（空色 #5d8fc4）で意味が真逆のため。
     5. a{color;text-decoration} とその打ち消しは shell.css §3 に移譲。
        ただしリンクホバーのテラコッタだけは Pareidol の筆致なので
        .lp / .doc の内側に限って復元している。

   ★ このファイルは tokens.css §1 のシェルトークンを1つも再定義しない。
   ★ .lp / main / body の祖先に transform / filter / opacity<1 /
     will-change / isolation / contain を書かない（書くと雲が全滅する）。
   ============================================================================ */


/* ═══ リンクのホバー色（Pareidol はテラコッタ） ══════════════════════════════
   シェルの a:hover は下線を出すだけで色を変えない。
   本文の中だけ、旧LPどおり --accent-hover に染める。
   シェルのヘッダー／フッターには効かせない（.lp / .doc に限定）。 */
html[data-app="pareidol"] .lp a:hover,
html[data-app="pareidol"] .doc a:hover{
  color: var(--accent-hover);
}


/* ═══ 法務ページ（共通 .doc 組版への最小の当て木） ════════════════════════
   条文の組版は shell.css §6 の .doc に完全に載せる。ここで足すのは2点だけ。
     1. 制定日行（.meta）は Pareidol では h1 の直下に来る。
        shell の margin-top:48px は末尾配置（こぼれび）向けなので打ち消す。
     2. shell の strong{color:var(--accent)} をそのまま当てると、
        条文中の強調が全部 空色になって本文が騒がしくなる。
        旧LPが .doc strong を墨色に戻していたのと同じ処置をする。
   ======================================================================== */

html[data-app="pareidol"] .doc .meta{
  margin-top: 0;
  margin-bottom: var(--sp-6);
}

html[data-app="pareidol"] .doc strong{
  font-weight: 600;
  color: var(--fg-1);
}


/* ═══ 背景の流れる雲（すりガラス越し・右→左） ══════════════════════════════
   成立条件（1つでも崩すと無言で消える）
     ・html だけが地色を持ち、body 以下は transparent  … shell.css §3
     ・.cloudscape / .lp / main / body の祖先に
       transform / filter / opacity<1 / will-change / contain を書かない
     ・横スクロール抑止は html{overflow-x:clip}          … shell.css §3
   ここは /pareidol の LP テンプレートにだけ出力される（法務ページには出さない）。
   ======================================================================== */

html[data-app="pareidol"] .cloudscape{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

html[data-app="pareidol"] .cloud{
  position: absolute;
  left: 0;
  aspect-ratio: 5 / 2;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200"%3E%3Cg fill="white"%3E%3Cellipse cx="110" cy="150" rx="95" ry="42"/%3E%3Cellipse cx="230" cy="140" rx="120" ry="55"/%3E%3Cellipse cx="370" cy="150" rx="105" ry="45"/%3E%3Cellipse cx="180" cy="95" rx="70" ry="48"/%3E%3Cellipse cx="290" cy="82" rx="85" ry="55"/%3E%3Cellipse cx="390" cy="110" rx="60" ry="40"/%3E%3C/g%3E%3C/svg%3E') center / contain no-repeat;
  filter: blur(14px);
  will-change: transform;
  animation: cloud-fly linear infinite;
}

/* 大きさ・高さ・速さ・間隔をばらす（negative delay で最初から画面内に散る）。
   --cloud-x は prefers-reduced-motion 時の静止位置（shell.css §6 が使う）。
   これが無いとアニメを止めた瞬間 translateX(-560px)＝画面外へ飛んで雲が消える。 */
html[data-app="pareidol"] .cloud.c1{ width:460px; top: 6vh; opacity:.95; animation-duration:60s; animation-delay: -8s; filter:blur(9px);  --cloud-x: 8vw; }
html[data-app="pareidol"] .cloud.c2{ width:320px; top:22vh; opacity:.75; animation-duration:85s; animation-delay:-40s; filter:blur(13px); --cloud-x:52vw; }
html[data-app="pareidol"] .cloud.c3{ width:560px; top:38vh; opacity:.9;  animation-duration:70s; animation-delay:-55s; filter:blur(10px); --cloud-x:22vw; }
html[data-app="pareidol"] .cloud.c4{ width:280px; top:56vh; opacity:.7;  animation-duration:95s; animation-delay:-25s; filter:blur(15px); --cloud-x:70vw; }
html[data-app="pareidol"] .cloud.c5{ width:500px; top:70vh; opacity:.9;  animation-duration:75s; animation-delay:-62s; filter:blur(10px); --cloud-x:38vw; }
html[data-app="pareidol"] .cloud.c6{ width:360px; top:84vh; opacity:.75; animation-duration:90s; animation-delay:-50s; filter:blur(12px); --cloud-x:86vw; }

@keyframes cloud-fly{
  from{ transform: translateX(105vw); }
  to  { transform: translateX(-560px); }
}


/* ═══ ヒーロー ════════════════════════════════════════════════════════════ */

html[data-app="pareidol"] .lp .hero{
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(64px, 13vh, 120px) clamp(20px, 6vw, 64px) clamp(48px, 9vh, 84px);
  text-align: center;
  overflow: hidden;
}

html[data-app="pareidol"] .lp .hero::before{
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 680px;
  height: 460px;
  background: radial-gradient(closest-side, var(--sky-soft), transparent 72%);
  pointer-events: none;
  z-index: 0;
  opacity: .8;
}

html[data-app="pareidol"] .lp .hero-inner{
  position: relative;
  z-index: 1;
}

/* ワードマーク（画像ではなくテキスト。Shippori Mincho 600） */
html[data-app="pareidol"] .lp .wordmark{
  font-family: var(--mincho);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  font-size: 22px;
  margin-bottom: 22px;
}
html[data-app="pareidol"] .lp .wordmark:hover{ color: var(--ink); }

html[data-app="pareidol"] .lp .tagline{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--sky-deep);
  text-transform: uppercase;
  margin-bottom: 30px;
}

html[data-app="pareidol"] .lp .hero h1{
  font-family: var(--mincho);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: .02em;
  margin: 0 auto 18px;
}

html[data-app="pareidol"] .lp .hero .lead{
  font-size: 15px;
  color: var(--ink2);
  font-weight: 300;
  letter-spacing: .02em;
  max-width: 460px;
  margin: 0 auto 40px;
  line-height: 1.9;
}

html[data-app="pareidol"] .lp .cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}


/* ═══ ボタン（旧LPのピル形。シェルの .btn を上書きする） ══════════════════ */

html[data-app="pareidol"] .lp .btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 14px 30px;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: .05em;
  font-weight: 500;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

html[data-app="pareidol"] .lp .btn-primary{
  background: linear-gradient(180deg, var(--sky), var(--sky-deep));
  border: 1px solid var(--sky-deep);
  color: #fff;
}
html[data-app="pareidol"] .lp .btn-primary:hover{
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
  filter: brightness(1.04);
  opacity: 1;
}

html[data-app="pareidol"] .lp .btn-ghost{
  background: var(--cream2);
  border: 1px solid var(--line);
  color: var(--ink2);
}
html[data-app="pareidol"] .lp .btn-ghost:hover{
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--ink);
  border-color: var(--sky);
}


/* ═══ セクション共通（旧 index.html の裸の section{} をスコープしたもの） ══ */

html[data-app="pareidol"] .lp section{
  max-width: 900px;
  margin: 0 auto;
  padding: 64px clamp(20px, 6vw, 64px);
}

html[data-app="pareidol"] .lp .section-label{
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--sky-deep);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
  text-align: center;
}

html[data-app="pareidol"] .lp .section-title{
  font-family: var(--mincho);
  font-size: clamp(20px, 3.4vw, 25px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .03em;
  line-height: 1.55;
  text-align: center;
  margin: 0 0 44px;
}


/* ═══ 作品ギャラリー ══════════════════════════════════════════════════════ */

html[data-app="pareidol"] .lp .gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

html[data-app="pareidol"] .lp .gallery-item{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--cream2);
  border: 1px solid var(--line2);
  box-shadow: 0 14px 30px -18px rgba(49, 67, 90, .28);
}

html[data-app="pareidol"] .lp .gallery-item img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .4s ease;
}

html[data-app="pareidol"] .lp .gallery-item:hover img{ transform: scale(1.04); }

@media (max-width: 720px){
  html[data-app="pareidol"] .lp .gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px){
  html[data-app="pareidol"] .lp .gallery{ grid-template-columns: 1fr 1fr; gap: 10px; }
}


/* ═══ しくみ（3ステップ） ═════════════════════════════════════════════════ */

html[data-app="pareidol"] .lp .steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

html[data-app="pareidol"] .lp .step{
  text-align: center;
  padding: 30px 18px;
  background: var(--cream2);
  border: 1px solid var(--line2);
  border-radius: 20px;
}

html[data-app="pareidol"] .lp .step .circle{
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--sky-soft);
  border: 1px solid var(--sky);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mincho);
  font-size: 17px;
  font-weight: 700;
  color: var(--sky-deep);
}

html[data-app="pareidol"] .lp .step p{
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.8;
  letter-spacing: .02em;
  font-weight: 400;
  margin: 0;
}

@media (max-width: 720px){
  html[data-app="pareidol"] .lp .steps{ grid-template-columns: 1fr; }
}


/* ═══ 画風スイッチャー（12画風クロスフェード） ════════════════════════════
   JS は #styleChips / #styleViewer / #styleTag と data-style の12文字列に
   ベタ依存している。初期状態は HTML 側のハードコード3箇所
   （chip1つ目の .on / style_fluffy.jpg の .on / #styleTag のテキスト）で作る。
   ここを触るとエラーも出さずに初期表示が空白になる。
   ======================================================================== */

html[data-app="pareidol"] .lp .styles-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
}

html[data-app="pareidol"] .lp .chip{
  padding: 9px 20px;
  border-radius: 100px;
  background: var(--cream2);
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink2);
  letter-spacing: .03em;
  line-height: inherit;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .15s;
}

html[data-app="pareidol"] .lp .chip:hover{ transform: translateY(-1px); }

html[data-app="pareidol"] .lp .chip.on{
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

html[data-app="pareidol"] .lp .styles-viewer{
  position: relative;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  margin: 30px auto 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(74, 62, 60, .14);
}

html[data-app="pareidol"] .lp .styles-viewer img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .45s ease, transform .6s ease;
}

html[data-app="pareidol"] .lp .styles-viewer img.on{
  opacity: 1;
  transform: scale(1);
}

html[data-app="pareidol"] .lp .styles-viewer .style-tag{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(250, 245, 236, .92);
  font-size: 12px;
  color: var(--ink2);
  letter-spacing: .05em;
}

html[data-app="pareidol"] .lp .styles-note{
  text-align: center;
  font-size: 12.5px;
  color: var(--mut);
  margin: 22px 0 0;
  letter-spacing: .02em;
}


/* ═══ ベータ告知 ══════════════════════════════════════════════════════════ */

html[data-app="pareidol"] .lp .beta{
  background: linear-gradient(165deg, var(--cream2), var(--sky-soft) 180%);
  border-radius: 28px;
  max-width: 780px;
  margin: 0 auto 56px;
  padding: 48px clamp(24px, 6vw, 60px);
  text-align: center;
  border: 1px solid var(--line2);
}

html[data-app="pareidol"] .lp .beta .status-dot{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 100px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink2);
  letter-spacing: .05em;
  margin-bottom: 22px;
}

/* 呼吸する光る点。7px円・--sky-deep・滲みは --sky。
   大きさとアニメは shell.css §6 の .dot が持っている。
   ここでは滲みの色（旧LPの var(--sky)）だけを戻す。 */
html[data-app="pareidol"] .lp .beta .status-dot .dot{
  background: var(--sky-deep);
  box-shadow: 0 0 10px 1px var(--sky);
}

html[data-app="pareidol"] .lp .beta h2{
  font-family: var(--mincho);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 12px;
  letter-spacing: .03em;
}

html[data-app="pareidol"] .lp .beta p{
  font-size: 13.5px;
  color: var(--ink2);
  font-weight: 300;
  line-height: 1.95;
  max-width: 480px;
  margin: 0 auto 26px;
  letter-spacing: .02em;
}

html[data-app="pareidol"] .lp .beta .testflight-note{
  font-size: 12px;
  color: var(--mut);
  margin-top: 18px;
  line-height: 1.8;
}


/* ═══ ベータ先行登録フォーム ══════════════════════════════════════════════
   送信先は Cloud Run のベタ書きURL。pontsuka.com から叩くと
   リレー側の許可オリジンに新ドメインを足すまで CORS で必ず失敗する。
   失敗しても穏やかなエラー文言が出るだけなので、動作確認をサボらないこと。
   ======================================================================== */

html[data-app="pareidol"] .lp .beta-signup{
  margin: 30px auto 0;
  max-width: 400px;
}

html[data-app="pareidol"] .lp .beta-signup h3{
  font-family: var(--mincho);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 8px;
}

html[data-app="pareidol"] .lp .beta-signup .signup-intro{
  font-size: 12.5px;
  color: var(--ink2);
  font-weight: 300;
  line-height: 1.85;
  margin: 0 0 18px;
  max-width: none;
}

html[data-app="pareidol"] .lp .beta-signup .signup-row{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

html[data-app="pareidol"] .lp .beta-signup input[type="email"]{
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 18px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--cream2);
  color: var(--ink);
  font-size: 13.5px;
  letter-spacing: .02em;
  font-family: inherit;
}

html[data-app="pareidol"] .lp .beta-signup input[type="email"]::placeholder{
  color: var(--mut);
}

html[data-app="pareidol"] .lp .beta-signup input[type="email"]:focus{
  outline: none;
  border-color: var(--sky);
}

html[data-app="pareidol"] .lp .beta-signup .honeypot-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html[data-app="pareidol"] .lp .beta-signup button{
  flex: 0 0 auto;
  padding: 13px 26px;
  border-radius: 100px;
  border: 1px solid var(--sky-deep);
  background: linear-gradient(180deg, var(--sky), var(--sky-deep));
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .04em;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .2s ease;
}

html[data-app="pareidol"] .lp .beta-signup button:disabled{
  opacity: .55;
  cursor: default;
}

html[data-app="pareidol"] .lp .beta-signup .signup-status{
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink2);
  min-height: 1.4em;
}

html[data-app="pareidol"] .lp .beta-signup .signup-status.error{
  color: #b45f4a;
}

html[data-app="pareidol"] .lp .beta-signup .signup-note{
  margin: 16px 0 0;
  font-size: 11px;
  color: var(--mut);
  line-height: 1.85;
  letter-spacing: .01em;
}

html[data-app="pareidol"] .lp .beta-signup .signup-note a{
  color: var(--mut);
  text-decoration: underline;
  text-decoration-color: currentColor;
}