/* ==========================================================================
   Mobile Top Screen (#hero on max-width: 767px)
   Three.js 3D Architectural Concrete & Oak Timber Beams UI
   ========================================================================== */

.tasuku-mobile-hero {
	display: none;
}

.site-header__logo-light {
	display: none;
}

@keyframes tasukuMobileScrollPulse {
	0% {
		transform: scaleY(0);
		transform-origin: top;
		opacity: 0.2;
	}
	45% {
		transform: scaleY(1);
		transform-origin: top;
		opacity: 1;
	}
	55% {
		transform: scaleY(1);
		transform-origin: bottom;
		opacity: 1;
	}
	100% {
		transform: scaleY(0);
		transform-origin: bottom;
		opacity: 0.2;
	}
}

@media (max-width: 767px) {
	/* Transparent existing top header bar on mobile top screen */
	.home .site-header:not(.is-scrolled):not(.is-menu-active) {
		background: transparent !important;
		border-bottom-color: transparent !important;
		box-shadow: none !important;
	}

	.home .site-header:not(.is-scrolled):not(.is-menu-active) .site-header__logo-dark {
		display: none !important;
	}

	.home .site-header:not(.is-scrolled):not(.is-menu-active) .site-header__logo-light {
		display: block !important;
		width: 100%;
		filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
	}

	.home .site-header:not(.is-scrolled):not(.is-menu-active) .menu-toggle {
		color: #f2ede4 !important;
		filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
	}

	/* Hide desktop reference hero stage & header divider line on mobile */
	.front-hero--reference::after {
		display: none !important;
	}

	.front-hero--reference > .hero-reference__stage {
		display: none !important;
	}

	.front-hero--reference {
		min-height: 100svh !important;
		height: 100% !important;
		background: #14110e !important;
		color: #f7f4ef !important;
		overflow: hidden !important;
	}

	/* 3D Architectural Mobile Hero Stage */
	.tasuku-mobile-hero {
		position: absolute;
		inset: 0;
		z-index: 5;
		display: block;
		width: 100%;
		height: 100%;
		background: #14110e;
		color: #f7f4ef;
		font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
		overflow: hidden;
		isolation: isolate;
		user-select: none;
		-webkit-user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	/* Layer 1: Background Plaster Wall */
	.tasuku-mobile-hero__wall {
		position: absolute;
		inset: 0;
		z-index: 1;
		background:
			radial-gradient(ellipse 38% 22% at 94% 53%, rgba(132, 102, 66, 0.62) 0%, rgba(72, 54, 35, 0.25) 48%, rgba(20, 17, 14, 0) 100%),
			radial-gradient(ellipse 28% 24% at 36% 96%, rgba(114, 86, 54, 0.52) 0%, rgba(56, 42, 26, 0.18) 52%, rgba(20, 17, 14, 0) 100%),
			radial-gradient(circle at 25% 22%, #1d1916 0%, #120f0c 72%, #0c0a08 100%);
		pointer-events: none;
	}

	/* Layer 2: Gold Architectural Blueprint Drafting Lines */
	.tasuku-mobile-hero__blueprint {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		pointer-events: none;
		opacity: 0.88;
	}

	/* Layer 3: Three.js WebGL 3D Canvas */
	.tasuku-mobile-hero__canvas {
		position: absolute;
		inset: 0;
		z-index: 3;
		width: 100%;
		height: 100%;
		cursor: grab;
		touch-action: pan-y;
	}

	.tasuku-mobile-hero__canvas:active {
		cursor: grabbing;
	}

	.tasuku-mobile-hero__canvas canvas {
		display: block;
		width: 100% !important;
		height: 100% !important;
	}

	/* Layer 4: Atmospheric Vignette */
	.tasuku-mobile-hero__vignette {
		position: absolute;
		inset: 0;
		z-index: 4;
		pointer-events: none;
		background:
			linear-gradient(180deg, rgba(12, 9, 7, 0.42) 0%, rgba(12, 9, 7, 0.04) 16%, rgba(12, 9, 7, 0) 60%, rgba(10, 8, 6, 0.48) 100%),
			radial-gradient(circle at 18% 72%, rgba(10, 8, 6, 0.36) 0%, rgba(10, 8, 6, 0) 50%);
	}

	/* Layer 5: Mobile UI Overlay */
	.tasuku-mobile-hero__ui {
		position: absolute;
		inset: 0;
		z-index: 10;
		pointer-events: none;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	/* Middle-Right Vertical Copy ("建てる、直す、守る。") + Vertical Line */
	.tasuku-mobile-hero__vertical-wrap {
		position: absolute;
		right: 7.2%;
		top: 23.4%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tasuku-mobile-hero__vertical-copy {
		writing-mode: vertical-rl;
		text-orientation: upright;
		letter-spacing: 0.24em;
		font-feature-settings: "vert" 1, "vkna" 1;
		font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
		font-size: 14.5px;
		font-weight: 400;
		line-height: 1.6;
		color: rgba(244, 240, 232, 0.95);
		text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
	}

	.tasuku-mobile-hero__vertical-seg {
		display: inline-block;
		margin-top: 10px;
	}

	.tasuku-mobile-hero__vertical-line {
		margin-top: 14px;
		width: 1px;
		height: 142px;
		background: linear-gradient(
			180deg,
			rgba(244, 240, 232, 0.65) 0%,
			rgba(244, 240, 232, 0.45) 50%,
			rgba(244, 240, 232, 0.15) 100%
		);
	}

	/* Bottom-Left Hero Typography & Scroll Indicator */
	.tasuku-mobile-hero__bottom {
		width: 100%;
		padding: 0 7.2% calc(4.2% + env(safe-area-inset-bottom, 0px));
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.tasuku-mobile-hero__headline {
		margin: 0 0 18px;
		font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
		font-size: 48px;
		font-weight: 600;
		letter-spacing: 0.04em;
		line-height: 1.24;
		color: #fbf9f5;
		text-shadow:
			0 4px 24px rgba(8, 6, 4, 0.55),
			0 1px 3px rgba(8, 6, 4, 0.35);
	}

	.tasuku-mobile-hero__headline span {
		display: block;
	}

	.tasuku-mobile-hero__headline span + span {
		margin-top: 2px;
	}

	.tasuku-mobile-hero__subcopy {
		margin: 0 0 28px;
		font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.95;
		letter-spacing: 0.12em;
		color: rgba(232, 226, 216, 0.9);
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
	}

	.tasuku-mobile-hero__scroll {
		pointer-events: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.tasuku-mobile-hero__scroll-label {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Noto Sans JP', sans-serif;
		font-size: 9.5px;
		letter-spacing: 0.26em;
		color: rgba(223, 217, 206, 0.85);
		transition: color 0.2s ease;
	}

	.tasuku-mobile-hero__scroll:hover .tasuku-mobile-hero__scroll-label {
		color: #ffffff;
	}

	.tasuku-mobile-hero__scroll-track {
		margin-top: 10px;
		width: 1px;
		height: 44px;
		background: rgba(255, 255, 255, 0.2);
		overflow: hidden;
		position: relative;
		display: block;
	}

	.tasuku-mobile-hero__scroll-bar {
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(245, 241, 233, 0.9);
		animation: tasukuMobileScrollPulse 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}
}