/* V21 TECH ROWS — principle rows: motion box on alternating sides + large light type + whitespace (Tendril manner, principle only). */
.mf-rows { display: grid; gap: clamp(64px, 9vw, 150px); margin-top: clamp(64px, 9vw, 140px); }
.mr { display: grid; gap: 22px; align-items: center; }
.mr-box { position: relative; aspect-ratio: 4 / 5; background: #FFFFFF; border: 1px solid rgba(23,25,20,.14); overflow: hidden; box-shadow: 0 0 110px -30px color-mix(in srgb, var(--amber) 30%, transparent); }
.mr-in { position: absolute; inset: 0; display: grid; place-items: center; padding: 14% 10% 10%; will-change: transform; transition: transform .5s var(--ease); }
.mr-tag { position: absolute; left: 14px; top: 12px; color: var(--amber); font-size: 10px; z-index: 2; }
.mr-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--red); margin-right: 8px; }
.mr-in svg { width: 100%; height: auto; overflow: visible; max-height: 100%; }
.mr-cap { margin: 10px 0 0; font-size: 12.5px; color: var(--mute); }
.mr-t .lb { color: var(--amber); } .mr-t h3 { margin: 10px 0 14px; font: 200 clamp(34px, 4.8vw, 72px)/1.04 var(--f); letter-spacing: -.05em; } .mr-t p { margin: 0; color: var(--mute); font-size: 15px; max-width: 42ch; }
.mr-t .mf-tech { margin-top: 26px; }
@media (min-width: 900px) {
  .mr { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .mr-l .mr-b { grid-column: 2 / span 4; } .mr-l .mr-t { grid-column: 7 / span 5; }
  .mr-r .mr-b { grid-column: 8 / span 4; order: 2; } .mr-r .mr-t { grid-column: 2 / span 6; order: 1; }
  .mr:nth-child(2) .mr-b { margin-top: 6vw; } .mr:nth-child(3) .mr-b { margin-top: -2vw; }
  .mr-box .mr-in { transform: perspective(900px) rotateY(calc(var(--px, 0) * 6deg)) rotateX(calc(var(--py, 0) * -5deg)); }
}
@media (max-width: 899px) { .mr-r .mr-b { margin-left: 14%; } .mr-l .mr-b { margin-right: 14%; } }
/* motion 1: rings converge into the form, hold, drift apart */
.m-ring { fill: none; stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; animation: mring 8s cubic-bezier(.65,0,.35,1) infinite paused; }
.m-sym { fill: var(--amber); opacity: 0; animation: msym 8s ease infinite paused; }
@keyframes mring { 0%, 6% { transform: translate(var(--dx), var(--dy)); opacity: .45; } 38%, 66% { transform: none; opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: .45; } }
@keyframes msym { 0%, 34% { opacity: 0; } 46%, 64% { opacity: .85; } 78%, 100% { opacity: 0; } }
/* motion 2: panes open into the cross; the five steps highlight in turn */
.m-pane { fill: color-mix(in srgb, var(--ink) 10%, transparent); stroke: var(--ink); stroke-width: .5; animation: mpane 7s cubic-bezier(.65,0,.35,1) infinite paused; }
.m-light { fill: #fff; opacity: 0; animation: mlight 7s ease infinite paused; }
@keyframes mpane { 0%, 10% { transform: translate(var(--dx), var(--dy)); } 40%, 70% { transform: none; } 100% { transform: translate(var(--dx), var(--dy)); } }
@keyframes mlight { 0%, 14% { opacity: 0; } 42%, 68% { opacity: .95; } 100% { opacity: 0; } }
.m-steps { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; } .m-steps span { color: rgba(23,25,20,.5); animation: mstep 7s linear infinite paused; animation-delay: calc(var(--i) * 1.4s - 1.4s); }
@keyframes mstep { 0%, 18% { color: var(--amber); } 20%, 100% { color: rgba(23,25,20,.5); } }
/* motion 3: three cores -> one result, with the real SHA ledger */
.lg { position: absolute; inset: 0; padding: 14% 8% 6%; display: grid; grid-template-rows: auto 1fr auto 1.5fr; gap: 6px; font-size: 10px; }
.lg-chips { display: flex; justify-content: space-between; gap: 6px; } .lg-chips span { border: 1px solid rgba(23,25,20,.3); padding: 5px 7px; letter-spacing: .08em; font-size: 9.5px; animation: lgc 6s ease infinite paused; } .lg-chips span:nth-child(2) { animation-delay: .5s; } .lg-chips span:nth-child(3) { animation-delay: 1s; }
@keyframes lgc { 0%, 100% { border-color: rgba(23,25,20,.3); } 20% { border-color: var(--red); color: var(--red); } 40% { color: inherit; border-color: rgba(23,25,20,.3); } }
.lg-flow { width: 100%; height: 100%; } .lg-flow path { fill: none; stroke: rgba(23,25,20,.4); stroke-width: .6; stroke-dasharray: 3 2; animation: lgf 3s linear infinite paused; vector-effect: non-scaling-stroke; } @keyframes lgf { to { stroke-dashoffset: -10; } }
.lg-res { display: flex; align-items: center; gap: 10px; justify-content: center; } .lg-res i { width: 16px; height: 16px; background: var(--red); transform: rotate(45deg); animation: lgp 3s ease-in-out infinite paused; } .lg-res b { font-weight: 600; letter-spacing: .16em; font-size: 10px; } @keyframes lgp { 50% { transform: rotate(45deg) scale(1.35); } }
.lg-list { overflow: hidden; border-top: 1px solid rgba(23,25,20,.16); position: relative; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.lg-in { animation: lgs 22s linear infinite paused; } .lg-in p { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; margin: 0; padding: 5px 0; border-bottom: 1px solid rgba(23,25,20,.08); color: rgba(23,25,20,.8); font-size: 9.5px; max-width: none; } .lg-in i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lg-in b { font-weight: 400; color: var(--amber); font-variant-numeric: tabular-nums; } .lg-in em { font-style: normal; color: var(--mute); font-size: 8.5px; }
@keyframes lgs { to { transform: translateY(-50%); } }
.mr-in.play .m-ring, .mr-in.play .m-sym, .mr-in.play .m-pane, .mr-in.play .m-light, .mr-in.play .m-steps span, .mr-in.play .lg-chips span, .mr-in.play .lg-flow path, .mr-in.play .lg-res i, .mr-in.play .lg-in { animation-play-state: running; }
/* reduced motion: show each box in its resolved state */
.mr-in.still .m-ring, .mr-in.still .m-pane { animation: none; transform: none; opacity: 1; } .mr-in.still .m-sym { animation: none; opacity: .85; } .mr-in.still .m-light { animation: none; opacity: .95; } .mr-in.still .lg-in, .mr-in.still .lg-chips span, .mr-in.still .lg-flow path, .mr-in.still .lg-res i, .mr-in.still .m-steps span { animation: none; }
@media (prefers-reduced-motion: reduce) { .m-ring, .m-pane { animation: none; transform: none; opacity: 1; } .m-sym { animation: none; opacity: .85; } .m-light { animation: none; opacity: .95; } .lg-in, .lg-chips span, .lg-flow path, .lg-res i, .m-steps span { animation: none; } }