/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Great+Vibes&family=Montserrat:wght@300;400;500&family=Pinyon+Script&display=swap');

:root {
	--snap-desktop-padding: 130px;
	--snap-mobile-padding: 60px;
	--evergreen-design-viewport: 1920px;
	--evergreen-container-width: 1370px;
	--evergreen-container-gutter: 16px;
	--eve-ui-scale: 1;
	--wp-admin--admin-bar--height: 0px;
}

html,
body {
	scroll-behavior: auto;
}

html {
	overflow-x: clip;
	overflow-y: auto;
	scroll-padding: 0;
	/* GSAP snap + evergreen-smooth-scroll.js — không dùng CSS scroll-snap */
	scroll-snap-type: none;
}

html.evergreen-smooth-scroll-active {
	scroll-behavior: auto;
}

body {
	scroll-margin: 0;
	overflow-x: clip;
}

#brx-content {
	overflow-x: clip;
}

/* Global production container: desktop QA baseline 1920px, inner content 1370px. */
.brxe-container {
	width: 100%;
	max-width: var(--evergreen-container-width);
	padding-right: var(--evergreen-container-gutter);
	padding-left: var(--evergreen-container-gutter);
	margin-right: auto;
	margin-left: auto;
}

body #brx-header {
	opacity: 0;
	transform: translateY(-120px);
}

/* Homepage: do not slab #23110a over the settled photo — that reads as a hard cut. */
body.home:not([data-builder-window]) #brx-header,
body.home:not([data-builder-window]) #brx-header .brxe-section,
body.home:not([data-builder-window]) #brx-header .brxe-container {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border-bottom: none !important;
}

.brxe-section {
	background-color: #23110a;
}

/* Evergreen chapter [evergreen_chapter] — nền đen, vàng đồng, bát giác + tia ngang (mockup chapter) */
.evergreen-chapter {
	position: relative;
	--evergreen-chapter-bg: #000000;
	--evergreen-chapter-gold: #c5a059;
	--evergreen-chapter-gold-soft: rgba(197, 160, 89, 0.82);
	--evergreen-chapter-gold-dim: rgba(197, 160, 89, 0.28);
	--evergreen-chapter-oct-stroke: rgba(197, 160, 89, 0.22);
	--evergreen-chapter-muted: rgba(197, 160, 89, 0.5);
	color: var(--evergreen-chapter-gold);
}

.evergreen-chapter__bg {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: 0;
	background: var(--evergreen-chapter-bg);
}

.evergreen-chapter__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.04;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
}

.evergreen-chapter__section {
	position: relative;
	z-index: 91;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: var(--evergreen-chapter-bg);
}

/* Tia ngang mảnh: trong suốt ở mép, vàng về phía trục giữa (gặp bát giác) */
.evergreen-chapter__rays {
	position: fixed;
	inset: 0;
	z-index: 92;
	pointer-events: none;
}

.evergreen-chapter__ray {
	position: absolute;
	top: 50%;
	height: 1px;
	transform: translateY(-50%);
	pointer-events: none;
}

.evergreen-chapter__ray-line {
	display: block;
	height: 100%;
	opacity: 0;
	transform-origin: 50% 50%;
}

.evergreen-chapter__ray--l {
	left: 0;
	width: 50%;
}

.evergreen-chapter__ray--l .evergreen-chapter__ray-line {
	width: 100%;
	transform-origin: 100% 50%;
	background: linear-gradient(to right,
			transparent 0%,
			rgba(197, 160, 89, 0.12) 38%,
			rgba(197, 160, 89, 0.55) 88%,
			var(--evergreen-chapter-gold) 100%);
	box-shadow: 0 0 12px rgba(197, 160, 89, 0.15);
}

.evergreen-chapter__ray--r {
	right: 0;
	width: 50%;
}

.evergreen-chapter__ray--r .evergreen-chapter__ray-line {
	width: 100%;
	transform-origin: 0% 50%;
	background: linear-gradient(to left,
			transparent 0%,
			rgba(197, 160, 89, 0.12) 38%,
			rgba(197, 160, 89, 0.55) 88%,
			var(--evergreen-chapter-gold) 100%);
	box-shadow: 0 0 12px rgba(197, 160, 89, 0.15);
}

