@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Inter:wght@300;400;500&display=swap");

.ohm-origami-spread-beta {
	position: relative;
	display: grid;
	width: 100%;
	height: var(--ohm-height, auto);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	isolation: isolate;
	color: var(--ohm-text-color, #fff);
	background: var(--ohm-start-color, #111111);
	cursor: pointer;
}

.ohm-origami-spread-beta,
.ohm-origami-spread-beta * {
	box-sizing: border-box;
}

.ohm-spread-beta__base,
.ohm-spread-beta__stage {
	position: absolute;
	inset: 0;
}

.ohm-spread-beta__base {
	top: 50%;
	right: auto;
	bottom: auto;
	left: 50%;
	z-index: 0;
	display: grid;
	width: var(--ohm-stage-width, 100%);
	height: var(--ohm-stage-height, 100%);
	grid-template-columns: repeat(var(--ohm-cols, 12), var(--ohm-tile-size, 48px));
	grid-template-rows: repeat(var(--ohm-rows, 7), var(--ohm-tile-size, 48px));
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 35%),
		var(--ohm-current-color, var(--ohm-start-color, #111111));
	transform: translate(-50%, -50%);
}

.ohm-spread-beta__stage {
	top: 50%;
	right: auto;
	bottom: auto;
	left: 50%;
	z-index: 1;
	display: block;
	width: var(--ohm-stage-width, 100%);
	height: var(--ohm-stage-height, 100%);
	transform: translate(-50%, -50%);
}

.ohm-spread-beta__veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		radial-gradient(ellipse at center, var(--ohm-veil-color, #111111) 0%, var(--ohm-veil-color, #111111) 28%, transparent 72%),
		linear-gradient(90deg, transparent 0%, var(--ohm-veil-color, #111111) 48%, var(--ohm-veil-color, #111111) 52%, transparent 100%);
	opacity: var(--ohm-veil-opacity, 0.55);
	pointer-events: none;
}

.ohm-spread-beta__content {
	position: relative;
	z-index: 3;
	width: min(1040px, calc(100% - 40px));
	margin: auto;
	display: grid;
	gap: 0.9rem;
	justify-items: center;
	text-align: center;
	text-shadow: 0 2px 28px rgba(0, 0, 0, 0.36);
}

.ohm-spread-beta__title {
	max-width: min(920px, 92%);
	margin: 0 auto;
	color: var(--ohm-text-color, #fff);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(3.4rem, 10vw, 8.5rem);
	font-weight: 300;
	letter-spacing: 0;
	line-height: 0.9;
	overflow-wrap: anywhere;
}

.ohm-spread-beta__subtitle {
	max-width: 720px;
	margin: 0 auto;
	color: var(--ohm-text-color, #fff);
	font-family: Inter, Arial, sans-serif;
	font-size: clamp(0.66rem, 0.8vw, 0.82rem);
	font-weight: 500;
	letter-spacing: 0.25em;
	line-height: 1.4;
	opacity: 0.86;
	text-transform: uppercase;
}

[data-ohm-original-header-hidden="true"] {
	display: none !important;
}

.ohm-spread-tile {
	position: absolute;
	width: var(--ohm-tile-size, 48px);
	height: var(--ohm-tile-size, 48px);
	display: none;
	perspective: 300px;
	transform-style: preserve-3d;
}

.ohm-spread-base-tile {
	display: block;
	width: var(--ohm-tile-size, 48px);
	height: var(--ohm-tile-size, 48px);
	background-color: var(--ohm-current-color, #111111);
	background-position: center;
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ohm-spread-tile__inlay {
	display: block;
	width: 100%;
	height: 100%;
	background: #4a4a4a;
	background-position: center;
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	backface-visibility: hidden;
	transform-style: preserve-3d;
	transition: transform var(--ohm-duration, 300ms) ease-in-out;
	will-change: transform;
}

.ohm-spread-tile__cover {
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	transition: background-color var(--ohm-duration, 300ms) ease-in-out;
}

.ohm-spread-tile.from-left {
	display: block;
	perspective-origin: 0 50%;
}

.ohm-spread-tile.from-left .ohm-spread-tile__inlay {
	transform-origin: 0 50%;
	transform: rotateY(90deg);
}

.ohm-spread-tile.from-right {
	display: block;
	perspective-origin: 100% 50%;
}

.ohm-spread-tile.from-right .ohm-spread-tile__inlay {
	transform-origin: 100% 50%;
	transform: rotateY(-90deg);
}

.ohm-spread-tile.from-top {
	display: block;
	perspective-origin: 50% 0;
}

.ohm-spread-tile.from-top .ohm-spread-tile__inlay {
	transform-origin: 50% 0;
	transform: rotateX(-90deg);
}

.ohm-spread-tile.from-bottom {
	display: block;
	perspective-origin: 50% 100%;
}

.ohm-spread-tile.from-bottom .ohm-spread-tile__inlay {
	transform-origin: 50% 100%;
	transform: rotateX(90deg);
}

.ohm-spread-tile .ohm-spread-tile__inlay.show {
	transform: rotateX(0) rotateY(0);
}

.ohm-spread-tile .ohm-spread-tile__inlay.show .ohm-spread-tile__cover {
	background-color: rgba(0, 0, 0, 0);
}

@media (max-width: 760px) {
	.ohm-spread-beta__content {
		width: min(100% - 28px, 680px);
	}

	.ohm-spread-beta__title {
		font-size: clamp(2.8rem, 18vw, 4.4rem);
		line-height: 1;
	}

	.ohm-spread-beta__subtitle {
		font-size: 0.62rem;
		letter-spacing: 0.18em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ohm-spread-tile {
		transition: none;
	}
}