@charset "utf-8";

/* ==========================================================================
   1. スクロール連動 フェードインアニメーション
   ========================================================================== */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   2. FV（ファーストビュー） スライドショーとロゴ
   ========================================================================== */
.fv-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* スライドを横に並べるトラック */
.fv-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); /* 滑らかな横スライド */
}

/* 各スライドの設定 */
.fv-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.fv-bg-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.logo-wrapper {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 35%;
    max-width: 400px;
    min-width: 200px;
    z-index: 10;
    pointer-events: none; /* スライド操作の邪魔にならないようにする */
}

.animated-logo {
    width: 100%;
    height: auto;
    display: block;
}

/* ドットインジケーター（現在表示中のスライド） */
.fv-dot.is-active {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.3); /* 少しだけ大きくする */
}

/* ==========================================================================
   3. SVGロゴ ワイプアニメーション設定
   ========================================================================== */
.reveal-item {
    clip-path: inset(0 100% 0 0);
    animation: wipeFromLeft 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.7s; }
.delay-3 { animation-delay: 1.1s; }
.delay-4 { animation-delay: 1.5s; }
.delay-5 { animation-delay: 1.9s; }
.delay-6 { animation-delay: 2.5s; }

@keyframes wipeFromLeft {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.st0 { fill: #292422; }
.st1 { fill: #080605; }

/* ==========================================================================
   4. First Time タイムライン連鎖アニメーション
   ========================================================================== */
.flow-step {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.flow-step.is-animated {
    opacity: 1;
    transform: translateY(0);
}
/* ハンバーガーメニューのアニメーション制御 */
#hamburger-btn.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#hamburger-btn.open span:nth-child(2) {
    opacity: 0;
}
#hamburger-btn.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* スマホ用メニュー展開時の表示制御 */
#mobile-menu.open {
    opacity: 1;
    pointer-events: auto;
}