.evergreen-chapter__stage {
	position: relative;
	z-index: 93;
	width: min(78vmin, 36rem);
	aspect-ratio: 1;
	max-width: 100%;
	margin-inline: auto;
}

.evergreen-chapter__svg-wrap {
	position: absolute;
	inset: 0;
	color: var(--evergreen-chapter-oct-stroke);
	filter: drop-shadow(0 0 24px rgba(197, 160, 89, 0.06));
}

.evergreen-chapter__ornament {
	color: var(--evergreen-chapter-gold-dim);
}

.evergreen-chapter__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.evergreen-chapter__dot {
	filter: drop-shadow(0 0 4px rgba(197, 160, 89, 0.5));
}

.evergreen-chapter__copy {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	text-align: center;
	padding: clamp(1.35rem, 5.5vmin, 2.75rem) clamp(0.85rem, 4vmin, 1.85rem);
	pointer-events: none;
}

.evergreen-chapter__copy-stack {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	max-width: 100%;
}

.evergreen-chapter__copy-head {
	flex: 0 0 auto;
	padding-top: clamp(0.25rem, 2vmin, 0.75rem);
}

.evergreen-chapter__copy-main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.evergreen-chapter__eyebrow {
	margin: 0 0 0.45rem;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--evergreen-chapter-muted);
	line-height: 1.35;
}

.evergreen-chapter__range {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.28em;
	margin: 0;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 300;
	color: var(--evergreen-chapter-gold-soft);
}

.evergreen-chapter__range-a {
	font-size: clamp(1.5rem, 3.6vw, 2.05rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--evergreen-chapter-gold);
}

.evergreen-chapter__range-b {
	font-size: clamp(0.95rem, 2.2vw, 1.15rem);
	opacity: 0.72;
	font-weight: 300;
}

.evergreen-chapter__range-sep {
	font-size: clamp(0.85rem, 2vw, 1rem);
	opacity: 0.45;
	font-weight: 300;
	padding: 0 0.08em;
	letter-spacing: 0;
}

.evergreen-chapter__text {
	overflow: hidden;
	max-width: 92%;
	margin-inline: auto;
}

.evergreen-chapter__text .evergreen-chapter__line {
	margin: 0 0 0.08em;
	font-family: 'Pinyon Script', 'Great Vibes', cursive;
	font-size: clamp(2.15rem, 5.8vw, 3.65rem);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: 0.01em;
	color: var(--evergreen-chapter-gold);
	text-shadow: 0 0 48px rgba(197, 160, 89, 0.08);
}

.evergreen-chapter__subline {
	margin: clamp(0.65rem, 2vw, 1rem) 0 0;
	max-width: 22rem;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: clamp(0.75rem, 1.65vw, 0.9rem);
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	color: var(--evergreen-chapter-muted);
}

@media (prefers-reduced-motion: reduce) {
	.evergreen-chapter__dot {
		filter: none;
	}
}

/* independent-scroll-gsap: frame + overlap panel (data-scroll-frame-overlap) */
.independent-frame-pin-wrap {
	position: relative;
}

/* body:not([data-builder-window]) .independent-frame-overlap-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	pointer-events: auto;
} */

body:not([data-builder-window]) [data-scroll-frame-image-target] {
	position: sticky;
	top: 0;
}

body[data-builder-window] .hero-section-wrapper {
	opacity: 1 !important;
}

/* independent-scroll-gsap: horizontal tag row scrubbed to scroll (data-scroll-tags-marquee) */
.independent-tags-marquee-root {
	overflow: hidden;
}

.independent-tags-marquee-root.independent-tags-scroll-full {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	/* Parent must not use overflow-x: hidden or this row is clipped */
}

.independent-tags-marquee-strip {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
}

.independent-tags-marquee-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-shrink: 0;
	align-items: center;
	column-gap: 0.5rem;
}

/* [evergreen_preload] — logo overlay; body scrim + octagon mask; optional magnetic cursor (CodePen bGpWmXd) */
[data-evergreen-preload] {
	--evergreen-preload-magnetic-accent: #07da8a;
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	pointer-events: none;
	background: transparent !important;
}

[data-evergreen-preload].evergreen-preload-magnetic-active {
	pointer-events: auto;
}

body.evergreen-preload-active {
	overflow: hidden;
}

