/* -----------------------------------------------------------------------
   Contact page (page-contact.php) — full-bleed, no sidebar.
   RTL-first, logical properties only.

   A lit hero stating what the page is for, a row of reason cards that name
   the kinds of pitch the form takes, then the shared form engine's markup
   (styled by forms.css) sitting wide and alone.
   ----------------------------------------------------------------------- */

.contact-page {
	--ct-ink: #0e1120;
	--ct-ink-deep: #070a16;
	--ct-tint: #6ebbe9;
	--ct-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ct-dur: 0.32s;
	--ct-gap: clamp(2.5rem, 5vw, 4rem);

	display: grid;
	gap: var(--ct-gap);
	/* Swallow .site-content's padding so the hero runs edge-to-edge from the
	   header down. */
	margin-block-start: calc(-1 * var(--shivuk-space));
	padding-block-end: var(--ct-gap);
}

.contact-page .container {
	inline-size: 100%;
	max-inline-size: min(1180px, calc(100% - 2 * var(--shivuk-space)));
}

/* -----------------------------------------------------------------------
   Reveal-on-scroll (shared reveal.js). Hidden start state only when motion
   is allowed.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.contact-page .js-reveal {
		opacity: 0;
	}

	.contact-page .js-reveal.is-visible {
		animation: ct-rise 0.6s var(--ct-ease) both;
	}
}

@keyframes ct-rise {
	from {
		opacity: 0;
		transform: translateY(22px);
	}

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

/* -----------------------------------------------------------------------
   1. Hero — dark, lit from within
   ----------------------------------------------------------------------- */
.contact-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(3rem, 7vw, 5rem);
	background:
		radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1.6px) 0 0 / 20px 20px,
		linear-gradient(168deg, var(--ct-ink-deep), var(--ct-ink) 90%);
	color: #ffffff;
}

/* Thin light seam where the hero meets the header. */
.contact-hero::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

/* Two slow washes of light, on clocks that never share a meeting point. */
.contact-hero__glow {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(85px);
	mix-blend-mode: screen;
	pointer-events: none;
}

.contact-hero__glow--a {
	inset-block-start: -35%;
	inset-inline-end: -6%;
	inline-size: min(48vw, 560px);
	block-size: min(48vw, 560px);
	background: radial-gradient(circle, var(--shivuk-color-accent), transparent 68%);
	opacity: 0.5;
	animation: ct-drift-a 30s ease-in-out infinite alternate;
}

.contact-hero__glow--b {
	inset-block-end: -40%;
	inset-inline-start: -8%;
	inline-size: min(40vw, 480px);
	block-size: min(40vw, 480px);
	background: radial-gradient(circle, #2ea6a0, transparent 68%);
	opacity: 0.26;
	animation: ct-drift-b 41s ease-in-out infinite alternate;
}

@keyframes ct-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-6%, 7%, 0) scale(1.16); }
}

@keyframes ct-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.1); }
	to { transform: translate3d(8%, -6%, 0) scale(0.92); }
}

.contact-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.contact-hero *:focus-visible {
	outline-color: #ffffff;
}

.contact-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.contact-hero__kicker::before {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--ct-tint);
	box-shadow: 0 0 10px var(--ct-tint);
}

.contact-hero__title {
	margin: 1.1rem 0 0;
	max-inline-size: 20ch;
	font-size: clamp(2rem, 5.5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
	text-wrap: balance;
	background: linear-gradient(120deg, #ffffff 34%, var(--ct-tint));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.contact-hero__lead {
	margin: 1.2rem 0 0;
	max-inline-size: 62ch;
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(1rem, 1.6vw, 1.12rem);
	line-height: 1.75;
}

.contact-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: clamp(1.5rem, 3vw, 2rem);
	padding: 0.8rem 1.6rem;
	border-radius: 999px;
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	font-weight: 700;
	font-size: 0.98rem;
	box-shadow: 0 10px 26px color-mix(in srgb, var(--shivuk-color-accent) 40%, transparent);
	transition: transform var(--ct-dur) var(--ct-ease), box-shadow var(--ct-dur) var(--ct-ease);
}

.contact-hero__cta::after {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-inline-start: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	/* Nudges the caret down, hinting the scroll-to-form. */
	margin-block-start: -2px;
}

.contact-hero__cta:hover,
.contact-hero__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px color-mix(in srgb, var(--shivuk-color-accent) 48%, transparent);
	color: var(--shivuk-color-accent-contrast);
}

