/* Lucian UX/UI Prompt #022 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#022 */
/*
 * 求人の保存（しおり）ボタンのアイコンと、押したときのはじける動き（lp/u022.js）。
 * ボタン自体の大きさ・位置は remote.css の .fav / .fav-wide のまま。元の112pxの演出を
 * .u022-fx にまとめ、--k で縮めてボタンに収めている（動きの時間・曲線は元のまま）。
 * 色は tokens.css の --z-* に対応させる。サイトにダークテーマはまだないため、
 * ダークの値は :root[data-theme="dark"] のときだけ使う。
 */
.u022,.u022-meta{
  --ux-ink:var(--z-navy);
  --ux-ink-2:var(--z-text-3);
  --ux-ease:cubic-bezier(.2,.8,.2,1);
  --ux-spring:cubic-bezier(.34,1.45,.64,1);
  --k:.46;
}
:root[data-theme="dark"] .u022,:root[data-theme="dark"] .u022-meta{--ux-ink:#F4F0E8;--ux-ink-2:rgba(244,240,232,.68)}

.u022-fx{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px;transform:scale(var(--k));pointer-events:none}
.u022-ico{position:relative;width:24px;height:24px;flex:none}
.u022-heart{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-24px 0 0 -26px}
.u022-heart svg{width:100%;height:100%;overflow:visible}
.u022-o{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round}
.u022.is-on .u022-o{stroke:transparent}
.u022-f{transform-origin:50% 55%;transform:scale(0);transition:transform .2s var(--ux-ease)}
.u022.is-on .u022-f{transform:scale(1)}
.u022.is-pop .u022-heart{animation:u022-beat .7s var(--ux-ease)}
@keyframes u022-beat{0%{transform:scale(1)}18%{transform:scale(.72)}48%{transform:scale(1.24)}70%{transform:scale(.94)}100%{transform:scale(1)}}
.u022.is-pop .u022-f{animation:u022-fill .7s var(--ux-ease)}
@keyframes u022-fill{0%,18%{transform:scale(0)}48%{transform:scale(1)}}
.u022-ring{position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px;border-radius:50%;border:12px solid #8C9DFF;transform:scale(0);opacity:0;pointer-events:none}
.u022.is-pop .u022-ring{animation:u022-ring .6s var(--ux-ease) .1s}
@keyframes u022-ring{0%{transform:scale(.3);opacity:1;border-width:22px}100%{transform:scale(1);opacity:0;border-width:0}}
.u022-dot{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;transform:rotate(var(--a))}
.u022-dot i{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--c);opacity:0}
.u022-dot i+i{width:6px;height:6px;margin:-3px;background:var(--c2)}
.u022.is-pop .u022-dot i{animation:u022-fly .7s var(--ux-ease) .18s}
.u022.is-pop .u022-dot i+i{animation-name:u022-fly2}
@keyframes u022-fly{0%{opacity:1;transform:translate(0,-46px) scale(1)}100%{opacity:0;transform:translate(0,-84px) scale(.2)}}
@keyframes u022-fly2{0%{opacity:1;transform:translate(9px,-40px) scale(1)}100%{opacity:0;transform:translate(16px,-74px) scale(.2)}}
/* 一覧のカードの丸いボタン: 保存すると、ふちがうすい青に光る */
.fav.u022{overflow:visible;transition:transform .45s var(--ux-spring),box-shadow .5s var(--ux-ease)}
.fav.u022.is-on{box-shadow:0 0 0 1px color-mix(in srgb,#3D5AFE 30%,transparent),0 10px 22px -12px rgba(61,90,254,.65)}
.fav.u022:focus-visible{outline:2px solid #3D5AFE;outline-offset:3px}
/* 何人が保存しているか（求人ページ）。数字は1つずつ回って変わる */
.u022-meta{margin:10px 0 0;display:flex;align-items:center;justify-content:center;gap:2px;font-size:13px;font-weight:700;color:var(--ux-ink-2)}
.u022-meta[hidden]{display:none}
.u022-roll{position:relative;display:inline-block;height:22px;overflow:hidden;font-variant-numeric:tabular-nums;color:var(--ux-ink)}
.u022-roll span{display:block;line-height:22px;transition:transform .5s var(--ux-spring),opacity .3s var(--ux-ease)}
.u022-roll span+span{position:absolute;left:0;top:0}

@media (prefers-reduced-motion:reduce){
  .u022,.u022 *,.u022 *::before,.u022 *::after,.u022-meta *{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}