/**
 * 共通アニメーション
 * 依存: なし（独立）
 * 機能: 全体で再利用可能なアニメーション・トランジション
 */

/* ==========================================================================
   CSS Variables - アニメーション用変数
   ========================================================================== */

:root {
    /* イージング */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* 継続時間 */
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
}

/* ==========================================================================
   Base Transitions - 基本トランジション
   ========================================================================== */

.transition {
    transition: all var(--duration-normal) var(--ease-in-out);
}

.transition-fast {
    transition: all var(--duration-fast) var(--ease-in-out);
}

.transition-slow {
    transition: all var(--duration-slow) var(--ease-in-out);
}

.transition-transform {
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.transition-opacity {
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.transition-colors {
    transition: color var(--duration-normal) var(--ease-in-out),
                background-color var(--duration-normal) var(--ease-in-out),
                border-color var(--duration-normal) var(--ease-in-out);
}

/* ==========================================================================
   Hover Effects - ホバーエフェクト
   ========================================================================== */

.hover-lift {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.hover-scale {
    transition: transform var(--duration-normal) var(--ease-out);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-scale-sm:hover {
    transform: scale(1.02);
}

.hover-fade {
    transition: opacity var(--duration-normal) var(--ease-in-out);
}

.hover-fade:hover {
    opacity: 0.8;
}

.hover-glow {
    transition: box-shadow var(--duration-normal) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
}

/* ==========================================================================
   Loading Animations - ローディングアニメーション
   ========================================================================== */

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
    40%, 43% { transform: translate3d(0, -8px, 0); }
    70% { transform: translate3d(0, -4px, 0); }
    90% { transform: translate3d(0, -2px, 0); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes slideInLeft {
    from { 
        opacity: 0; 
        transform: translateX(-100%); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes slideInRight {
    from { 
        opacity: 0; 
        transform: translateX(100%); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* ==========================================================================
   Animation Classes - アニメーションクラス
   ========================================================================== */

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-fadeIn {
    animation: fadeIn var(--duration-slow) var(--ease-out);
}

.animate-fadeInUp {
    animation: fadeInUp var(--duration-slow) var(--ease-out);
}

.animate-slideInLeft {
    animation: slideInLeft var(--duration-slow) var(--ease-out);
}

.animate-slideInRight {
    animation: slideInRight var(--duration-slow) var(--ease-out);
}

/* ==========================================================================
   Smooth Scroll - スムーススクロール
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Button Animations - ボタンアニメーション
   ========================================================================== */

.btn-smooth {
    transition: all var(--duration-normal) var(--ease-in-out);
    position: relative;
    overflow: hidden;
}

.btn-smooth::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--duration-slow) var(--ease-in-out);
}

.btn-smooth:hover::before {
    left: 100%;
}

.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    transition: transform var(--duration-normal) var(--ease-out);
}

.btn-ripple:active::after {
    transform: scale(4);
    transition: transform 0s;
}

/* ==========================================================================
   Card Animations - カードアニメーション
   ========================================================================== */

.card-hover {
    transition: transform var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.card-tilt {
    transition: transform var(--duration-normal) var(--ease-out);
}

.card-tilt:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

/* ==========================================================================
   Image Animations - 画像アニメーション
   ========================================================================== */

.image-zoom {
    overflow: hidden;
}

.image-zoom img {
    transition: transform var(--duration-slow) var(--ease-out);
}

.image-zoom:hover img {
    transform: scale(1.1);
}

.image-parallax {
    transition: transform var(--duration-slow) var(--ease-out);
}

/* ==========================================================================
   Text Animations - テキストアニメーション
   ========================================================================== */

.text-gradient {
    background: linear-gradient(90deg, #007cba, #ff6b6b);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: gradient 3s ease-in-out infinite;
}

@keyframes gradient {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.text-typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid;
    animation: typing 3s steps(20, end), blink 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: currentColor; }
}

/* ==========================================================================
   Performance Optimizations - パフォーマンス最適化
   ========================================================================== */

.will-change-auto { will-change: auto; }
.will-change-transform { will-change: transform; }
.will-change-opacity { will-change: opacity; }

/* GPU加速 */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}