/* =====================================================================
   KIP MOTION KIT — kip-motion.css   (v1, 2026-10-12, Claude → Chat)
   Drop-in skin + motion styles for thebroker.team and /find-my-home.
   RULES: everything is namespaced (km-*, data-km). Nothing here targets
   existing site classes, IDs, forms or schema. Load AFTER the site's CSS.
   Fonts: add to <head> once (Fraunces = display, Nunito already in use):
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,500&family=Nunito:wght@400;600;700;800;900&display=swap">
   ===================================================================== */

/* ---------- 1. Tokens (additive; existing Kip tokens stay) ---------- */
:root{
  --km-ground:#F7F5EF; --km-paper:#FFFFFF; --km-ink:#24315E; --km-ink-2:#4A5578; --km-muted:#7A8299; --km-line:#E5E2D9;
  --km-navy:#24315E; --km-navy-deep:#182245; --km-brass:#B9893B; --km-brass-soft:#F2E6CF; --km-yellow:#F6C544;
  --km-p-blue:#D6E2F6; --km-p-yellow:#FCECBE; --km-p-mint:#D4F0E2; --km-p-peach:#FAE0CE; --km-p-pink:#FAD6DE; --km-p-lav:#E2DAF6;
  --km-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --km-body:"Nunito","Avenir Next","Segoe UI",system-ui,sans-serif;
  --km-r:22px; --km-shadow:0 18px 50px rgba(36,49,94,.10);
  --km-ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--km-ground:#121828;--km-paper:#1A2238;--km-ink:#F1F3F8;--km-ink-2:#C7CDDC;--km-muted:#8F97AE;--km-line:#2A3450;--km-navy:#DDE5F7;--km-navy-deep:#0E142A;--km-brass:#D9B06A;--km-brass-soft:#3A3120;--km-yellow:#E0B23A;--km-p-blue:#27365C;--km-p-yellow:#4A3F1C;--km-p-mint:#1E3F31;--km-p-peach:#4A3225;--km-p-pink:#4A2A33;--km-p-lav:#33294F;--km-shadow:0 18px 50px rgba(0,0,0,.35)}}

/* ---------- 2. Page ground + type (apply by adding class km-page to <body>) ---------- */
body.km-page{background:var(--km-ground);color:var(--km-ink);font-family:var(--km-body)}
.km-page h1,.km-page h2,.km-page .km-display{font-family:var(--km-display);font-weight:500;letter-spacing:-.015em;line-height:1.06;text-wrap:balance}
.km-page h1{font-size:clamp(38px,5.2vw,68px)} .km-page h2{font-size:clamp(28px,3.4vw,44px)}
.km-page h1 em,.km-page h2 em{font-style:italic;font-weight:300}
.km-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--km-brass)}
.km-lead{font-size:clamp(17px,1.4vw,19px);color:var(--km-ink-2);max-width:58ch}
.km-fine{font-size:13px;color:var(--km-muted)}
.km-shimmer{background:linear-gradient(90deg,var(--km-brass) 0%,#F1D79A 40%,var(--km-brass) 60%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:km-shim 4s linear infinite}
@keyframes km-shim{to{background-position:-220% 0}}

/* ---------- 3. Buttons (add class alongside existing button classes) ---------- */
.km-btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;font-weight:800;font-size:15px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:inherit;position:relative;overflow:hidden;transition:transform .25s var(--km-ease),box-shadow .25s}
.km-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(36,49,94,.18)}
.km-btn:focus-visible{outline:3px solid var(--km-brass);outline-offset:3px}
.km-btn-p{background:var(--km-navy);color:var(--km-ground)}
.km-btn-o{color:var(--km-ink);border-color:var(--km-line);background:var(--km-paper)}
.km-btn-y{background:var(--km-yellow);color:#1b1708}          /* Schedule a tour — the ONE filled yellow */
.km-btn-b{background:var(--km-brass);color:#1b1708}
.km-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s;pointer-events:none}
.km-btn:hover::after{transform:translateX(120%)}
.km-quiet{font-size:13px;font-weight:800;text-decoration:none;color:var(--km-ink-2);padding:8px 12px;border-radius:999px;border:1.5px solid var(--km-line)}

/* ---------- 4. Surfaces ---------- */
.km-card{background:var(--km-paper);border:1px solid var(--km-line);border-radius:var(--km-r);transition:transform .35s var(--km-ease),box-shadow .35s}
.km-card:hover{transform:translateY(-5px);box-shadow:var(--km-shadow)}
.km-panel{background:var(--km-paper);border:1px solid var(--km-line);border-radius:var(--km-r);box-shadow:var(--km-shadow)}
.km-pill{padding:9px 14px;border-radius:999px;border:1.5px solid var(--km-line);background:var(--km-paper);font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.km-pill.on,.km-pill[aria-pressed="true"]{background:var(--km-navy);color:var(--km-ground);border-color:transparent}
.km-chip{text-decoration:none;padding:8px 14px;border-radius:999px;border:1.5px solid var(--km-line);background:var(--km-paper);font-weight:800;font-size:13px}
.km-chip:hover{border-color:var(--km-brass);color:var(--km-brass)}
.km-tag{background:var(--km-paper);color:var(--km-ink);font-weight:800;font-size:12px;padding:6px 10px;border-radius:999px}
.km-attr{font-size:11px;color:var(--km-muted)}            /* NWMLS listing-broker attribution */

/* Speech bubbles (Kip asks) — add km-bub + a color class; alternate km-l / km-r for tilt */
.km-bub{display:inline-block;padding:10px 14px;border-radius:16px;font-weight:800;font-size:14px;color:#24315E;box-shadow:0 10px 24px rgba(36,49,94,.12);position:relative;line-height:1.25}
.km-bub::after{content:"";position:absolute;bottom:-7px;width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:3px}
.km-bub.km-l{transform:rotate(-3deg)} .km-bub.km-l::after{left:16px}
.km-bub.km-r{transform:rotate(3deg)}  .km-bub.km-r::after{right:16px}
.km-bub.km-c1{background:#D6E2F6}.km-bub.km-c2{background:#FCECBE}.km-bub.km-c3{background:#D4F0E2}.km-bub.km-c4{background:#FAE0CE}.km-bub.km-c5{background:#FAD6DE}.km-bub.km-c6{background:#E2DAF6}

/* Sticky nav glass (add km-nav to the existing header) */
.km-nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--km-ground) 84%,transparent);border-bottom:1px solid var(--km-line)}

/* Enrique sticky bar (add km-cbar to the existing bar; it keeps its own links) */
.km-cbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--km-paper);border:1px solid var(--km-line);box-shadow:var(--km-shadow);border-radius:999px;padding:8px 10px 8px 8px;display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px)}
.km-cbar img{width:44px;height:44px;border-radius:50%;object-fit:cover}

