/* ========================================
   プロジェクトカード アニメーションスタイル
   ======================================== */

/* AI技術カードのグラデーションアニメーション */
.project-header.ai {
    background: linear-gradient(135deg, rgba(78, 84, 200, 0.3) 0%, rgba(138, 35, 135, 0.3) 50%, rgba(233, 64, 87, 0.3) 100%);
    background-size: 200% 200%;
    animation: ai-gradient 10s ease infinite;
}

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

/* ブログカードの大理石風背景 */
.project-header.blog {
    background: linear-gradient(135deg, rgba(190, 220, 230, 0.3), rgba(180, 210, 220, 0.3));
    position: relative;
    overflow: hidden;
}

.project-header.blog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 50%),
        radial-gradient(circle at 40% 90%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%),
        repeating-linear-gradient(45deg, rgba(150, 180, 190, 0.1) 0%, rgba(150, 170, 180, 0.1) 5%, rgba(170, 190, 200, 0.1) 10%);
    z-index: 1;
    animation: marble-move 15s ease-in-out infinite alternate;
}

@keyframes marble-move {
    0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 20% 20%, -10% 10%, 15% -5%, 10% 10%; }
}

/* ツールカードのグラデーションアニメーション */
.project-header.tools {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.3) 0%, rgba(52, 152, 219, 0.3) 50%, rgba(46, 204, 113, 0.3) 100%);
    background-size: 200% 200%;
    animation: tools-gradient 8s ease infinite;
}

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

/* その他のグラデーションアニメーション */
@keyframes learning-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes math-art-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes image-tools-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes text-tools-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes ai-intro-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes vibe-coding-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* AIアイコンの歯車アニメーション */
.ai-icon-container {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-gear {
    position: absolute;
    color: white;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.ai-gear-large {
    font-size: 28px;
    animation-name: spin-clockwise;
}

.ai-gear-small {
    font-size: 18px;
    right: 2px;
    top: 2px;
    animation-name: spin-counter-clockwise;
    animation-duration: 7s;
}

.ai-gear-tiny {
    font-size: 14px;
    left: 0;
    bottom: 0;
    animation-name: spin-clockwise;
    animation-duration: 5s;
}

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

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

/* 本のアイコンアニメーション（AI入門） */
@keyframes book-open-close {
    0%, 100% { 
        transform: scaleX(0.7) rotateY(15deg);
        opacity: 0.8;
    }
    25% {
        transform: scaleX(1) rotateY(0deg);
        opacity: 1;
    }
    50% { 
        transform: scaleX(1.2) rotateY(-15deg);
        opacity: 1;
    }
    75% {
        transform: scaleX(1) rotateY(0deg);
        opacity: 1;
    }
}

/* コードアイコンアニメーション（バイブコーディング） */
@keyframes code-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.8;
    }
    50% { 
        transform: scale(1.1);
        opacity: 1;
    }
}