@charset "utf-8";

/* --- 共通スタイル --- */
.js-main-text span,
.js-sub-text span {
  display: inline-block;
  opacity: 0;
}

/* --- メインテキスト用（ブラーフェードイン） --- */
.js-main-text span {
  filter: blur(10px);
  transform: translateY(8px) scale(1.05);
  animation: blurFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes blurFadeIn {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

/* --- サブテキスト用（スライドアップ） --- */
.js-sub-text span {
  transform: translateY(15px);
  animation: slideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-animation {
    position: relative;
    overflow: hidden;
}

.reveal-animation img {
    -webkit-mask-image: url(/system_panel/uploads/images/mask-img.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: auto 200%;
    -webkit-mask-position: center bottom;
    mask-image: url(/system_panel/uploads/images/mask-img.png);
    mask-mode: alpha;
    mask-position: center bottom;
    mask-repeat: no-repeat;
    mask-size: auto 200%;
    opacity: 0;
}

.reveal-animation.is-visible img {
    animation: 2.3s mask-animation cubic-bezier(.115, .405, .24, 1) 0s forwards;
}

@keyframes mask-animation {
    0% {
        -webkit-mask-position: center bottom;
        mask-position: center bottom;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    to {
        -webkit-mask-position: center 0%;
        -webkit-mask-size: auto 500%;
        mask-position: center 0%;
        mask-size: auto 500%;
        opacity: 1;
    }
}