/* Aurora background for hero sections (insert the 3-span div inside a position:relative hero) */
.km-aurora{position:absolute;inset:-20% -10%;z-index:0;filter:blur(70px);opacity:.9;pointer-events:none}
.km-aurora span{position:absolute;border-radius:50%;mix-blend-mode:multiply;animation:km-drift 18s ease-in-out infinite alternate}
.km-aurora span:nth-child(1){width:46vw;height:46vw;left:-8%;top:-10%;background:var(--km-p-blue)}
.km-aurora span:nth-child(2){width:40vw;height:40vw;right:-6%;top:0;background:var(--km-p-yellow);animation-delay:-6s}
.km-aurora span:nth-child(3){width:36vw;height:36vw;left:30%;bottom:-20%;background:var(--km-p-mint);animation-delay:-12s}
@keyframes km-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,-4vw) scale(1.12)}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .km-aurora span{mix-blend-mode:screen;opacity:.5}}
.km-hero-content{position:relative;z-index:1}

/* Kip float + halo */
.km-kipfloat{filter:drop-shadow(0 30px 40px rgba(36,49,94,.25));animation:km-bob 5s ease-in-out infinite}
@keyframes km-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
.km-halo{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--km-p-yellow),transparent 65%);opacity:.8;pointer-events:none}

