/* Shared interaction layer. Load AFTER page styles on all six pages.
   Keep dimensions and layout stable; animate only paint and existing icons. */
:root {
	--interaction-duration: 280ms;
	--interaction-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--interaction-transition:
		background-color var(--interaction-duration) var(--interaction-ease),
		border-color var(--interaction-duration) var(--interaction-ease),
		color var(--interaction-duration) var(--interaction-ease),
		box-shadow var(--interaction-duration) var(--interaction-ease),
		opacity var(--interaction-duration) var(--interaction-ease);
}

/* Defined on the resting state so both entry AND exit are smooth.
   Specificity matches the legacy important rules in buttons.css. */
.apex-button.apex-button,
body :is(button, .button, .person, .hero__nav-link, .section-nav a, summary),
body .apex-choice__copy a {
	transition: var(--interaction-transition) !important;
}

/* Text links and icon links retain their existing layout and motion. */
body
	:is(.textlink, .email, .area > a, .breadcrumbs a, .rental-faq a, footer a) {
	transition:
		var(--interaction-transition),
		transform var(--interaction-duration) var(--interaction-ease);
}

/* Ordinary CTA variants. Filled and dark buttons keep their own palette. */
body .button:not(.apex-button):is(:hover, :focus-visible) {
	background-color: #baccd0;
	border-color: #8da8af;
	color: #111;
}
body .button:is(.filled, .primary):is(:hover, :focus-visible) {
	background-color: #a5bec4;
	border-color: #8da8af;
}
body .button.dark:is(:hover, :focus-visible) {
	background-color: #303536;
	border-color: #303536;
	color: #fff;
}
body
	:is(.studio-copy, .contact-panel, .rental-guided)
	.button:is(:hover, :focus-visible),
body .service-page .package:nth-child(2) .button:is(:hover, :focus-visible) {
	background-color: #fff;
	border-color: #fff;
	color: #111;
}

/* The selected portfolio tab must stay visibly selected on hover. */
body .selected-work--canva .selected-work__filter.apex-button {
	color: #111 !important;
}
body
	.selected-work--canva
	.selected-work__filter.apex-button:not([aria-pressed="true"]):is(
		:hover,
		:focus-visible
	) {
	background-color: #e9efef !important;
	border-color: #9aafb4 !important;
}
body
	.selected-work--canva
	.selected-work__filter.apex-button[aria-pressed="true"]:is(
		:hover,
		:focus-visible
	) {
	background-color: #a5bec4 !important;
	border-color: #8da8af !important;
}

/* Contact selectors: never put white selected text on a pale hover fill. */
body .people .person[aria-pressed="true"] {
	background-color: #111 !important;
	border-color: #111 !important;
	color: #fff !important;
}
body .people .person[aria-pressed="true"]:is(:hover, :focus-visible) {
	background-color: #303536 !important;
	border-color: #303536 !important;
	color: #fff !important;
}
body .people .person:not([aria-pressed="true"]):is(:hover, :focus-visible) {
	background-color: #fff !important;
	border-color: #fff !important;
	color: #111 !important;
}
body .contact-form .button:is(:hover, :focus-visible),
body .apex-contact .contact-form .apex-button:is(:hover, :focus-visible) {
	background-color: #303536 !important;
	border-color: #303536 !important;
	color: #fff !important;
}
body .contact-submit.apex-button:is(:hover, :focus-visible) {
	background-color: #a5bec4 !important;
	border-color: #8da8af !important;
	color: #111 !important;
}

/* Navigation underline exists on every page, not just the homepage. */
body .hero__nav :is(.hero__nav-link:not(.hero__contact), .hero__menu-toggle) {
	position: relative;
	text-decoration: none;
}
body
	.hero__nav
	:is(.hero__nav-link:not(.hero__contact), .hero__menu-toggle)::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 5px;
	height: 1px;
	background: currentColor;
	opacity: 0;
	transform: scaleX(0.25);
	transform-origin: left;
	transition:
		opacity var(--interaction-duration) var(--interaction-ease),
		transform var(--interaction-duration) var(--interaction-ease);
	pointer-events: none;
}
body
	.hero__nav
	:is(.hero__nav-link:not(.hero__contact), .hero__menu-toggle):is(
		:hover,
		:focus-visible,
		[aria-current="page"]
	)::after {
	opacity: 0.8;
	transform: scaleX(1);
}
body .hero__nav .hero__contact::after {
	content: none;
}
body .hero__nav .hero__contact:is(:hover, :focus-visible) {
	background-color: #baccd0;
	border-color: #8da8af;
	color: #111;
}
/* Homepage header floats over a film until it docks or receives focus. */
body:has(.hero-stage)
	.hero__nav:not(.is-scrolled):not(.is-menu-open):not(:focus-within)
	.hero__contact:hover {
	background-color: #ffffff26;
	border-color: #fff;
	color: #fff;
}
body .section-nav a:is(:hover, :focus-visible) {
	background-color: #fff;
	border-color: #8da8af;
}

