@charset "utf-8";

/* ========================================
   InView アニメーション設定（CSS変数版）
   数値をカスタムプロパティで一括管理
   ======================================== */

/* ========================================
   カスタムプロパティ（変数定義）
   ======================================== */
:root {
    --inview-duration: 1s;      /* アニメーション実行時間 */
    --inview-delay: 0.5s;       /* アニメーション遅延時間 */
    --inview-offset: -20px;     /* 移動距離 */
}

/* ========================================
   up, down, transform1, transform2の共通設定
   （待機中の設定）
   ======================================== */
.up, .down, .transform1, .transform2 {
    position: relative;
    opacity: 0;  /* 透明度（透明の状態） */
}

/* ========================================
   up, down, transform1, transform2の共通設定
   （要素が見えたら実行するアクションの設定）
   ======================================== */
.upstyle, .downstyle, .transform1style, .transform2style {
    opacity: 1;  /* 透明度（色が100%出た状態） */
    transition: var(--inview-duration) var(--inview-delay);
    /* 1sはアニメーションの実行時間。0.5sは0.5秒遅れてスタートする指定 */
}

/* ========================================
   upスタイル。下から上にフェードインしてくるスタイル
   ======================================== */
/* 待機中の設定 */
.up {
    bottom: var(--inview-offset);  /* 基準値の下20pxの場所からスタート */
}
/* 要素が見えたら実行するアクション */
.upstyle {
    bottom: 0px;  /* 基準値まで戻す */
}

/* ========================================
   downスタイル。上から下にフェードインしてくるスタイル
   ======================================== */
/* 待機中の設定 */
.down {
    top: var(--inview-offset);  /* 基準値の上20pxの場所からスタート */
}
/* 要素が見えたら実行するアクション */
.downstyle {
    top: 0px;  /* 基準値まで戻す */
}

/* ========================================
   transform1スタイル。その場で回転するスタイル
   ======================================== */
/* 待機中の設定 */
.transform1 {
    transform: scaleX(0);  /* 幅を0%でスタート */
}
/* 要素が見えたら実行するアクション */
.transform1style {
    transform: scaleX(1);  /* 幅を100%に戻す */
}

/* ========================================
   transform2スタイル。倒れた状態から起き上がるスタイル
   ======================================== */
/* 待機中の設定 */
.transform2 {
    transform: perspective(400px) translateZ(-70px) rotateX(50deg);
}
/* 要素が見えたら実行するアクション */
.transform2style {
    transform: perspective(400px) translateZ(0px) rotateX(0deg);
}

/* ========================================
   blurスタイル。ぼかしで出現するスタイル
   ======================================== */
/* 待機中の設定 */
.blur {
    opacity: 0;  /* 透明度（透明の状態） */
    filter: blur(30px);
    transform: scale(1.1);
}
/* 要素が見えたら実行するアクション */
.blurstyle {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    transition: var(--inview-duration) var(--inview-delay);
}

/* ========================================
   transform3スタイル。小さなサイズから原寸大になるスタイル
   ======================================== */
/* キーフレーム（アニメーション）設定 */
@keyframes transform3 {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.99);
    }
    100% {
        transform: scale(1);
    }
}
/* 待機中の設定 */
.transform3 {
    transform: scale(0);
}
/* 要素が見えたら実行するアクション */
.transform3style {
    animation: transform3 0.8s ease-out var(--inview-delay) both;
}