/* Dryways Code Block — section 05, the slab built.
   The drawing and its six steps form one finite, scroll-linked explanation. */
/* --------------------------------------------------- 05 · the slab, built -- */

.b5{
  --ground:#0B0D10; --ground-2:#101418;
  --hair:rgba(255,255,255,.13); --hair-2:rgba(255,255,255,.22);
  --ctl:#6A7D8C; --txt:#FFFFFF; --txt-2:#B7C2C8; --txt-3:#8A9AA2;
  --accent:#F4634A; --cold:#5AE2E4; --on-accent:#0B0F12; --card:#FFFFFF;
  color-scheme:dark; background:var(--ground); color:var(--txt);
  position:relative; padding-block:clamp(72px,8vw,116px);
  scroll-margin-top:var(--headh,74px);
}
.b5.is-scroll-story > .rail{ min-height:360svh }
.b5.is-scroll-story .dw-cb-build{
  position:sticky;
  top:calc(var(--headh,74px) + clamp(10px,2svh,22px));
  z-index:1;
}
.b5-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(24px,3vw,56px); align-items:end;
  margin-bottom:clamp(32px,4vw,56px);
}
.b5-head .sh-ix{ margin-bottom:20px }
.b5-head h2{ margin:0; max-width:15ch }
.b5-lede{ margin:0; color:var(--txt-2); font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.55; max-width:40ch }

.b5-fig{ margin:0 }
.b5-plate{
  background:radial-gradient(90% 80% at 55% 30%, var(--ground-2) 0%, var(--ground) 80%);
  border:1px solid var(--hair); border-radius:var(--r-card, 14px);
  padding:clamp(10px,1.4vw,20px) clamp(6px,1vw,14px);
}
.b5-svg{ display:block; width:100%; height:auto }

/* --- the drawing ------------------------------------------------------- */
/* Every layer arrives; nothing pops. Entering elements get a strong ease-out,
   because that is the curve that reads as responsive rather than sluggish. */
.b5-L{
  opacity:0; transform:translateY(10px);
  transition:opacity .34s ease-out, transform .42s cubic-bezier(.23,1,.32,1);
}
.b5-L.on{ opacity:1; transform:none }

