/* kirker.com motion layer (September 2026, staging preview). Everything here is scoped to html.motion, which motion.js
   sets only when the visitor hasn't asked for reduced motion. Switch off with: wp option update kirker_motion 0 */

/* 1. Gold underlines draw in. The static underline is text-decoration (not animatable); under .motion it becomes a
      background stroke of the same weight and offset that grows from left to right. */
.motion .accent,.motion .accent-num{text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-position:0 calc(100% - 0px);background-size:0 7px;padding-bottom:6px;transition:background-size .9s cubic-bezier(.2,.7,.2,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.motion h2 .accent{background-size:0 6px}
.motion .accent-num{background-size:0 4px;padding-bottom:4px}
.motion .accent.drawn{background-size:100% 7px}
.motion h2 .accent.drawn{background-size:100% 6px}
.motion .accent-num.drawn{background-size:100% 4px}

/* 2. Bars grow from the baseline */
.motion .bar .b{transform-origin:bottom;transform:scaleY(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.motion .bars.shown .bar .b{transform:scaleY(1)}
.motion .bars.shown .bar:nth-child(2) .b{transition-delay:.25s}

/* 3. Cards that are links lift slightly */
.motion a.card{transition:transform .25s ease,box-shadow .25s ease}
.motion a.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(26,26,46,.10)}

/* 4. The four questions, one at a time */
.motion .q4{opacity:.28;transition:opacity .6s ease}
.motion .q4.on{opacity:1}
.navy .q4{color:inherit}

/* 5. The record, pinned (desktop): cards scroll on the left, a panel on the right shows the one in view */
.rec-pinned{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
.rec-pinned .rec-list{display:flex;flex-direction:column;gap:24px}
.rec-pinned .rec-list > .card{grid-column:auto!important}
.rec-panel{position:sticky;top:120px;background:var(--navy);color:var(--on-navy-2);padding:40px;border-radius:2px;min-height:420px;display:flex;flex-direction:column;gap:22px}
.rec-panel .eyebrow{color:var(--gold)}
.rec-panel .big{font-family:var(--mono);font-size:34px;font-weight:500;color:#fff;line-height:1.1}
.rec-panel .cap{font-size:16px;color:var(--on-navy-2)}
.rec-panel .pbars{display:flex;align-items:flex-end;gap:28px;height:170px;border-bottom:1px solid var(--navy-bar);padding:0 6px;margin-top:auto}
.rec-panel .pbar{display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:flex-end;height:100%}
.rec-panel .pbar i{display:block;width:70px;background:var(--navy-bar);transform-origin:bottom;transition:height .9s cubic-bezier(.2,.7,.2,1)}
.rec-panel .pbar.after i{background:var(--gold)}
.rec-panel .pbar span{font-family:var(--mono);font-size:13px;color:var(--on-navy-3)}
.rec-panel .dots{display:flex;gap:8px}
.rec-panel .dots b{width:8px;height:8px;border-radius:50%;background:var(--navy-bar);transition:background .3s}
.rec-panel .dots b.on{background:var(--gold)}
.rec-list > .card{transition:opacity .35s ease}
.rec-list > .card.dim{opacity:.55}

/* 6. Diagrams (shortcodes): the Terminix loop, the revenue-leak pipeline, the Day 30 mock */
.kd{margin:0}
.kd svg{display:block;width:100%;height:auto}
.kd .stroke{fill:none;stroke:var(--navy-bar);stroke-width:2}
.kd .trace{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.kd .node circle{fill:#fff;stroke:var(--navy);stroke-width:2;transition:fill .4s,stroke .4s}
.kd .node text{font-family:var(--sans);font-size:20px;fill:var(--navy);font-weight:600}
.kd .node .sub{font-weight:400;font-size:16px;fill:var(--muted)}
.kd .node.on circle{fill:var(--gold);stroke:var(--gold)}
.kd .num{font-family:var(--mono);font-size:16px;fill:var(--navy);font-weight:500}
.kd .node.on .num{fill:var(--navy)}

.loop-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.loop-steps{display:flex;flex-direction:column}
.loop-step{min-height:46vh;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:12px 0;opacity:.35;transition:opacity .4s}
.loop-step.on{opacity:1}
.loop-step .w{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.loop-step h3{font-size:26px}
.loop-fig{position:sticky;top:120px}
.loop-fig .result{font-family:var(--mono);font-size:40px;font-weight:500;fill:var(--navy)}

.leak-flow{margin:8px 0 48px}
.leak-flow .stage rect{fill:#fff;stroke:var(--navy);stroke-width:2}
.leak-flow .stage text{font-family:var(--sans);font-size:15px;font-weight:600;fill:var(--navy)}
.leak-flow .drip{fill:var(--navy-bar);transition:fill .4s,transform .4s;transform-box:fill-box;transform-origin:center}
.leak-flow .lk text{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;fill:var(--muted);transition:fill .4s}
.leak-flow .lk.on .drip{fill:var(--gold);transform:scale(1.25)}
.leak-flow .lk.on text{fill:var(--navy)}
.leak-flow .loop{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:6 6}
.leak-flow .loop-head{fill:var(--gold)}

.laptop{max-width:880px;margin:8px auto 0}
.laptop .screen{background:var(--navy);border-radius:14px 14px 0 0;padding:14px}
.laptop .doc{background:#fff;border-radius:4px;padding:28px 30px;min-height:360px}
.laptop .base{height:16px;background:#C9CBD6;border-radius:0 0 12px 12px;margin:0 -28px;position:relative}
.laptop .base:after{content:"";position:absolute;left:50%;top:0;width:120px;height:6px;margin-left:-60px;background:#B3B5C3;border-radius:0 0 6px 6px}
.doc .dh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:6px;flex-wrap:wrap}
.doc .dh strong{font-family:var(--serif);font-size:22px;color:var(--navy)}
.doc .dh span{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.doc table{width:100%;border-collapse:collapse;font-size:14px}
.doc th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 8px;border-bottom:1px solid var(--border)}
.doc td{padding:12px 8px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--body)}
.doc td:first-child{font-family:var(--mono);color:var(--navy);font-weight:500}
.doc td strong{color:var(--navy)}
.doc .imp{font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:2px;white-space:nowrap}
.doc .imp.h{background:var(--gold);color:var(--navy)}
.doc .imp.m{background:#E7E8EF;color:var(--navy)}
.doc .note{font-size:13px;color:var(--muted);margin-top:14px}
.motion .doc tbody tr{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.motion .doc.shown tbody tr{opacity:1;transform:none}

@media (max-width:1023px){
  .loop-story{grid-template-columns:1fr}
  .loop-fig{position:relative;top:auto;order:-1}
  .loop-step{min-height:0;opacity:1}
}
@media (max-width:640px){
  .doc th:nth-child(4),.doc td:nth-child(4){display:none}
  .laptop .doc{padding:18px 14px}
  .laptop .base{margin:0 -10px}
}
@media (max-width:700px){.leak-flow{display:none}}
@media (max-width:700px){.loop-fig{display:none}}