/* ==========================================================================
   Case study page transition
   ========================================================================== */

.case-transition-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	pointer-events: none;
	overflow: hidden;
	background: #000000;
}

.case-transition-media-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.case-transition-media {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	will-change: top, left, width, height, opacity;
}

.case-transition-overlay__dim {
	position: absolute;
	inset: 0;
	background: #000000;
	opacity: 0;
	transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.case-transition-overlay__dim.is-visible {
	opacity: 0.35;
}

.case-transition-hero-meta,
.case-transition-title-wrap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 50px;
	max-width: 1100px;
	pointer-events: none;
}

.case-transition-tag {
	display: inline-flex;
	align-items: center;
	margin: 0 0 20px;
	padding: 8px 16px;
	font-family: 'Inter Tight', sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-transition-tag.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.case-transition-title {
	margin: 0;
	font-family: 'Inter Tight', sans-serif;
	font-size: clamp(48px, 8vw, 112px) !important;
	font-weight: var(--h1-font-weight, 600) !important;
	line-height: 0.98 !important;
	letter-spacing: -0.04em !important;
	color: #ffffff;
	max-width: 1100px;
	text-wrap: balance;
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-transition-title.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.case-transition-overlay.is-exiting {
	opacity: 0;
	transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-transitioning {
	overscroll-behavior: none;
}

body.case-transition-incoming {
	background: #000000 !important;
}

/*
 * Keep dark header chrome while destination case study is under the overlay,
 * even after scroll unlock removes is-transitioning.
 */
body.case-transition-incoming.is-single-rad .wm-header,
body.case-transition-incoming.is-single-rad .wm-header.is-case-transition-header {
	z-index: 1000001 !important;
	background: transparent !important;
	border-bottom: none !important;
	transition: none !important;
}

body.case-transition-incoming.is-single-rad .wm-header .wm-header__logo-img,
body.case-transition-incoming.is-single-rad .wm-header .custom-logo-link img {
	filter: brightness(0) invert(1);
}

body.case-transition-incoming.is-single-rad .wm-header .wm-header__logo-text,
body.case-transition-incoming.is-single-rad .wm-header .wm-header__burger,
body.case-transition-incoming.is-single-rad .wm-header .wm-header__nav a,
body.case-transition-incoming.is-single-rad .wm-header .wm-nav-menu a {
	color: #ffffff !important;
	transition: none !important;
}

body.case-transition-incoming.is-single-rad .wm-header .wm-header__nav-shell {
	background: rgba(0, 0, 0, 0.18) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	transition: none !important;
}

body.case-transition-incoming.is-single-rad .wm-header .wm-nav-indicator {
	background: #ffffff;
	transition: none !important;
}

body.case-transition-incoming.is-single-rad .wm-header .wm-header__nav-shell .wm-nav-menu a.is-nav-pill-active {
	color: #000000 !important;
}

/* Header stays above overlay — keep sticky layout (no position:fixed jump) */
body.is-transitioning .wm-header,
body.case-transition-incoming .wm-header,
body.is-transitioning .wm-header.is-case-transition-header,
body.case-transition-incoming .wm-header.is-case-transition-header {
	z-index: 1000001 !important;
	background: transparent !important;
	border-bottom: none !important;
}

body.is-transitioning .wm-header .wm-header__inner,
body.case-transition-incoming .wm-header .wm-header__inner {
	background: transparent !important;
	border-bottom: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

body.is-transitioning .wm-header .wm-header__logo-img,
body.case-transition-incoming .wm-header .wm-header__logo-img,
body.is-transitioning .wm-header .custom-logo-link img,
body.case-transition-incoming .wm-header .custom-logo-link img {
	filter: brightness(0) invert(1);
}

body.is-transitioning .wm-header .wm-header__logo-text,
body.case-transition-incoming .wm-header .wm-header__logo-text,
body.is-transitioning .wm-header .wm-header__burger,
body.case-transition-incoming .wm-header .wm-header__burger {
	color: #ffffff !important;
}

body.is-transitioning .wm-header .wm-header__nav a,
body.case-transition-incoming .wm-header .wm-header__nav a,
body.is-transitioning .wm-header .wm-nav-menu a,
body.case-transition-incoming .wm-header .wm-nav-menu a {
	color: #ffffff !important;
	opacity: 1;
}

body.is-transitioning .wm-header .wm-header__nav-shell,
body.case-transition-incoming .wm-header .wm-header__nav-shell {
	background: rgba(0, 0, 0, 0.18) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 999px !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	box-shadow: none !important;
}

body.is-transitioning .wm-header .wm-nav-indicator,
body.case-transition-incoming .wm-header .wm-nav-indicator {
	background: #ffffff;
	transition:
		left 420ms cubic-bezier(0.22, 1, 0.36, 1),
		width 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.25s ease;
}

body.is-transitioning .wm-header .wm-nav-menu a,
body.case-transition-incoming .wm-header .wm-nav-menu a {
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		opacity 0.25s ease;
}

body.is-transitioning .wm-header .wm-header__nav-shell .wm-nav-menu a.is-nav-pill-active,
body.case-transition-incoming .wm-header .wm-header__nav-shell .wm-nav-menu a.is-nav-pill-active {
	color: #000000 !important;
	background: transparent !important;
	opacity: 1;
}

/* Hero stays in layout with black fill; only media/content hidden until handoff */
.wm-rad-hero.is-hero-pending {
	opacity: 1;
	visibility: visible;
}

.wm-rad-hero.is-hero-pending .wm-rad-hero__media,
.wm-rad-hero.is-hero-pending .wm-rad-hero__content {
	opacity: 0 !important;
}

.wm-rad-hero.is-hero-revealed .wm-rad-hero__media,
.wm-rad-hero.is-hero-revealed .wm-rad-hero__content {
	opacity: 1;
	transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.wm-rad-hero.is-hero-revealed:not(.is-hero-fade-in):not(.is-pjax-handoff):not(.is-hero-pending) .wm-rad-hero__media,
.wm-rad-hero.is-hero-revealed:not(.is-hero-fade-in):not(.is-pjax-handoff):not(.is-hero-pending) .wm-rad-hero__content {
	opacity: 1;
	transform: none;
	transition: none;
	animation: none;
}

/* PJAX handoff — hero already visible under overlay, no second text animation */
.wm-rad-hero.is-pjax-handoff .wm-rad-hero__media,
.wm-rad-hero.is-pjax-handoff .wm-rad-hero__content {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}

.wm-rad-hero.is-hero-fade-in .wm-rad-hero__content {
	animation: wm-rad-hero-content-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes wm-rad-hero-content-in {
	from {
		opacity: 0;
		transform: translateY(32px);
	}

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

@media (max-width: 768px) {
	.case-transition-hero-meta,
	.case-transition-title-wrap {
		padding: 24px;
	}

	.case-transition-title {
		font-size: clamp(48px, 12vw, 64px) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.case-transition-overlay,
	.case-transition-media,
	.case-transition-overlay__dim,
	.case-transition-tag,
	.case-transition-title,
	.wm-rad-hero.is-hero-revealed .wm-rad-hero__media,
	.wm-rad-hero.is-hero-revealed .wm-rad-hero__content {
		transition: none !important;
		animation: none !important;
	}
}