/* ==========================================================================
   CLIVELOCHNER.COM — custom styling
   Recreates the motion and atmosphere documented in the Wix rebuild spec.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Vinyl hero — full-bleed background video
   -------------------------------------------------------------------------- */

.clc-hero {
	position: relative;
	min-height: 82vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-align: center;
}

.clc-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Keeps display type legible over moving footage. */
.clc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.8) 100%);
	z-index: 1;
}

.clc-hero > .wp-block-group__inner-container,
.clc-hero__inner {
	position: relative;
	z-index: 2;
}

.clc-hero__eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.4em;
}

.clc-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 0.92;
	text-transform: uppercase;
	margin: 0.35em 0 0.25em;
}

.clc-hero__roles {
	font-family: var(--wp--preset--font-family--utility);
	letter-spacing: 0.42em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.clc-hero__roles span + span::before {
	content: "·";
	margin: 0 0.9em;
	color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   2. Entrance motion — ports of the Wix curveIn / spinIn keyframes
   -------------------------------------------------------------------------- */

@keyframes clcCurveIn {
	0% {
		opacity: 0;
		animation-timing-function: step-end;
	}
	0.0001% {
		opacity: 0;
		transform: perspective(200px) translateZ(-900px) rotateY(-15deg) translateZ(900px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes clcSpinIn {
	0.0001% {
		scale: 0.3;
		rotate: -360deg;
		opacity: 0;
	}
	100% {
		scale: 1;
		rotate: 0deg;
		opacity: 1;
	}
}

@keyframes clcSpin {
	to {
		rotate: 360deg;
	}
}

.clc-curve-in {
	animation: clcCurveIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Staggered exactly as the original: title 1.5s, roles 2s. */
.clc-hero__eyebrow.clc-curve-in {
	animation-duration: 1.2s;
}

.clc-hero__title.clc-curve-in {
	animation-duration: 1.5s;
	animation-delay: 0.15s;
}

.clc-hero__roles.clc-curve-in {
	animation-duration: 2s;
	animation-delay: 0.3s;
}

.clc-spin-in {
	animation: clcSpinIn 1.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}

/* Continuous rotation for the record mark — the upgrade on the Wix original. */
.clc-vinyl {
	animation: clcSpin 1.8s linear infinite;
	transform-origin: 50% 50%;
}

/* --------------------------------------------------------------------------
   3. Scroll reveal — replaces Wix's viewport-entry animations
   -------------------------------------------------------------------------- */

.clc-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.clc-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   4. Block styles
   -------------------------------------------------------------------------- */

.is-style-clc-neon {
	font-family: var(--wp--preset--font-family--neon) !important;
	text-transform: none !important;
	letter-spacing: 0.02em !important;
	color: var(--wp--preset--color--accent);
	line-height: 1.3 !important;
}

.is-style-clc-eyebrow {
	font-family: var(--wp--preset--font-family--utility) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 400 !important;
	letter-spacing: 0.34em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--accent-3);
	margin-bottom: 1.5rem;
}

/* Three-column musician roster — ~100 names on The Melting Pot page. */
.is-style-clc-roster {
	font-family: var(--wp--preset--font-family--utility);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	line-height: 2.1;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.is-style-clc-roster p {
	margin: 0;
}

.is-style-clc-duotone-frame img {
	filter: grayscale(1) contrast(1.08);
	transition: filter 0.5s ease;
}

.is-style-clc-duotone-frame:hover img {
	filter: grayscale(0) contrast(1);
}

/* --------------------------------------------------------------------------
   5. Bookings block (shortcode output)
   -------------------------------------------------------------------------- */

.clc-bookings {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	padding: var(--wp--preset--spacing--40) 0;
	margin: var(--wp--preset--spacing--50) 0;
	text-align: center;
}

.clc-bookings__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
	margin: 0 0 1rem;
}

.clc-bookings__line {
	margin: 0.25rem 0;
	font-size: var(--wp--preset--font-size--large);
}

.clc-bookings__post {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.08em;
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   6. Navigation — brush-stroke bar echo from the Wix design
   -------------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-2);
}

/* --------------------------------------------------------------------------
   7. Galleries
   -------------------------------------------------------------------------- */

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   8. Accessibility floor
   -------------------------------------------------------------------------- */

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.clc-curve-in,
	.clc-spin-in,
	.clc-vinyl,
	.clc-reveal {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.clc-hero__video {
		display: none;
	}
}

@media (max-width: 781px) {
	.clc-hero {
		min-height: 68vh;
	}

	.clc-hero__roles {
		letter-spacing: 0.28em;
	}
}


/* --------------------------------------------------------------------------
   9. Front page: suppress the redundant "Home" title above the hero
   -------------------------------------------------------------------------- */

.home .wp-block-post-title,
.home .wp-block-template-part + .wp-block-post-title {
	display: none;
}

/* Give the hero the full stage on the front page */
.home .clc-hero {
	margin-top: 0;
}


/* --------------------------------------------------------------------------
   10. Hero breaks out of the constrained content column
   -------------------------------------------------------------------------- */

.clc-hero {
	width: 100vw;
	max-width: 100%;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 1.5rem;
	box-sizing: border-box;
}

.clc-hero__inner {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

/* Title sized to fit the viewport rather than the text column */
.clc-hero__title {
	font-size: clamp(2.5rem, 7.5vw, 8rem);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.clc-hero__title {
		white-space: normal;
		font-size: clamp(2.2rem, 11vw, 4rem);
	}
}

/* Full-bleed image band lower down the page */
.home .wp-block-image.alignfull img {
	width: 100%;
	height: auto;
	display: block;
}


/* --------------------------------------------------------------------------
   11. Inner page titles — large but not hero-scale
   -------------------------------------------------------------------------- */

.wp-block-post-title {
	font-size: clamp(2rem, 5vw, 4rem) !important;
	line-height: 0.98;
	text-align: center;
	margin-bottom: 0.6em;
	max-width: 22ch;
	margin-left: auto;
	margin-right: auto;
}

/* Roster columns breathe a little wider than the text column */
.is-style-clc-roster.wp-block-columns {
	gap: 2.5rem;
}


/* --------------------------------------------------------------------------
   12. Hero holds its shape whether or not the video has loaded
   -------------------------------------------------------------------------- */

.clc-hero {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* subtle stage glow so an unloaded hero still reads as designed */
	background:
		radial-gradient(ellipse at 50% 40%, rgba(255,255,102,0.07) 0%, rgba(0,0,0,0) 60%),
		#000000;
}

.clc-hero__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 3rem 0;
}

/* Hide a video element that failed to load rather than leaving a grey box */
.clc-hero__video:not([src]):not(:has(source[src])) {
	display: none;
}


/* --------------------------------------------------------------------------
   13. Header — keep the nav on one line, give the site title room
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.wp-block-navigation {
		font-size: 0.8125rem !important;
		letter-spacing: 0.1em !important;
		column-gap: 1.4rem;
	}

	.wp-block-navigation .wp-block-navigation__container {
		flex-wrap: nowrap;
	}
}

.wp-block-site-title {
	white-space: nowrap;
}

/* External Buy Tunes link picks up the marquee yellow */
.wp-block-navigation a[href*="buytunes.online"] {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 1200px) {
	.wp-block-navigation {
		font-size: 0.75rem !important;
		letter-spacing: 0.06em !important;
		column-gap: 1rem;
	}
}


/* --------------------------------------------------------------------------
   14. Mobile refinements (nav left to the parent theme)
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
	html, body { overflow-x: hidden; }

	.clc-hero {
		min-height: 60vh;
		padding: 0 1rem;
	}

	.is-style-clc-roster.wp-block-columns {
		gap: 0;
	}

	.clc-bookings__line {
		font-size: var(--wp--preset--font-size--medium);
	}
}


/* --------------------------------------------------------------------------
   15. No sideways scroll at any width
   -------------------------------------------------------------------------- */

html {
	overflow-x: hidden;
}

body {
	overflow-x: clip;
	max-width: 100%;
}


/* --------------------------------------------------------------------------
   16. Hero video truly fills the section
   -------------------------------------------------------------------------- */

.clc-hero {
	position: relative;
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
}

.clc-hero__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

/* Scrim keeps the display type readable over moving footage */
.clc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 45%, rgba(0,0,0,0.75) 100%);
}

.clc-hero__inner {
	position: relative;
	z-index: 2;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}


/* --------------------------------------------------------------------------
   17. Full-bleed hero — final, overrides the earlier partial rules
   -------------------------------------------------------------------------- */

.clc-hero {
	width: auto !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: 0 !important;
	min-height: 82vh;
}

/* The custom HTML block wrapper must not re-constrain it */
.wp-block-post-content > .clc-hero {
	position: relative;
}