@charset "UTF-8";
/*
 * 秋冬トップページ (2026) - アニメーション定義
 * (style_top_2026_ow_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,
.anim-expand-width, .anim-tilt-in {
    transition-delay: 0s;
}

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

/* =========================================
   ★ 2026 OW 追加アニメーション
   ========================================= */
/* カフェ画像用: 横幅が広がって表示される */
.anim-expand-width {
    opacity: 0;
    clip-path: inset(0 7.5%); /* 左右を7.5%ずつ削る＝幅85% */
    transition-property: opacity, clip-path;
}
.anim-expand-width.is-visible {
    opacity: 1;
    clip-path: inset(0 0%); /* クリップ解除で100%へ */
}

/* 赤カーディガン用: 斜めに入ってくる */
.anim-tilt-in {
    opacity: 0;
    transform-origin: center center;
    transform: rotate(12deg) scale(0.95); /* 12度傾けて、少しだけ縮小しておく */
    transition-property: opacity, transform;
    backface-visibility: hidden;
}
.anim-tilt-in.is-visible {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* =========================================
   ★ リッチな高級感（ズームアウトフェード）
   ========================================= */
.anim-zoom-out {
    opacity: 0;
    transform-origin: center center;
    transform: scale(1.08); /* 8%だけ大きくしておく */
    transition-property: opacity, transform;
    backface-visibility: hidden;
}
.anim-zoom-out.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* =========================================
   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); }
}