/* ==========================================================================
   ART CENTRRAL — motion
   ==========================================================================
   The same restraint as the Studio Light prototype: one reveal curve, one
   distance, staggered by position. Nothing bounces, nothing spins. Motion is
   used to lead the eye down the page, not to decorate it.

   Curve and distance are identical to the approved prototype:
     transform: translateY(18px) → none
     opacity:   0 → 1
     .7s cubic-bezier(.22, .61, .36, 1)
   ========================================================================== */

/* ==========================================================================
   SCROLL REVEAL
   ac-motion.js adds .ac-reveal to elements and .is-in once they enter view.
   The class is only added by script, so with JS off nothing is ever hidden.
   ========================================================================== */

/* Elementor's stylesheet loads after the theme's and sets opacity on
   .elementor-element at the same specificity, so these carry the element class
   too in order to win the tie. */
.ac-reveal,
.elementor-element.ac-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity .7s cubic-bezier(.22, .61, .36, 1),
		transform .7s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
.ac-reveal.is-in,
.elementor-element.ac-reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Media reveals travel a little further and settle back from a hair over. */
.ac-reveal-media,
.elementor-element.ac-reveal-media {
	opacity: 0;
	transform: translateY(26px) scale(1.02);
	transition:
		opacity .9s cubic-bezier(.22, .61, .36, 1),
		transform .9s cubic-bezier(.22, .61, .36, 1);
}
.ac-reveal-media.is-in,
.elementor-element.ac-reveal-media.is-in {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   HERO — a short opening sequence on load rather than on scroll
   ========================================================================== */

.ac-hero .ac-reveal { transition-delay: 0ms; }

@keyframes ac-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   HEADER — condenses once the page moves
   ========================================================================== */

.e-con.ac-header-bar {
	transition: min-height .3s cubic-bezier(.22, .61, .36, 1);
}
.ac-header.ac-stuck .ac-header-bar { min-height: 66px; }

.ac-header .ac-logo img {
	transition: max-height .3s cubic-bezier(.22, .61, .36, 1);
}
/* 46, not 38. The lockup sets a two-line wordmark beside the mark, and at 38px
   "CENTRRAL" stopped being readable — the header was condensing past the point
   where the logo still did its job. */
.ac-header.ac-stuck .ac-logo img { max-height: 46px; }

/* A hairline that draws itself across the header as you scroll. */
.ac-header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 0;
	background: var(--ac-border);
	transition: width .5s cubic-bezier(.22, .61, .36, 1);
}
.ac-header.ac-stuck::after { width: 100%; }

/* ==========================================================================
   CARDS — lift, and let the photograph breathe
   ========================================================================== */

.ac-card { will-change: transform; }

/* Portfolio caption plate.
   The caption stays readable at rest; what moves on hover is the depth of the
   scrim behind it. This is how the approved design behaves at desktop sizes,
   and it is the right behaviour on touch, where there is no hover to reveal
   a caption that starts hidden. */
.e-con.ac-work-meta {
	transition: background .45s cubic-bezier(.22, .61, .36, 1);
}
.ac-work-item:hover .ac-work-meta,
.ac-work-item:focus-within .ac-work-meta {
	background: linear-gradient(transparent, rgba(10, 10, 12, .94));
}

/* The eyebrow rule draws in with its section. */
.ac-eyebrow .elementor-heading-title::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .8s cubic-bezier(.22, .61, .36, 1) .1s;
}
.ac-reveal.is-in .ac-eyebrow .elementor-heading-title::before,
.ac-eyebrow.ac-reveal.is-in .elementor-heading-title::before,
.is-in .ac-eyebrow .elementor-heading-title::before {
	transform: scaleX(1);
}

/* The accent underline under the hero's emphasised word. */
.ac-display em::after {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1s cubic-bezier(.22, .61, .36, 1) .35s;
}
.is-in .ac-display em::after,
.ac-display.is-in em::after,
.ac-hero .ac-display em::after { transform: scaleX(1); }

/* ==========================================================================
   BUTTONS AND LINKS
   ========================================================================== */

/* Primary buttons get a soft sheen that sweeps once on hover. */
.ac-btn-primary .elementor-button,
.ac-btn-wa .elementor-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.ac-btn-primary .elementor-button::after,
.ac-btn-wa .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.ac-btn-primary .elementor-button:hover::after,
.ac-btn-wa .elementor-button:hover::after {
	transform: translateX(120%);
}

/* ==========================================================================
   FLOATING WHATSAPP — one attention pulse, then still
   ========================================================================== */

@keyframes ac-wa-pulse {
	0%   { box-shadow: 0 10px 30px rgba(31, 168, 85, .4), 0 0 0 0 rgba(31, 168, 85, .45); }
	70%  { box-shadow: 0 10px 30px rgba(31, 168, 85, .4), 0 0 0 16px rgba(31, 168, 85, 0); }
	100% { box-shadow: 0 10px 30px rgba(31, 168, 85, .4), 0 0 0 0 rgba(31, 168, 85, 0); }
}
/* Only WhatsApp pulses. Two buttons both asking for attention at once is a
   pair of buttons arguing, and the green one is the softer ask of the two. */
.ac-fab--wa { animation: ac-wa-pulse 2.6s cubic-bezier(.22, .61, .36, 1) 1.6s 3; }

/* ==========================================================================
   RESPECT THE SETTING
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ac-reveal,
	.ac-reveal-media {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.ac-eyebrow .elementor-heading-title::before,
	.ac-display em::after { transform: scaleX(1) !important; transition: none !important; }
	.ac-fab--wa { animation: none; }
	.ac-ticker__row { animation: none; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}