/* ============================================
   Animation PLUS for SWELL — animation.css
   ============================================ */

/* --- スクロールトリガー型：初期状態（非表示）--- */
[data-sap-anim="fade-up"]    { opacity: 0; transform: translateY(30px); }
[data-sap-anim="fade-down"]  { opacity: 0; transform: translateY(-30px); }
[data-sap-anim="fade-left"]  { opacity: 0; transform: translateX(-40px); }
[data-sap-anim="fade-right"] { opacity: 0; transform: translateX(40px); }
[data-sap-anim="zoom-in"]    { opacity: 0; transform: scale(0.8); }
[data-sap-anim="zoom-out"]   { opacity: 0; transform: scale(1.2); }
[data-sap-anim="bounce-in"]  { opacity: 0; }
[data-sap-anim="flip-up"]    { opacity: 0; transform: perspective(400px) rotateX(30deg); }
[data-sap-anim="blur-in"]    { opacity: 0; filter: blur(10px); }

/* --- スクロールトリガー型：発動後（.sap-is-animatedクラス付与時）--- */
[data-sap-anim="fade-up"].sap-is-animated {
    animation: sap-fade-up var(--sap-speed, 1.2s) ease var(--sap-delay, 0s) forwards;
}
[data-sap-anim="fade-down"].sap-is-animated {
    animation: sap-fade-down var(--sap-speed, 1.2s) ease var(--sap-delay, 0s) forwards;
}
[data-sap-anim="fade-left"].sap-is-animated {
    animation: sap-fade-left var(--sap-speed, 1.2s) ease var(--sap-delay, 0s) forwards;
}
[data-sap-anim="fade-right"].sap-is-animated {
    animation: sap-fade-right var(--sap-speed, 1.2s) ease var(--sap-delay, 0s) forwards;
}
[data-sap-anim="zoom-in"].sap-is-animated {
    animation: sap-zoom-in var(--sap-speed, 1.2s) ease var(--sap-delay, 0s) forwards;
}
[data-sap-anim="zoom-out"].sap-is-animated {
    animation: sap-zoom-out var(--sap-speed, 1.2s) ease var(--sap-delay, 0s) forwards;
}
[data-sap-anim="bounce-in"].sap-is-animated {
    animation: sap-bounce-in var(--sap-speed, 1.2s) ease var(--sap-delay, 0s) forwards;
}
[data-sap-anim="flip-up"].sap-is-animated {
    animation: sap-flip-up var(--sap-speed, 1.2s) ease var(--sap-delay, 0s) forwards;
}
[data-sap-anim="blur-in"].sap-is-animated {
    animation: sap-blur-in var(--sap-speed, 1.2s) ease var(--sap-delay, 0s) forwards;
}

/* --- 継続ループ型（常時アニメーション）--- */
[data-sap-anim="pulse"].sap-is-animated {
    animation: sap-pulse 1.5s ease-in-out infinite;
}
[data-sap-anim="shake"].sap-is-animated {
    animation: sap-shake 1.2s ease-in-out infinite;
}
[data-sap-anim="float"].sap-is-animated {
    animation: sap-float 3s ease-in-out infinite;
}

/* --- キーフレーム定義 --- */
@keyframes sap-fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes sap-fade-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes sap-fade-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes sap-fade-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes sap-zoom-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes sap-zoom-out {
    from { opacity: 0; transform: scale(1.2); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes sap-bounce-in {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  {             transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes sap-flip-up {
    from { opacity: 0; transform: perspective(400px) rotateX(30deg); }
    to   { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}
@keyframes sap-blur-in {
    from { opacity: 0; filter: blur(10px); }
    to   { opacity: 1; filter: blur(0px); }
}
@keyframes sap-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes sap-shake {
    0%, 100%  { transform: translateX(0); }
    20%, 60%  { transform: translateX(-6px); }
    40%, 80%  { transform: translateX(6px); }
}
@keyframes sap-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}