/*
 * Preview-only Hero port based on index(7)(2).html.
 * WordPress port point: move the scoped .front-hero--reference rules and
 * matching DOM into template-parts/front/hero.php after visual approval.
 */

.front-hero--reference {
	--hero-ref-bg: #f7f7f6;
	--hero-ref-ink: #0d141b;
	--hero-ref-line: rgba(35, 42, 47, .14);
	--hero-ref-line-soft: rgba(35, 42, 47, .09);
	--hero-ref-gold: #b99a63;
	--hero-ref-sand: rgba(219, 214, 201, .46);
	min-height: 100svh;
	padding: 0;
	background:
		radial-gradient(circle at 12% 15%, #fafafa 0%, var(--hero-ref-bg) 58%, #f4f4f3 100%);
	color: var(--hero-ref-ink);
	perspective: 1800px;
}

.front-hero--reference::after {
	position: absolute;
	top: var(--header-height);
	right: 0;
	left: 0;
	z-index: 12;
	height: 1px;
	background: var(--hero-ref-line);
	content: "";
	pointer-events: none;
}

.hero-reference__stage {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 1536px;
	height: 864px;
	max-width: none;
	margin: 0;
	transform-origin: center center;
	isolation: isolate;
}

.hero-reference__anchor {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 1536px;
	height: 864px;
	min-height: 0;
	margin: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	pointer-events: none;
}

.front-hero--reference .hero-reference__anchor .image-reveal__inner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	transition:
		clip-path 1800ms cubic-bezier(.42, 0, .22, 1),
		transform 2050ms cubic-bezier(.42, 0, .22, 1),
		opacity 1450ms ease !important;
	transition-delay: 180ms !important;
	will-change: clip-path, transform, opacity;
}

.hero-reference__card {
	position: absolute;
	inset: 0;
	transform-origin: 80% 48%;
	transform-style: preserve-3d;
	will-change: transform;
}

.hero-reference__visual {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 1536px;
	height: 864px;
	overflow: visible;
	transform-origin: 80% 48%;
	will-change: transform;
}

.front-hero--reference .hero-reference__visual img {
	display: block;
	width: 1536px;
	height: 864px;
	max-width: none;
	object-fit: fill;
	filter: saturate(.99) contrast(1.01);
	transform-origin: 80% 48%;
	animation: hero-reference-breathe 14s ease-in-out infinite alternate;
}

.hero-reference__gloss {
	position: absolute;
	top: 58px;
	left: 742px;
	z-index: 3;
	width: 794px;
	height: 748px;
	overflow: hidden;
	opacity: .2;
	transform: translateZ(18px);
	pointer-events: none;
}

.hero-reference__gloss::before {
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -42%;
	width: 18%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
	content: "";
	filter: blur(3px);
	transform: translateX(calc(var(--hero-reference-progress, 0) * 720%)) skewX(-12deg);
}

.hero-reference__copy {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	width: 705px;
	height: 864px;
	perspective: 1100px;
	perspective-origin: 31% 46%;
}

.hero-reference__eyebrow {
	position: absolute;
	top: 212px;
	left: 95px;
	z-index: 8;
	margin: 0;
	will-change: transform;
}

.front-hero--reference .hero-reference__eyebrow::before {
	width: 31px;
	background: var(--hero-ref-gold);
}

.hero-reference__title-index {
	position: absolute;
	top: 264px;
	left: 52px;
	z-index: 9;
	color: rgba(89, 97, 104, .52);
	font-family: var(--font-en);
	font-size: 8px;
	letter-spacing: 1.6px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.front-hero--reference .hero-reference__title {
	position: absolute;
	top: 257px;
	left: 69px;
	z-index: 7;
	margin: 0;
	color: #0e141c;
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
	font-size: 118px;
	font-weight: 600;
	line-height: .97;
	letter-spacing: -.08em;
	pointer-events: none;
	will-change: transform;
}

.front-hero--reference .hero-reference__line-wrap {
	position: relative;
	display: block;
	height: 124px;
	margin: 0;
	overflow: hidden;
}

.front-hero--reference .hero-reference__line-wrap + .hero-reference__line-wrap {
	margin-top: 0;
}

.hero-reference__line {
	position: relative;
	display: block;
	white-space: nowrap;
	text-shadow: 0 1px 0 rgba(10, 16, 22, .02);
}

.hero-reference__char {
	display: inline-block;
	padding-bottom: .08em;
	margin-bottom: -.08em;
	overflow: hidden;
	vertical-align: top;
}

.hero-reference__char > span {
	position: relative;
	display: inline-block;
	opacity: .08;
	clip-path: inset(0 0 100% 0);
	filter: blur(4px);
	transform: translate3d(0, 0, 0) scaleY(.97);
	transform-origin: 50% 82%;
	transform-style: preserve-3d;
	transition:
		opacity 1.08s cubic-bezier(.22, 1, .36, 1),
		filter 1.08s cubic-bezier(.22, 1, .36, 1),
		transform 1.08s cubic-bezier(.22, 1, .36, 1),
		clip-path 1.08s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i) * 55ms);
	will-change: transform, filter;
}

