/* what · owner P3 · scroll-lit statement + four looping illustrations (runtime, pool, gas, settlement) */
#what { padding-bottom: calc(var(--sec) + clamp(24px, 3vw, 48px)); overflow: clip; }

/* the statement: words light from grey to black as you scroll (what.js); plain black without JS */
#what .what__title { font-size: clamp(44px, 7.4vw, 124px); line-height: .92; max-width: 10.4em; }
#what .what__line { margin-top: clamp(26px, 3vw, 46px); font-stretch: 125%; font-weight: 500; font-size: clamp(24px, 3.05vw, 48px); line-height: 1.08; letter-spacing: -0.03em; max-width: 22.5em; text-wrap: pretty; }
@media (min-width: 900px) { #what .what__line { margin-left: calc(25% + var(--gut) * .25); } }

/* the four facts: one column on phones, two from 600; at desktop a 2x2 of wide plates, the right column set lower */
#what .facts { list-style: none; margin: clamp(76px, 9.5vw, 140px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 72px) var(--gut); }
@media (max-width: 599px) { #what .facts { grid-template-columns: minmax(0, 1fr); gap: 52px; } }
#what .fact { min-width: 0; }
#what .fact__cap { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.2); }
#what .fact__t { font-size: clamp(21px, 1.9vw, 30px); }
#what .fact__d { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 24em; }
@media (min-width: 1024px) {
  #what .facts { row-gap: clamp(64px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 104px); }
  #what .fact:nth-child(even) { position: relative; top: clamp(56px, 6vw, 104px); }
  #what .fact__cap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gut); align-items: start; margin-top: 24px; padding-top: 18px; }
  #what .fact__d { margin-top: 0; padding-top: .3em; }
}

/* illustration plate: a lit studio plate cut on two corners like the mark. The scene is a 320x240 drawing;
   on the wide desktop plates it stays centred and its lanes run on to the plate edges (the plate clips). */
#what .art { --cut: 14px; --vbw: 320px; position: relative; aspect-ratio: 4 / 3; container-type: inline-size; background: linear-gradient(170deg, #e3e3e3 0%, #dadada 55%, #d0d0d0 100%); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); isolation: isolate; }
#what .art__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#what .art__top { z-index: 2; }
@media (min-width: 1024px) {
  #what .art { --cut: 18px; --vbw: 426.667px; aspect-ratio: 16 / 9; }
  #what .art__svg { inset: 0 12.5%; width: 75%; left: 12.5%; }
}
/* labels keep one printed size (12px) whatever the plate scale: font size in scene units = 12px x scene width / plate width */
#what .lbl { font-family: var(--mono); font-size: 11px; font-size: calc(12px * tan(atan2(var(--vbw), 100cqi))); letter-spacing: .08em; text-transform: uppercase; fill: #474747; }
#what .lbl--s { font-size: 10px; font-size: calc(11px * tan(atan2(var(--vbw), 100cqi))); }
/* wide plates: corner labels sit in the plate corners, not the drawing's (one scene unit = 1px before scaling) */
@media (min-width: 1024px) { #what .lbl--l { translate: -53.333px 0; } #what .lbl--r { translate: 53.333px 0; } }

/* 01 runtime: one bytecode, two chains, one playhead */
#what .vm-off { fill: rgba(0, 0, 0, 0.13); }
#what .vm-res { fill: #000; fill-opacity: 0; stroke: #000; stroke-width: 1.5; }
#what .vm-res--b { fill: #6600ff; stroke: #6600ff; }
#what .vm-eq line { stroke: #000; stroke-opacity: .28; stroke-width: 2; }
#what .vm-head line { stroke: #000; stroke-width: 1.5; }
#what .vm-head path { fill: #000; }

/* 02 pool: coins pass the violet edge into the frost */
#what .pool-lane { stroke: rgba(0, 0, 0, 0.18); stroke-dasharray: 2 5; }
#what .pc--v circle { fill: #6600ff; }
#what .pc--s circle { fill: #000; }
#what .pc text { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .03em; fill: #fff; text-anchor: middle; }
#what .pool__frost { position: absolute; inset: 0; z-index: 1; clip-path: polygon(40% 0, 100% 0, 100% 100%, 55% 100%); background-color: rgba(238, 238, 238, 0.42); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); -webkit-backdrop-filter: blur(7px) saturate(.8); backdrop-filter: blur(7px) saturate(.8); }
#what .pool-edge { fill: #6600ff; }
@media (min-width: 1024px) { #what .pool__frost { left: 12.5%; clip-path: polygon(34.29% 0, 100% 0, 100% 100%, 47.14% 100%); } }
#what .pool-proof text { font-family: var(--mono); font-size: 10.5px; font-size: calc(12px * tan(atan2(var(--vbw), 100cqi))); letter-spacing: .04em; fill: #000; }
#what .pool-proof path { fill: none; stroke: #6600ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 03 gas: every transaction takes a $VEYL coin before it runs */
#what .gas-drop { stroke: rgba(0, 0, 0, 0.22); stroke-dasharray: 2 4; }
#what .gas-hop { fill: none; stroke: #000; stroke-width: 1.5; stroke-linejoin: round; }
#what .gas-belt line { stroke: #000; stroke-width: 1.5; }
#what .gas-ticks path { stroke: rgba(0, 0, 0, 0.3); stroke-width: 1.2; }
#what .tx-b { fill: #e9e9e9; stroke: #000; stroke-width: 1.5; stroke-linejoin: round; }
#what .tx-l { fill: none; stroke: rgba(0, 0, 0, 0.26); stroke-width: 2.5; stroke-linecap: round; transition: stroke .35s; }
#what .tx--paid .tx-l { stroke: #000; }
#what .tx-slot { fill: none; stroke: rgba(0, 0, 0, 0.45); stroke-width: 1.2; stroke-dasharray: 2.4 2.4; }

/* 04 settlement: blocks fill a batch, the batch lands on Solana */
#what .st-lane { stroke: rgba(0, 0, 0, 0.22); }
#what .st-blk rect { fill: #6600ff; }
#what .st-box { fill: none; stroke: #6600ff; stroke-width: 1.5; }
#what .st-fill { fill: #6600ff; }
#what .st-path { stroke: rgba(0, 0, 0, 0.22); stroke-dasharray: 2 4; }
#what .st-sol-b, #what .st-drop-k { fill: #000; }
#what .st-drop-v { fill: #6600ff; }
#what .st-root { fill: #a26bff; }
#what .gas-ring { fill: none; stroke: #6600ff; stroke-width: 1.5; }