/* =============================
   Keita Portfolio - 3D enhancement（追加レイヤー）
   既存を壊さないよう body.kp3d / 専用クラスにスコープ
   ============================= */

/* ヒーロー内 three.js キャンバス（風景の上・コンテンツの下） */
.hero .kp3d-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}
.hero .hero__inner { position: relative; z-index: 3; }
.hero .hero__scroll { z-index: 3; }

/* スクロール3D：既存の一発フェードを無効化しスクラブに一本化 */
body.kp3d .fade-in {
	opacity: 1;
	transform: none;
	transition: none !important;
}
body.kp3d .kp3d-item {
	will-change: transform, opacity;
	backface-visibility: hidden;
	transform-style: preserve-3d;
}

/* ページ遷移：斜めワイプ */
.kp3d-curtain {
	position: fixed;
	inset: -28% -32%;
	z-index: 99999;
	background: linear-gradient(118deg, #2f3a43 0%, #5c6b74 55%, #9aa7ad 100%);
	transform: translateX(-140%) skewX(-10deg);
	pointer-events: none;
	will-change: transform;
}
.kp3d-curtain.cover { transform: translateX(0) skewX(-10deg); transition: transform .6s cubic-bezier(.76,0,.24,1); }
.kp3d-curtain.cover.reveal { transform: translateX(140%) skewX(-10deg); }
.kp3d-curtain.cover.enter { transform: translateX(0) skewX(-10deg); transition: transform .52s cubic-bezier(.76,0,.24,1); }

@media (prefers-reduced-motion: reduce) {
	.kp3d-curtain { display: none; }
}