/* ============================================================
   ペットサロンの世界（午後の日だまり）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：札の上を、足あとが左から先に歩いていき、そのあとから声の札がぽんと弾んで出る。
   流れの3つ：丸い札が弾んで出て、間を小さな足あとの点がつなぐ。
   ============================================================ */

/* 困りごとの一覧：丸い札 */
.w-pet .toc__list{border-top:2px solid rgba(70,115,32,.45)}
.w-pet .toc__list a{border-bottom:1px dashed rgba(70,115,32,.3)}
.w-pet .toc__no{padding:2px 11px;border-radius:999px;background:#E9EFD6;color:#3A5E1A}

/* ---------- 足あとが先に歩いて、札が出る ---------- */
.w-pet .vcard{max-width:min(100%,600px);margin-top:46px}
html.lp-on.w-pet .vcard{opacity:1;transform:none}
.w-pet .vcard::before{content:"";position:absolute;left:4px;right:0;top:-46px;height:38px;pointer-events:none;
  background-image:
    radial-gradient(5px 6px at 12px 26px,#7A5532 92%,transparent),
    radial-gradient(3.2px 2.5px at 19px 19px,#7A5532 92%,transparent),
    radial-gradient(3.2px 2.5px at 22px 23.6px,#7A5532 92%,transparent),
    radial-gradient(3.2px 2.5px at 22px 28.4px,#7A5532 92%,transparent),
    radial-gradient(3.2px 2.5px at 19px 33px,#7A5532 92%,transparent),
    radial-gradient(5px 6px at 44px 11px,#7A5532 92%,transparent),
    radial-gradient(3.2px 2.5px at 51px 4px,#7A5532 92%,transparent),
    radial-gradient(3.2px 2.5px at 54px 8.6px,#7A5532 92%,transparent),
    radial-gradient(3.2px 2.5px at 54px 13.4px,#7A5532 92%,transparent),
    radial-gradient(3.2px 2.5px at 51px 18px,#7A5532 92%,transparent);
  background-size:64px 38px;background-repeat:repeat-x;opacity:.72}
html.lp-on.w-pet .vcard::before{clip-path:inset(0 calc((1 - var(--pw,1)) * 100%) 0 0)}
.w-pet .vcard__in{padding:30px 26px 32px;border-radius:28px 28px 28px 8px;background:#FFFDF7;
  box-shadow:0 26px 50px rgba(110,80,30,.18),0 0 0 2px rgba(70,115,32,.2)}
html.lp-on.w-pet .vcard__in{opacity:var(--po,1);transform-origin:20% 100%;
  transform:translate3d(0,calc((1 - var(--pb,1)) * 26px),0) scale(calc(.88 + .12 * var(--pb,1)))}
.w-pet .vcard__code{padding:2px 13px;border-radius:999px;background:#467320;color:#FFFFFF;letter-spacing:.12em}

/* ---------- こう変わる：足あとの印 ---------- */
.w-pet .scene__title::before{content:"";display:block;width:30px;height:30px;margin-bottom:12px;
  background:
    radial-gradient(7px 6px at 15px 21px,#7A5532 92%,transparent),
    radial-gradient(2.8px 3.4px at 7px 13px,#7A5532 92%,transparent),
    radial-gradient(2.8px 3.4px at 12px 7.5px,#7A5532 92%,transparent),
    radial-gradient(2.8px 3.4px at 18px 7.5px,#7A5532 92%,transparent),
    radial-gradient(2.8px 3.4px at 23px 13px,#7A5532 92%,transparent)}

/* ---------- 流れ：丸い札が弾んで出る ---------- */
.w-pet .flow__list{gap:16px}
.w-pet .flow__list li{border-radius:20px;border:2px solid rgba(70,115,32,.28);background:rgba(255,253,247,.9);box-shadow:0 10px 22px rgba(110,80,30,.1)}
.w-pet .flow__n{border-radius:50%;background:#467320;color:#FFFFFF}
.w-pet .flow__list li + li::before{left:24px;top:-17px;width:7px;height:17px;background:radial-gradient(circle,#7A5532 0 2.3px,transparent 2.8px) 0 0 / 7px 8.5px repeat-y}
html.lp-on.w-pet .flow__list li{opacity:var(--r,1);transform-origin:10% 50%;transform:translate3d(0,calc((1 - var(--r,1)) * 14px),0) scale(calc(.86 + .14 * var(--r,1)))}

/* ---------- 画面のイメージ：ぽんと置かれる ---------- */
.w-pet .mock__body{border-radius:24px;box-shadow:0 26px 54px rgba(110,80,30,.2),0 0 0 2px rgba(70,115,32,.22)}
html.lp-on.w-pet .mock{opacity:var(--m0,1);transform:translate3d(0,calc((1 - var(--m0,1)) * 40px),0) rotate(calc((1 - var(--m0,1)) * -3deg))}

.w-pet .tags li{border-color:rgba(70,115,32,.3)}

@media (min-width:980px){
  .w-pet .vcard{margin-left:4%}
}