/* =================================================================
    Animation Library 50 (Art Director's Collection)
   ================================================================= */

/* --- 共通設定 --- */
[class*="js-"],
[class*="anim-"] {
    cursor: pointer;
    display: block;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    /* 物理演算のような滑らかな動き */
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* 影は禁止 */
    box-shadow: none !important;
    filter: none;
    transform-style: preserve-3d;
}

/* ホバー時はアニメーション停止 & 1.05倍に拡大 */
[class*="js-"]:hover,
[class*="anim-"]:hover {
    transform: scale(1.05) !important;
    z-index: 100;
    animation-play-state: paused;
    /* 明るくして反応を示す */
    filter: brightness(1.05) !important;
}


/* =================================================================
   Group A: Physics (JS制御のベーススタイル)
   ================================================================= */

/* -----------------------------------------
   【01. Magnetic Breath】
   クラス名: js-magnetic-breath
   ----------------------------------------- */
.js-magnetic-breath {
    will-change: transform;
}

/* -----------------------------------------
   【02. Tilt Float】
   クラス名: js-tilt-float
   ----------------------------------------- */
.js-tilt-float {
    will-change: transform;
}

/* -----------------------------------------
   【03. Spotlight Ambient】
   クラス名: js-spotlight-ambient
   ----------------------------------------- */
.js-spotlight-ambient {
    position: relative;
    z-index: 1;
}

/* -----------------------------------------
   【04. Gooey Drag】
   クラス名: js-gooey-drag
   ----------------------------------------- */
.js-gooey-drag {
    will-change: transform;
}

/* -----------------------------------------
   【05. Proximity Fade】
   クラス名: js-proximity-fade
   ----------------------------------------- */
.js-proximity-fade {
    opacity: 0.8;
    will-change: opacity, transform;
}


/* =================================================================
   Group B: SVG Filters (JS制御のフィルタベーススタイル)
   ================================================================= */

/* -----------------------------------------
   【06. Liquid Wave】
   クラス名: js-liquid-interval
   ----------------------------------------- */
.js-liquid-interval {
    will-change: filter;
}

/* -----------------------------------------
   【07. Glitch Noise】
   クラス名: js-glitch-interval
   ----------------------------------------- */
.js-glitch-interval {
    will-change: filter;
}

/* -----------------------------------------
   【08. Heat Haze】
   クラス名: js-heat-interval
   ----------------------------------------- */
.js-heat-interval {
    will-change: filter;
}

/* -----------------------------------------
   【09. Water Drop】
   クラス名: js-water-drop
   ----------------------------------------- */
.js-water-drop {
    will-change: filter;
}

/* -----------------------------------------
   【10. Chromatic Aberration】
   クラス名: js-chroma-interval
   ----------------------------------------- */
.js-chroma-interval {
    will-change: filter;
}


/* =================================================================
   Group C: Organic Motion (生物的)
   ================================================================= */

/* -----------------------------------------
   【11. Deep Breath】
   クラス名: anim-deep-breath
   ----------------------------------------- */
.anim-deep-breath {
    animation: kf-breath 4s infinite ease-in-out;
}

@keyframes kf-breath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.97);
    }
}

/* -----------------------------------------
   【12. Heart Beat】
   クラス名: anim-heart-beat
   ----------------------------------------- */
.anim-heart-beat {
    animation: kf-heartbeat 2s infinite;
    transform-origin: center;
}

@keyframes kf-heartbeat {

    0%,
    20%,
    40%,
    100% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.03);
    }

    30% {
        transform: scale(1.03);
    }
}

/* -----------------------------------------
   【13. Subtle Morph】
   クラス名: anim-subtle-morph
   ----------------------------------------- */
.anim-subtle-morph {
    animation: kf-morph 5s infinite ease-in-out;
    border-radius: 8px;
}

@keyframes kf-morph {

    0%,
    100% {
        border-radius: 8px;
    }

    50% {
        border-radius: 12px 6px 12px 6px;
    }
}

