.entry-content > .tj-vinyl-hero,
.tj-vinyl-hero{
	--tj-vinyl-side-pad: clamp(18px, 5vw, 88px);
	--tj-vinyl-cover-size: clamp(270px, 30vw, 600px);
	--tj-vinyl-disc-size: clamp(142px, 14.2vw, 278px);
	position: relative !important;
	left: 50%;
	width: 100vw;
	max-width: none !important;
	margin: 0 0 clamp(22px, 3.4vw, 50px) !important;
	padding: clamp(14px, 1.8vw, 28px) var(--tj-vinyl-side-pad) clamp(36px, 5vw, 76px) !important;
	transform: translateX(-50%);
	box-sizing: border-box;
	overflow: hidden;
	background: transparent;
	box-shadow: none;
}

.tj-vinyl-hero > *{
	position: relative;
	z-index: 1;
	max-width: none !important;
}

.tj-vinyl-title{
	width: min(92vw, 980px);
	margin: clamp(18px, 1.7vw, 34px) auto clamp(10px, 1.1vw, 20px) !important;
	text-align: center;
	font-size: clamp(26px, 3.05vw, 54px) !important;
	font-style: italic;
	font-weight: 1000 !important;
	line-height: .96;
	letter-spacing: .015em;
	text-transform: uppercase;
	color: rgba(245, 248, 255, .96) !important;
	text-shadow:
		0 3px 0 rgba(142, 149, 163, .78),
		0 8px 20px rgba(0, 0, 0, .52),
		0 0 22px rgba(165, 205, 255, .18);
}

