/* UX writing agents case study: chapter visuals and the "one request, four
   stages" piece. Builds on case-study.css; accent colors come from .cs.t-sand. */

/* ---- hero: the race, writers always a stage ahead ---- */
.race{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:28px 22px 46px}
.rc-stages{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);text-align:center}
.rc-stages li{font-family:"JetBrains Mono",monospace;font-size:10.5px;line-height:1.3;color:var(--soft);padding:0 2px}
.rc-lane{position:relative;height:38px}
.rc-lane span{position:absolute;left:0;top:-4px;font-size:12px;font-weight:500;color:var(--ink)}
.rc-lane.teams span{color:var(--mute);font-weight:400}
.rc-lane::before{content:"";position:absolute;left:8.33%;right:8.33%;top:26px;border-top:1.5px dashed rgba(23,23,21,.15)}
.rc-lane i{
  position:absolute;top:26px;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
}
.rc-lane.writers i{background:var(--sage-d);box-shadow:0 0 0 5px rgba(165,129,79,.22);animation:rc-writers 12s ease-in-out infinite}
.rc-lane.teams i{background:#fbfaf6;box-shadow:inset 0 0 0 2px rgba(23,23,21,.28);animation:rc-teams 12s ease-in-out infinite}
@keyframes rc-teams{
  0%,12%{left:8.33%} 16%,28%{left:25%} 32%,44%{left:41.67%} 48%,60%{left:58.33%} 64%,76%{left:75%} 80%,94%{left:91.67%} 100%{left:8.33%}
}
@keyframes rc-writers{
  0%,12%{left:25%} 16%,28%{left:41.67%} 32%,44%{left:58.33%} 48%,60%{left:75%} 64%,94%{left:91.67%} 100%{left:25%}
}

/* ---- ch 1: scattered know-how comes together ---- */
.gather{container-type:size}
.gather ul{list-style:none;margin:0;padding:0}
.gather li{
  position:absolute;left:50%;top:50%;white-space:nowrap;padding:8px 12px;border-radius:11px;
  background:#fbfaf6;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--soft);
  box-shadow:0 8px 22px -14px rgba(23,23,21,.35);animation:ga-come 9s ease-in-out infinite;
}
.gather .f1{--dx:-27;--dy:-30} .gather .f2{--dx:24;--dy:-32} .gather .f3{--dx:-30;--dy:2}
.gather .f4{--dx:29;--dy:4} .gather .f5{--dx:-20;--dy:32} .gather .f6{--dx:21;--dy:31}
@keyframes ga-come{
  0%{transform:translate(-50%,-50%) translate(calc(var(--dx) * 1cqw),calc(var(--dy) * 1cqh));opacity:0}
  6%,34%{transform:translate(-50%,-50%) translate(calc(var(--dx) * 1cqw),calc(var(--dy) * 1cqh));opacity:1}
  50%,100%{transform:translate(-50%,-50%) scale(.4);opacity:0}
}
.ga-set{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:18px 24px;border-radius:16px;background:var(--ink);opacity:0;animation:ga-set 9s ease-in-out infinite;
}
.ga-set small{font-family:"JetBrains Mono",monospace;font-size:10px;color:#d9c7a8}
.ga-set b{font-size:17px;font-weight:500;color:#f6f5f1}
@keyframes ga-set{0%,46%{opacity:0;transform:translate(-50%,-50%) scale(.85)} 54%,92%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0}}

/* ---- ch 2: notion, then markdown ---- */
.morph{display:grid;justify-items:center;align-content:center;gap:14px;padding:24px}
.mo-tabs{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(23,23,21,.06)}
.mo-tabs span{padding:5px 12px;border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mute)}
.mo-tabs .t-before{animation:mo-tab-a 8s step-end infinite}
.mo-tabs .t-after{animation:mo-tab-b 8s step-end infinite}
@keyframes mo-tab-a{0%{background:#fbfaf6;color:var(--ink)} 50%{background:transparent;color:var(--mute)}}
@keyframes mo-tab-b{0%{background:transparent;color:var(--mute)} 50%{background:#fbfaf6;color:var(--ink)}}
.mo-card{
  width:min(340px,100%);margin:0;padding:18px 20px;border-radius:14px;background:#fbfaf6;
  box-shadow:0 12px 30px -16px rgba(23,23,21,.35);
}
.mo-card.before,.mo-card.after{grid-row:2;grid-column:1}
.mo-card.before{animation:mo-a 8s ease-in-out infinite}
.mo-card.after{animation:mo-b 8s ease-in-out infinite;font-family:"JetBrains Mono",monospace;font-size:12.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap}
.mo-card.before p{margin:0 0 6px;font-size:14px;color:var(--soft)}
.mo-card.before p.h{font-size:16px;font-weight:600;color:var(--ink)}
.mo-card.before p.call{padding:6px 9px;border-radius:8px;background:#fbe9d3;color:#8a4b14}
@keyframes mo-a{0%,42%{opacity:1;transform:none} 50%,92%{opacity:0;transform:translateY(-6px)} 100%{opacity:1;transform:none}}
@keyframes mo-b{0%,42%{opacity:0;transform:translateY(6px)} 50%,92%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(6px)}}

/* ---- ch 3: agents passing a draft around ---- */
.tm-agent{
  position:absolute;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 16px;border-radius:14px;background:#fbfaf6;box-shadow:0 8px 22px -14px rgba(23,23,21,.35);
  animation:tm-busy 6s ease-in-out infinite;
}
.tm-agent b{font-size:15px;font-weight:500;color:var(--ink)}
.tm-agent small{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--mute);white-space:nowrap}
.tm-agent.a1{left:24%;top:28%} .tm-agent.a2{left:76%;top:28%;animation-delay:2s} .tm-agent.a3{left:50%;top:78%;animation-delay:4s}
@keyframes tm-busy{0%,30%,100%{box-shadow:0 8px 22px -14px rgba(23,23,21,.35)} 8%,22%{box-shadow:0 0 0 5px rgba(165,129,79,.25),0 8px 22px -14px rgba(23,23,21,.35)}}
.tm-doc{
  position:absolute;z-index:3;width:26px;height:32px;margin:-16px 0 0 -13px;border-radius:5px;background:var(--sage-d);
  box-shadow:inset 0 -18px 0 -14px rgba(255,255,255,.25),inset 0 -10px 0 -7px rgba(255,255,255,.25);
  animation:tm-doc 6s ease-in-out infinite;
}
@keyframes tm-doc{
  0%,8%{left:24%;top:46%} 30%,41%{left:76%;top:46%} 63%,74%{left:50%;top:60%} 96%,100%{left:24%;top:46%}
}

/* ---- ch 4: one request, four stages ---- */
.hd{padding:28px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -40px rgba(23,23,21,.35)}
.hd-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.hd-req{flex:1 1 320px;margin:0;font-size:19px;line-height:1.45;font-weight:300;color:var(--ink)}
.hd-req small{display:block;margin-bottom:4px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mute)}
.hd-stages{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hd-stage{
  display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px;border-radius:16px;background:#fbfaf6;
  box-shadow:inset 0 0 0 1px var(--line);opacity:.4;transition:opacity .4s,box-shadow .4s;cursor:pointer;
}
.hd-stage.on{opacity:1;box-shadow:inset 0 0 0 1px rgba(165,129,79,.45)}
.hd-stage h3{margin:0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink)}
.hd-stage h3 b{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:400;background:var(--ink);color:#f6f5f1;
}
.hd-ctx{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.hd-ctx li{padding:3px 7px;border-radius:6px;font-family:"JetBrains Mono",monospace;font-size:10.5px;line-height:1.4;background:rgba(23,23,21,.05);color:var(--soft)}
.hd-ctx li.add{background:var(--tint);color:var(--sage-d)}
.hd-ctx li.add::before{content:"+ "}
.hd-out{display:flex;flex-direction:column;gap:8px;margin-top:auto;visibility:hidden}
.hd-stage.on .hd-out{visibility:visible;animation:gc-pop .45s ease both}
.hd-line{margin:0;padding:12px 14px;border-radius:12px;background:var(--ink);color:#f6f5f1;font-size:14.5px;line-height:1.5;font-weight:300}
.hd-line ins{text-decoration:none;color:#f2d7a7;border-bottom:1px solid rgba(242,215,167,.55)}
.hd-notes{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hd-notes li{font-size:12px;line-height:1.4;color:var(--soft);display:flex;gap:6px}
.hd-notes li::before{flex:0 0 auto;font-family:"JetBrains Mono",monospace}
.hd-notes li.ok::before{content:"✓";color:var(--sage-d)}
.hd-notes li.no::before{content:"→";color:var(--amber)}
.hd-fine{margin:14px 0 0;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mute)}

/* ---- ch 5: everyone's kit ---- */
.kit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px}
.kt-roles{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.kt-roles li{
  padding:8px 14px;border-radius:999px;background:#fbfaf6;font-size:14px;font-weight:500;color:var(--ink);
  box-shadow:0 8px 22px -14px rgba(23,23,21,.35);transition:opacity .4s,transform .4s;transition-delay:calc(var(--i,0) * .2s);
}
.kt-box{
  width:min(380px,100%);padding:16px 18px 18px;border-radius:18px;background:var(--ink);
  box-shadow:0 18px 40px -20px rgba(23,23,21,.5);
}
.kt-box small{display:block;margin-bottom:10px;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#d9c7a8}
.kt-box ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.kt-box li{
  padding:6px 10px;border-radius:8px;background:rgba(246,245,241,.1);color:#f6f5f1;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  transition:opacity .4s,transform .4s;transition-delay:calc(.8s + var(--i,0) * .25s);
}
.js .kit:not(.in) .kt-roles li{opacity:0;transform:translateY(-6px)}
.js .kit:not(.in) .kt-box li{opacity:0;transform:translateY(-10px)}

/* ---- ch 6: a new tool arrives, the writing tools are already there ---- */
.arrive{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px}
.ar-tool{
  display:flex;flex-direction:column;gap:3px;padding:16px 20px;border-radius:16px;background:#fbfaf6;
  box-shadow:0 12px 30px -16px rgba(23,23,21,.35);animation:ar-in 7s ease-in-out infinite;
}
.ar-tool small{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--mute)}
.ar-tool b{font-size:17px;font-weight:500;color:var(--ink)}
.ar-ready{
  display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;background:var(--sage-d);color:#f6f5f1;
  font-size:14px;animation:ar-ok 7s ease-in-out infinite;
}
.ar-ready::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(246,245,241,.2);font-size:12px}
.ar-ready span{opacity:.75}
.ar-ready b{font-weight:500}
@keyframes ar-in{0%{opacity:0;transform:translateX(40px)} 12%,90%{opacity:1;transform:none} 100%{opacity:0}}
@keyframes ar-ok{0%,18%{opacity:0;transform:scale(.9)} 26%,90%{opacity:1;transform:none} 100%{opacity:0}}

/* ---- responsive ---- */
@media (max-width:960px){
  .hd-stages{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .hd{padding:18px}
  .hd-stages{grid-template-columns:1fr}
  .hd-top .cs-btn{width:100%;justify-content:center}
  .rc-stages li{font-size:9px}
  .gather li{font-size:10px;padding:6px 9px}
  .tm-agent small{display:none}
}
@media (prefers-reduced-motion: reduce){
  .gather li{opacity:0} .ga-set{opacity:1}
  .mo-card.before{opacity:0} .mo-card.after{opacity:1}
  .rc-lane.writers i{left:91.67%} .rc-lane.teams i{left:75%}
  .ar-tool,.ar-ready{opacity:1}
}