/* ============================================================
   AgentSync phone demo — 「人にも、AIにも選ばれるお店へ」セクション用
   出典: agentsync-phone-demo-block.html をそのまま流用（.demo-block / asdemo-* にスコープ済）
   末尾に EC-LP の .ai-demo-slot 用オーバーライド（phoneのみ表示）
   ============================================================ */
/* ===== AgentSync Phone Demo — scoped under .demo-block ===== */
.demo-block {
  --md-blue: #3D6BBF;
  --md-blue-600: #2F58A5;
  --md-cyan: #3AAED8;
  --ink-900: #0E1B33;
  --ink-700: #2A3855;
  --ink-500: #5B6884;
  --ink-300: #BAC3D5;
  --ink-100: #EEF1F7;
  --ink-50:  #F6F8FC;
  --white: #FFFFFF;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  --font-num: "Inter", "Noto Sans JP", sans-serif;
  --cycle: 16s;
  --ease: cubic-bezier(.4, 0, .2, 1);

  position: relative;
  padding: 80px 24px;
  overflow: hidden;
  /* ダーク背景。既に暗いセクション内へ入れる場合はこの background 行を削除可 */
  background: radial-gradient(ellipse at top, #0E1B33 0%, #0A1428 60%, #050913 100%);
  color: var(--white);
  font-family: var(--font-sans);
  font-feature-settings: "palt";
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.demo-block *,
.demo-block *::before,
.demo-block *::after { box-sizing: border-box; }

.demo-block::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(58,174,216,.18), transparent 40%),
    radial-gradient(circle at 82% 70%, rgba(61,107,191,.22), transparent 45%);
  pointer-events: none;
}
.demo-block .demo-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.demo-block .demo-head { text-align: center; margin-bottom: 56px; }
.demo-block .demo-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(58,174,216,.15);
  color: var(--md-cyan);
  border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
}
.demo-block .demo-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--md-cyan);
}
.demo-block .demo-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  margin: 16px 0 10px;
  line-height: 1.4;
  color: var(--white);
}
.demo-block .demo-title em { font-style: normal; color: var(--md-cyan); }
.demo-block .demo-sub {
  color: rgba(255,255,255,.7);
  font-size: 14px;
  max-width: 640px;
  margin: 0 auto;
}

