@charset "UTF-8";
/*
 * 春夏トップページ (2026) - アニメーション定義
 * (style_top_2026_sm_anim.css)
 */

/* =========================================
   ★ 初期状態を「透明」にする (JS制御用)
   ========================================= */
.js-anim-section-block,
.js-anim-section-parent {
    opacity: 0;
}
.js-anim-section-block.is-visible,
.js-anim-section-parent.is-visible {
    opacity: 1;
}


/* =========================================
   初期状態 (Hero S1 & Pseudo)
   ========================================= */
.img_bg_01 {
    opacity: 0;
    animation: heroZoomIn 3s ease-out 0.5s forwards; 
}
.story__hero-title {
    opacity: 0; 
    animation: titleFadeIn 2s ease-out 2.5s forwards; 
}
body.home .top_section1 .img_bg_01 > img {
    will-change: transform;
}
.ss-pseudo-slide {
    opacity: 0;
    transition: opacity 1.5s ease-in-out; 
}


/* =========================================
   3Dステージ設定
   ========================================= */
.sakura-left, .sakura-right,
.blazer-left, .blazer-right,
.blazer-men,
.mens-left, .mens-right,
.knit-left, .knit-right,
.last-1 {
    perspective: 1000px; 
    transform-style: preserve-3d;
}


/* =========================================
   アニメーションクラス定義
   ========================================= */
/* 基本設定: DelayはJSで制御するため0s */
.anim-rotate-y, .anim-rotate-left, .anim-flip-up, 
.fadein-up, .fadein-left, .fadein-right, .anim-rotate-y-reverse,
.anim-fade-in, .anim-float-up, .anim-slide-down {
    transition-delay: 0s;
}

/* 速度統一 (JSで上書きされるがデフォルト値として) */
.anim-rotate-y, .anim-rotate-left, .anim-flip-up, 
.fadein-up, .fadein-left, .fadein-right, .anim-rotate-y-reverse {
    transition-duration: 2.0s;
}
.anim-fade-in, .anim-float-up, .anim-slide-down {
    transition-duration: 3.0s;
}


/* --- 各クラスの動き --- */
.anim-rotate-y {
    opacity: 0; transform-origin: center center; transform: rotateY(-90deg) translateZ(0);
    transition-property: opacity, transform;
    backface-visibility: hidden;
}
.anim-rotate-y.is-visible { opacity: 1; transform: rotateY(0deg) translateZ(0); }

.anim-rotate-y-reverse {
    opacity: 0; transform-origin: center center; transform: rotateY(90deg) translateZ(0);
    transition-property: opacity, transform;
    backface-visibility: hidden;
}
.anim-rotate-y-reverse.is-visible { opacity: 1; transform: rotateY(0deg) translateZ(0); }

.anim-rotate-left {
    opacity: 0; transform-origin: left center; transform: rotateY(-90deg) translateZ(0);
    transition-property: opacity, transform;
    backface-visibility: hidden;
}
.anim-rotate-left.is-visible { opacity: 1; transform: rotateY(0deg) translateZ(0); }

.anim-flip-up {
    opacity: 0; transform-origin: bottom center; transform: rotateX(-90deg) translateZ(0);
    transition-property: opacity, transform;
    backface-visibility: hidden;
}
.anim-flip-up.is-visible { opacity: 1; transform: rotateX(0deg) translateZ(0); }

.anim-fade-in {
    opacity: 0;
    transition-property: opacity;
}
.anim-fade-in.is-visible { opacity: 1; }

.fadein-up {
    opacity: 0; transform: translateY(30px);
    transition-property: opacity, transform;
}
.fadein-up.is-visible { opacity: 1; transform: translateY(0); }

.anim-float-up {
    opacity: 0; transform: translateY(20px);
    transition-property: opacity, transform;
}
.anim-float-up.is-visible { opacity: 1; transform: translateY(0); }

.anim-slide-down {
    opacity: 0; transform: translateY(-80px);
    transition-property: opacity, transform;
}
.anim-slide-down.is-visible { opacity: 1; transform: translateY(0); }

.fadein-left {
    opacity: 0; transform: translateX(-50px);
    transition-property: opacity, transform;
}
.fadein-left.is-visible { opacity: 1; transform: translateX(0); }

.fadein-right {
    opacity: 0; transform: translateX(50px);
    transition-property: opacity, transform;
}
.fadein-right.is-visible { opacity: 1; transform: translateX(0); }


/* =========================================
   Keyframes
   ========================================= */
@keyframes titleFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes heroZoomIn {
    from { opacity: 0; transform: scale(1.1); }
    to   { opacity: 1; transform: scale(1.0); }
}