@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* SWELLメインビジュアル テキストアニメーション用 */

/* アニメーション前の状態 */
/* メインテキスト（1文字ずつ） */
.mv_title .item {
    display: inline-block; /* transformを適用するため */
    opacity: 0;
    transform: translateY(0.7em);
    will-change: opacity, transform;
}
/* サブテキスト（1行ずつ） */
.mv_txt .mv_txt_line {
    display: block; /* 1行ずつなのでblock */
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

/* アニメーション実行後の状態（.activeクラスが付与されたとき） */
/* メインテキスト（1文字ずつ） */
.mv_title .item.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* サブテキスト（1行ずつ） */
.mv_txt .mv_txt_line.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- オープニング演出：幕（カーテン） --- */
#custom-curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #231f20; /* 幕の色（サイトに合わせて濃いグレー/黒） */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999; /* 他の要素より絶対上に */
    transition: transform 1.2s cubic-bezier(0.8, 0, 0.2, 1); /* 上に上がる動きの速さ */
    pointer-events: all;
}

/* デジタルエコシステム様 */

/* -------------------------------------
 * トップページのオープニング（幕が上がるアニメーション）
 * ------------------------------------- */

/* 幕の初期状態（画面全体を覆う） */
#custom-curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* ↓ここに表示させたい画像のURLを入れてください↓ */
    background-image: url('https://img.freepik.com/free-photo/abstract-view-urban-scene-skyscrapers_53876-14116.jpg?semt=ais_incoming&w=740&q=80'); 
    background-size: cover;
    background-position: center;
    background-color: #000;
    z-index: 99999; /* 一番手前に表示 */
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 幕が上がる時の状態（Y軸を-100%にして上にどかす） */
#custom-curtain.is-open {
    transform: translateY(-100%);
}