/* ---- layout: steps + phone ---- */
.demo-block .demo-stage {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .demo-block .demo-stage { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
}

/* ---- steps panel ---- */
.demo-block .steps-panel {
  position: relative;
  display: grid;
  gap: 14px;
  max-width: 520px;
}
.demo-block .step-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.demo-block .step-row .sr-num {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(58,174,216,.12);
  color: var(--md-cyan);
  display: grid; place-items: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 15px;
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.demo-block .step-row h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  transition: color .4s var(--ease);
}
.demo-block .step-row p {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
  line-height: 1.7;
}
.demo-block .step-row.active {
  background: rgba(58,174,216,.1);
  border-color: rgba(58,174,216,.4);
  box-shadow: 0 0 32px rgba(58,174,216,.15);
}
.demo-block .step-row.active .sr-num {
  background: linear-gradient(135deg, var(--md-cyan), var(--md-blue));
  color: var(--white);
  box-shadow: 0 0 20px rgba(58,174,216,.5);
}
.demo-block .step-row.active h4 { color: var(--white); }

.demo-block .step-row { animation-duration: var(--cycle); animation-iteration-count: infinite; animation-timing-function: linear; }
.demo-block .step-row.sr-1 { animation-name: asdemo-step1; }
.demo-block .step-row.sr-2 { animation-name: asdemo-step2; }
.demo-block .step-row.sr-3 { animation-name: asdemo-step3; }
.demo-block .step-row.sr-4 { animation-name: asdemo-step4; }
@keyframes asdemo-step1 {
  0%, 3%      { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
  4%, 28%     { background: rgba(58,174,216,.1); border-color: rgba(58,174,216,.4); box-shadow: 0 0 32px rgba(58,174,216,.15); }
  30%, 100%   { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
}
@keyframes asdemo-step2 {
  0%, 28%     { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
  29%, 44%    { background: rgba(58,174,216,.1); border-color: rgba(58,174,216,.4); box-shadow: 0 0 32px rgba(58,174,216,.15); }
  46%, 100%   { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
}
@keyframes asdemo-step3 {
  0%, 44%     { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
  45%, 56%    { background: rgba(58,174,216,.1); border-color: rgba(58,174,216,.4); box-shadow: 0 0 32px rgba(58,174,216,.15); }
  58%, 100%   { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
}
@keyframes asdemo-step4 {
  0%, 56%     { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
  57%, 91%    { background: rgba(58,174,216,.1); border-color: rgba(58,174,216,.4); box-shadow: 0 0 32px rgba(58,174,216,.15); }
  93%, 100%   { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
}
.demo-block .step-row.sr-1 .sr-num { animation: asdemo-num1 var(--cycle) infinite linear; }
.demo-block .step-row.sr-2 .sr-num { animation: asdemo-num2 var(--cycle) infinite linear; }
.demo-block .step-row.sr-3 .sr-num { animation: asdemo-num3 var(--cycle) infinite linear; }
.demo-block .step-row.sr-4 .sr-num { animation: asdemo-num4 var(--cycle) infinite linear; }
.demo-block .step-row.sr-1 h4 { animation: asdemo-head1 var(--cycle) infinite linear; }
.demo-block .step-row.sr-2 h4 { animation: asdemo-head2 var(--cycle) infinite linear; }
.demo-block .step-row.sr-3 h4 { animation: asdemo-head3 var(--cycle) infinite linear; }
.demo-block .step-row.sr-4 h4 { animation: asdemo-head4 var(--cycle) infinite linear; }
@keyframes asdemo-num1 {
  0%, 3%    { background: rgba(58,174,216,.12); color: var(--md-cyan); box-shadow: none; }
  4%, 28%   { background: linear-gradient(135deg, var(--md-cyan), var(--md-blue)); color: #fff; box-shadow: 0 0 20px rgba(58,174,216,.5); }
  30%, 100% { background: rgba(58,174,216,.12); color: var(--md-cyan); box-shadow: none; }
}
@keyframes asdemo-num2 {
  0%, 28%   { background: rgba(58,174,216,.12); color: var(--md-cyan); box-shadow: none; }
  29%, 44%  { background: linear-gradient(135deg, var(--md-cyan), var(--md-blue)); color: #fff; box-shadow: 0 0 20px rgba(58,174,216,.5); }
  46%, 100% { background: rgba(58,174,216,.12); color: var(--md-cyan); box-shadow: none; }
}
@keyframes asdemo-num3 {
  0%, 44%   { background: rgba(58,174,216,.12); color: var(--md-cyan); box-shadow: none; }
  45%, 56%  { background: linear-gradient(135deg, var(--md-cyan), var(--md-blue)); color: #fff; box-shadow: 0 0 20px rgba(58,174,216,.5); }
  58%, 100% { background: rgba(58,174,216,.12); color: var(--md-cyan); box-shadow: none; }
}
@keyframes asdemo-num4 {
  0%, 56%   { background: rgba(58,174,216,.12); color: var(--md-cyan); box-shadow: none; }
  57%, 91%  { background: linear-gradient(135deg, var(--md-cyan), var(--md-blue)); color: #fff; box-shadow: 0 0 20px rgba(58,174,216,.5); }
  93%, 100% { background: rgba(58,174,216,.12); color: var(--md-cyan); box-shadow: none; }
}
@keyframes asdemo-head1 { 0%,3% {color:rgba(255,255,255,.85);} 4%,28% {color:#fff;} 30%,100% {color:rgba(255,255,255,.85);} }
@keyframes asdemo-head2 { 0%,28% {color:rgba(255,255,255,.85);} 29%,44% {color:#fff;} 46%,100% {color:rgba(255,255,255,.85);} }
@keyframes asdemo-head3 { 0%,44% {color:rgba(255,255,255,.85);} 45%,56% {color:#fff;} 58%,100% {color:rgba(255,255,255,.85);} }
@keyframes asdemo-head4 { 0%,56% {color:rgba(255,255,255,.85);} 57%,91% {color:#fff;} 93%,100% {color:rgba(255,255,255,.85);} }

/* ---- phone frame ---- */
.demo-block .phone-wrap { position: relative; justify-self: center; }
.demo-block .phone-wrap::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at center, rgba(58,174,216,.25), transparent 65%);
  filter: blur(20px);
  z-index: 0;
}
.demo-block .phone {
  position: relative;
  width: 320px;
  height: 660px;
  max-width: 100%;
  background: #111827;
  border-radius: 48px;
  padding: 12px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 0 2px rgba(255,255,255,.04);
}
.demo-block .phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  background: #F6F8FC;
  overflow: hidden;
  color: var(--ink-900);
  font-size: 13px;
  line-height: 1.55;
}
.demo-block .notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 28px;
  background: #111827;
  border-radius: 0 0 18px 18px;
  z-index: 50;
}
.demo-block .status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  padding: 10px 26px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--ink-900);
  z-index: 40;
}
.demo-block .status-bar .right { display: flex; align-items: center; gap: 4px; }
.demo-block .status-bar .signal,
.demo-block .status-bar .battery {
  display: inline-block;
  height: 10px;
  background: var(--ink-900);
  border-radius: 1px;
}
.demo-block .status-bar .signal { width: 14px; clip-path: polygon(0 80%, 25% 80%, 25% 60%, 50% 60%, 50% 30%, 75% 30%, 75% 0, 100% 0, 100% 100%, 0 100%); }
.demo-block .status-bar .battery { width: 22px; border-radius: 3px; position: relative; }
.demo-block .status-bar .battery::after { content: ""; position: absolute; right: -3px; top: 2px; width: 2px; height: 6px; background: var(--ink-900); border-radius: 0 1px 1px 0; }

/* ---- scenes ---- */
.demo-block .scene {
  position: absolute;
  inset: 0;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.demo-block .scene-chat { animation: asdemo-chatScene var(--cycle) infinite var(--ease); }
.demo-block .scene-product { animation: asdemo-productScene var(--cycle) infinite var(--ease); }
@keyframes asdemo-chatScene {
  0%, 56%    { opacity: 1; transform: scale(1); }
  58%, 60%   { opacity: 0; transform: scale(.96); }
  92%, 94%   { opacity: 0; transform: scale(1.02); }
  96%, 100%  { opacity: 1; transform: scale(1); }
}
@keyframes asdemo-productScene {
  0%, 56%    { opacity: 0; transform: translateY(20px); pointer-events: none; }
  58%, 92%   { opacity: 1; transform: translateY(0); }
  94%, 100%  { opacity: 0; transform: translateY(-20px); pointer-events: none; }
}

/* ---- chat scene UI ---- */
.demo-block .chat-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 44px 20px 14px;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.85));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-100);
  z-index: 10;
}
.demo-block .ai-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--md-cyan), var(--md-blue));
  display: grid; place-items: center;
  color: white;
  font-weight: 800; font-size: 12px;
  box-shadow: 0 4px 12px rgba(58,174,216,.4);
  position: relative;
}
.demo-block .ai-avatar::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 9px; height: 9px;
  background: #2DB66E;
  border: 2px solid white;
  border-radius: 50%;
}
.demo-block .chat-header .title { font-size: 13px; font-weight: 800; color: var(--ink-900); white-space: nowrap; }
.demo-block .chat-header .status { font-size: 10px; color: var(--ink-500); font-weight: 600; white-space: nowrap; }

.demo-block .chat-area {
  position: absolute;
  top: 92px; left: 0; right: 0; bottom: 80px;
  padding: 18px 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 10px;
}

.demo-block .user-bubble {
  align-self: flex-end;
  max-width: 88%;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--md-blue), var(--md-blue-600));
  color: white;
  border-radius: 18px 18px 4px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(61,107,191,.3);
  opacity: 0;
  transform: translateY(20px) scale(.92);
  animation: asdemo-userBubble var(--cycle) infinite var(--ease);
}
@keyframes asdemo-userBubble {
  0%, 15%     { opacity: 0; transform: translateY(20px) scale(.92); }
  18%, 19%    { opacity: 1; transform: translateY(0) scale(1); }
  56%         { opacity: 1; transform: translateY(0) scale(1); }
  58%, 100%   { opacity: 0; transform: translateY(-10px) scale(.96); }
}

.demo-block .ai-typing {
  align-self: flex-start;
  display: flex; gap: 4px;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--ink-100);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 2px 8px rgba(20,38,76,.04);
  opacity: 0;
  animation: asdemo-aiTyping var(--cycle) infinite var(--ease);
}
.demo-block .ai-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-300);
  animation: asdemo-dot 1.2s infinite ease-in-out;
}
.demo-block .ai-typing span:nth-child(2) { animation-delay: .15s; }
.demo-block .ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes asdemo-dot {
  0%, 60%, 100% { transform: translateY(0); background: var(--ink-300); }
  30% { transform: translateY(-4px); background: var(--md-blue); }
}
@keyframes asdemo-aiTyping {
  0%, 19%   { opacity: 0; }
  20%, 24%  { opacity: 1; }
  25%, 100% { opacity: 0; height: 0; padding: 0; margin: 0; }
}

.demo-block .ai-reply {
  align-self: flex-start;
  max-width: 90%;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--ink-100);
  border-radius: 18px 18px 18px 4px;
  font-size: 12px;
  color: var(--ink-700);
  line-height: 1.7;
  box-shadow: 0 2px 8px rgba(20,38,76,.04);
  opacity: 0;
  transform: translateY(10px);
  animation: asdemo-aiReply var(--cycle) infinite var(--ease);
}
@keyframes asdemo-aiReply {
  0%, 25%    { opacity: 0; transform: translateY(10px); }
  28%, 56%   { opacity: 1; transform: translateY(0); }
  58%, 100%  { opacity: 0; transform: translateY(-10px); }
}

.demo-block .product-rec {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 2px;
}
.demo-block .product-rec .pcard {
  background: white;
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  padding: 8px 6px 10px;
  box-shadow: 0 2px 6px rgba(20,38,76,.04);
  opacity: 0;
  transform: translateY(12px) scale(.95);
  position: relative;
}
.demo-block .product-rec .pcard:nth-child(1) { animation: asdemo-pcard1 var(--cycle) infinite var(--ease); }
.demo-block .product-rec .pcard:nth-child(2) { animation: asdemo-pcard2 var(--cycle) infinite var(--ease); }
.demo-block .product-rec .pcard:nth-child(3) { animation: asdemo-pcard3 var(--cycle) infinite var(--ease); }
@keyframes asdemo-pcard1 {
  0%, 30%    { opacity: 0; transform: translateY(12px) scale(.95); }
  33%, 56%   { opacity: 1; transform: translateY(0) scale(1); }
  58%, 100%  { opacity: 0; transform: translateY(-10px) scale(.96); }
}
@keyframes asdemo-pcard2 {
  0%, 32%    { opacity: 0; transform: translateY(12px) scale(.95); }
  35%, 50%   { opacity: 1; transform: translateY(0) scale(1); }
  52%, 54%   { opacity: 1; transform: translateY(0) scale(1.1); box-shadow: 0 0 0 3px var(--md-blue), 0 8px 24px rgba(61,107,191,.3); }
  56%        { opacity: 0; transform: scale(1.6); }
  58%, 100%  { opacity: 0; transform: translateY(-10px) scale(.96); }
}
@keyframes asdemo-pcard3 {
  0%, 34%    { opacity: 0; transform: translateY(12px) scale(.95); }
  37%, 56%   { opacity: 1; transform: translateY(0) scale(1); }
  58%, 100%  { opacity: 0; transform: translateY(-10px) scale(.96); }
}

.demo-block .pcard .pimg {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(135deg, #EEF3FC, #DCE9FA);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.demo-block .pcard .pimg svg { color: var(--md-blue); opacity: .9; }
.demo-block .pcard .pname {
  margin-top: 6px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-900);
  text-align: center;
  line-height: 1.3;
}
.demo-block .pcard .pprice {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 800;
  color: var(--md-blue);
  text-align: center;
  font-family: var(--font-num);
}

.demo-block .tap-ripple {
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid var(--md-blue);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  animation: asdemo-ripple var(--cycle) infinite var(--ease);
}
@keyframes asdemo-ripple {
  0%, 49%    { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  50%        { opacity: .9; transform: translate(-50%, -50%) scale(0); }
  53%        { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
  100%       { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

.demo-block .input-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 14px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.95) 30%);
  display: flex; gap: 10px; align-items: center;
  z-index: 5;
}
.demo-block .input-box {
  flex: 1;
  height: 38px;
  background: white;
  border: 1px solid var(--ink-100);
  border-radius: 20px;
  padding: 0 16px;
  display: flex; align-items: center;
  font-size: 12px;
  color: var(--ink-700);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
.demo-block .input-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  vertical-align: middle;
  animation: asdemo-typing var(--cycle) infinite steps(48, end);
}
@keyframes asdemo-typing {
  0%, 2%     { width: 0; }
  16%        { width: 100%; }
  17%, 18%   { width: 100%; }
  18.5%      { width: 0; opacity: 0; }
  100%       { width: 0; opacity: 0; }
}
.demo-block .input-cursor {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  background: var(--md-blue);
  margin-left: 1px;
  vertical-align: middle;
  animation: asdemo-blink 1s infinite, asdemo-cursorHide var(--cycle) infinite;
}
@keyframes asdemo-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes asdemo-cursorHide {
  0%, 18%   { visibility: visible; }
  19%, 100% { visibility: hidden; }
}
.demo-block .send-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--md-blue), var(--md-blue-600));
  color: white;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(61,107,191,.3);
  flex-shrink: 0;
  animation: asdemo-sendPulse var(--cycle) infinite var(--ease);
}
@keyframes asdemo-sendPulse {
  0%, 16%   { transform: scale(1); box-shadow: 0 4px 12px rgba(61,107,191,.3); }
  17%       { transform: scale(.9); }
  18%       { transform: scale(1.1); box-shadow: 0 4px 24px rgba(61,107,191,.6); }
  20%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(61,107,191,.3); }
}