.evergreen-preload-scrim {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	z-index: 99989;
	background: #121212;
	pointer-events: auto;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

body>.evergreen-preload-bg[data-evergreen-preload-bg] {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	object-fit: cover;
	object-position: center;
	z-index: 99988;
	pointer-events: none;
	transform: none;
}

[data-evergreen-preload]>*:not([data-evergreen-preload-bg]),
[data-evergreen-preload] [data-evergreen-preload-logo] {
	position: relative;
	z-index: 1;
}

/* Magnetic cursor (CodePen-style) */
.evergreen-preload-magnetic-cursor {
	position: fixed;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50px;
	z-index: 99995;
	will-change: transform, width, height;
}

[data-evergreen-preload-magnetic-target] {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.5rem;
	min-height: 4.5rem;
	padding: 0.5rem 1rem;
	margin: 0 1.5rem;
	border: 1px solid var(--evergreen-preload-magnetic-accent, #07da8a);
	color: #fff;
	user-select: none;
}

[data-evergreen-preload-magnetic-target] .evergreen-preload-magnetic-label,
[data-evergreen-preload-magnetic-target] [data-evergreen-preload-magnetic-label] {
	position: relative;
	margin: 0;
	will-change: transform;
}

.evergreen-preload-magnetic-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.line-clamp-1 {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hexagon-clip-path {
	-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* Split text line mask (data-scroll-mask-lines / data-scroll-mask-list) */
.independent-line-mask {
	display: block;
	overflow: hidden;
}

.independent-line-inner {
	display: inline-block;
}

/* Hero heading char reveal — mask theo dòng, không theo ký tự (font script/italic) */
[data-hero-anim="heading"] {
	overflow: visible;
}

.hero-char-line-mask {
	overflow: hidden;
}

.hero-char-inner {
	display: inline-block;
}

@keyframes fadeBlurIn {
	from {
		opacity: 0;
		filter: blur(10px);
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		filter: blur(0px);
		transform: translateY(0px);
	}
}

.brxe-vspcfz:not(.fadeBlurIn) {
	opacity: 0;
	filter: blur(10px);
	transform: translateY(10px);
}

.fadeBlurIn {
	animation: fadeBlurIn 0.6s ease-out forwards;
}

.orbit-line {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;

	/* đoạn visible dài hơn */
	stroke-dasharray: 1600 300;
	transform: rotate(90deg);
	transform-origin: center;

	animation: orbit 8s linear infinite;
}

@keyframes orbit {
	to {
		stroke-dashoffset: -2820;
	}
}

#brxe-etnziv .independent-line-mask {
	overflow: inherit !important;
}

/* independent-scroll-gsap: magnetic hover + parallax columns */
[data-magnetic-hover] {
	will-change: transform;
}

[data-scroll-parallax] {
	display: flex;
	gap: clamp(12px, 2vw, 24px);
	align-items: flex-start;
}

[data-scroll-parallax-col] {
	flex: 1 1 0;
	min-width: 0;
}

[data-magnetic-hover-root] [data-magnetic-strength-slider] {
	width: min(280px, 100%);
	accent-color: #c8a05a;
}

[data-scroll-blur-image] {
	transform: scale(0.8);
	overflow: hidden;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height) + 30px);
	z-index: 1;
}

/* [data-scroll-blur-image].mask-gradient {
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
} */

@media (max-width: 478px) {
	[data-scroll-blur-image] {
		top: inherit;
		position: relative;
		transform: none;
		border-radius: 0;
		height: 100dvh !important;
	}
}

[data-scroll-blur-image]~div {
	z-index: 2;
	/* position: relative; */
}

.brxe-section {
	z-index: 3;
}

.btn-pulse {
	position: relative;
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid #f7c587;
	border-radius: 999px;
	background: #f7c587;
	color: #111;
	font-weight: 400;
	letter-spacing: 0.16px;
	cursor: pointer;
	text-transform: uppercase;
	animation: pulse-border 1.8s infinite;
}

@keyframes pulse-border {
	0% {
		box-shadow: 0 0 0 0 rgba(247, 197, 135, 0.7);
	}

	70% {
		box-shadow: 0 0 0 12px rgba(247, 197, 135, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(247, 197, 135, 0);
	}
}

.animation-container,
[data-scroll-octagon-reveal] {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}

.reveal-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	overflow: hidden;
	pointer-events: auto;
	background: #07da8a;
}

.eve-section-title {
	/* Không sticky — GSAP pin lo “dính”; sticky + z-index 100 → section trên đè/lộ lên section dưới. */
	position: relative;
	z-index: 1;
	isolation: isolate;
	background-color: #23110a;
}

/* Homepage dynamic octagon scaling styles */
.eve-section-title .oo-root.octagon-keep-indicator {
	position: relative;
	z-index: 3 !important;
}

.homepage-octagon-wrapper {
	position: absolute;
	width: 150vmax;
	height: 150vmax;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 4;
	will-change: clip-path;
	overflow: hidden;
}

.homepage-expanding-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Lớn hơn viewport — blur không để hở mép (JS có thể override width/height). */
	width: 200vmax;
	height: 200vmax;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: filter, transform;
}