.tj-vinyl-title + .tj-vinyl-hero{
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.tj-vinyl-gallery{
	display: grid !important;
	grid-template-columns:
		minmax(0, var(--tj-vinyl-cover-size))
		var(--tj-vinyl-disc-size)
		minmax(0, var(--tj-vinyl-cover-size));
	justify-content: center !important;
	align-items: center !important;
	gap: clamp(18px, 2.8vw, 56px) !important;
	width: 100% !important;
	max-width: min(94vw, 1700px) !important;
	min-height: 0 !important;
	margin: 0 auto !important;
}

.tj-vinyl-gallery > .wp-block-image,
.tj-vinyl-gallery.has-nested-images > figure.wp-block-image:not(#individual-image){
	width: 100% !important;
	max-width: var(--tj-vinyl-cover-size) !important;
	min-width: 0 !important;
	flex: none !important;
	margin: 0 !important;
	border-radius: 10px !important;
	overflow: hidden;
	outline: 1px solid rgba(255, 255, 255, .16);
	box-shadow:
		0 28px 78px rgba(0, 0, 0, .52),
		0 0 58px rgba(99, 160, 255, .14);
}

.tj-vinyl-gallery > .wp-block-image:first-of-type{
	order: 1;
}

.tj-vinyl-gallery > .wp-block-image:last-of-type{
	order: 3;
}

.tj-vinyl-gallery > .wp-block-image img{
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px !important;
	clip-path: none !important;
}

.tj-vinyl-record-wrap{
	order: 2;
	position: relative;
	width: var(--tj-vinyl-disc-size);
	aspect-ratio: 1 / 1;
	margin: 0 auto !important;
	z-index: 2;
	filter:
		drop-shadow(0 24px 34px rgba(0, 0, 0, .56))
		drop-shadow(0 0 34px rgba(143, 196, 255, .18));
}

.tj-vinyl-record{
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, transparent 0 9%, rgba(255,255,255,.12) 9.4% 9.8%, transparent 10.2% 13.6%, rgba(255,255,255,.1) 14% 14.4%, transparent 14.8% 100%),
		repeating-radial-gradient(circle at 50% 50%, #0c0d10 0 2px, #050609 2px 4px, #12151b 4px 5px),
		conic-gradient(from 18deg, #050609, #141820, #050609, #1d222c, #06070a, #11151c, #050609);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.1),
		inset 0 0 28px rgba(255,255,255,.06),
		inset 0 0 70px rgba(0,0,0,.72);
	animation: tj-vinyl-spin 5.8s linear infinite;
}

.tj-vinyl-record::before,
.tj-vinyl-record::after{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.tj-vinyl-record::before{
	background:
		linear-gradient(116deg, transparent 12%, rgba(255,255,255,.18) 24%, transparent 37%),
		radial-gradient(58% 46% at 28% 24%, rgba(105, 153, 255, .2), transparent 68%);
	mix-blend-mode: screen;
	opacity: .56;
}

.tj-vinyl-record::after{
	inset: 49.1%;
	background: #010205;
	box-shadow: 0 0 0 6px rgba(222, 235, 255, .12);
}

.tj-vinyl-label{
	position: absolute;
	inset: 34%;
	border-radius: 50%;
	background-image: var(--tj-label-image);
	background-size: cover;
	background-position: center;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.2),
		0 0 0 5px rgba(0,0,0,.42);
}

.tj-vinyl-hero > .wp-block-buttons,
.tj-vinyl-cta-wrap{
	position: relative !important;
	left: auto !important;
	top: auto !important;
	z-index: 3;
	justify-content: center !important;
	margin: clamp(22px, 2.6vw, 38px) auto 0 !important;
	transform: none !important;
}

.tj-vinyl-hero > .wp-block-buttons .wp-block-button__link{
	position: relative;
	isolation: isolate;
	min-width: clamp(230px, 18vw, 330px);
	padding: clamp(17px, 1.15vw, 22px) clamp(34px, 3vw, 54px) !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255,255,255,.4) !important;
	background:
		linear-gradient(
			100deg,
			#9ccc18 0%,
			#31b84f 16%,
			#00a8d8 32%,
			#416dff 48%,
			#8a5cf4 61%,
			#e653a7 73%,
			#f04431 86%,
			#ff9f25 100%
		) !important;
	background-size: 145% 100% !important;
	background-position: 0% 50% !important;
	color: #eaf4ff !important;
	text-shadow: 0 2px 8px rgba(0,0,0,.55);
	text-transform: uppercase;
	text-align: center;
	letter-spacing: .1em;
	font-size: clamp(15px, 1.05vw, 19px) !important;
	font-weight: 900;
	line-height: 1.1;
	overflow: hidden;
	box-shadow:
		0 20px 54px rgba(0,0,0,.52),
		0 0 18px rgba(0,168,216,.28),
		0 0 28px rgba(230,83,167,.24),
		inset 0 1px 0 rgba(255,255,255,.42),
		inset 0 -18px 24px rgba(15,18,40,.34) !important;
	backdrop-filter: blur(13px) saturate(132%);
	-webkit-backdrop-filter: blur(13px) saturate(132%);
	transition:
		transform .24s ease,
		box-shadow .24s ease,
		border-color .24s ease,
		background-position .34s ease,
		filter .24s ease;
}

.tj-vinyl-hero > .wp-block-buttons .wp-block-button__link::before{
	content: "";
	position: absolute;
	inset: -2px;
	z-index: -1;
	border-radius: inherit;
	background:
		radial-gradient(circle at 18% 12%, rgba(255,255,255,.45), transparent 30%),
		linear-gradient(112deg, transparent 0 24%, rgba(255,255,255,.38) 41%, transparent 58% 100%);
	opacity: .44;
	transform: translateX(-34%);
	transition: opacity .24s ease, transform .34s ease;
}

@media (hover:hover){
	.tj-vinyl-hero > .wp-block-buttons .wp-block-button__link:hover{
		transform: translateY(-4px) scale(1.045);
		border-color: rgba(255,255,255,.78) !important;
		background-position: 100% 50% !important;
		background:
			linear-gradient(
				100deg,
				#b7df1f 0%,
				#40d060 16%,
				#14c6f2 32%,
				#557dff 48%,
				#9a6cff 61%,
				#ff62bb 73%,
				#ff5139 86%,
				#ffb238 100%
			) !important;
		background-size: 145% 100% !important;
		box-shadow:
			0 30px 72px rgba(0,0,0,.58),
			0 0 0 5px rgba(255,255,255,.1),
			0 0 28px rgba(20,198,242,.5),
			0 0 48px rgba(255,98,187,.46),
			0 0 86px rgba(255,178,56,.26),
			inset 0 1px 0 rgba(255,255,255,.62),
			inset 0 -18px 24px rgba(18,18,38,.32) !important;
		filter: saturate(1.18) brightness(1.08);
	}

	.tj-vinyl-hero > .wp-block-buttons .wp-block-button__link:hover::before{
		opacity: .78;
		transform: translateX(30%);
	}
}

.tj-vinyl-hero > .wp-block-buttons .wp-block-button__link:focus-visible{
	outline: none;
	border-color: rgba(255,255,255,.86) !important;
	box-shadow:
		0 0 0 3px rgba(255,255,255,.3),
		0 0 0 7px rgba(4,12,32,.72),
		0 24px 62px rgba(0,0,0,.56),
		0 0 34px rgba(20,198,242,.44),
		0 0 58px rgba(255,98,187,.42) !important;
}

@keyframes tj-vinyl-spin{
	to{ transform: rotate(360deg); }
}

.tj-soon-section{
	position: relative;
}

.tj-soon-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 24px);
	width: min(100%, 1080px);
	margin: clamp(20px, 2.8vw, 38px) auto 0 !important;
}