/* ---- product page scene ---- */
.demo-block .scene-product .pp-hero {
  position: relative;
  height: 320px;
  background: linear-gradient(160deg, #DCE9FA 0%, #B6D5F5 60%, #9BC1EF 100%);
  display: grid; place-items: center;
  overflow: hidden;
}
.demo-block .scene-product .pp-hero::before {
  content: "";
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,.6), transparent 60%);
  filter: blur(10px);
}
.demo-block .pp-shoe {
  position: relative;
  z-index: 1;
  width: 220px;
  filter: drop-shadow(0 20px 30px rgba(20,38,76,.3));
  animation: asdemo-shoeIn var(--cycle) infinite var(--ease);
}
@keyframes asdemo-shoeIn {
  0%, 57%   { opacity: 0; transform: scale(.7) rotate(-10deg); }
  60%, 90%  { opacity: 1; transform: scale(1) rotate(-6deg); }
  92%, 100% { opacity: 0; transform: scale(1.1) rotate(-4deg); }
}
.demo-block .pp-back {
  position: absolute;
  top: 50px; left: 16px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-900);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.demo-block .pp-fav {
  position: absolute;
  top: 50px; right: 16px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #E04848;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.demo-block .pp-tag {
  position: absolute;
  top: 60px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: rgba(58,174,216,.95);
  color: white;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  z-index: 2;
  animation: asdemo-tagIn var(--cycle) infinite var(--ease);
}
@keyframes asdemo-tagIn {
  0%, 61%   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  64%, 92%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  94%, 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

.demo-block .pp-body {
  padding: 22px 22px 0;
  background: white;
  border-radius: 24px 24px 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 2;
}
.demo-block .pp-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--md-blue);
  animation: asdemo-ppFade var(--cycle) infinite var(--ease) .3s;
}
.demo-block .pp-name {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink-900);
  animation: asdemo-ppFade var(--cycle) infinite var(--ease) .3s;
}
.demo-block .pp-price-row {
  margin-top: 10px;
  display: flex; align-items: baseline; gap: 8px;
  animation: asdemo-ppFade var(--cycle) infinite var(--ease) .4s;
}
.demo-block .pp-price {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink-900);
}
.demo-block .pp-strike {
  font-size: 12px;
  color: var(--ink-300);
  text-decoration: line-through;
  font-family: var(--font-num);
}
.demo-block .pp-off {
  font-size: 10px;
  font-weight: 800;
  color: #E04848;
  background: #FCE7E5;
  padding: 2px 6px;
  border-radius: 4px;
}
.demo-block .pp-feat {
  margin-top: 14px;
  display: flex; gap: 6px;
  flex-wrap: wrap;
  animation: asdemo-ppFade var(--cycle) infinite var(--ease) .5s;
}
.demo-block .pp-feat span {
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  white-space: nowrap;
}
.demo-block .pp-desc {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--ink-500);
  line-height: 1.7;
  animation: asdemo-ppFade var(--cycle) infinite var(--ease) .5s;
}
@keyframes asdemo-ppFade {
  0%, 60%   { opacity: 0; transform: translateY(8px); }
  64%, 92%  { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(-4px); }
}

