@charset "UTF-8";

/* =============================================================
   russet 2026 AUTUMN  /  アニメーション
   仕様書 : russet_26AW_nyu/russet_26AW_仕様書.pdf
   絵コンテ: design_fix02.xd の *_TOP1〜TOP4 アートボード

   ・入場は IntersectionObserver で .js-inview → .is-inview
     （種類は data-anim、順番待ちは data-delay で指定）
   ・パララックスは index_anime.js が --py を書き込む
   ・JS が動かない環境では初期状態を当てない（html.js で限定）
   ・prefers-reduced-motion では全て無効
   ============================================================= */

:root {
	/* 入場のイージング（終わり際がゆっくり効く） */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* -------------------------------------------------------------
   共通
   ------------------------------------------------------------- */
.js .js-inview {
	--d: 0ms;
}

/* 重ね画像（網点／カラー⇔モノクロの切り替え用に上へ重ねる） */
.fig__tone {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* -------------------------------------------------------------
   入場アニメーション
   ------------------------------------------------------------- */

/* ふんわり表示 */
.js .js-inview[data-anim~="fade"] {
	opacity: 0;
	transition: opacity 1.1s ease var(--d);
}
.js .js-inview[data-anim~="fade"].is-inview {
	opacity: 1;
}

/* スライドして写真を表示
   参考 davidebaratta.com と同じ「clip-path を上から開きながら中身がせり上がる」動き */
.js .js-inview[data-anim~="slide-up"] {
	clip-path: inset(0 0 100% 0);
	transition: clip-path .85s cubic-bezier(.76, 0, .24, 1) var(--d);
}
.js .js-inview[data-anim~="slide-up"] > img,
.js .js-inview[data-anim~="slide-up"] > picture > img {
	transform: translateY(80%);
	transition: transform 1.1s var(--ease-out) var(--d);
}
.js .js-inview[data-anim~="slide-up"].is-inview {
	clip-path: inset(0 0 0 0);
}
.js .js-inview[data-anim~="slide-up"].is-inview > img,
.js .js-inview[data-anim~="slide-up"].is-inview > picture > img {
	transform: none;
}

/* 上からスライドして表示（①から順に）
   参考 : beams.co.jp/special/cathri/collection/vol4/ */
.js .js-inview[data-anim~="slide-down"] > img,
.js .js-inview[data-anim~="slide-down"] > picture > img {
	transform: translateY(-101%);
	transition: transform 1.25s var(--ease-out) var(--d);
}
.js .js-inview[data-anim~="slide-down"].is-inview > img,
.js .js-inview[data-anim~="slide-down"].is-inview > picture > img {
	transform: none;
}

/* ズームアウトして表示（枠の中で画像が大→小）
   参考 : kingandtuckfield.com */
.js .js-inview[data-anim~="zoom-out"] > img,
.js .js-inview[data-anim~="zoom-out"] > picture > img {
	transform: scale(1.18);
	transition: transform 1.5s var(--ease-out) var(--d);
}
.js .js-inview[data-anim~="zoom-out"].is-inview > img,
.js .js-inview[data-anim~="zoom-out"].is-inview > picture > img {
	transform: none;
}

/* 写真を拡大して表示（写真そのものが小→大に育つ）
   参考 : twygskincare.com */
.js .js-inview[data-anim~="zoom-in"] {
	opacity: 0;
	transform: scale(.86);
	transition: opacity .9s ease var(--d), transform 1.4s var(--ease-out) var(--d);
}
.js .js-inview[data-anim~="zoom-in"].is-inview {
	opacity: 1;
	transform: none;
}

/* 網点写真 → モノクロ写真／カラー ⇔ モノクロ（上に重ねた画像を消す）
   参考 : amu.co.jp（網点） / davidebaratta.com（スライド） */
.js .js-inview[data-anim~="halftone"] .fig__tone,
.js .js-inview[data-anim~="tone"] .fig__tone {
	opacity: 1;
	transition: opacity 1.1s ease calc(var(--d) + .35s);
}
.js .js-inview[data-anim~="halftone"].is-inview .fig__tone,
.js .js-inview[data-anim~="tone"].is-inview .fig__tone {
	opacity: 0;
}

/* 下から 1L づつ表示（index_anime.js が行ごとに .a-line を挿入）
   参考 : hellorobo.co */
/* 行分割で挿入する span。reset.css が span に font-weight:normal /
   word-break:break-all を当てているので、親の指定を引き継がせる */
.a-line,
.a-line__in {
	display: block;
	font-weight: inherit;
	font-style: inherit;
	word-break: inherit;
	overflow-wrap: inherit;
}

/* 行分割は JS が走ってから効くため、分割が終わるまでは素のテキストが
   そのまま見えてしまう（リロード直後に一瞬だけ出る）。
   分割完了の目印 data-lined が付くまで隠しておく。
   分割できなかった場合も data-lined="off" が付くので、出ないままにはならない */
.js [data-anim~="lines"]:not([data-lined]),
.js .hero__title:not([data-lined]),
.js .hero__brand:not([data-lined]),
.js .hero__season:not([data-lined]) {
	visibility: hidden;
}

/* 行マスク：行送りより字面が大きい書体（Cal Sans 130/103 など）でも
   上下が切れないよう、下端だけで切って出現後に解除する */
.js .a-line {
	clip-path: inset(-100% 0 0 0);
	--dl: calc(var(--d, 0ms) + var(--i, 0) * 90ms);
}
.js .a-line__in {
	transform: translateY(100%);
	transition: transform 1.05s var(--ease-out) var(--dl);
}
.js .is-inview .a-line,
.js .hero.is-opening .a-line {
	clip-path: inset(-100% 0 -100% 0);
	transition: clip-path 0s linear calc(var(--dl) + 1.05s);
}
.js .is-inview .a-line__in,
.js .hero.is-opening .a-line__in {
	transform: none;
}

/* スクロールに合わせて写真が上下に動く
   参考 : analoguefoundation.com
   枠（＝クレジットとの距離）は動かさず、枠の中で写真だけを動かす。
   XD のマスク外にある画像の“のりしろ”を使うので、静止位置はデザインどおり。
     --iw/--ih/--il/--it : XD の画像矩形（クリップ左上を原点）
     --pr                : 動かせる幅（のりしろの上下いずれか小さい方）
     --pyr               : スクロール進捗 -1〜1（index_anime.js が書き込む） */
.js .js-inview[data-anim~="parallax"] > img,
.js .js-inview[data-anim~="parallax"] > picture > img {
	width: var(--iw);
	height: var(--ih);
	position: absolute;
	left: var(--il);
	top: var(--it);
	transform: translateY(calc(var(--pr, 0px) * var(--pyr, 0)));
}

/* -------------------------------------------------------------
   オープニング（ヒーロー）
   絵コンテ : design_fix02.xd  russet_26AW_PC_TOP1〜TOP4
   ------------------------------------------------------------- */
.js .hero__lead,
.js .hero__note {
	opacity: 0;
	transition: opacity .9s ease;
}
.js .hero.is-opening .hero__lead { opacity: 1; transition-delay: .10s; }
.js .hero.is-opening .hero__note { opacity: 1; transition-delay: .20s; }

/* ①ふんわり表示 → ②上を基準に大→小
   拡大率は XD の TOP2 と完成形の比（PC 807/707、SP 519.23/375）
   参考 : hitoba-office.com */
.js .hero__visual {
	opacity: 0;
	transform: scale(var(--hero-zoom, 1.1414));
	transform-origin: 50% 0;
	transition: opacity .8s ease, transform 1.2s var(--ease-out);
}
.js .hero.is-opening .hero__visual {
	opacity: 1;
	transform: none;
	transition-delay: .30s, .75s;
}

/* ③最初から傾いた状態で、下からスライドして表示（XD TOP3 → TOP4）
   ※回転する動きは「過剰」との戻しにより廃止（テストアップ戻し 2026-08-28）。
     傾き rotate(7deg) は css/index.css の静止状態がそのまま効く。 */
.js .hero__tilt img {
	transform: translateY(101%);
	transition: transform 1.15s var(--ease-out) 1.2s;
}
.js .hero.is-opening .hero__tilt img {
	transform: none;
}

/* ⑤下から 1L づつ表示（マスク） */
.js .hero__title  { --d: 2200ms; }
.js .hero__brand  { --d: 2460ms; }
.js .hero__season { --d: 2590ms; }
.js .hero__title .a-line { --dl: calc(2200ms + var(--i, 0) * 130ms); }

@media only screen and (max-width: 767px) {
	.js .hero__visual { --hero-zoom: 1.3846; }
}

/* -------------------------------------------------------------
   パララックスの画像矩形（XD のマスク外まで含めた実寸）
   --il / --it はクリップ左上からの相対位置、--pr は動かせる幅
   （JS は fig 側から --pr を読むため、宣言は fig に置いて img へ継承させる）
   ------------------------------------------------------------- */
.js .lookbook01__photo02 { --iw: 43.9rem;    --ih: 65.9rem;    --il: 0;       --it: -3.4rem;    --pr: 3rem; }
.js .lookbook02__photo02 { --iw: 74rem;    --ih: 110.95rem; --il: 0;       --it: -6.402rem; --pr: 3rem; }
.js .lookbook02__photo04 { --iw: 121rem;   --ih: 80.6rem;    --il: -25rem;  --it: -13.4rem;   --pr: 3rem; }
.js .lookbook04__photo01 { --iw: 84.4rem;    --ih: 126.6rem;   --il: -1.9rem;   --it: -16rem;   --pr: 1.7rem; }
.js .lookbook05__photo01 { --iw: 49.081rem; --ih: 73.622rem; --il: -0.335rem; --it: -0.251rem;  --pr: 0.25rem; }

@media only screen and (max-width: 767px) {
	.js .lookbook01__photo02 { --iw: 12.0884rem; --ih: 18.1326rem; --il: 0;       --it: -0.936rem;  --pr: 0.93rem; }
	.js .lookbook02__photo02 { --iw: 20.3598rem; --ih: 30.5397rem; --il: -0.01rem;  --it: -1.763rem; --pr: 1.67rem; }
	.js .lookbook02__photo04 { --iw: 33.2068rem; --ih: 22.1379rem; --il: -6.88rem; --it: -3.678rem; --pr: 3rem; }
	.js .lookbook04__photo01 { --iw: 23.2228rem; --ih: 34.8342rem; --il: -0.523rem; --it: -4.408rem; --pr: 0.42rem; }
	.js .lookbook05__photo01 { --iw: 13.4469rem; --ih: 20.1703rem; --il: -0.092rem; --it: -0.069rem;  --pr: 0.06rem; }
}

/* -------------------------------------------------------------
   動きを減らす設定：すべて無効（＝デザインの静止状態）
   個々の指定より詳細度が低いため !important で打ち消す。
   transform は「レイアウト用の回転（.rot / 台紙 / 傾き写真）」を
   壊さないよう、演出で使っている箇所だけを個別に戻す。
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.js .js-inview,
	.js .js-inview *,
	.js .hero__lead,
	.js .hero__note,
	.js .hero__visual,
	.js .hero__visual *,
	.js .hero__tilt,
	.js .hero__tilt *,
	.js .hero__title,
	.js .hero__title *,
	.js .hero__brand,
	.js .hero__brand *,
	.js .hero__season,
	.js .hero__season * {
		opacity: 1 !important;
		visibility: visible !important;
		transition: none !important;
		animation: none !important;
	}

	.js .js-inview[data-anim~="slide-up"] > img,
	.js .js-inview[data-anim~="slide-up"] > picture > img,
	.js .js-inview[data-anim~="slide-down"] > img,
	.js .js-inview[data-anim~="slide-down"] > picture > img,
	.js .js-inview[data-anim~="zoom-out"] > img,
	.js .js-inview[data-anim~="zoom-out"] > picture > img,
	.js .js-inview[data-anim~="zoom-in"],
	.js .js-inview[data-anim~="parallax"] > img,
	.js .js-inview[data-anim~="parallax"] > picture > img,
	.js .a-line__in,
	.js .hero__visual,
	.js .hero__tilt img,
	.js .hero__title .a-line__in,
	.js .hero__brand .a-line__in,
	.js .hero__season .a-line__in {
		transform: none !important;
	}

	.js .a-line { clip-path: none !important; }
	.js .js-inview[data-anim~="slide-up"] { clip-path: none !important; }
	.js .js-inview .fig__tone { opacity: 0 !important; }
}