/* design-forge preset: pop — animations
   元気・ポップ系:弾む・跳ねる・くるっと回る */

@keyframes fadeUp{
  0%{opacity:0;transform:translateY(36px) scale(.92)}
  60%{opacity:1;transform:translateY(-6px) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(2deg)}
}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* スクロール出現(JSで .is-visible 付与) — ぽよんと弾んで登場 */
.reveal{
  opacity:0;transform:translateY(36px) scale(.92);
  transition:opacity .55s cubic-bezier(.34,1.56,.64,1),transform .55s cubic-bezier(.34,1.56,.64,1);
}
.reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}
.reveal:nth-child(2){transition-delay:.1s}
.reveal:nth-child(3){transition-delay:.2s}

/* ホバー — 跳ねて浮く */
.hover-lift{transition:transform var(--speed) cubic-bezier(.34,1.56,.64,1),box-shadow var(--speed)}
.hover-lift:hover{transform:translateY(-8px) scale(1.03);box-shadow:var(--shadow-m)}

/* pop固有:ぴょんぴょん跳ねる装飾 */
@keyframes bounce{
  0%,100%{transform:translateY(0)}
  35%{transform:translateY(-14px)}
  55%{transform:translateY(0)}
  70%{transform:translateY(-6px)}
  85%{transform:translateY(0)}
}
.bounce-deco{animation:bounce 1.6s ease-in-out infinite}

/* pop固有:漂う装飾(元気に揺れる) */
.float-deco{display:inline-block;animation:float 3s ease-in-out infinite}

/* pop固有:くるっと回って登場 */
@keyframes spinIn{
  0%{opacity:0;transform:rotate(-200deg) scale(.3)}
  70%{opacity:1;transform:rotate(15deg) scale(1.1)}
  100%{opacity:1;transform:rotate(0deg) scale(1)}
}
.spin-in{animation:spinIn .8s cubic-bezier(.34,1.56,.64,1) both}

/* pop固有:プルプル震える(ホバーで元気アピール) */
@keyframes wiggle{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-4deg)}
  75%{transform:rotate(4deg)}
}
.wiggle:hover{animation:wiggle .35s ease-in-out 2}

/* pop固有:きらっと光るスター(shineの代わりに弾けるフラッシュ) */
@keyframes shine{
  0%{transform:translateX(-120%) skewX(-18deg)}
  100%{transform:translateX(220%) skewX(-18deg)}
}
.shine{position:relative;overflow:hidden}
.shine::after{
  content:"";position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:shine 2.2s ease-in-out infinite;
}