/*
 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
*/

/* Google Fonts API disabled; VantixB uses local font assets. */

:root {
	--snap-desktop-padding: 130px;
	--snap-mobile-padding: 60px;
	--wp-admin--admin-bar--height: 0px;

}

html,
body {
	min-height: 100%;
	scroll-behavior: auto;
}

html {
	overflow-x: hidden;
	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;
}

.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;
}

@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 {
	position: sticky;
	top: 0;
	z-index: 100;
}