.demo-block .pp-cart {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 16px 24px;
  background: white;
  border-top: 1px solid var(--ink-100);
  display: flex; gap: 10px;
  z-index: 3;
}
.demo-block .pp-cart .cart-btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--md-blue), var(--md-blue-600));
  color: white;
  display: grid; place-items: center;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(61,107,191,.3);
  animation: asdemo-cartPulse var(--cycle) infinite var(--ease);
}
.demo-block .pp-cart .cart-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink-50);
  display: grid; place-items: center;
  color: var(--ink-700);
}
@keyframes asdemo-cartPulse {
  0%, 72%    { transform: scale(1); box-shadow: 0 4px 16px rgba(61,107,191,.3); }
  76%        { transform: scale(.95); }
  79%        { transform: scale(1.04); box-shadow: 0 4px 24px rgba(61,107,191,.6); }
  82%, 92%   { transform: scale(1); box-shadow: 0 4px 16px rgba(61,107,191,.3); }
  94%, 100%  { transform: scale(1); box-shadow: 0 4px 16px rgba(61,107,191,.3); }
}
.demo-block .cart-btn .label-default,
.demo-block .cart-btn .label-added {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  gap: 6px;
  grid-auto-flow: column;
}
.demo-block .cart-btn .label-default { animation: asdemo-labelDefault var(--cycle) infinite var(--ease); }
.demo-block .cart-btn .label-added  {
  background: #2DB66E;
  animation: asdemo-labelAdded var(--cycle) infinite var(--ease);
  opacity: 0;
}
@keyframes asdemo-labelDefault {
  0%, 79%   { opacity: 1; }
  80%, 92%  { opacity: 0; }
  94%, 100% { opacity: 1; }
}
@keyframes asdemo-labelAdded {
  0%, 79%   { opacity: 0; }
  80%, 92%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}

