/* ============================================================
   KAELO GLOBAL — POLISH LAYER
   Custom cursor · magnetic hover · scroll progress · header
   morph · selection · scrollbar · grain · hero mask reveal.
   Loaded last so it can override base components.
   Disabled by media query on touch + reduced-motion devices.
   ============================================================ */

/* --- Custom selection (every text on the page) ---------------- */
::selection {
	background: var(--k-cyan);
	color: var(--k-black);
}
::-moz-selection {
	background: var(--k-cyan);
	color: var(--k-black);
}

/* --- Custom scrollbar (WebKit + Firefox) ---------------------- */
html { scrollbar-color: var(--k-cyan-deep) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: rgba(10, 10, 10, 0.18);
	border-radius: 0;
	transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--k-cyan-deep);
}

/* --- Smooth scroll (overrides default; respects reduced motion) */
@media not (prefers-reduced-motion: reduce) {
	html { scroll-behavior: smooth; }
}

/* --- Subtle film-grain texture overlay (top of everything) ---- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
	background-size: 200px 200px;
	opacity: 0.55;
	mix-blend-mode: overlay;
}
html[data-k-contrast="high"] body::after { display: none; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
	html:not([data-k-motion="reduced"]),
	html:not([data-k-motion="reduced"]) body {
		cursor: none;
	}
	html:not([data-k-motion="reduced"]) a,
	html:not([data-k-motion="reduced"]) button,
	html:not([data-k-motion="reduced"]) [role="button"],
	html:not([data-k-motion="reduced"]) input,
	html:not([data-k-motion="reduced"]) textarea,
	html:not([data-k-motion="reduced"]) select {
		cursor: none;
	}
}

.k-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483646; /* above absolutely everything, incl. fixed header */
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.22s ease;
	/* No mix-blend-mode — it fails across fixed-position stacking
	   contexts (the header, the cookie banner, the a11y panel),
	   leaving the cursor invisible on top of them. Instead the ring
	   and dot use a hairline outer ring of contrasting colour so
	   they remain readable on any background, like macOS does. */
}
.k-cursor.is-on { opacity: 1; }
.k-cursor.is-hidden { opacity: 0; }

.k-cursor__ring,
.k-cursor__dot,
.k-cursor__label {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform, width, height, opacity;
}

.k-cursor__ring {
	width: 32px;
	height: 32px;
	border: 1.5px solid rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	background: transparent;
	/* Outer hairline of contrasting colour so the cursor reads on
	   light backgrounds too. Inner hairline keeps it readable when
	   the page background is mid-tone. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45),
	            inset 0 0 0 1px rgba(0, 0, 0, 0.25);
	transition: width 0.32s cubic-bezier(0.2, 0.7, 0.2, 1),
	            height 0.32s cubic-bezier(0.2, 0.7, 0.2, 1),
	            border-color 0.22s ease,
	            background 0.22s ease,
	            box-shadow 0.22s ease,
	            opacity 0.22s ease;
}
.k-cursor__dot {
	width: 6px;
	height: 6px;
	background: rgba(255, 255, 255, 1);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
	transition: width 0.22s ease, height 0.22s ease, opacity 0.22s ease;
}
.k-cursor__label {
	color: rgba(255, 255, 255, 0.96);
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
	font-family: var(--k-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.22s ease;
}

/* States */
.k-cursor.is-link .k-cursor__ring { width: 44px; height: 44px; }
.k-cursor.is-link .k-cursor__dot  { opacity: 0; }

.k-cursor.is-magnet .k-cursor__ring {
	width: 64px;
	height: 64px;
	background: rgba(4, 240, 255, 0.16);
	border-color: var(--k-cyan);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
	            0 0 20px rgba(4, 240, 255, 0.35);
}
.k-cursor.is-magnet .k-cursor__dot { opacity: 0; }

.k-cursor.is-view .k-cursor__ring {
	width: 88px;
	height: 88px;
	background: rgba(0, 0, 0, 0.45);
	border-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.k-cursor.is-view .k-cursor__dot { opacity: 0; }
.k-cursor.is-view .k-cursor__label { opacity: 1; }

.k-cursor.is-text .k-cursor__ring {
	width: 2px;
	height: 26px;
	border-radius: 1px;
	background: rgba(255, 255, 255, 0.95);
	border: 0;
	box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
}
.k-cursor.is-text .k-cursor__dot { opacity: 0; }

.k-cursor.is-pressed .k-cursor__ring {
	transform: scale(0.86);
	transition-duration: 0.12s;
}

/* Hide on touch + reduced motion */
@media not (hover: hover), (pointer: coarse) {
	.k-cursor { display: none !important; }
	html, body, a, button { cursor: auto !important; }
}
html[data-k-motion="reduced"] .k-cursor { display: none !important; }
html[data-k-motion="reduced"] body { cursor: auto !important; }

/* ============================================================
   MAGNETIC BUTTONS — smooth transform
   ============================================================ */
.k-btn,
.k-h__trigger,
.k-magnet {
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
	            background 0.22s ease,
	            color 0.22s ease,
	            border-color 0.22s ease,
	            box-shadow 0.32s ease;
	will-change: transform;
}

/* ============================================================
   SCROLL PROGRESS BAR (top of viewport)
   ============================================================ */
.k-scrollprogress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--k-cyan);
	transform: scaleX(0);
	transform-origin: left center;
	z-index: 2147483645; /* above header, below cursor */
	pointer-events: none;
	will-change: transform;
	transition: transform 0.05s linear;
}
html[data-k-motion="reduced"] .k-scrollprogress { display: none; }