/* Carousel arrows: paint changes smoothly without moving the hit target. */
body .team-carousel-controls button:not(:disabled):is(:hover, :focus-visible) {
	background-color: #baccd0;
	border-color: #8da8af;
	color: #111;
}
body .team-carousel-controls button:disabled {
	background-color: transparent;
	color: #111;
	border-color: #11111160;
}

/* Model filters: animate the underline instead of creating it on selection. */
body .apex-filter-btn::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -19px;
	width: 100%;
	height: 1px;
	background: currentColor;
	opacity: 0;
	transform: scaleX(0.3);
	transform-origin: left;
	transition:
		opacity var(--interaction-duration) var(--interaction-ease),
		transform var(--interaction-duration) var(--interaction-ease);
}
body .apex-filter-btn:is(:hover, :focus-visible, .active)::after {
	opacity: 1;
	transform: scaleX(1);
}
body .apex-filter-btn.active:is(:hover, :focus-visible) {
	color: #46636b !important;
}
body .apex-simple-name {
	transition: color var(--interaction-duration) var(--interaction-ease);
}
body .apex-simple-card a:focus-visible .apex-simple-name {
	color: #111;
}

/* Accordion triggers and service links are controls too. */
body summary:is(:hover, :focus-visible) {
	background-color: #11111108;
}
body
	:is(
		.faq__question,
		.faq__indicator,
		.service-group__title,
		.service-group__toggle
	) {
	transition:
		color var(--interaction-duration) var(--interaction-ease),
		background-color var(--interaction-duration) var(--interaction-ease),
		transform var(--interaction-duration) var(--interaction-ease);
}
body
	.faq__summary:is(:hover, :focus-visible)
	:is(.faq__question, .faq__indicator) {
	color: #46636b;
}
body .service-index__link:is(:hover, :focus-visible) {
	color: #46636b;
}

/* Remove the old 'transition:none!important' effect from the service arrow.
   Do not animate the whole card: its layout/scroll animations remain intact. */
body .service-grid .service-card .service-card__arrow {
	transition:
		var(--interaction-transition),
		transform var(--interaction-duration) var(--interaction-ease) !important;
}
body
	.service-grid
	.service-card:is(:hover, :focus-visible)
	.service-card__arrow {
	background-color: #ffffff70 !important;
	border-color: #11111170;
	transform: translate(2px, -2px) !important;
}
body
	.service-grid
	.service-card:nth-child(4):is(:hover, :focus-visible)
	.service-card__arrow {
	background-color: #ffffff20 !important;
	border-color: #ffffff80;
}
body
	:is(.textlink, .email, .area > a, .breadcrumbs a, .rental-faq a, footer a):is(
		:hover,
		:focus-visible
	) {
	opacity: 0.75;
}

/* Keyboard and touch feedback; no size changes or extra JS listeners. */
body :is(a, button, summary, [role="button"]):focus-visible {
	outline: 2px solid #60858e !important;
	outline-offset: 4px !important;
}
body .apex-button--on-video:focus-visible {
	outline-color: #fff !important;
}
body
	:is(button, .button, .apex-button, .hero__contact, .section-nav a):not(
		:disabled
	):not([aria-disabled="true"]):active {
	opacity: 0.72;
}
body :is(button:disabled, [aria-disabled="true"]) {
	cursor: default;
}

/* Keep the user's reduced-motion preference, including pseudo-elements. */
@media (prefers-reduced-motion: reduce) {
	html
		body
		:is(
			a,
			button,
			summary,
			[role="button"],
			.apex-button.apex-button,
			.faq__question,
			.faq__indicator,
			.service-group__title,
			.service-group__toggle,
			.apex-simple-name,
			.service-grid .service-card .service-card__arrow
		),
	html body :is(a, button, summary)::before,
	html body :is(a, button, summary)::after {
		transition: none !important;
	}
	html
		body
		.service-grid
		.service-card:is(:hover, :focus-visible)
		.service-card__arrow {
		transform: none !important;
	}
}