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

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

/* ==========================================================================
   共用媒體來源 / 授權註記
   ========================================================================== */

.fc-media-source-note {
display: grid;
gap: 10px;
margin-top: 18px;
padding: 14px 16px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 14px;
background: rgba(248, 250, 252, 0.82);
color: #334155;
font-size: 13px;
line-height: 1.7;
}

.fc-media-source-note__title {
font-weight: 700;
letter-spacing: 0.03em;
color: #0f172a;
}

.fc-media-source-note__list {
display: grid;
gap: 7px;
margin: 0;
}

.fc-media-source-note__item {
display: grid;
grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
gap: 8px 12px;
align-items: start;
}

.fc-media-source-note__item dt,
.fc-media-source-note__item dd {
margin: 0;
}

.fc-media-source-note__item dt {
font-weight: 700;
color: #475569;
white-space: nowrap;
}

.fc-media-source-note__item dd {
min-width: 0;
color: #334155;
word-break: break-word;
}

.fc-media-source-note__item a {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.16em;
}

@media (max-width: 767px) {
.fc-media-source-note__item {
grid-template-columns: 1fr;
gap: 2px;
}
}

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

/* 平板裝置 (768-1180px) */
@media (min-width: 768px) and (max-width: 1180px) {
.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;
}
}