/*
 * Blanky Work – Animations
 *
 * ページ表示・スクロールアニメーション
 *
 * @package blanky-work
 */

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes workFadeInUp {
	from {
		opacity: 0;
		transform: translateY(2rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes workFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes workLineGrow {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

@keyframes workLineGrowX {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes workHeroPhotoReveal {
	from {
		opacity: 0;
		transform: scale(1.04);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* H1 テキスト：下から上へスライドリビール */
@keyframes workLineSlideUp {
	from { transform: translateY(110%); }
	to   { transform: translateY(0); }
}

/* スクロールインジケーター：縦に流れ落ちる光 */
@keyframes workScrollDrop {
	0%   { transform: translateY(-100%); opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { transform: translateY(250%); opacity: 0; }
}

/* ============================================================
   Hero: ページ読み込み時フェードイン
   ============================================================ */
.work-hero-photo .wp-block-image img {
	opacity: 0;
	transform: scale(1.04);
	animation: workHeroPhotoReveal 1.6s ease-out 0.1s forwards;
}

.work-hero-eyebrow,
.work-hero-divider,
.work-hero-lead-eyebrow,
.work-hero-lead,
.work-hero-cta,
.work-hero-stats {
	opacity: 0;
}

.work-hero-eyebrow {
	animation: workFadeInUp 0.8s ease-out 0.3s forwards;
}

/* --------------------------------------------------------
   H1 テキスト Clip-Path リビール
   work-hero-line-wrap（overflow:hidden）内で
   各行テキストが下からスライドアップ
   -------------------------------------------------------- */
.work-hero-line-wrap {
	display: block;
	overflow: hidden;
}

.work-hero-line-wrap .line-1 {
	display: block;
	transform: translateY(110%);
	animation: workLineSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.work-hero-line-wrap .line-2 {
	display: block;
	transform: translateY(110%);
	animation: workLineSlideUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.68s forwards;
}

.work-hero-divider {
	animation: workLineGrowX 0.8s ease-out 0.9s forwards;
	transform-origin: left;
	opacity: 1;
	transform: scaleX(0);
}

.work-hero-lead-eyebrow {
	animation: workFadeInUp 0.7s ease-out 1.1s forwards;
}

.work-hero-lead {
	animation: workFadeInUp 0.7s ease-out 1.3s forwards;
}

.work-hero-cta {
	animation: workFadeInUp 0.7s ease-out 1.5s forwards;
}

.work-hero-stats {
	animation: workFadeIn 0.8s ease-out 1.7s forwards;
}

/* 装飾線の伸びるアニメーション */
.work-hero-line-v {
	transform-origin: top;
	transform: scaleY(0);
	animation: workLineGrow 1.2s ease-out 0.6s forwards;
}

.work-hero-line-h {
	transform-origin: left;
	transform: scaleX(0);
	animation: workLineGrowX 0.8s ease-out 1.0s forwards;
}

.work-hero-est {
	opacity: 0;
	animation: workFadeIn 1s ease-out 1.8s forwards;
}

/* --------------------------------------------------------
   スクロールインジケーター
   他のアニメーションが落ち着いた後に表示
   -------------------------------------------------------- */
.work-hero-scroll {
	opacity: 0;
	animation: workFadeIn 0.8s ease-out 2.1s forwards;
}

.work-hero-scroll-line::after {
	animation: workScrollDrop 2.2s ease-in-out 2.8s infinite;
}

/* ============================================================
   スクロールトリガー: フェードアップ
   ============================================================ */
.work-anim-fade-up {
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

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

/* ずらし表示用（カードなど子要素に適用） */
.work-anim-stagger > .work-anim-stagger-item {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.work-anim-stagger.is-visible > .work-anim-stagger-item {
	opacity: 1;
	transform: translateY(0);
}

.work-anim-stagger.is-visible > .work-anim-stagger-item:nth-child(1) { transition-delay: 0s; }
.work-anim-stagger.is-visible > .work-anim-stagger-item:nth-child(2) { transition-delay: 0.15s; }
.work-anim-stagger.is-visible > .work-anim-stagger-item:nth-child(3) { transition-delay: 0.3s; }
.work-anim-stagger.is-visible > .work-anim-stagger-item:nth-child(4) { transition-delay: 0.45s; }
.work-anim-stagger.is-visible > .work-anim-stagger-item:nth-child(5) { transition-delay: 0.6s; }

/* フェードイン（translateなし） */
.work-anim-fade {
	opacity: 0;
	transition: opacity 0.8s ease-out;
}

.work-anim-fade.is-visible {
	opacity: 1;
}

/* 装飾線の伸び（スクロール連動） */
.work-anim-line-x {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.8s ease-out;
}

.work-anim-line-x.is-visible {
	transform: scaleX(1);
}

/* ============================================================
   prefers-reduced-motion: アニメーション無効化
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.work-hero-eyebrow,
	.work-hero-divider,
	.work-hero-lead-eyebrow,
	.work-hero-lead,
	.work-hero-cta,
	.work-hero-stats,
	.work-hero-line-v,
	.work-hero-line-h,
	.work-hero-est,
	.work-hero-scroll,
	.work-hero-photo .wp-block-image img {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.work-hero-line-wrap .line-1,
	.work-hero-line-wrap .line-2 {
		transform: none;
		animation: none;
	}

	.work-hero-scroll-line::after {
		animation: none;
	}

	.work-anim-fade-up,
	.work-anim-stagger > .work-anim-stagger-item,
	.work-anim-fade,
	.work-anim-line-x {
		opacity: 1;
		transform: none;
		transition: none;
	}
}