.tj-soon-card{
	position: relative;
	display: grid;
	min-height: clamp(118px, 11vw, 172px);
	place-items: center;
	gap: 10px;
	overflow: hidden;
	border: 1px solid rgba(198, 225, 255, .18);
	border-radius: 12px;
	background:
		linear-gradient(150deg, rgba(255,255,255,.07), rgba(76,130,230,.08) 42%, rgba(4,9,24,.4)),
		rgba(4, 8, 18, .64);
	box-shadow:
		0 22px 52px rgba(0,0,0,.42),
		inset 0 1px 0 rgba(255,255,255,.1),
		0 0 34px rgba(89, 150, 255, .1);
	backdrop-filter: blur(8px) saturate(118%);
	-webkit-backdrop-filter: blur(8px) saturate(118%);
}

.tj-soon-card::before{
	content: "";
	position: absolute;
	inset: -40%;
	background: radial-gradient(circle at 50% 0%, rgba(155,204,255,.16), transparent 42%);
	opacity: .72;
	pointer-events: none;
}

.tj-soon-lock{
	position: relative;
	display: grid;
	width: 38px;
	aspect-ratio: 1 / 1;
	place-items: center;
	color: rgba(237,246,255,.9);
	filter: drop-shadow(0 0 18px rgba(117,184,255,.32));
}

.tj-soon-lock svg{
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tj-soon-label{
	position: relative;
	color: rgba(238,246,255,.92);
	font-size: clamp(13px, 1vw, 16px);
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}

@media (max-width: 1024px){
	.entry-content > .tj-vinyl-hero,
	.tj-vinyl-hero{
		--tj-vinyl-cover-size: min(40vw, 370px);
		--tj-vinyl-disc-size: clamp(104px, 17vw, 160px);
		padding-top: clamp(12px, 2.4vw, 22px) !important;
	}

	.tj-vinyl-title{
		font-size: clamp(22px, 5.2vw, 40px) !important;
		line-height: 1;
		margin-top: clamp(18px, 4vw, 28px) !important;
	}

	.tj-soon-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px){
	.entry-content > .tj-vinyl-hero,
	.tj-vinyl-hero{
		--tj-vinyl-cover-size: min(86vw, 430px);
		--tj-vinyl-disc-size: clamp(132px, 42vw, 210px);
		padding-bottom: 38px !important;
	}

	.tj-vinyl-gallery{
		grid-template-columns: 1fr;
		gap: 18px !important;
	}

	.tj-vinyl-gallery > .wp-block-image:first-of-type{
		order: 1;
		justify-self: center;
		width: var(--tj-vinyl-cover-size) !important;
	}

	.tj-vinyl-record-wrap{
		display: none !important;
	}

	.tj-vinyl-gallery > .wp-block-image:last-of-type{
		order: 3;
		justify-self: center;
		width: min(70vw, 320px) !important;
	}

	.tj-soon-grid{
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce){
	.tj-vinyl-record{
		animation: none;
	}
}
