/* Core MEC: animation layer (loaded after main.css). Pairs with assets/js/core-animations.js.
 *
 * Reusable attributes (also work on inner pages):
 *   data-anim="fade-up"   fade up 35px, once, when 85% into the viewport (same as the legacy .reveal class)
 *   data-anim="fade-in"   plain fade
 *   data-anim="lines"     headline reveals line by line inside a mask
 *   data-anim="image"     rounded image frame: soft 1.18 > 1.1 zoom + fade, light parallax on desktop
 *   data-anim="stagger"   children of this element fade up one after another
 *
 * Safety: nothing stays hidden if scripts fail. Hidden states only apply under html.js and
 * are released by a 4s CSS fallback unless the script has started (html.anim-ready).
 */

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Hidden start states + fallbacks (motion allowed only) ---------- */
@keyframes caFailsafe { to { opacity: 1; visibility: visible; transform: none; } }
@keyframes caFailsafeFade { to { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
	html.js :is(
		.hero__inner .eyebrow, .hero__title, .hero__text, .hero .btnrow .btn, .hero__cards .kcard, .hero .vid-toggle,
		.phero__inner > *,
		[data-anim]:not([data-anim="lines"]):not([data-anim="stagger"]):not(.anim-done)
	) { opacity: 0; }
	html.js:not(.anim-ready) :is(
		.hero__inner .eyebrow, .hero__title, .hero__text, .hero .btnrow .btn, .hero__cards .kcard, .hero .vid-toggle,
		.phero__inner > *, [data-anim], .reveal
	) { animation: caFailsafe .01s linear 4s forwards; }
	html.anim-off :is(
		.hero__inner .eyebrow, .hero__title, .hero__text, .hero .btnrow .btn, .hero__cards .kcard, .hero .vid-toggle,
		.phero__inner > *, [data-anim]
	) { opacity: 1; animation: none; }

	/* Hero frame fades in: a page-coloured veil on top of the (already painting) hero */
	html.js .hero::after {
		content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; background: var(--paper);
		pointer-events: none; opacity: 1; transition: opacity 1.1s var(--ease);
		animation: caFailsafeFade .01s linear 4s forwards;
	}
	html.anim-ready .hero::after { animation: none; }
	html.hero-in .hero::after, html.anim-off .hero::after, html.anim-fail .hero::after { opacity: 0; animation: none; }
}

/* If a section errors out, show everything in its final state */
html.anim-fail :is(.reveal, [data-anim], .hero__inner .eyebrow, .hero__title, .hero__text, .hero .btnrow .btn,
	.hero__cards .kcard, .hero .vid-toggle, .phero__inner > *) { opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; }

/* ---------- While the script drives motion, retire the older CSS transitions ---------- */
html.anim-ready .reveal { transition: none; }
html.anim-ready .kcard { animation: none; }
html.anim-ready .hse__slide, html.anim-ready .hse__cap { transition: none; }
html.anim-ready .hse__slide { transform: none; }
html.anim-ready .mp__t, html.anim-ready .mp__i { transition: none; transform: none; }

/* ---------- Line reveal masks (SplitText) ---------- */
.ca-line-mask { overflow-clip-margin: .16em; }

/* ---------- Curtains (mask reveals built from transform only) ---------- */
.ca-host { position: relative; }
.ca-curtain { position: absolute; inset: 0; z-index: 3; background: var(--paper); pointer-events: none; will-change: transform; }
.ca-curtain--dark { background: var(--dark); }
.ca-dim { position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: var(--dark); opacity: 0; pointer-events: none; }

/* ---------- Image frames ---------- */
.split__img, [data-anim="image"] { overflow: hidden; border-radius: var(--r-lg); }
.split__img img { border-radius: 0; }

/* ---------- Hover states ---------- */
.btn { transition: transform .3s var(--ease), background-color .3s, color .3s, border-color .3s; }
.ca-arrow { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .ca-arrow, .btn:focus-visible .ca-arrow { transform: translateX(4px); }

.card { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: 0 28px 46px -30px rgba(13, 23, 27, .45); }
.stat { transition: transform .4s var(--ease), border-color .3s; }
.stat:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .22); }
.tile { transition: border-color .3s, box-shadow .4s var(--ease), transform .45s var(--ease); }
.tile:hover { transform: translateY(-5px); }

.arrow { position: relative; overflow: hidden; isolation: isolate; transition: color .3s, transform .3s var(--ease), border-color .25s; }
.arrow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .5s var(--ease); }
.arrow:hover, .arrow:focus-visible { color: var(--teal); border-color: #fff; }
.arrow:hover::before, .arrow:focus-visible::before { transform: scale(1); }

.pcard:hover img { transform: scale(1.05); }
.pcard:hover .pcard__label { transform: translateY(calc(-50% - 4px)); }
.pcard.is-open .pcard__label { transform: none; }
.pcard.is-open:hover .pcard__label { transform: translateY(-4px); }

.footer__col a, .footer__bar a {
	background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1px no-repeat;
	transition: color .2s, background-size .4s var(--ease);
}
.footer__col a:hover, .footer__bar a:hover { background-size: 100% 1px; text-decoration: none; }

/* ---------- Header: hides on scroll down, returns on scroll up ---------- */
.site-header { transition: transform .55s var(--ease); }
.site-header.is-hidden { transform: translateY(calc(-100% - 24px)); }
.nav-open .site-header { transform: none; }

/* ---------- Service stack ---------- */
.svc__card { position: relative; transform-origin: 50% 0; }
.svc__img { position: relative; }
@media (max-width: 760px) {
	/* phones: simple cards that fade up, no sticky stacking */
	.svc { position: relative; top: auto; }
}

/* ---------- Sliders ---------- */
.hse__stage, .mp__body { touch-action: pan-y; }
.mp__strip { position: relative; }
.ca-ind { position: absolute; left: 0; top: 0; width: 1px; height: 2px; background: #fff; transform-origin: 0 0; pointer-events: none; }

/* ---------- Reduced motion: final state, no stacking ---------- */
@media (prefers-reduced-motion: reduce) {
	.svc { position: relative; top: auto; }
	.ca-curtain, .ca-dim, .ca-ind { display: none; }
	.hse__slide, .hse__cap, .mp__t, .mp__i { transition: none; }
}