.hero-reference-ready .hero-reference__char > span {
	opacity: 1;
	clip-path: inset(0 0 0 0);
	filter: blur(0);
	transform: translate3d(0, 0, 0) rotate(0);
}

.hero-reference__title-depth {
	position: absolute;
	top: 257px;
	left: 69px;
	z-index: 5;
	margin: 0;
	color: rgba(22, 29, 35, .08);
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
	font-size: 118px;
	font-weight: 600;
	line-height: .97;
	letter-spacing: -.08em;
	filter: blur(.2px);
	text-shadow: 4px 6px 14px rgba(16, 22, 28, .06);
	transform-origin: 42% 48%;
	transform-style: preserve-3d;
	pointer-events: none;
}

.hero-reference__title-depth span {
	display: block;
	height: 124px;
	white-space: nowrap;
}

.hero-reference__title-scan {
	position: absolute;
	top: 389px;
	left: 60px;
	z-index: 9;
	display: block;
	width: 486px;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--hero-ref-gold) 24%, rgba(185, 154, 99, .7) 72%, transparent 100%);
	box-shadow: 0 0 18px rgba(185, 154, 99, .16);
	opacity: .55;
	transform-origin: left center;
	pointer-events: none;
}

.hero-reference__title-scan::after {
	position: absolute;
	top: -3px;
	right: -1px;
	width: 7px;
	height: 7px;
	border: 1px solid rgba(185, 154, 99, .62);
	background: rgba(247, 247, 246, .9);
	content: "";
	transform: rotate(45deg);
}

.front-hero--reference .hero-reference__lead {
	position: absolute;
	top: 618px;
	left: 67px;
	max-width: none;
	margin: 0;
	color: #1e252b;
	font-size: 16px;
	font-weight: 500;
	line-height: 2.2;
	letter-spacing: .02em;
	will-change: transform;
}

.front-hero--reference .hero-reference__location {
	position: absolute;
	top: 733px;
	left: 71px;
	margin: 0;
	color: #7b8288;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	will-change: transform;
}

.hero-reference__guides {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
}

.hero-reference__guide,
.hero-reference__guide-block {
	position: absolute;
	display: block;
}

.hero-reference__guide {
	background: var(--hero-ref-line-soft);
	overflow: hidden;
}

.hero-reference__guide::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(130, 138, 145, .15) 50%, transparent 100%);
	content: "";
	transform: translateX(-120%);
	animation: hero-reference-line-sweep 7.8s ease-in-out infinite;
}

.hero-reference__guide--v {
	top: 263px;
	left: 26px;
	width: 1px;
	height: 319px;
}

.hero-reference__guide--v::after {
	background: linear-gradient(180deg, transparent 0%, rgba(130, 138, 145, .18) 50%, transparent 100%);
	transform: translateY(-120%);
	animation: hero-reference-line-sweep-v 7.2s ease-in-out infinite;
}

.hero-reference__guide--h1 { top: 295px; left: 11px; width: 178px; height: 1px; transform-origin: left; }
.hero-reference__guide--h2 { top: 411px; left: 337px; width: 264px; height: 1px; transform-origin: left; }
.hero-reference__guide--h3 { top: 580px; left: 0; width: 332px; height: 1px; transform-origin: left; }

.hero-reference__guide-block {
	top: 511px;
	left: 13px;
	width: 46px;
	height: 101px;
	background: var(--hero-ref-sand);
}

