@charset "utf-8";

/* ==========================================
画像用：ロールアップ
========================================== */

.reveal-item {
     opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(30px);
    /* opacityを一番長くして「じわっと」させる */
    transition: 
    opacity 5.0s cubic-bezier(0.33, 0, 0.67, 1) 0.2s, 
    clip-path 3.5s cubic-bezier(0.33, 0, 0.67, 1),
    transform 3.5s cubic-bezier(0.33, 0, 0.67, 1);
}

.reveal-item.is-active {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

/* --- 2枚目用--- */
.reveal-delay {
    transition-delay: 1.0s !important;
}

/* --- 3枚目用--- */
.reveal-delay-long {
  transition-delay: 2.0s !important;
}

/* ==========================================
テキスト用：定位置ロールアップ
========================================== */
.reveal-text {
  /* 最初は完全に透明 */
    opacity: 0;
  
  /* ロール（幕）の設定：下100%から開始 */
     clip-path: inset(100% 0 0 0);
  
  /* 移動（transform）は削除して、その場で現れるようにします */

  /* 【じわっと・ゆっくり設定】 */
    transition: 
    opacity 4.0s cubic-bezier(0.25, 1, 0.5, 1), 
    clip-path 3.0s cubic-bezier(0.25, 1, 0.5, 1);
    
    will-change: opacity, clip-path;
}

/* --- 表示された時（is-activeがついたとき） --- */
.reveal-text.is-active {
     opacity: 1;           /* 最終的に100%の濃さに */
     clip-path: inset(0 0 0 0); /* 幕を全開にする */
}