/* -----------------------------------------
   【14. Zero Gravity】
   クラス名: anim-zero-gravity
   ----------------------------------------- */
.anim-zero-gravity {
    animation: kf-float 3s infinite ease-in-out;
}

@keyframes kf-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* -----------------------------------------
   【15. Jellyfish】
   クラス名: anim-jellyfish
   ----------------------------------------- */
.anim-jellyfish {
    animation: kf-jelly 1s infinite ease-in-out;
    transform-origin: bottom;
}

@keyframes kf-jelly {

    0%,
    100% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.03, 0.98);
    }
}


/* =================================================================
   Group D: Light & Atmosphere (光と質感)
   ================================================================= */

/* -----------------------------------------
   【16. Aurora Smooth】
   クラス名: anim-aurora-smooth
   ----------------------------------------- */
.anim-aurora-smooth {
    animation: kf-aurora 1s infinite alternate linear;
}

@keyframes kf-aurora {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(40deg);
    }
}

/* -----------------------------------------
   【17. Bio Flow】
   クラス名: anim-bio-flow
   ----------------------------------------- */
.anim-bio-flow {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(110deg, #000 30%, rgba(0, 0, 0, 0.7) 45%, #000 60%);
    mask-size: 200% 100%;
    animation: kf-mask-flow 3s infinite linear;
}

@keyframes kf-mask-flow {
    0% {
        mask-position: 100% 0;
    }

    100% {
        mask-position: -100% 0;
    }
}

/* -----------------------------------------
   【18. Shimmer Flow】
   クラス名: anim-shimmer-flow
   ----------------------------------------- */
.anim-shimmer-flow {
    animation: kf-shimmer-flow 3s infinite linear;
}

@keyframes kf-shimmer-flow {

    0%,
    100% {
        filter: brightness(1) contrast(1);
    }

    25% {
        filter: brightness(1) contrast(1);
    }

    50% {
        filter: brightness(1.2) contrast(1.1);
    }

    75% {
        filter: brightness(1) contrast(1);
    }
}

/* -----------------------------------------
   【19. Mist Clear】
   クラス名: anim-mist-clear
   ----------------------------------------- */
.anim-mist-clear {
    animation: kf-mist 1.5s infinite alternate;
}

@keyframes kf-mist {
    0% {
        filter: blur(0px);
        opacity: 1;
    }

    100% {
        filter: blur(1px);
        opacity: 0.95;
    }
}

/* -----------------------------------------
   【20. Prism Smooth】
   クラス名: anim-prism-smooth
   ----------------------------------------- */
.anim-prism-smooth {
    animation: kf-prism 1s infinite alternate;
}

@keyframes kf-prism {
    0% {
        filter: saturate(100%);
    }

    100% {
        filter: saturate(250%);
    }
}


/* =================================================================
   Group E: Geometry (幾何学)
   ================================================================= */

/* -----------------------------------------
   【21. Pendulum】
   クラス名: anim-pendulum
   ----------------------------------------- */
.anim-pendulum {
    transform-origin: top center;
    animation: kf-pendulum 1s infinite ease-in-out;
}

@keyframes kf-pendulum {

    0%,
    100% {
        transform: rotate(1.5deg);
    }

    50% {
        transform: rotate(-1.5deg);
    }
}

/* -----------------------------------------
   【22. Coin Wobble】
   クラス名: anim-coin-wobble
   ----------------------------------------- */
.anim-coin-wobble {
    animation: kf-wobble-3d 4s infinite ease-in-out;
}

@keyframes kf-wobble-3d {

    0%,
    100% {
        transform: perspective(500px) rotateY(0deg);
    }

    25% {
        transform: perspective(500px) rotateY(15deg);
    }

    75% {
        transform: perspective(500px) rotateY(-15deg);
    }
}

/* -----------------------------------------
   【23. Skew Drift】
   クラス名: anim-skew-drift
   ----------------------------------------- */
.anim-skew-drift {
    animation: kf-skew 1s infinite ease-in-out;
}

@keyframes kf-skew {

    0%,
    100% {
        transform: skewX(0);
    }

    50% {
        transform: skewX(-5deg) translateX(5px);
    }
}

/* -----------------------------------------
   【24. Elegant Ring】
   クラス名: anim-elegant-ring
   ----------------------------------------- */
.anim-elegant-ring {
    animation: kf-ring 3s infinite;
    outline: 1px solid rgba(255, 255, 255, 0);
    outline-offset: 0;
}

@keyframes kf-ring {
    0% {
        outline-color: rgba(0, 0, 0, 0);
        outline-offset: 0;
    }

    50% {
        outline-color: rgba(0, 0, 0, 0.1);
        outline-offset: 4px;
    }

    100% {
        outline-color: rgba(0, 0, 0, 0);
        outline-offset: 8px;
    }
}

/* -----------------------------------------
   【25. Nervous】
   クラス名: anim-nervous
   ----------------------------------------- */
.anim-nervous {
    animation: kf-nervous 0.2s infinite;
}

@keyframes kf-nervous {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(3px, 3px);
    }

    50% {
        transform: translate(0, 0);
    }

    75% {
        transform: translate(-0.3px, -0.3px);
    }
}


