/**
 * Feature Content - Block Utilities CSS
 * 區塊工具類 CSS - 動畫效果與響應式顯示
 * 
 * @since 2.3.0
 */

/* ==========================================================================
   響應式顯示控制
   ========================================================================== */

/* 桌面裝置 (>1024px) */
@media (min-width: 1025px) {
    .fc-hide-desktop {
        display: none !important;
    }
}

/* 平板裝置 (768-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .fc-hide-tablet {
        display: none !important;
    }
}

/* 手機裝置 (<768px) */
@media (max-width: 767px) {
    .fc-hide-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   動畫效果 - 基礎設定
   ========================================================================== */

[data-fc-animation] {
    opacity: 0;
    will-change: transform, opacity;
}

[data-fc-animation].fc-animated {
    opacity: 1;
}

/* 動畫速度 */
.fc-anim-fast { --fc-anim-duration: 0.3s; }
.fc-anim-normal { --fc-anim-duration: 0.6s; }
.fc-anim-slow { --fc-anim-duration: 1s; }

/* 動畫延遲 */
.fc-anim-delay-0 { --fc-anim-delay: 0s; }
.fc-anim-delay-200 { --fc-anim-delay: 0.2s; }
.fc-anim-delay-500 { --fc-anim-delay: 0.5s; }
.fc-anim-delay-1000 { --fc-anim-delay: 1s; }

/* ==========================================================================
   動畫效果 - 淡入類
   ========================================================================== */

/* 淡入 */
@keyframes fc-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

[data-fc-animation="fade-in"].fc-animated {
    animation: fc-fade-in var(--fc-anim-duration, 0.6s) var(--fc-anim-delay, 0s) ease-out forwards;
}

/* 向上淡入 */
@keyframes fc-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-fc-animation="fade-in-up"].fc-animated {
    animation: fc-fade-in-up var(--fc-anim-duration, 0.6s) var(--fc-anim-delay, 0s) ease-out forwards;
}

/* 向下淡入 */
@keyframes fc-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-fc-animation="fade-in-down"].fc-animated {
    animation: fc-fade-in-down var(--fc-anim-duration, 0.6s) var(--fc-anim-delay, 0s) ease-out forwards;
}

/* 向左淡入 */
@keyframes fc-fade-in-left {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[data-fc-animation="fade-in-left"].fc-animated {
    animation: fc-fade-in-left var(--fc-anim-duration, 0.6s) var(--fc-anim-delay, 0s) ease-out forwards;
}

/* 向右淡入 */
@keyframes fc-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[data-fc-animation="fade-in-right"].fc-animated {
    animation: fc-fade-in-right var(--fc-anim-duration, 0.6s) var(--fc-anim-delay, 0s) ease-out forwards;
}

/* ==========================================================================
   動畫效果 - 縮放類
   ========================================================================== */

/* 放大進入 */
@keyframes fc-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

[data-fc-animation="zoom-in"].fc-animated {
    animation: fc-zoom-in var(--fc-anim-duration, 0.6s) var(--fc-anim-delay, 0s) ease-out forwards;
}

/* 縮小進入 */
@keyframes fc-zoom-out {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

[data-fc-animation="zoom-out"].fc-animated {
    animation: fc-zoom-out var(--fc-anim-duration, 0.6s) var(--fc-anim-delay, 0s) ease-out forwards;
}

/* ==========================================================================
   動畫效果 - 彈跳類
   ========================================================================== */

/* 彈入 */
@keyframes fc-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

[data-fc-animation="bounce-in"].fc-animated {
    animation: fc-bounce-in var(--fc-anim-duration, 0.6s) var(--fc-anim-delay, 0s) cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* ==========================================================================
   減少動態效果 (無障礙)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [data-fc-animation] {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}