/* ============================================================
   MOTION, shared animation layer for the sections below the hero.
   Kept in one file so timing can be tuned in a single place.
   Elements opt in with data-anim; reveal.js adds .is-in.
   ============================================================ */

/* ---------- base states ---------- */
[data-anim]{
  opacity:0;
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    filter .9s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-anim="up"]     { transform:translateY(34px); }
[data-anim="left"]   { transform:translateX(-38px); }
[data-anim="right"]  { transform:translateX(38px); }
[data-anim="scale"]  { transform:scale(.94); }
[data-anim="blur"]   { filter:blur(10px); transform:translateY(20px); }
[data-anim="clip"]   { clip-path:inset(0 0 100% 0); transform:translateY(12px); }

[data-anim].is-in{
  opacity:1;
  transform:none;
  filter:none;
  clip-path:inset(0 0 0 0);
}

/* ---------- rule that draws itself in ---------- */
.rule-draw{
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms);
}
.rule-draw.is-in{transform:scaleX(1)}

/* ---------- hover lifts ---------- */
.lift{
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.lift:hover{transform:translateY(-4px)}

/* Problem ledger: the row leans in and its key lights up */
.ledger__row{transition:background .45s var(--ease), padding-left .45s var(--ease)}
.ledger__row:hover{padding-left:.75rem}

/* Systems rows: the mock tilts very slightly toward the reader */
.sys__demo{
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  transform-style:preserve-3d;
}
.sys:hover .sys__demo{transform:translateY(-6px)}

/* Process steps: the node fills and the copy rises */
.step{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.step:hover{transform:translateY(-3px)}

/* Metrics: a hairline sweeps under the number as it counts */
.metric{position:relative;overflow:hidden}
.metric::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--bronze-lite);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0ms);
}
.metric.is-in::after{transform:scaleX(1)}

/* Case rows: the outcome figure lifts a little later than the rest */
.case:hover .case__big{transform:translateY(-2px)}
.case__big{transition:transform .5s cubic-bezier(.22,1,.36,1)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  [data-anim],[data-anim].is-in{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
  .rule-draw{transform:none;transition:none}
  .lift:hover,.step:hover,.sys:hover .sys__demo{transform:none}
  .metric::after{transform:scaleX(1);transition:none}
}

/* ------------------------------------------------------------
   Narrow screens: a horizontal entrance offset sticks out past the
   viewport before the element reveals, which creates a real sideways
   scroll on the page. Enter vertically instead.
   ------------------------------------------------------------ */
@media (max-width: 900px){
  [data-anim="left"],
  [data-anim="right"]{ transform: translateY(28px); }
}

/* Belt and braces: sections never leak horizontally */
.section, main{ overflow-x: clip; }

/* ============================================================
   EDITORIAL CARDS, the what / who / how under the founder letter
   ============================================================ */
.founder__points.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.5rem);
  border-top:0;
  padding-top:clamp(2rem,4vw,3rem);
}
.founder__points.cards .card{
  position:relative;
  padding:clamp(1.5rem,2.4vw,2rem);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  transition:background .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease);
}
.founder__points.cards .card:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(199,164,114,.35);
  transform:translateY(-4px);
}
/* the editorial rule that gives each card its heading weight */
.founder__points.cards .card::before{
  content:"";position:absolute;left:clamp(1.5rem,2.4vw,2rem);top:0;
  width:34px;height:2px;background:var(--bronze-lite);
}
.founder__points.cards .founder__point-t{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,1.6vw,1.3rem);
  font-weight:600;letter-spacing:-.02em;
  color:var(--on-dark);margin-bottom:.7rem;
}
.founder__points.cards .founder__point-d{
  font-size:var(--fs-sm);line-height:1.65;color:var(--on-dark-2);
}
@media(max-width:900px){ .founder__points.cards{grid-template-columns:1fr} }

/* ============================================================
   PROBLEM LEDGER, each line given real emphasis
   ============================================================ */
.ledger__row{
  position:relative;
  border-left:2px solid transparent;
  padding-left:clamp(1rem,2vw,1.5rem);
  transition:border-color .45s var(--ease), background .45s var(--ease);
}
.ledger__row:hover{
  border-left-color:var(--bronze);
  background:linear-gradient(90deg, rgba(150,119,75,.06), rgba(150,119,75,0) 60%);
}
.ledger__k{
  font-weight:600;
  color:var(--bronze) !important;
  font-size:var(--fs-label);
  letter-spacing:.14em;
}
.ledger__what{
  font-weight:600 !important;
  color:var(--text);
}
/* the cost line is the point, so it stops being a footnote */
.ledger__cost b{
  font-weight:600;
  color:var(--text);
  background:linear-gradient(180deg, transparent 62%, rgba(199,164,114,.32) 62%);
  padding-bottom:1px;
}

/* ============================================================
   PROCESS, stages visibly connected
   ============================================================ */
.steps{ position:relative; }
.step{ position:relative; }
/* the line running between one stage and the next */
.step:not(:last-child)::after{
  content:"";position:absolute;
  top:26px;left:calc(52px + .75rem);right:calc(-1 * clamp(1rem,2.4vw,2rem));
  height:1px;
  background:linear-gradient(90deg, var(--line-strong), rgba(207,201,190,.25));
}
.step__icon{ position:relative; z-index:1; }
@media(max-width:1000px){
  .step:not(:last-child)::after{
    top:52px;left:25px;right:auto;bottom:-1.4rem;width:1px;height:auto;
    background:linear-gradient(180deg, var(--line-strong), rgba(207,201,190,.25));
  }
}