/* 園芸用品ページ専用スタイル */

/* 園芸用品カードのイラスト部分 */
.plant-detail-card .plant-image {
    position: relative;
}

.plant-detail-card .plant-placeholder {
    font-size: 4rem;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 50%, #dcedc8 100%);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(168, 213, 186, 0.3);
    animation: toolBounce 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

.plant-detail-card:hover .plant-placeholder {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(168, 213, 186, 0.4);
    animation-play-state: paused;
}

/* 各アイテム別の背景色 */
#watering-can .plant-placeholder {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%);
    box-shadow: 0 4px 15px rgba(144, 202, 249, 0.4);
}

#planter .plant-placeholder {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 50%, #ffcc80 100%);
    box-shadow: 0 4px 15px rgba(255, 204, 128, 0.4);
}

#soil .plant-placeholder {
    background: linear-gradient(135deg, #efebe9 0%, #d7ccc8 50%, #bcaaa4 100%);
    box-shadow: 0 4px 15px rgba(188, 170, 164, 0.4);
}

#scissors .plant-placeholder {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
    box-shadow: 0 4px 15px rgba(165, 214, 167, 0.4);
}

#fertilizer .plant-placeholder {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
    box-shadow: 0 4px 15px rgba(165, 214, 167, 0.4);
}

#automatic .plant-placeholder {
    background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 50%, #c5e1a5 100%);
    box-shadow: 0 4px 15px rgba(197, 225, 165, 0.4);
}

#spray .plant-placeholder {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
    box-shadow: 0 4px 15px rgba(128, 222, 234, 0.4);
}

#scoop .plant-placeholder {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 50%, #ffe082 100%);
    box-shadow: 0 4px 15px rgba(255, 224, 130, 0.4);
}

#drainage-stone .plant-placeholder {
    background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 50%, #c5e1a5 100%);
    box-shadow: 0 4px 15px rgba(197, 225, 165, 0.4);
}

#soil-improver .plant-placeholder {
    background: linear-gradient(135deg, #fef5e7 0%, #fdebd0 50%, #fbdfc4 100%);
    box-shadow: 0 4px 15px rgba(251, 223, 196, 0.4);
}

#insect-net .plant-placeholder {
    background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 50%, #b0bec5 100%);
    box-shadow: 0 4px 15px rgba(176, 190, 197, 0.4);
}

#grow-light .plant-placeholder {
    background: linear-gradient(135deg, #fffde7 0%, #fff9c4 50%, #fff59d 100%);
    box-shadow: 0 4px 15px rgba(255, 245, 157, 0.4);
    animation: glowPulse 2s ease-in-out infinite;
}

#thermometer .plant-placeholder {
    background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 50%, #c5e1a5 100%);
    box-shadow: 0 4px 15px rgba(197, 225, 165, 0.4);
}

/* アニメーション */
@keyframes toolBounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(-3deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-3px) rotate(3deg);
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 245, 157, 0.4);
    }
    50% {
        box-shadow: 0 8px 25px rgba(255, 245, 157, 0.8);
    }
}

/* ホバー時の特別なエフェクト */
.plant-detail-card:nth-child(odd):hover .plant-placeholder {
    animation: wiggle 0.5s ease-in-out;
}

.plant-detail-card:nth-child(even):hover .plant-placeholder {
    animation: bounce 0.5s ease-in-out;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg) scale(1.1); }
    25% { transform: rotate(-10deg) scale(1.1); }
    75% { transform: rotate(10deg) scale(1.1); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0) scale(1.1); }
    50% { transform: translateY(-10px) scale(1.1); }
}

/* タブコンテンツのアニメーション */
.tab-content {
    animation: fadeIn 0.5s ease;
}

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