/* ===================== AMIX TOWN — About / LP ===================== */
:root{
  --ink:#2a2440; --cream:#fff7ea; --coral:#ff6b5e; --teal:#26c2b3;
  --sky:#bfe9ff; --yellow:#ffd54a; --grape:#9b7bff; --leaf:#5fb96b;
  --shadow:0 18px 40px rgba(43,40,80,.16);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Zen Maru Gothic", system-ui, sans-serif; color:var(--ink);
  background:var(--cream); line-height:1.85; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:min(1080px, 92vw); margin:0 auto; }
.pixel{ font-family:"Press Start 2P", monospace; line-height:1.5; }
.dot{ font-family:"DotGothic16", monospace; }

/* ---------- floating top bar ---------- */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:14px clamp(16px,4vw,40px);
  transition:background .3s, box-shadow .3s, padding .3s; }
.topbar:not(.solid){ background:linear-gradient(180deg, rgba(20,16,40,.45) 0%, rgba(20,16,40,0) 100%); }   /* ヒーロー（夜は暗い3D空間）上でもメニューが読めるよう薄い上スクリム */
.topbar.solid{ background:rgba(255,247,234,.86); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); box-shadow:0 4px 18px rgba(43,40,80,.1); padding-top:10px; padding-bottom:10px; }
.topbar .brand{ font-family:"Press Start 2P", monospace; font-size:13px; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5); text-decoration:none; letter-spacing:0; }
.topbar.solid .brand{ color:var(--ink); text-shadow:none; }            /* スクロールで不透明バーになったら濃色へ */
.topbar .brand b{ color:var(--coral); text-shadow:none; }
.topbar nav{ display:flex; gap:10px; align-items:center; }
.topbar nav a{ text-decoration:none; font-weight:700; font-size:13px; padding:8px 12px; border-radius:30px; }
.topbar nav a.ghost{ color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.topbar.solid nav a.ghost{ color:var(--ink); text-shadow:none; }
.topbar nav a.ghost:hover{ background:rgba(255,255,255,.18); }
.topbar.solid nav a.ghost:hover{ background:rgba(42,36,64,.08); }
.topbar nav a.cta{ background:var(--coral); color:#fff; box-shadow:0 4px 0 #c64a40; }
.topbar nav a.cta:hover{ transform:translateY(-1px); }
@media (max-width:640px){ .topbar nav a.ghost{ display:none; } .topbar .brand{ font-size:11px; } }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; background:linear-gradient(180deg, #d6f1ff 0%, #bfe9ff 46%, #d9f3e6 100%); }
/* ヒーロー背景を冒頭ATTENTIONと同じ時間帯カラーに（PCはiframeの街が覆う／スマホ・読込中はこのグラデが見える） */
html.att-day   .hero{ background:linear-gradient(180deg,#bfe9ff 0%, #e6f6ff 56%, #fbfff0 100%); }
html.att-morn  .hero{ background:linear-gradient(180deg,#cfe3f0 0%, #f3e7df 58%, #ffe7cb 100%); }
html.att-eve   .hero{ background:linear-gradient(180deg,#6e5388 0%, #f2a25a 56%, #ffd9a0 100%); }
html.att-night .hero{ background:linear-gradient(180deg,#0d1730 0%, #1a2a4e 60%, #2c3d61 100%); }
/* 流れるピクセル雲（ATTENTIONと同じ意匠／herobgより後ろ＝PCでは街が覆い、スマホ・読込中に見える） */
.heroclouds{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hcloud{ position:absolute; left:-120px; width:14px; height:14px; background:#fff; opacity:.9; border-radius:1px;
  box-shadow:14px 0 #fff,28px 0 #fff,42px 0 #fff,14px -14px #fff,28px -14px #fff,-14px 0 #fff;
  animation:hcloudDrift linear infinite; will-change:left; }
.hcloud.c1{ top:14%; transform:scale(1);   animation-duration:46s; }
.hcloud.c2{ top:26%; transform:scale(1.5); opacity:.8;  animation-duration:64s; animation-delay:-22s; }
.hcloud.c3{ top:9%;  transform:scale(.8);  opacity:.75; animation-duration:78s; animation-delay:-50s; }
.hcloud.c4{ top:34%; transform:scale(1.2); opacity:.85; animation-duration:54s; animation-delay:-12s; }
.hcloud.c5{ top:20%; transform:scale(.9);  opacity:.7;  animation-duration:70s; animation-delay:-35s; }
@keyframes hcloudDrift{ from{ left:-140px; } to{ left:calc(100% + 120px); } }   /* 雲本体(box-shadowで右へ伸びる)が完全に抜けてからループ＝端でパッと消えない */
@media (prefers-reduced-motion: reduce){ .hcloud{ animation:none; left:auto; right:18%; } }   /* 動きを抑える設定では雲を流さず静止配置 */
/* 夕方・夜の暗いグラデでは本文が読めるよう明色へ（昼・朝は従来の濃色のまま） */
html.att-eve .hero .tag, html.att-night .hero .tag{ color:#eef7f1; text-shadow:0 1px 4px rgba(0,0,0,.55); }
html.att-eve .hero .sub, html.att-night .hero .sub{ color:#dbeee6; text-shadow:0 1px 4px rgba(0,0,0,.5); }
html.att-eve .hero .scrollcue, html.att-night .hero .scrollcue{ color:#eef7f1; }
/* 下部に街のシルエット（ATTENTIONと同じビルパターン／herobgより後ろ＝PCでは街が覆い、スマホ・読込中に見える） */
.herotown{ position:absolute; left:0; right:0; bottom:0; width:100%; height:120px; z-index:0; opacity:.92; pointer-events:none; }   /* 高さ=パターンタイル(120px)＝ビルの土台が下端にピタッと揃う（隙間なし） */
html.att-day   .herotown g:nth-of-type(1) rect{ fill:#9ccdb3; }
html.att-morn  .herotown g:nth-of-type(1) rect{ fill:#a7c2c9; }
html.att-eve   .herotown g:nth-of-type(1) rect{ fill:#7a5670; }
html.att-night .herotown g:nth-of-type(1) rect{ fill:#1f2a47; }
html.att-day   .herotown g:nth-of-type(2) rect{ fill:#eef6d8; }
html.att-morn  .herotown g:nth-of-type(2) rect{ fill:#dfe6ee; }
html.att-eve   .herotown g:nth-of-type(2) rect{ fill:#ffd070; }
html.att-night .herotown g:nth-of-type(2) rect{ fill:#ffe39a; }
.herobg{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1;
  pointer-events:none; display:none; }   /* about.js が端末に応じて iframe か canvas を表示 */
#heroTown{ opacity:0; transition:opacity 1s ease; }   /* 街の準備完了までは隠し、フェードイン */
#heroTown.ready{ opacity:1; }
.hero::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,247,234,0) 55%, rgba(255,247,234,.85) 100%); }
.hero .inner{ position:relative; z-index:3; padding:120px 0 60px; }
.hero h1{ font-family:"Press Start 2P", monospace; line-height:1.35;
  font-size:clamp(30px,7vw,62px); color:#fff; text-shadow:0 6px 0 #1b6e66, 0 10px 24px rgba(0,0,0,.18); }
.hero h1 span{ color:var(--yellow); text-shadow:0 6px 0 #c98f00, 0 10px 24px rgba(0,0,0,.18); }
.hero .tag{ margin-top:22px; font-size:clamp(16px,2.4vw,22px); font-weight:700; color:#0f4a44;
  text-shadow:0 1px 3px rgba(255,255,255,.6); max-width:560px; }
.hero .sub{ margin-top:14px; font-size:15px; color:#16624f; max-width:520px;
  text-shadow:0 1px 2px rgba(255,255,255,.6); }
.hero .actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none;
  font-family:"DotGothic16", monospace; font-size:16px; border:none; border-radius:50px;
  padding:15px 30px; transition:transform .12s, box-shadow .12s; }
.btn-primary{ background:var(--coral); color:#fff; box-shadow:0 7px 0 #c64a40, 0 12px 24px rgba(0,0,0,.14); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(5px); box-shadow:0 2px 0 #c64a40; }
.btn-ghost{ background:rgba(255,255,255,.82); color:var(--ink); box-shadow:0 6px 0 #d7cfbd; }
.btn-ghost:hover{ transform:translateY(-2px); }
.hero .scrollcue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  font-family:"DotGothic16",monospace; font-size:11px; color:#0f4a44; text-align:center; opacity:.8;
  animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateX(-50%) translateY(8px); } }

/* ---------- generic section ---------- */
section{ position:relative; padding:clamp(64px,9vw,120px) 0; }
.eyebrow{ font-family:"DotGothic16",monospace; font-size:12px; letter-spacing:3px; color:var(--teal);
  text-transform:uppercase; }
.eyebrow.coral{ color:var(--coral); } .eyebrow.grape{ color:var(--grape); }
h2.title{ margin-top:10px; font-size:clamp(26px,4.4vw,42px); line-height:1.4; font-weight:900; }
.lead{ margin-top:18px; font-size:clamp(15px,2vw,18px); max-width:640px; }
.muted{ color:#7a7490; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* ---------- concept band ---------- */
.concept{ background:var(--cream); }
.concept .row{ margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.physcard{ background:#fff; border:3px solid var(--ink); border-radius:22px; padding:26px 22px;
  box-shadow:var(--shadow); position:relative; }
.physcard .ico{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:rgba(38,194,179,.12); }
.physcard .ico svg{ width:30px; height:30px; }
.physcard .ico-walk{ color:var(--teal); background:rgba(38,194,179,.12); }
.physcard .ico-talk{ color:var(--coral); background:rgba(255,107,94,.12); }
.physcard .ico-play{ color:var(--grape); background:rgba(155,123,255,.14); }
.physcard h3{ margin-top:12px; font-size:19px; font-weight:900; }
.physcard p{ margin-top:8px; font-size:14.5px; color:#5b5570; }
@media (max-width:780px){ .concept .row{ grid-template-columns:1fr; } }

/* ---------- residents ---------- */
.residents{ background:linear-gradient(180deg,#fff7ea, #fdeede); }
.exlabel{ margin-top:26px; display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:#7a7490; }
.exlabel span{ font-family:"DotGothic16",monospace; font-size:11px; letter-spacing:2px; color:#fff;
  background:var(--coral); padding:4px 11px; border-radius:30px; }
.crew{ margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.face{ position:relative; background:#fff; border:3px solid var(--ink); border-radius:20px; padding:20px 16px 22px;
  text-align:center; box-shadow:var(--shadow); transition:transform .18s; }
.face::after{ content:"EXAMPLE"; position:absolute; top:10px; right:10px; font-family:"DotGothic16",monospace;
  font-size:9px; letter-spacing:1px; color:#a59ebb; background:rgba(42,36,64,.06); padding:2px 7px; border-radius:20px; }
.face:hover{ transform:translateY(-6px) rotate(-1deg); }
.vox{ width:96px; height:96px; margin:0 auto; image-rendering:pixelated; }
.face .nm{ margin-top:12px; font-weight:900; font-size:16px; }
.face .rl{ font-family:"DotGothic16",monospace; font-size:11px; color:var(--teal); margin-top:2px; }
.face .ds{ margin-top:8px; font-size:13px; color:#6b6582; line-height:1.6; text-align:left; }
.face.boss{ background:#fff4d6; border-color:#c98f00; }
.face.boss .rl{ color:#c98f00; }
.addnote{ margin-top:30px; text-align:center; font-size:14.5px; color:#7a7490; }
.addnote b{ color:var(--coral); }
@media (max-width:880px){ .crew{ grid-template-columns:repeat(2,1fr); } }

/* ---------- interactive features ---------- */
.feat{ background:#2a2440; color:#fff7ea; }
.feat .eyebrow{ color:var(--yellow); }
.feat h2.title, .feat .lead{ color:#fff7ea; }
.feat .grid{ margin-top:48px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.fcard{ background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.16); border-radius:22px;
  padding:30px 26px; transition:border-color .2s, transform .2s; }
.fcard:hover{ border-color:var(--yellow); transform:translateY(-4px); }
.fcard .tag{ display:inline-block; font-family:"DotGothic16",monospace; font-size:11px; letter-spacing:2px;
  color:#2a2440; background:var(--yellow); padding:4px 12px; border-radius:30px; }
.fcard h3{ margin-top:16px; font-size:22px; font-weight:900; }
.fcard p{ margin-top:10px; font-size:15px; color:rgba(255,247,234,.82); }
@media (max-width:780px){ .feat .grid{ grid-template-columns:1fr; } }

/* ---------- honest / limitations ---------- */
.honest{ background:linear-gradient(180deg,#f6efe3,#efe7d8); }
.balance{ margin-top:46px; display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.bcard{ background:#fff; border:3px solid var(--ink); border-radius:22px; padding:26px 26px 28px; box-shadow:var(--shadow); }
.bcard .bh{ font-size:18px; font-weight:900; display:flex; align-items:center; gap:10px; }
.bcard .bk{ font-family:"DotGothic16",monospace; width:34px; height:34px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; color:#fff; font-size:16px; }
.bcard.good{ border-color:var(--teal); } .bcard.good .bk{ background:var(--teal); }
.bcard.limit{ border-color:#d98a2b; } .bcard.limit .bk{ background:#d98a2b; }
.bcard ul{ margin-top:16px; list-style:none; }
.bcard li{ position:relative; padding:9px 0 9px 22px; font-size:15px; border-bottom:1px dashed rgba(42,36,64,.12); line-height:1.6; }
.bcard li:last-child{ border-bottom:0; }
.bcard li::before{ content:""; position:absolute; left:4px; top:17px; width:8px; height:8px; border-radius:2px; }
.bcard.good li::before{ background:var(--teal); }
.bcard.limit li::before{ background:#d98a2b; }
.bcard.limit li em{ font-style:normal; color:#b66a14; font-weight:700; white-space:nowrap; }
.rolenote{ margin-top:30px; padding:20px 24px; background:#fff; border-radius:18px; border:2px dashed var(--grape);
  font-size:15px; color:#5b5570; line-height:1.85; }
.rolenote b{ color:var(--grape); }
@media (max-width:780px){ .balance{ grid-template-columns:1fr; } .bcard.limit li em{ display:block; white-space:normal; } }

/* ---------- use cases ---------- */
.uses{ background:linear-gradient(180deg,#eafaf6,#d9f3e6); }
.chips{ margin-top:40px; display:flex; flex-wrap:wrap; gap:12px; }
.chip{ background:#fff; border:2px solid var(--ink); border-radius:40px; padding:12px 22px;
  font-weight:700; font-size:15px; box-shadow:0 5px 0 rgba(42,36,64,.12); }
.chip span{ color:var(--teal); }

/* ---------- steps ---------- */
.steps{ background:var(--cream); }
.flow{ margin-top:46px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step{ position:relative; padding:26px 20px; background:#fff; border-radius:20px; box-shadow:var(--shadow);
  border:3px solid var(--ink); }
.step .no{ font-family:"Press Start 2P",monospace; font-size:18px; color:var(--coral); }
.step h3{ margin-top:14px; font-size:17px; font-weight:900; }
.step p{ margin-top:8px; font-size:13.5px; color:#5b5570; }
@media (max-width:880px){ .flow{ grid-template-columns:repeat(2,1fr); } }

/* ---------- CTA ---------- */
.cta{ background:linear-gradient(160deg, var(--teal), #1b8f82 60%, #15756a); color:#fff; text-align:center; }
.cta h2{ font-family:"Press Start 2P",monospace; font-size:clamp(20px,4vw,34px); line-height:1.5; }
.cta p{ margin:22px auto 0; max-width:560px; font-size:16px; color:rgba(255,255,255,.92); }
.cta .actions{ margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta .btn-primary{ box-shadow:0 7px 0 #b34a40, 0 12px 24px rgba(0,0,0,.2); }
.cta .btn-light{ background:#fff; color:var(--ink); box-shadow:0 7px 0 rgba(0,0,0,.18); }
.cta .btn-light:hover{ transform:translateY(-2px); }
.cta .url{ margin-top:18px; font-family:"DotGothic16",monospace; font-size:13px; color:rgba(255,255,255,.85); }
.cta .url a{ color:#fff; }

/* ---------- footer ---------- */
footer{ background:#221d33; color:rgba(255,247,234,.7); padding:40px 0; text-align:center; font-size:13px; }
footer .pixel{ font-size:12px; color:#fff7ea; }
footer a{ color:var(--yellow); text-decoration:none; }
footer .links{ margin-top:12px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
footer .credit{ margin-top:8px; font-size:12px; color:rgba(255,247,234,.6); }
footer .credit a{ font-weight:700; border-bottom:1px dotted rgba(255,213,74,.5); }
footer .credit a:hover{ border-bottom-color:var(--yellow); }