.hero-reference__ferro {
	position: absolute;
	top: 112px;
	left: -10px;
	z-index: 1 !important;
	width: 850px;
	height: 600px;
	overflow: visible;
	opacity: .78;
	mix-blend-mode: multiply;
	-webkit-mask-image: radial-gradient(ellipse at 43% 49%, #000 0%, #000 64%, rgba(0, 0, 0, .78) 77%, transparent 96%);
	mask-image: radial-gradient(ellipse at 43% 49%, #000 0%, #000 64%, rgba(0, 0, 0, .78) 77%, transparent 96%);
	pointer-events: none;
	clip-path: inset(0 0 0 0);
	transition: opacity 160ms linear, filter 220ms ease;
}

.hero-reference__ferro::after {
	position: absolute;
	top: var(--hero-digital-scan, 0%);
	right: 10%;
	left: 8%;
	z-index: 3;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(94, 105, 111, .42) 18%, rgba(187, 156, 105, .68) 50%, rgba(94, 105, 111, .32) 82%, transparent);
	box-shadow: 0 0 12px rgba(187, 156, 105, .16);
	content: "";
	opacity: 0;
	pointer-events: none;
}

.hero-reference__ferro.is-digital-building::after {
	opacity: .72;
}

.hero-reference__ferro.is-digital-built::after {
	opacity: 0;
}

.hero-reference__ferro > div,
.hero-reference__ferro canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.hero-reference__ferro canvas {
	opacity: .78;
	filter: saturate(.92) contrast(.98);
}

.hero-reference__ferro-glow {
	position: absolute;
	top: 172px;
	left: 78px;
	z-index: 1;
	width: 690px;
	height: 455px;
	background: radial-gradient(ellipse at 42% 50%, rgba(210, 183, 140, .16), rgba(234, 214, 176, .07) 42%, transparent 70%);
	filter: blur(24px);
	opacity: .62;
	pointer-events: none;
}

.front-hero--reference .hero-reference__scroll {
	right: 78px;
	bottom: 47px;
	z-index: 9;
	gap: 18px;
	color: #81868c;
	font-size: 10px;
	letter-spacing: 2px;
	will-change: opacity, transform;
}

.front-hero--reference .hero-reference__scroll i {
	width: 58px;
}

@keyframes hero-reference-breathe {
	from { transform: scale(1); }
	to { transform: scale(1.018); }
}

@keyframes hero-reference-line-sweep {
	0%, 18% { transform: translateX(-120%); }
	42%, 100% { transform: translateX(125%); }
}

@keyframes hero-reference-line-sweep-v {
	0%, 18% { transform: translateY(-120%); }
	42%, 100% { transform: translateY(125%); }
}

@media (min-width: 768px) and (max-width: 1100px) {
	.hero-reference__stage {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: none !important;
	}

	.hero-reference__anchor {
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.front-hero--reference .hero-reference__anchor .image-reveal__inner,
	.hero-reference__card,
	.hero-reference__visual {
		width: 100%;
		height: 100%;
	}

	.front-hero--reference .hero-reference__visual img {
		position: absolute;
		top: 17vh;
		left: -16vw;
		width: 133.333vw;
		height: 75vw;
		max-height: 78vh;
		object-fit: fill;
	}

	.hero-reference__gloss {
		display: none;
	}

	.hero-reference__copy {
		width: 58%;
		height: 100%;
	}

	.hero-reference__eyebrow {
		top: 26vh;
		left: 3.4vw;
	}

	.front-hero--reference .hero-reference__title,
	.hero-reference__title-depth {
		top: 31vh;
		left: 3.2vw;
		font-size: clamp(4.5rem, 9.2vw, 6rem);
	}

	.front-hero--reference .hero-reference__line-wrap,
	.hero-reference__title-depth span {
		height: 1.02em;
	}

	.hero-reference__title-index {
		top: 32vh;
		left: 1.8vw;
	}

	.hero-reference__title-scan {
		top: 43vh;
		left: 2.8vw;
		width: 42vw;
	}

	.front-hero--reference .hero-reference__lead {
		top: 65vh;
		left: 3.4vw;
		font-size: clamp(.75rem, 1.55vw, .95rem);
	}

	.front-hero--reference .hero-reference__location {
		top: 78vh;
		left: 3.5vw;
	}

	.hero-reference__ferro {
		top: 16vh;
		left: -8vw;
		width: 67vw;
		height: 61vh;
		opacity: .62;
	}

	.hero-reference__ferro-glow {
		top: 23vh;
		left: 0;
		width: 58vw;
		height: 45vh;
	}

	.hero-reference__guide--v { top: 31vh; left: 1.2vw; height: 34vh; }
	.hero-reference__guide--h1 { top: 36vh; left: 0; width: 15vw; }
	.hero-reference__guide--h2 { top: 49vh; left: 31vw; width: 23vw; }
	.hero-reference__guide--h3 { top: 62vh; left: 0; width: 31vw; }
	.hero-reference__guide-block { top: 55vh; left: .4vw; width: 3.8vw; height: 11vh; }

	.front-hero--reference .hero-reference__scroll {
		right: 3vw;
		bottom: 3rem;
	}
}

@media (max-width: 767px) {
	.front-hero--reference {
		min-height: max(44rem, 100svh);
	}

	.hero-reference__stage {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-height: max(44rem, 100svh);
		transform: none !important;
	}

	.hero-reference__anchor {
		top: auto;
		bottom: -1rem;
		width: 100%;
		height: 54%;
		overflow: hidden;
	}

	.front-hero--reference .hero-reference__anchor .image-reveal__inner,
	.hero-reference__card,
	.hero-reference__visual {
		width: 100%;
		height: 100%;
	}

	.front-hero--reference .hero-reference__visual img {
		position: absolute;
		top: 0;
		left: -100%;
		width: 200%;
		height: 100%;
		object-fit: cover;
		object-position: center 42%;
		opacity: .92;
	}

	.hero-reference__gloss {
		display: none;
	}

	.hero-reference__copy {
		width: 100%;
		height: 100%;
	}

	.hero-reference__eyebrow {
		top: 8.5rem;
		left: 1.4rem;
		font-size: .5rem;
	}

	.front-hero--reference .hero-reference__title {
		top: 11.2rem;
		left: 1.2rem;
		font-size: clamp(4.35rem, 21.5vw, 5.6rem);
		line-height: .94;
	}

	.front-hero--reference .hero-reference__line-wrap,
	.hero-reference__title-depth span {
		height: 1.02em;
	}

	.hero-reference__title-depth {
		top: 11.2rem;
		left: 1.2rem;
		font-size: clamp(4.35rem, 21.5vw, 5.6rem);
		line-height: .94;
	}

	.hero-reference__title-index {
		top: 11.5rem;
		left: .45rem;
		font-size: 6px;
	}

	.hero-reference__title-scan {
		top: 16rem;
		left: 1rem;
		width: min(78vw, 19rem);
	}

	.front-hero--reference .hero-reference__lead {
		top: 22.6rem;
		left: 1.35rem;
		width: calc(100% - 2.7rem);
		font-size: .82rem;
		line-height: 1.85;
	}

	.front-hero--reference .hero-reference__location {
		top: 27.6rem;
		left: 1.4rem;
		font-size: .5rem;
	}

	.hero-reference__ferro {
		top: 7rem;
		left: -24%;
		width: 145%;
		height: 26rem;
		opacity: .5;
	}

	.hero-reference__ferro-glow {
		top: 10rem;
		left: -6%;
		width: 112%;
		height: 18rem;
		opacity: .42;
	}

	.hero-reference__guide--v { top: 11rem; left: .65rem; height: 15rem; }
	.hero-reference__guide--h1 { top: 13rem; left: 0; width: 7.5rem; }
	.hero-reference__guide--h2 { top: 18.7rem; left: 43%; width: 45%; }
	.hero-reference__guide--h3 { top: 21.4rem; left: 0; width: 40%; }
	.hero-reference__guide-block { top: 18.5rem; left: .25rem; width: 1.8rem; height: 5.8rem; }

	.front-hero--reference .hero-reference__scroll {
		right: 1.2rem;
		bottom: 1.15rem;
		font-size: .48rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.front-hero--reference .hero-reference__visual img,
	.hero-reference__guide::after,
	.front-hero--reference .hero-reference__scroll i::after {
		animation: none !important;
	}

	.hero-reference__char > span {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
}