/* ---------- 5. Motion scaffolding (the JS drives these) ---------- */
.km-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:45;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--km-brass),#E9CB8B,var(--km-brass));pointer-events:none}
.km-grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.km-curtain{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--km-navy-deep);color:#fff;pointer-events:none}
.km-curtain .km-panel-a,.km-curtain .km-panel-b{position:absolute;inset:0;background:var(--km-navy-deep)}
.km-curtain .km-panel-b{background:var(--km-brass)}
.km-curtain .km-mark{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;font-family:var(--km-display);font-size:clamp(26px,4vw,44px);font-weight:500}
.km-curtain .km-mark i{display:block;width:0;height:1px;background:#E9CB8B}
.km-curtain .km-mark small{font-family:var(--km-body);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#E9CB8B;opacity:0}
.km-cursor{position:fixed;left:0;top:0;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--km-brass);z-index:70;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .3s;opacity:0;mix-blend-mode:multiply}
.km-cursor.on{opacity:1}.km-cursor.hot{width:64px;height:64px;background:color-mix(in srgb,var(--km-brass) 18%,transparent)}
.km-glow{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;z-index:0;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--km-brass) 22%,transparent),transparent 60%);opacity:0;transition:opacity .6s}
.km-glow.on{opacity:1}
@media (pointer:coarse){.km-cursor,.km-glow{display:none}}
[data-km="words"] .km-w{display:inline-block;overflow:hidden;vertical-align:bottom}
[data-km="words"] .km-w>span{display:inline-block}
[data-km="lines"]>.km-lw{display:block;overflow:hidden}[data-km="lines"]>.km-lw>span{display:block}
.km-mask{clip-path:inset(0 0 100% 0 round 18px)}
.km-mask-up{clip-path:inset(100% 0 0 0 round 18px)}
[data-km="marquee"]{overflow:hidden}
[data-km="marquee"]>*{display:flex;gap:12px;width:max-content;animation:km-mq var(--km-mq,40s) linear infinite}
[data-km="marquee"]:hover>*{animation-play-state:paused}
@keyframes km-mq{to{transform:translateX(-50%)}}
[data-km="pulse"]{animation:km-pulse 3.6s ease-in-out infinite}
@keyframes km-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--km-yellow) 55%,transparent)}50%{box-shadow:0 0 0 12px transparent}}
.km-typed::after{content:"";display:inline-block;width:2px;height:1.1em;background:currentColor;margin-left:2px;vertical-align:-2px;animation:km-blink 1s steps(2) infinite}
@keyframes km-blink{50%{opacity:0}}
/* hide-before-reveal is applied by JS only when GSAP is ready, so content is never hidden without motion */
html.km-ready [data-km="rise"],html.km-ready [data-km="stagger"]>*,html.km-ready [data-km="pins"]>*{opacity:0}

/* ---------- 6. Kill switches ---------- */
html.km-off .km-progress,html.km-off .km-grain,html.km-off .km-curtain,html.km-off .km-cursor,html.km-off .km-glow{display:none!important}
html.km-off .km-mask,html.km-off .km-mask-up{clip-path:none!important}
html.km-off [data-km="rise"],html.km-off [data-km="stagger"]>*,html.km-off [data-km="pins"]>*{opacity:1!important}
@media (prefers-reduced-motion:reduce){
  .km-progress,.km-grain,.km-curtain,.km-cursor,.km-glow{display:none!important}
  .km-mask,.km-mask-up{clip-path:none!important}
  .km-aurora span,.km-kipfloat,[data-km="marquee"]>*,[data-km="pulse"],.km-shimmer{animation:none!important}
  .km-shimmer{background:none;color:var(--km-brass);-webkit-text-fill-color:initial}
  [data-km="rise"],[data-km="stagger"]>*,[data-km="pins"]>*{opacity:1!important}
}