/* -----------------------------------------------------------------------
   2. Reason cards
   ----------------------------------------------------------------------- */
.contact-reasons__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(0.85rem, 1.8vw, 1.25rem);
}

/* Each card is an in-page anchor to the form; the whole tile is the target. */
.contact-reason {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	gap: 0.95rem;
	padding: clamp(1.2rem, 2.2vw, 1.6rem);
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius-lg);
	background: var(--shivuk-color-bg);
	box-shadow: var(--shivuk-shadow-sm);
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--ct-dur) var(--ct-ease),
		border-color var(--ct-dur) var(--ct-ease),
		box-shadow var(--ct-dur) var(--ct-ease);
}

/* Accent bar along the reading edge, growing on hover. */
.contact-reason::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 3px;
	background: linear-gradient(180deg, var(--shivuk-color-accent), color-mix(in srgb, var(--shivuk-color-accent) 35%, transparent));
	transform: scaleY(0);
	transform-origin: block-start;
	transition: transform var(--ct-dur) var(--ct-ease);
}

.contact-reason:hover,
.contact-reason:focus-visible {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--shivuk-color-accent) 35%, var(--shivuk-color-border));
	box-shadow: var(--shivuk-shadow-md);
}

.contact-reason:hover::before,
.contact-reason:focus-visible::before {
	transform: scaleY(1);
}

.contact-reason__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border-radius: 14px;
	background: var(--shivuk-color-accent-soft);
	color: var(--shivuk-color-accent);
	transition: transform var(--ct-dur) var(--ct-ease);
}

.contact-reason:hover .contact-reason__icon {
	transform: rotate(-5deg) scale(1.06);
}

.contact-reason__icon svg {
	inline-size: 23px;
	block-size: 23px;
}

.contact-reason__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-inline-size: 0;
}

.contact-reason__title {
	font-size: 1.08rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.contact-reason__text {
	color: var(--shivuk-color-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

/* The chevron sits at the card's far edge and slides toward the reading edge
   on hover — RTL, so it travels inline-end→start, i.e. leftward. */
.contact-reason__arrow {
	flex: 0 0 auto;
	align-self: center;
	margin-inline-start: auto;
	color: var(--shivuk-color-muted);
	transition: transform var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease);
}

.contact-reason__arrow svg {
	inline-size: 20px;
	block-size: 20px;
	display: block;
}

.contact-reason:hover .contact-reason__arrow,
.contact-reason:focus-visible .contact-reason__arrow {
	color: var(--shivuk-color-accent);
	transform: translateX(-4px);
}

/* The mailto fallback under the grid. */
.contact-reasons__mail {
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	color: var(--shivuk-color-muted);
	font-size: 0.95rem;
}

.contact-reasons__mail a {
	font-weight: 700;
	color: var(--shivuk-color-accent);
	text-decoration: none;
	border-block-end: 1px solid color-mix(in srgb, var(--shivuk-color-accent) 40%, transparent);
	transition: border-color var(--ct-dur) var(--ct-ease);
}

.contact-reasons__mail a:hover,
.contact-reasons__mail a:focus-visible {
	border-color: var(--shivuk-color-accent);
}

/* -----------------------------------------------------------------------
   3. Form block
   ----------------------------------------------------------------------- */
.contact-form {
	scroll-margin-block-start: 2rem;
}

.contact-form__head {
	margin-block-end: clamp(1.5rem, 3vw, 2rem);
}

.contact-form__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.contact-form__sub {
	margin: 0.6rem 0 0;
	max-inline-size: 60ch;
	color: var(--shivuk-color-muted);
	font-size: 1rem;
	line-height: 1.65;
}

/* -----------------------------------------------------------------------
   4. Editor content appended above the form
   ----------------------------------------------------------------------- */
.contact-extra .entry-content {
	max-inline-size: 760px;
	font-size: 1.02rem;
	line-height: 1.85;
}

/* -----------------------------------------------------------------------
   Motion preferences
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.contact-hero__glow {
		animation: none;
	}

	.contact-reason,
	.contact-reason__icon,
	.contact-reason__arrow,
	.contact-reason::before,
	.contact-hero__cta {
		transition: none;
	}

	.contact-reason:hover,
	.contact-reason:focus-visible,
	.contact-reason:hover .contact-reason__icon,
	.contact-hero__cta:hover,
	.contact-hero__cta:focus-visible {
		transform: none;
	}
}