/* Soft bottom darken — không dùng mask trong suốt (tránh khoảng trống). */
.homepage-expanding-bg.mask-bottom::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 200px;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 0%, rgba(35, 17, 10, 0.75) 100%);
}

.homepage-chapter-visual-stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: visible;
	pointer-events: none;
	opacity: 0;
}

.homepage-chapter-visual-stage.is-visible {
	opacity: 1;
}

.homepage-chapter-visual-stage.is-visible .homepage-chapter-visual-sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.homepage-chapter-visual-stage.is-visible .homepage-chapter-visual-sticky::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: clamp(96px, 14dvh, 160px);
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(
		to bottom,
		rgba(35, 17, 10, 0.7) 0%,
		rgba(35, 17, 10, 0.28) 42%,
		rgba(35, 17, 10, 0) 100%
	);
}

.has-chapter-atmosphere {
	position: relative;
	background-color: transparent !important;
	background-image: none !important;
}

.has-chapter-atmosphere::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(220px, 32dvh, 420px);
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(35, 17, 10, 0) 0%,
		rgba(35, 17, 10, 0.4) 42%,
		rgba(35, 17, 10, 0.88) 74%,
		#23110a 100%
	);
}

.has-chapter-atmosphere > .brxe-container {
	background-color: transparent !important;
	background-image: none !important;
}

.homepage-chapter-visual-stage ~ * {
	position: relative;
	z-index: 1;
}

.homepage-chapter-visual-sticky {
	position: sticky;
	top: 0;
	height: 100dvh;
	overflow: hidden;
}

#brxe-fvgpbm,
#brxe-syopgp {
	position: relative;
}

#brxe-fvgpbm:after,
#brxe-syopgp:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 250px;
	pointer-events: none;
	background: linear-gradient( to bottom, #24110b00 0%, #24110b 65%, #24110b 100% );
  z-index: 10;
}

#brxe-lfnwiw {
	background: transparent !important;
}

#brxe-hrzxbt {
	position: relative;
	z-index: 100;
}

#brxe-oarwxc,
#brxe-aajcax {
	z-index: 100;
}

/* Preview ?eve-scale=1: zoom text + buttons only. Octagon / images / layout unchanged. */
html.eve-ui-scale,
body.eve-ui-scale {
	--eve-ui-scale: 1.2;
}

html.eve-ui-scale body::before {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 2147483647;
	padding: 6px 10px;
	pointer-events: none;
	color: #23110a;
	font: 600 12px/1.2 Montserrat, sans-serif;
	letter-spacing: 0.04em;
	background: #c5a059;
	content: 'EVE-SCALE ON';
}

html.eve-ui-scale :is(
	h1, h2, h3, h4, h5, h6, p,
	.brxe-heading,
	.brxe-text,
	.brxe-text-basic,
	.brxe-post-title,
	.brxe-button,
	.brxe-netcpy,
	.bricks-button,
	.evergreen-chapter__text,
	.evergreen-chapter__range,
	.evergreen-chapter__eyebrow,
	.evergreen-chapter__subline
):not(.oo-root *):not(.homepage-octagon-wrapper *) {
	zoom: var(--eve-ui-scale);
}

/*
 * Justify long-form copy only. Short copy in cards, the footer, badges and
 * narrow columns stays aligned by its component to avoid stretched word gaps.
 */
main :is(
	.brxe-post-content p,
	p[data-scroll-text-gradient],
	.eve-residence-product__story > p
) {
	text-align: justify !important;
}