/* =====================================================================
   THE FOUNDER — shared, self-contained block
   ---------------------------------------------------------------------
   One signed founder section, identical on every interior page
   (services / projects / lab). Lifted verbatim from the contact page so
   the plate, the letter and the self-drawing signature render and behave
   the same everywhere. Reveal is driven by /founder.js, which toggles
   .is-in on the block's .io-rise / .rule-x elements — so this file is
   independent of each page's own scroll-reveal controller.

   Safe to load globally: services / projects carry no other .io-rise or
   .rule-x, and lab's definitions are byte-identical to these.
   ===================================================================== */

/* scroll-staged reveal — hidden pre-state gated on html.js so no copy is
   ever trapped behind an unfired reveal (the watchdog drops .js on fail) */
.io-rise {
  transition:
    opacity 1.1s ease,
    transform 1.1s cubic-bezier(0.16, 0.6, 0.2, 1),
    filter 1.1s ease;
}
html.js .io-rise:not(.is-in) {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
}
.io-rise.d1 { transition-delay: 0.1s; }
.io-rise.d2 { transition-delay: 0.2s; }
.io-rise.d3 { transition-delay: 0.3s; }

/* section separator that runs the current once, on arrival */
.rule-x {
  position: relative;
  height: 1px;
  margin: clamp(56px, 9vh, 84px) 0;
  border: 0;
  background: var(--line);
  overflow: hidden;
}
.rule-x::after {
  content: '';
  position: absolute;
  top: 0;
  left: -22%;
  width: 22%;
  height: 100%;
  background: linear-gradient(to right, transparent, #cfd6dd, transparent);
  opacity: 0;
}
.rule-x.is-in::after { animation: ruleCurrent 1.2s cubic-bezier(0.5, 0, 0.3, 1) 1 forwards; }
@keyframes ruleCurrent {
  0% { left: -22%; opacity: 1; }
  100% { left: 102%; opacity: 1; }
}

/* section header — mono label left, quiet spec meta right */
.founder-block .sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 26px;
}
.founder-block .sec-head .section-label { margin: 0; }
.founder-block .sec-head .sec-meta {
  font: 400 9px var(--f-mono);
  letter-spacing: 0.16em;
  color: var(--txt-4);
  white-space: nowrap;
}
@media (max-width: 560px) { .founder-block .sec-head .sec-meta { display: none; } }

/* the form/plate panels carry a ref stamp (site.css only stamps cards) */
.founder-block .panel > .ref {
  position: absolute;
  top: 12px;
  right: 20px;
  font: 400 9px var(--f-mono);
  letter-spacing: 0.12em;
  color: var(--txt-4);
}

/* ---------------------------------------------------------------------
   THE FOUNDER — the plate and the letter, signed
   --------------------------------------------------------------------- */
.ct-founder {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 860px) { .ct-founder { grid-template-columns: 1fr; } }

/* the plate — notched panel, corner-cut brackets at the open corners */
.ct-plate { padding: 28px 26px 26px; }
.ct-plate::before,
.ct-plate::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid #242c37;
  pointer-events: none;
}
.ct-plate::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.ct-plate::after { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }
.ct-plate .dl { grid-template-columns: 1fr; gap: 0; }
.ct-plate .dl dt {
  padding: 14px 0 6px;
  border-top: 1px solid var(--line);
}
.ct-plate .dl dd {
  padding: 0 0 14px;
  font: 500 11px var(--f-mono);
  letter-spacing: 0.14em;
  color: var(--txt);
}

/* the letter */
.ct-letter { padding: clamp(30px, 4.5vw, 50px) clamp(26px, 5vw, 58px) 40px; }
.ct-letter-head {
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font: 500 10px var(--f-mono);
  letter-spacing: 0.2em;
  color: var(--txt-3);
}
.ct-letter > p:not(.ct-letter-head) {
  margin: 0 0 18px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--txt-2);
}

/* the signature — drawn by hand when the letter arrives, then still */
.ct-sig { margin-top: 34px; }
.ct-sig-svg {
  display: block;
  width: min(300px, 82%);
  height: auto;
  margin-left: -6px;
}
.ct-sig-svg .s {
  fill: none;
  stroke: #dfe5ec;
  stroke-width: 1.3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ct-sig-svg .s3 { stroke: #97a1af; stroke-width: 1; }
.ct-sig-dot { fill: #eef2f6; stroke: none; }
html.js .ct-letter .ct-sig-svg .s {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
html.js .ct-letter .ct-sig-svg .s1 { transition: stroke-dashoffset 1.25s cubic-bezier(0.4, 0, 0.3, 1) 0.2s; }
html.js .ct-letter .ct-sig-svg .s2 { transition: stroke-dashoffset 1.05s cubic-bezier(0.4, 0, 0.3, 1) 1.35s; }
html.js .ct-letter .ct-sig-svg .s3 { transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.3, 1) 2.3s; }
html.js .ct-letter .ct-sig-dot {
  opacity: 0;
  transition: opacity 0.6s ease 2.7s;
}
html.js .ct-letter.is-in .ct-sig-svg .s { stroke-dashoffset: 0; }
html.js .ct-letter.is-in .ct-sig-dot { opacity: 1; }
.ct-sig-name {
  margin: 12px 0 0;
  font: 500 9.5px var(--f-mono);
  letter-spacing: 0.2em;
  color: var(--txt-2);
}
.ct-sig-loc {
  margin: 7px 0 0;
  font: 400 9px var(--f-mono);
  letter-spacing: 0.22em;
  color: var(--txt-4);
}

/* Reduced motion — freeze at the final, legible state: signature signed */
@media (prefers-reduced-motion: reduce) {
  .ct-sig-svg *,
  .ct-sig-dot {
    animation: none !important;
    transition: none !important;
  }
  html.js .ct-letter .ct-sig-svg .s { stroke-dashoffset: 0; }
  html.js .ct-letter .ct-sig-dot { opacity: 1; }
  .rule-x.is-in::after { animation: none; }
}