/* ============================================================
   HEADER MORPH STATES
   ============================================================ */
.k-header {
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
	            background 0.4s ease,
	            backdrop-filter 0.4s ease,
	            border-color 0.4s ease,
	            box-shadow 0.4s ease;
	will-change: transform;
}
.k-header--scrolled {
	background: rgba(10, 13, 16, 0.86);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.k-header.k-header--light.k-header--scrolled {
	background: rgba(246, 245, 241, 0.88);
	border-bottom-color: rgba(10, 10, 10, 0.06);
}
.k-header--hidden { transform: translateY(-100%); }

/* ============================================================
   HERO TEXT MASK REVEAL — luxury opening animation
   ============================================================ */
.k-hero__title.is-masking > span > span {
	display: inline-block;
	transform: translateY(108%);
	opacity: 0;
	transition: transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1),
	            opacity 0.65s ease;
}
.k-hero__title.is-masking.is-revealed > span > span { transform: translateY(0); opacity: 1; }
.k-hero__title.is-masking.is-revealed > span:nth-child(2) > span { transition-delay: 0.14s; }
.k-hero__title.is-masking.is-revealed > span:nth-child(3) > span { transition-delay: 0.28s; }
.k-hero__title.is-masking.is-revealed > span:nth-child(4) > span { transition-delay: 0.42s; }

/* ============================================================
   IMAGE HOVER POLISH — zoom + warmth shift on figure cards
   ============================================================ */
.k-ssinline,
.k-imghover {
	overflow: hidden;
	position: relative;
}
.k-ssinline img,
.k-imghover img {
	transform: scale(1.001);
	transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1),
	            filter 0.6s ease;
	will-change: transform;
}
.k-ssinline.is-hovering img,
.k-imghover.is-hovering img {
	transform: scale(1.05);
	filter: brightness(1.04) saturate(1.08);
}

/* Insights cards — subtle lift on hover */
.k-insights__card {
	transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
	will-change: transform;
}
.k-insights__card.is-hovering { transform: translateY(-4px); }

/* Brand row — already animated; reinforce */
.k-brands__row.is-hovering .k-brands__name { color: var(--k-cyan-deep); }
.k-brands__row.is-hovering .k-brands__idx { opacity: 1; }

/* ============================================================
   LINK UNDERLINE — animated draw on hover for inline editorial
   ============================================================ */
.k-press__body a,
.k-dlead a,
.k-dpillars a,
.k-ssfaq__a a,
.k-ssengage a,
.k-footer__disclosure a,
.k-positioning__cols a {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	transition: background-size 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 0.22s ease;
	text-decoration: none;
}
.k-press__body a:hover,
.k-dlead a:hover,
.k-dpillars a:hover,
.k-ssfaq__a a:hover,
.k-ssengage a:hover,
.k-footer__disclosure a:hover,
.k-positioning__cols a:hover {
	background-size: 0 1px;
}

/* ============================================================
   SECTION-LEVEL POLISH — refined reveal timing
   ============================================================ */