/* =================================================================
   Group F: Action (アクション)
   ================================================================= */

/* -----------------------------------------
   【26. Camera Focus】
   クラス名: anim-camera-focus
   ----------------------------------------- */
.anim-camera-focus {
    animation: kf-focus 1s infinite alternate;
}

@keyframes kf-focus {
    0% {
        filter: blur(0);
        transform: scale(1);
    }

    100% {
        transform: scale(0.92);
    }
}

/* -----------------------------------------
   【27. Squeeze Hold】
   クラス名: anim-squeeze-hold
   ----------------------------------------- */
.anim-squeeze-hold {
    animation: kf-squeeze 2s infinite ease-in-out;
}

@keyframes kf-squeeze {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03, 0.9);
    }
}

/* -----------------------------------------
   【28. Sign Swing】
   クラス名: anim-sign-swing
   ----------------------------------------- */
.anim-sign-swing {
    transform-origin: top center;
    animation: kf-swing 2s infinite ease-in-out;
}

@keyframes kf-swing {

    0%,
    100% {
        transform: rotateX(0);
    }

    50% {
        transform: rotateX(15deg);
    }
}

/* -----------------------------------------
   【29. Flutter】
   クラス名: anim-flutter
   ----------------------------------------- */
.anim-flutter {
    animation: kf-flutter 0.3s infinite linear;
}

@keyframes kf-flutter {
    0% {
        transform: rotate(1deg);
    }

    50% {
        transform: rotate(-0.5deg);
    }

    100% {
        transform: rotate(1deg);
    }
}

/* -----------------------------------------
   【30. Mag Lev】
   クラス名: anim-mag-lev
   ----------------------------------------- */
.anim-mag-lev {
    animation: kf-mag 0.5s infinite ease-in-out;
}

@keyframes kf-mag {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


/* =================================================================
   Group G: Modern UI (実務向け質感)
   ================================================================= */

/* -----------------------------------------
   【31. Glass Slide】
   クラス名: anim-glass-slide
   ----------------------------------------- */
.anim-glass-slide {
    mask-image: linear-gradient(135deg, #000 40%, rgba(0, 0, 0, 0.5) 50%, #000 60%);
    mask-size: 300% 100%;
    animation: kf-glass 2s infinite ease-in-out;
}

@keyframes kf-glass {
    0% {
        mask-position: 100% 0;
    }

    100% {
        mask-position: 0% 0;
    }
}

/* -----------------------------------------
   【32. Soft Lift】
   クラス名: anim-soft-lift
   ----------------------------------------- */
.anim-soft-lift {
    animation: kf-soft-lift 2s infinite ease-in-out;
}

@keyframes kf-soft-lift {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

/* -----------------------------------------
   【33. Elastic Scale】
   クラス名: anim-elastic-scale
   ----------------------------------------- */
.anim-elastic-scale {
    animation: kf-elastic 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1);
}

@keyframes kf-elastic {

    0%,
    100% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.08);
    }

    20% {
        transform: scale(1);
    }
}

