/* katoyapalmer.com motion layer (approved 2026-10-02, studies 01-06).
   CSS only except the bamboo-O draw and the count-up (assets/motion.js).
   Everything that moves sits inside prefers-reduced-motion: no-preference.
   Nothing starts hidden: each element's resting state is its finished state. */

/* ---------- 06 As-seen-on strip (static layout first) ---------- */
.seen{border-top:1px solid var(--line,#E4DBCC);border-bottom:1px solid var(--line,#E4DBCC);background:var(--paper-2,#FBF6EA);padding:18px 0}
.seen .wrap{display:flex;align-items:center;gap:26px}
.seen-label{flex:none;font-family:var(--jost,sans-serif);font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft,#6E665F)}
.seen-strip{flex:1;min-width:0;overflow:hidden}
.seen-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 26px;align-items:start}
.seen-track a{display:flex;flex-direction:column;gap:1px;color:var(--ink,#161210);padding:4px 0;border-bottom:1px solid transparent}
.seen-track a:hover{border-color:var(--gold,#C6A24C)}
.seen-track b{font-family:var(--syne,sans-serif);font-weight:800;font-size:17px;letter-spacing:-.01em}
.seen-track small{font-family:var(--jost,sans-serif);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft,#6E665F)}
.seen-track i{display:none;width:6px;height:6px;border-radius:50%;background:var(--gold,#C6A24C);flex:none}
.seen-track .dup{display:none}
@media (max-width:820px){.seen .wrap{flex-direction:column;align-items:flex-start;gap:10px}.seen-strip{width:100%}}

/* ---------- 02 Polymath ribbon (static layout first) ---------- */
.ribbon{margin:18px auto 0;font-family:var(--syne,sans-serif);font-weight:800;text-transform:uppercase;font-size:clamp(20px,3vw,28px);line-height:1.15;letter-spacing:-.01em;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .35em}
.ribbon .fixed{color:var(--ink-soft,#6E665F)}
.ribbon .roles{display:none;height:1.15em;overflow:hidden;text-align:left}
.ribbon .roles ul{list-style:none;margin:0;padding:0}
.ribbon .roles li{height:1.15em;white-space:nowrap}
.ribbon .roles li:nth-child(1),.ribbon .roles li:nth-child(5){color:var(--scarlet,#D6362A)}
.ribbon .roles li:nth-child(2){color:var(--gold-deep,#9C7A2E)}
.ribbon .roles li:nth-child(3){color:var(--sage-deep,#5E7259)}
.ribbon .roles li:nth-child(4){color:var(--ink,#161210)}
.ribbon .roles-static{color:var(--scarlet,#D6362A);font-size:.72em;align-self:center}

/* ---------- 03 Running-thread timeline (static layout first) ---------- */
.thread{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative;padding-top:20px;margin:26px 0 8px}
.thread::before,.thread::after{content:"";position:absolute;left:0;top:6px;height:3px;border-radius:3px}
.thread::before{right:0;background:var(--line,#E4DBCC)}
.thread::after{width:100%;background:var(--foil,#C6A24C)}
.thread .stop{position:relative;padding-top:12px;min-width:0}
.thread .stop::before{content:"";position:absolute;top:-20px;left:0;width:15px;height:15px;border-radius:50%;background:var(--card,#FCF8EF);border:2px solid var(--gold,#C6A24C)}
.thread .n{font-family:var(--syne,sans-serif);font-weight:800;font-size:30px;line-height:1;color:var(--ink,#161210);font-variant-numeric:tabular-nums}
.thread .l{font-family:var(--jost,sans-serif);font-size:12.5px;font-weight:500;color:var(--ink-soft,#6E665F);margin-top:6px;line-height:1.35}
@media (max-width:820px){.thread{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}.thread::before,.thread::after{display:none}}

/* ---------- Board roles line ---------- */
.seats{list-style:none;margin:6px 0 22px;padding:0;display:grid;gap:6px}
.seats li{font-family:var(--jost,sans-serif);font-size:14.5px;color:var(--ink,#161210);display:flex;gap:10px;align-items:baseline}
.seats li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold,#C6A24C);flex:none;transform:translateY(-2px)}
.seats b{font-weight:600}

/* ---------- Next-step row ---------- */
.next{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-family:var(--jost,sans-serif);font-size:13.5px;font-weight:600}
.next a{color:var(--ink-soft,#6E665F);border-bottom:1px solid var(--gold,#C6A24C);padding-bottom:1px}
.next a:hover{color:var(--scarlet,#D6362A)}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  /* 01 Arch reveal: clip-path, not opacity, so the photo counts as painted at once */
  .hero .portrait .img{animation:kpArch 1s cubic-bezier(.2,.7,.1,1) both}
  .hero .portrait .img img{animation:kpSettle 1.4s cubic-bezier(.2,.7,.1,1) both}
  .hero h1>span{display:inline-block;animation:kpRise .7s cubic-bezier(.2,.7,.1,1) both}
  .hero h1>span:nth-child(2){animation-delay:.07s}.hero h1>span:nth-child(3),.hero h1>span:nth-child(4){animation-delay:.14s}
  .hero h1>span:nth-child(5){animation-delay:.21s}.hero h1>span:nth-child(6){animation-delay:.24s}
  .hero h1>span:nth-child(7),.hero h1>span:nth-child(8){animation-delay:.3s}

  /* 02 Ribbon */
  .ribbon .roles{display:block}
  .ribbon .roles-static{display:none}
  .ribbon .roles ul{animation:kpCycle 10s cubic-bezier(.7,0,.2,1) infinite}

  /* 03 Thread fills when motion.js adds .go */
  .thread.armed::after{width:0;transition:width 1.6s cubic-bezier(.3,.7,.2,1)}
  .thread.armed.go::after{width:100%}

  /* 04 Gold-leaf hover on the venture cards */
  .venture{position:relative;overflow:hidden}
  .venture::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(241,221,149,.2) 50%,transparent 65%);transform:translateX(-110%);transition:transform .7s cubic-bezier(.2,.7,.1,1);pointer-events:none}
  .venture:hover::after,.venture:focus-visible::after{transform:translateX(110%)}

  /* 06 Strip scrolls; pauses on hover or keyboard focus */
  .seen-strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .seen-track{display:flex;flex-wrap:nowrap;align-items:center;gap:30px;width:max-content;animation:kpMarquee 40s linear infinite}
  .seen-track i{display:block}
  .seen-track a{white-space:nowrap}
  .seen-track a.dup{display:flex}
  .seen-track i.dup{display:block}
  .seen-strip:hover .seen-track,.seen-strip:focus-within .seen-track{animation-play-state:paused}
}
@keyframes kpArch{from{clip-path:inset(100% 0 0 0 round 200px 200px 16px 16px)}to{clip-path:inset(0 0 0 0 round 200px 200px 16px 16px)}}
@keyframes kpSettle{from{transform:scale(1.08)}to{transform:none}}
@keyframes kpRise{from{transform:translateY(.45em);opacity:.0001}to{transform:none;opacity:1}}
@keyframes kpCycle{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-1.15em)}50%,70%{transform:translateY(-2.3em)}75%,95%{transform:translateY(-3.45em)}100%{transform:translateY(-4.6em)}}
@keyframes kpMarquee{to{transform:translateX(-50%)}}
@keyframes kpDraw{from{stroke-dashoffset:252}to{stroke-dashoffset:0}}
@keyframes kpFade{from{opacity:0}to{opacity:1}}