/**
 * IXV Page Common Styles
 * ページ全体に適用する共通スタイル
 */

/**
 * Background eye-catch animation
 * ふわふわ浮くアイキャッチアニメーション
 */
@keyframes eyecatch-float {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-10px);
    }
}

/* ページ背景にアイキャッチを表示 */
body::before {
    content: '';
    position: fixed;
    height: 100%;
    width: 100%;
    background-image: url(/shared/latest/images/eyecatch.png);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-x: right;
    background-position-y: 8em;
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten;
    z-index: -1;

    animation-name: eyecatch-float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
}

/* アイキャッチカバー（特定セクション用） */
.eyecatch-cover {
    position: relative;
    display: flex;
    align-items: center;
    height: 40vh;
    max-height: 30em;
}

.eyecatch-cover::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(/shared/latest/images/eyecatch.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position-x: right;
    background-position-y: center;
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten;
    z-index: -1;

    animation-name: eyecatch-float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
}

@media screen and (min-width: 1200px) {
    .eyecatch-cover::before {
        background-color: initial;
    }
}