html.k-js [data-k-reveal] {
	transition-duration: 0.85s !important;
	transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
html.k-js [data-k-reveal-group] > * {
	transition-duration: 0.85s !important;
	transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* ============================================================
   OVERLAY PANELS — staggered link reveal + refined easing
   ============================================================ */
.k-overlay {
	transition: opacity 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
	            visibility 0s linear 0.42s,
	            transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.k-overlay.is-open {
	transition: opacity 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
	            visibility 0s linear,
	            transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.k-overlay__item,
.k-overlay__link {
	transform: translateY(14px);
	opacity: 0;
	transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
	            opacity 0.45s ease;
}
.k-overlay.is-open .k-overlay__item,
.k-overlay.is-open .k-overlay__link {
	transform: translateY(0);
	opacity: 1;
}
.k-overlay.is-open .k-overlay__item:nth-child(1),  .k-overlay.is-open .k-overlay__link:nth-child(1)  { transition-delay: 0.10s; }
.k-overlay.is-open .k-overlay__item:nth-child(2),  .k-overlay.is-open .k-overlay__link:nth-child(2)  { transition-delay: 0.16s; }
.k-overlay.is-open .k-overlay__item:nth-child(3),  .k-overlay.is-open .k-overlay__link:nth-child(3)  { transition-delay: 0.22s; }
.k-overlay.is-open .k-overlay__item:nth-child(4),  .k-overlay.is-open .k-overlay__link:nth-child(4)  { transition-delay: 0.28s; }
.k-overlay.is-open .k-overlay__item:nth-child(5),  .k-overlay.is-open .k-overlay__link:nth-child(5)  { transition-delay: 0.34s; }
.k-overlay.is-open .k-overlay__item:nth-child(6),  .k-overlay.is-open .k-overlay__link:nth-child(6)  { transition-delay: 0.40s; }
.k-overlay.is-open .k-overlay__item:nth-child(7),  .k-overlay.is-open .k-overlay__link:nth-child(7)  { transition-delay: 0.46s; }

/* ============================================================
   BUTTON HOVER — micro-shadow + refined arrow nudge
   ============================================================ */
.k-btn--cyan {
	transition: background 0.22s ease, color 0.22s ease,
	            transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 0.32s ease;
}
.k-btn--cyan:hover {
	box-shadow: 0 18px 40px -12px rgba(4, 240, 255, 0.55);
}

.k-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: color 0.22s ease, gap 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.k-link:hover { gap: 0.7rem; }

/* ============================================================
   PRELOADER — luxury hold + refined exit
   ============================================================ */
#k-preloader {
	transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1),
	            visibility 0s linear 0.6s;
}
#k-preloader.is-done {
	opacity: 0;
	visibility: hidden;
}

/* ============================================================
   FOCUS RING — minor refinement (already in components)
   ============================================================ */
:focus-visible {
	transition: outline-offset 0.18s ease;
}

/* ============================================================
   FLOATING UI — fade out when footer is in view to avoid
   visually overlapping copyright + legal links.
   ============================================================ */
.k-a11y-launcher,
.k-a11y-panel,
.k-consent {
	transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear;
}
.k-a11y-launcher.is-floatout {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}
.k-a11y-panel.is-floatout {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}
.k-consent.is-floatout {
	transform: translateY(120%);
	pointer-events: none;
}

/* ============================================================
   FOOTER BOTTOM ROW — guarantee breathing room for floating UI
   ============================================================ */
.k-footer__bottom {
	padding-block: var(--k-space-3) !important;
	padding-left: clamp( 4rem, 1.5rem + 3vw, 6rem );
	padding-right: clamp( 1.25rem, 0.6rem + 1vw, 2rem );
}
@media ( min-width: 880px ) {
	.k-footer__bottom { padding-left: var(--k-bleed); padding-right: var(--k-bleed); }
}

/* ============================================================
   TYPE LOCK — visible enforcement of brand type rules
   Anywhere a stale rule still tries to apply italic / serif, this
   overrides it. Helvetica Neue / Apple system everywhere except
   Reem Kufi headings.
   ============================================================ */
em, i, cite,
.k-press__dek,
.k-pullquote, .k-pullquote *,
.k-vignette__lead, .k-vignette--secondary__lead,
.k-vignettes__h .k-accent,
.k-numbers__lbl,
.k-positioning__h .k-accent,
.k-careers__h .k-accent,
.k-insights__h .k-accent,
.k-brands__h .k-accent,
.k-brands__cat,
.k-brands__row--blank .k-brands__name,
.k-colophon__line,
.k-positioning__dateline-when,
.k-press__body blockquote,
.k-cta__h .k-accent,
.k-dcta__sub,
.k-overlay__lead {
	font-family: var(--k-font-body) !important;
	font-style: normal !important;
}