/* ============================================================
 * 演出（雪・追従キャラ・動き）のスタイル
 * 「演出を控えめにする」がオンのとき（html.is-lite）は、動きを止める。
 * ============================================================ */

/* 雪: 背景の飾り。内容の窓より後ろに置き、クリックやタップは受け取らない。 */
.snow { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* マウスについてくるかめりあー: 飾り。クリックは受け取らない。 */
.follower {
  position: fixed; left: 0; top: 0; z-index: 90;
  width: 48px; height: 48px;
  pointer-events: none; opacity: 0; visibility: hidden;
  will-change: transform;
}
.follower.is-on { opacity: 1; visibility: visible; }
.follower__sprite { display: block; width: 100%; height: 100%; background-repeat: no-repeat; }
html:not(.yz-follower-on) .follower, html.is-touch .follower { display: none; }

@keyframes yz-hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.follower.is-happy .follower__sprite { animation: yz-hop .42s ease-out 2; }
.guide__cat.is-hop .guide__sprite { animation: yz-hop .4s ease-out 2; }

/* 案内役かめりあーの反応（js/effects/guide.js が data-anim を切り替える）
 * 演出を控えめにしているときは、下の is-lite の決まりで動きが止まり、止め絵になる。 */
.guide__sprite[data-anim="purr"] {            /* なでる → ごろごろ（目を細めて、ゆっくりゆれる） */
  background: url(../assets/pixel/kamelia-walk-blink@5x.png) 0 0 / 48px 48px no-repeat;
  animation: yz-purr .5s ease-in-out infinite alternate;
}
.guide__sprite[data-anim="purr"]::after {
  content: ''; position: absolute; right: -8px; top: -10px; width: 14px; height: 12px;
  /* ハートの形は下の絵、色は変数。色を :root に集めるため、絵を型抜き（mask）として使う */
  background: var(--heart);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: yz-heart 1.1s ease-out infinite;
}
.guide__sprite[data-anim="walk"] {            /* 見守る → おさんぽ（4コマ） */
  background: url(../assets/pixel/sprite-kamelia-walk@4x.png) 0 0 / 192px 48px no-repeat;
  animation: yz-walk4 .8s steps(4) infinite, yz-stroll 1.6s ease-in-out infinite;
}
.guide__sprite[data-anim="hug"] {             /* 押したまま → だっこ（11コマ） */
  background: url(../assets/pixel/sprite-yozuri-hug-kamelia@4x.png) 0 0 / 528px 48px no-repeat;
  animation: yz-hug11 2.4s steps(11) infinite;
}
@keyframes yz-purr { from { translate: 0 0; } to { translate: 0 -3px; } }
@keyframes yz-heart { 0% { translate: 0 4px; opacity: 0; } 25% { opacity: 1; } 100% { translate: 0 -10px; opacity: 0; } }
@keyframes yz-walk4 { to { background-position: -192px 0; } }
@keyframes yz-stroll { 0%, 100% { translate: 0 0; } 50% { translate: -5px 0; } }
@keyframes yz-hug11 { to { background-position: -528px 0; } }

/* かくれ星のかすかなまたたき */
@keyframes yz-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.hidden-star:not(.is-found) .px-icon { animation: yz-twinkle 2.8s ease-in-out infinite; }

/* スタンプを押す動き */
@keyframes yz-pon {
  0% { transform: scale(2.1) rotate(-18deg); opacity: 0; }
  55% { opacity: 1; }
  78% { transform: scale(.94) rotate(var(--seal-rot, 0deg)); }
  100% { transform: scale(1) rotate(var(--seal-rot, 0deg)); opacity: 1; }
}
.seal--pon { animation: yz-pon .46s cubic-bezier(.3, .9, .4, 1) both; }

/* 獲得したときに短く舞う星と雪 */
@keyframes yz-bit { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--drift, 0px), 340px); opacity: 0; } }
.cele__bit { animation: yz-bit 1.5s linear both; }

@keyframes yz-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.is-pop { display: inline-block; animation: yz-pop .22s ease-out; }

/* QRの読み取り線（疑似） */
@keyframes yz-scan { 0% { transform: translateY(0); } 100% { transform: translateY(160px); } }
.scanner.is-scanning .scanner__line { opacity: 1; animation: yz-scan .8s linear infinite alternate; }

/* ダイアログの出かた */
@keyframes yz-sheet { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__panel { animation: yz-sheet .18s ease-out both; }
.toast { animation: yz-sheet .18s ease-out both; }

/* ---------- 演出を控えめにする ---------- */
html.is-lite *, html.is-lite *::before, html.is-lite *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
html.is-lite .cele__burst { display: none; }
html.is-lite .guide__sprite[data-anim]::after { animation: none; opacity: 1; }
html.is-lite .mem-card__inner { transition: none; }