/* ============================================================
   SwiftFrame KLB — frontend bundle: fonts + compiled Tailwind.
   ============================================================ */
@import url('fonts.css');
@import url('tailwind.css');

/* ── First-visit loader: logo tiles fade in one by one, loader fades out ── */
#klb-loader { position: fixed; inset: 0; z-index: 9999; pointer-events: none; transition: opacity .55s ease; }
#klb-loader.gone { opacity: 0; }
#klb-loader svg { width: 100%; height: 100%; display: block; }
#klb-loader .klb-tile { opacity: 0; }
#klb-loader.play .klb-tile.k { animation: klb-tile-in .4s ease-out .15s forwards; }
#klb-loader.play .klb-tile.l { animation: klb-tile-in .4s ease-out .55s forwards; }
#klb-loader.play .klb-tile.b { animation: klb-tile-in .4s ease-out .95s forwards; }
@keyframes klb-tile-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Header search morph: lime icon chip expands into the cream pill ── */
[data-klb-search] {
	width: 60px; background: #5fc8e6;
	transition: width .38s cubic-bezier(.4, 0, .2, 1), background-color .38s ease;
}
[data-klb-search]:not(.is-open), [data-klb-search]:not(.is-open) * { cursor: pointer; }
[data-klb-search] button { cursor: pointer; }
[data-klb-search]:not(.is-open):hover { opacity: .85; }
[data-klb-search] input { opacity: 0; transition: opacity .22s ease; }
[data-klb-search].is-open { width: 353px; background: #f2f2f2; }
[data-klb-search].is-open input { opacity: 1; transition-delay: .14s; }
@media (max-width: 1799px) {
	[data-klb-search].is-open { width: 260px; }
}

/* ── Hero badge-cursor: the spinning badge follows the mouse; it fades out over links ── */
.klb-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
	[data-klb-hero] { cursor: none; }
	[data-klb-hero] a { cursor: pointer; }
	.klb-cursor {
		display: block; position: fixed; top: -88px; left: -88px; width: 176px; height: 176px; z-index: 30;
		pointer-events: none; opacity: 0; transition: opacity .2s ease; will-change: transform;
	}
	.klb-cursor.is-on { opacity: 1; }
	.klb-cursor.is-on.is-hover { opacity: 0; }   /* over a link the native pointer takes over */
	.klb-cursor-ring, .klb-cursor-dot { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .38s cubic-bezier(.34, 1.4, .64, 1); }
	.klb-cursor-ring img { width: 100%; height: 100%; display: block; }
	.klb-cursor-ring, .klb-cursor-dot { transform: scale(.85); }   /* full badge, always spinning, a touch under its 176px art size */
}

/* ── Mobile drawer: slides in from the right (menu.js toggles .is-open), links stagger in ── */
#sf-menu {
	transform: translateX(100%); visibility: hidden;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .35s;
}
#sf-menu.is-open {
	transform: translateX(0); visibility: visible;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
#sf-menu nav a { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
#sf-menu.is-open nav a { opacity: 1; transform: none; }
#sf-menu.is-open nav a:nth-child(1) { transition-delay: .18s; }
#sf-menu.is-open nav a:nth-child(2) { transition-delay: .24s; }
#sf-menu.is-open nav a:nth-child(3) { transition-delay: .30s; }
#sf-menu.is-open nav a:nth-child(4) { transition-delay: .36s; }
#sf-menu.is-open nav a:nth-child(n+5) { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
	#sf-menu, #sf-menu.is-open, #sf-menu nav a { transition: none; }
}