/**
 * Visual Block Styles
 */

/* ベースコンテナ */
.fg-visual {
    position: relative;
    min-height: 200px;
}

.fg-visual * {
    box-sizing: border-box;
}

/* ビジュアル要素 */
.fg-visual__element {
    position: absolute;
    transition: all 0.3s ease;
}

.fg-visual__element--image {
    object-fit: cover;
}

.fg-visual__element--video {
    object-fit: cover;
}

/* ホバーエフェクト */
.fg-visual__element--hover-scale:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

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

.fg-visual__element--hover-blur:hover {
    filter: blur(2px);
}

.fg-visual__element--hover-brightness:hover {
    filter: brightness(1.2);
}

/* デバイス別表示制御 */
/* デスクトップ (1024px以上) */
@media (min-width: 1024px) {
    .fg-visual__element--hide-desktop {
        display: none !important;
    }
}

/* タブレット (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .fg-visual__element--hide-tablet {
        display: none !important;
    }
}

/* モバイル (767px以下) */
@media (max-width: 767px) {
    .fg-visual__element--hide-mobile {
        display: none !important;
    }
}

/* Lottieアニメーション */
.fg-visual__lottie {
    position: absolute;
    pointer-events: none;
}

.fg-visual__lottie svg {
    width: 100% !important;
    height: 100% !important;
}

/* プレースホルダー */
.fg-visual__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    color: #6c757d;
    text-align: center;
    padding: 2rem;
}

.fg-visual__placeholder p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.fg-visual__placeholder p:first-child {
    font-weight: bold;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

/* 単一要素のため、プレースホルダーを中央に固定表示 */
.fg-visual:empty .fg-visual__placeholder,
.fg-visual .fg-visual__placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    z-index: 1;
}

/* ブロックスタイル */
.fg-visual.is-style-minimal {
    border-radius: 0;
    box-shadow: none;
}

.fg-visual.is-style-minimal .fg-visual__image {
    transition: none;
}

/* アライメント */
.fg-visual.alignwide {
    max-width: 1200px;
    margin: 0 auto;
}

.fg-visual.alignfull {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    /* モバイル用の要素サイズ調整 */
    .fg-visual__element {
        max-width: 80%;
    }

    /* Lottieサイズ調整 */
    .fg-visual__lottie {
        max-width: 200px;
        max-height: 200px;
    }

    /* プレースホルダー文字サイズ */
    .fg-visual__placeholder {
        padding: 1rem;
    }

    .fg-visual__placeholder p {
        font-size: 0.9rem;
    }

    .fg-visual__placeholder p:first-child {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    /* さらに小さな画面 */
    .fg-visual__element {
        max-width: 90%;
    }

    .fg-visual__lottie {
        max-width: 150px;
        max-height: 150px;
    }
}

/* エディタープレビュー用 */
.block-editor-block-preview__content .fg-visual {
    min-height: 200px;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .fg-visual__placeholder {
        background: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
}

/* アニメーション設定 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -30%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -70%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* アニメーション適用 */
.fg-visual__element[data-animation="fade"] {
    animation: fadeIn 1s ease-out;
}

.fg-visual__element[data-animation="slideUp"] {
    animation: slideUp 1s ease-out;
}

.fg-visual__element[data-animation="slideDown"] {
    animation: slideDown 1s ease-out;
}

.fg-visual__element[data-animation="scale"] {
    animation: scaleIn 1s ease-out;
}

/* アクセシビリティ: motion設定を尊重 */
@media (prefers-reduced-motion: reduce) {
    .fg-visual__element {
        transition: none;
        animation: none;
    }

    .fg-visual__element--hover-scale:hover {
        transform: translate(-50%, -50%) scale(1);
    }
}