/* -----------------------------------------
   【34. Tracking】
   クラス名: anim-tracking
   ----------------------------------------- */
.anim-tracking {
    animation: kf-tracking 2s infinite ease-in-out;
}

@keyframes kf-tracking {

    0%,
    100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(1.05);
    }
}

/* -----------------------------------------
   【35. Blur Reveal】
   クラス名: anim-blur-reveal
   ----------------------------------------- */
.anim-blur-reveal {
    animation: kf-blur-rev 0.5s infinite alternate;
}

@keyframes kf-blur-rev {
    0% {
        filter: blur(0) brightness(1);
    }

    100% {
        filter: blur(0.3px) brightness(1.1);
    }
}

/* -----------------------------------------
   【36. Desaturate Pulse】
   クラス名: anim-desat-pulse
   ----------------------------------------- */
.anim-desat-pulse {
    animation: kf-desat 1s infinite alternate;
}

@keyframes kf-desat {
    0% {
        filter: saturate(100%);
    }

    100% {
        filter: saturate(50%);
    }
}

/* -----------------------------------------
   【37. Rotate Sway】
   クラス名: anim-rotate-sway
   ----------------------------------------- */
.anim-rotate-sway {
    animation: kf-r-sway 2s infinite ease-in-out;
}

@keyframes kf-r-sway {

    0%,
    100% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
    }
}

/* -----------------------------------------
   【38. Skew Jolt】
   クラス名: anim-skew-jolt
   ----------------------------------------- */
.anim-skew-jolt {
    animation: kf-jolt 1s infinite;
}

@keyframes kf-jolt {

    0% {
        transform: skewX(0);
    }

    80% {
        transform: skewX(-3deg);
    }

    97% {
        transform: skewX(3deg);
    }
}

/* -----------------------------------------
   【39. Float Diagonal】
   クラス名: anim-float-diagonal
   ----------------------------------------- */
.anim-float-diagonal {
    animation: kf-diag 1.5s infinite ease-in-out;
}

@keyframes kf-diag {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(8px, 0px);
    }
}

/* -----------------------------------------
   【40. Double Ring】
   クラス名: anim-double-ring
   ----------------------------------------- */
.anim-double-ring {
    animation: kf-double-ring 2s infinite;
    outline: 1px solid transparent;
}

@keyframes kf-double-ring {
    0% {
        outline: 1px solid rgba(255, 255, 255, 0.4);
        outline-offset: 0px;
    }

    50% {
        outline: 1px solid rgba(255, 255, 255, 0);
        outline-offset: 6px;
    }

    100% {
        outline: 1px solid rgba(255, 255, 255, 0);
        outline-offset: 6px;
    }
}


/* =================================================================
   Group H: High-End (アートディレクション)
   ================================================================= */

/* -----------------------------------------
   【41. Cinema Flicker】
   クラス名: anim-cinema-flicker
   ----------------------------------------- */
.anim-cinema-flicker {
    animation: kf-flicker 2s infinite;
}

@keyframes kf-flicker {

    0%,
    100% {
        opacity: 1;
    }

    52% {
        opacity: 1;
    }

    53% {
        opacity: 0.7;
    }

    54% {
        opacity: 1;
    }

    56% {
        opacity: 0.7;
    }

    57% {
        opacity: 1;
    }

    93% {
        opacity: 0.7;
    }

    94% {
        opacity: 1;
    }

    96% {
        opacity: 0.7;
    }

    98% {
        opacity: 1;
    }
}