.b5-grd{ stroke:var(--ctl); stroke-width:1; stroke-dasharray:6 6; fill:none; opacity:.7 }
.b5-base{ fill:#171C21 }
.b5-chip rect{ fill:#3E4A54 }
.b5-edge{ fill:none; stroke:var(--ctl); stroke-width:1; opacity:.85 }
.b5-ins{ fill:url(#b5ins); stroke:var(--cold); stroke-width:1; stroke-opacity:.75 }
.b5-conc{ fill:#4B565E }
.b5-agg circle{ fill:#66727A; opacity:.55 }
.b5-mesh{ fill:none; stroke:#9AA7AF; stroke-width:1.6; stroke-linecap:round }
.b5-strip path{ fill:none; stroke:#D8DEE2; stroke-width:3.2; stroke-linecap:round; opacity:.9 }
.b5-cable circle{ fill:var(--accent) }
.b5-surf{ fill:none; stroke:#FFFFFF; stroke-width:2 }

/* The pour is the one layer that should be seen arriving rather than appearing:
   concrete goes in from the bottom. clip-path is the only way to do that without
   touching layout, and it stays on the compositor. */
.b5-pour{ clip-path:inset(100% 0 0 0); transition:clip-path .9s cubic-bezier(.23,1,.32,1) }
.b5-pour.on{ clip-path:inset(0 0 0 0) }

/* --- dimensions -------------------------------------------------------- */
.b5-dim path{ fill:none; stroke:var(--ctl); stroke-width:1 }
.b5-dim .b5-arw{ stroke:var(--txt-3) }
.b5-dim .b5-thin{ stroke-dasharray:3 4 }
.b5-dim text{
  fill:var(--txt-3); font-family:var(--mono); font-size:15px; letter-spacing:.1em;
  text-transform:uppercase;
}
.b5-dim4, .b5-dimB, .b5-dimS{ opacity:0; transition:opacity .3s ease-out }
.b5-dimB.on, .b5-dimS.on{ opacity:1 }
.b5-dim4 text{ fill:#FFFFFF }
.b5-dim4 path{ stroke:#CBD4DA }
.b5-dim4 .b5-arw{ stroke:#FFFFFF }
.b5-dim4.on{ opacity:1 }

/* --- leader labels ----------------------------------------------------- */
/* Uniform Connectedness §17 · the step list and the drawing are one object.
   The active step draws its own leader out of the layer it names. */
.b5-lead{ opacity:0; transition:opacity .28s ease-out }
.b5-lead.on{ opacity:.34 }
.b5-lead.now{ opacity:1 }
.b5-lead path{ fill:none; stroke:var(--ctl); stroke-width:1 }
.b5-lead circle{ fill:var(--ctl) }
.b5-lead text{ fill:var(--txt-3); font-family:var(--mono); font-size:15px; letter-spacing:.11em }
.b5-lead.now path{ stroke:var(--accent) }
.b5-lead.now circle{ fill:var(--accent) }
.b5-lead.now text{ fill:var(--txt) }

/* --- snow, stage 06 ---------------------------------------------------- */
/* It falls and stops existing at the surface. That is the claim the section
   makes, so that is what the motion has to show. */
.b5-snow circle{ fill:#E8F4F6; opacity:0 }
.b5-L[data-s="6"].on .b5-snow circle{ animation:b5fall 2.6s var(--d,0s) linear infinite }
@keyframes b5fall{
  0%   { transform:translate(0,0);                      opacity:0 }
  12%  {                                                opacity:.85 }
  78%  { opacity:.85 }
  100% { transform:translate(var(--x,0), var(--f,170px)); opacity:0 }
}
@media (prefers-reduced-motion:reduce){
  .b5-L, .b5-pour, .b5-lead, .b5-dim4{ transition:none }
  .b5-L[data-s="6"].on .b5-snow circle{ animation:none; opacity:.5 }
}

/* --- the control ------------------------------------------------------- */
/* Fitts §8 · it sits under the drawing it changes, not 800 px below it. Same
   pattern as the surface switch in 04, because it does the same kind of job. */
.b5-ctl{ margin-top:clamp(20px,2.4vw,30px) }
.b5-stops{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0; border-top:1px solid var(--hair);
}
.b5-stop{
  appearance:none; background:transparent; border:0; border-top:2px solid transparent;
  margin-top:-1px; padding:14px 16px 14px 0; min-height:44px; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  transition:border-color .2s ease, color .2s ease, transform .16s ease-out;
}
.b5-stop:active{ transform:scale(.985) }
.b5-stop:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px }
.b5-n{ font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; color:var(--txt-3) }
.b5-t{ font-size:.94rem; line-height:1.3; color:var(--txt-3); transition:color .2s ease }
@media (hover:hover) and (pointer:fine){
  .b5-stop:hover .b5-t{ color:var(--txt-2) }
}
.b5-stop[aria-pressed="true"]{ border-top-color:var(--accent) }
.b5-stop[aria-pressed="true"] .b5-n{ color:var(--accent) }
.b5-stop[aria-pressed="true"] .b5-t{ color:var(--txt) }

/* Goal-Gradient §20 · steps already passed stay marked, so the reader can see
   how much of the build-up is behind them. */
.b5[data-at="2"] .b5-stop:nth-child(-n+2),
.b5[data-at="3"] .b5-stop:nth-child(-n+3),
.b5[data-at="4"] .b5-stop:nth-child(-n+4),
.b5[data-at="5"] .b5-stop:nth-child(-n+5),
.b5[data-at="6"] .b5-stop:nth-child(-n+6){ border-top-color:var(--hair-2) }
.b5 .b5-stop[aria-pressed="true"]{ border-top-color:var(--accent) }

/* fixed height so swapping the caption never moves the page under the reader */
.b5-caps{ position:relative; margin-top:18px; min-height:3.2em }
.b5-cap{
  margin:0; max-width:62ch; font-size:1rem; line-height:1.6; color:var(--txt-2);
}
.b5-cap b{ color:var(--txt); font-weight:500 }

@media (max-width:1023px){
  .b5-head{ grid-template-columns:1fr; align-items:start; gap:18px }
  .b5-stops{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:0 }
  .b5-stop{ padding-right:12px }
  .b5-stop:nth-child(n+4){ border-top:2px solid transparent }
  .b5-caps{ min-height:5em }
}
@media (max-width:639px){
  .b5-stops{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .b5.is-scroll-story .b5-stops{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .b5.is-scroll-story .b5-stop{ padding-block:10px; min-height:54px }
  .b5-caps{ min-height:7em }
  .b5.is-scroll-story .b5-caps{ min-height:6.5em; margin-top:12px }
  .b5.is-scroll-story .b5-ctl{ margin-top:14px }
  .b5.is-scroll-story .b5-t{ font-size:.82rem }
  .b5.is-scroll-story .b5-plate{ overflow:hidden }
  .b5.is-scroll-story .b5-svg{ min-width:0 }
  .b5.is-scroll-story .b5-fig::after{ display:none }
  .b5-plate{ padding:8px 4px }
}

@media (prefers-reduced-motion:reduce){
  .b5.is-scroll-story > .rail{ min-height:0 }
  .b5.is-scroll-story .dw-cb-build{ position:static }
}