/* ---- floating cursor ---- */
.demo-block .cursor {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  border: 2px solid var(--md-blue);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 60;
  transform: translate(-50%, -50%) scale(0);
  animation: asdemo-cursorMove var(--cycle) infinite var(--ease);
}
@keyframes asdemo-cursorMove {
  0%, 40%    { opacity: 0; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); }
  44%        { opacity: 1; left: 50%; top: 65%; transform: translate(-50%, -50%) scale(1); }
  48%, 51%   { opacity: 1; left: 50%; top: 65%; transform: translate(-50%, -50%) scale(1); }
  52%        { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
  54%        { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  56%, 70%   { opacity: 0; left: 50%; top: 65%; transform: translate(-50%, -50%) scale(0); }
  72%, 75%   { opacity: 1; left: 59%; top: 93%; transform: translate(-50%, -50%) scale(1); }
  77%        { opacity: 1; left: 59%; top: 93%; transform: translate(-50%, -50%) scale(.82); }
  79%        { opacity: 1; left: 59%; top: 93%; transform: translate(-50%, -50%) scale(1); }
  84%, 100%  { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}

.demo-block .cart-ripple {
  position: absolute;
  top: 93%; left: 59%;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid #2DB66E;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 4;
  animation: asdemo-cartRipple var(--cycle) infinite var(--ease);
}
@keyframes asdemo-cartRipple {
  0%, 78%    { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  79%        { opacity: .9; transform: translate(-50%, -50%) scale(0); }
  82%        { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
  100%       { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

/* ---- orbiting data particles ---- */
.demo-block .orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, white, var(--md-cyan));
  box-shadow: 0 0 20px rgba(58,174,216,.6);
  pointer-events: none;
  z-index: 0;
}
.demo-block .orb-1 { width: 12px; height: 12px; top: 8%; left: -4%; animation: asdemo-orbFloat 8s infinite ease-in-out; }
.demo-block .orb-2 { width: 8px;  height: 8px;  top: 20%; right: -2%; animation: asdemo-orbFloat 7s infinite ease-in-out reverse; }
.demo-block .orb-3 { width: 14px; height: 14px; bottom: 12%; left: -3%; animation: asdemo-orbFloat 9s infinite ease-in-out; animation-delay: -2s; }
.demo-block .orb-4 { width: 6px;  height: 6px;  bottom: 30%; right: -4%; animation: asdemo-orbFloat 6s infinite ease-in-out; animation-delay: -3s; }
@keyframes asdemo-orbFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-20px) translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-block *,
  .demo-block *::before,
  .demo-block *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
  }
}


/* ============================================================
   EC-LP .ai-demo-slot overrides — AIセクション(.ai-card)の暗い背景上で
   phone のみを表示（demo-head / steps-panel を隠し、背景透過）
   ============================================================ */
.ec-lp-page .ai-demo-slot{display:flex;justify-content:center;align-items:center;width:100%}
.ec-lp-page .ai-demo-slot .demo-block{padding:0!important;margin:0!important;background:transparent!important;overflow:visible!important;color:inherit}
.ec-lp-page .ai-demo-slot .demo-block::before{display:none!important}
.ec-lp-page .ai-demo-slot .demo-block .demo-inner{max-width:none!important;margin:0!important;padding:0!important}
.ec-lp-page .ai-demo-slot .demo-block .demo-head,
.ec-lp-page .ai-demo-slot .demo-block .steps-panel{display:none!important}
.ec-lp-page .ai-demo-slot .demo-block .demo-stage{grid-template-columns:1fr!important;gap:0!important;justify-items:center!important;align-items:center!important}
/* 大画面でもカード内に収まるよう少しだけ控えめに */
@media(min-width:821px){
  .ec-lp-page .ai-demo-slot .demo-block .phone{transform:scale(.92);transform-origin:center}
}
@media(max-width:820px){
  .ec-lp-page .ai-demo-slot{overflow:visible}
  .ec-lp-page .ai-demo-slot .demo-block,
  .ec-lp-page .ai-demo-slot .demo-block .demo-inner,
  .ec-lp-page .ai-demo-slot .demo-block .demo-stage{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    place-items:center!important;
  }
  .ec-lp-page .ai-demo-slot .demo-block .phone-wrap{
    width:100%;
    max-width:min(320px,calc(100vw - 112px));
    margin-inline:auto;
    display:grid;
    place-items:center;
    justify-self:center;
  }
  .ec-lp-page .ai-demo-slot .demo-block .phone-wrap::before{
    inset:-20px;
  }
  .ec-lp-page .ai-demo-slot .demo-block .phone{
    width:100%;
    height:auto;
    aspect-ratio:320 / 660;
    max-width:100%;
    transform:none;
  }
}
@media(max-width:420px){
  .ec-lp-page .ai-demo-slot .demo-block .phone-wrap{
    max-width:min(300px,calc(100vw - 96px));
  }
}