/* -----------------------------------------
   【42. Flash Bang】
   クラス名: anim-flash-bang
   ----------------------------------------- */
.anim-flash-bang {
    animation: kf-flash 2s infinite;
}

@keyframes kf-flash {

    0%,
    90% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.2);
    }

    95% {
        filter: brightness(1);
    }
}

/* -----------------------------------------
   【43. Vertical Scan】
   クラス名: anim-vertical-scan
   ----------------------------------------- */
.anim-vertical-scan {
    mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0.5) 50%, #000 55%);
    mask-size: 100% 200%;
    animation: kf-scan 1s infinite linear;
}

@keyframes kf-scan {
    0% {
        mask-position: 0 200%;
    }

    100% {
        mask-position: 0 0;
    }
}

/* -----------------------------------------
   【44. Liquid Bounce】
   クラス名: anim-liquid-bounc
   ----------------------------------------- */
.anim-liquid-bounc {
    animation: kf-liquid-b 1.5s infinite cubic-bezier(0.28, 0.84, 0.42, 1);
}

@keyframes kf-liquid-b {

    0%,
    100% {
        transform: scale(1, 1.1);
    }

    50% {
        transform: scale(1.02, 0.96) translateY(2px);
    }
}

/* -----------------------------------------
   【45. Gradient Shift】
   クラス名: anim-gradient-shift
   ----------------------------------------- */
.anim-gradient-shift {
    animation: kf-temp 1s infinite alternate;
}

@keyframes kf-temp {
    0% {
        filter: sepia(0) hue-rotate(0deg);
    }

    100% {
        filter: sepia(0.6) hue-rotate(-5deg);
    }
}

/* -----------------------------------------
   【46. Wobble Z】
   クラス名: anim-wobble-z
   ----------------------------------------- */
.anim-wobble-z {
    animation: kf-wobble-z 2s infinite ease-in-out;
}

@keyframes kf-wobble-z {

    0%,
    100% {
        transform: perspective(500px) translateZ(0);
    }

    50% {
        transform: perspective(500px) translateZ(20px) rotateX(15deg);
    }
}

/* -----------------------------------------
   【47. Stretch Jump】
   クラス名: anim-stretch-jump
   ----------------------------------------- */
.anim-stretch-jump {
    animation: kf-jump 2s infinite;
}

@keyframes kf-jump {

    0%,
    80% {
        transform: scale(1);
    }

    85% {
        transform: scale(1.02, 0.95);
    }

    90% {
        transform: scale(0.98, 1.02);
    }

    100% {
        transform: scale(1);
    }
}

/* -----------------------------------------
   【48. Glitch Snap】
   クラス名: anim-glitch-snap
   ----------------------------------------- */
.anim-glitch-snap {
    animation: kf-g-snap 2s infinite;
}

@keyframes kf-g-snap {

    0%,
    95% {
        transform: translateX(0);
        filter: none;
    }

    96% {
        transform: translateX(-2px);
        filter: hue-rotate(90deg);
    }

    97% {
        transform: translateX(2px);
        filter: hue-rotate(-90deg);
    }

    98% {
        transform: translateX(0);
        filter: none;
    }
}

/* -----------------------------------------
   【49. Fade Cycle】
   クラス名: anim-fade-cycle
   ----------------------------------------- */
.anim-fade-cycle {
    animation: kf-fade-c 1s infinite alternate ease-in-out;
}

@keyframes kf-fade-c {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.1;
    }
}

/* -----------------------------------------
   【50. Ultra Smooth】
   クラス名: anim-ultra-smooth
   ----------------------------------------- */
.anim-ultra-smooth {
    animation: kf-ultra 2s infinite linear;
}

@keyframes kf-ultra {
    0% {
        transform: translate(0, 5);
    }

    25% {
        transform: translate(5px, 5px);
    }

    50% {
        transform: translate(0, 5px);
    }

    75% {
        transform: translate(-1px, 5px);
    }

    100% {
        transform: translate(5, 0);
    }
}