/* ===================================================================== FPGA layer Four pieces, in the order they come into play: 1. Configuration overlay — the page comes up like a device, then hands off to the content. Loading screen only; nothing of it survives. 2. Routed fabric — a live CLB lattice behind the hero. 3. Copper schematic — traces routed down both gutters to every card. 4. Die floorplan — the page mapped as placed IP blocks. Each piece is self-contained and no-ops if its markup is absent. Motion is suppressed wherever the reader has asked for that. ===================================================================== */ /* ===================================================================== 1. Configuration overlay ===================================================================== */ /* Set by an inline script in so content is already hidden at first paint — otherwise the page flashes before the overlay lands on top of it. That same inline script clears the class on a timer, so a failed or blocked fpga.js can never leave the page blank. */ .cfg-pending .hero, .cfg-pending main .section, .cfg-pending .site-footer { opacity: 0; } .cfg { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: #050706; font-family: var(--font-mono); transition: opacity 0.5s ease, visibility 0.5s ease; } .cfg.is-done { opacity: 0; visibility: hidden; } .cfg__panel { width: min(560px, 100%); display: flex; flex-direction: column; gap: 16px; } .cfg__head { display: flex; align-items: baseline; gap: 10px; font-size: 0.7rem; color: var(--text-muted); } .cfg__dev { color: var(--copper-bright); letter-spacing: 0.04em; } .cfg__mode { margin-left: auto; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.58rem; } .cfg__stream { height: 132px; overflow: hidden; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02); font-size: 0.66rem; line-height: 1.75; color: var(--text-muted); white-space: pre; } .cfg__stream b { color: var(--solder-green); font-weight: 400; } .cfg__stream i { color: var(--copper-bright); font-style: normal; } .cfg__bar { position: relative; height: 3px; border-radius: 3px; background: rgba(214, 160, 104, 0.16); overflow: hidden; } .cfg__barfill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--copper-dim), var(--copper-bright)); } .cfg__foot { display: flex; align-items: center; gap: 16px; font-size: 0.62rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .cfg__skip { margin-left: auto; padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; font-family: inherit; font-size: 0.6rem; color: var(--text-secondary); cursor: pointer; } .cfg__skip:hover { border-color: var(--copper); color: var(--copper-bright); } /* Configuration pins live only inside the overlay — once the page is up there is nothing left to report. */ .cfg .pins { display: flex; align-items: center; gap: 12px; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .cfg .pin { display: flex; align-items: center; gap: 5px; } .cfg .pin__led { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .cfg .pin.is-high .pin__led { border-color: var(--solder-green); background: var(--solder-green); box-shadow: 0 0 8px 1px rgba(47, 191, 120, 0.7); } .cfg .pin.is-busy .pin__led { border-color: var(--copper-bright); background: var(--copper-bright); box-shadow: 0 0 8px 1px rgba(255, 176, 102, 0.7); } /* Sections come up one configuration region at a time. */ .cfg-stage { opacity: 0; transform: translateY(10px); } .cfg-stage.is-configured { opacity: 1; transform: none; transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out); } /* ===================================================================== 2. Routed fabric ===================================================================== */ .hero { position: relative; } .fabric { position: absolute; top: -18px; bottom: -18px; left: 50%; width: 100vw; transform: translateX(-50%); z-index: 0; pointer-events: none; /* Keep the fabric off the type: transparent through the middle where the name and tagline sit, opaque toward the edges, faded at every border so it never ends on a hard line. */ -webkit-mask-image: radial-gradient(ellipse 42% 56% at 50% 52%, transparent 0%, transparent 42%, #000 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 42% 56% at 50% 52%, transparent 0%, transparent 42%, #000 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .fabric canvas { display: block; width: 100%; height: 100%; } .hero > *:not(.fabric) { position: relative; z-index: 1; } /* The avatar picks up die-corner brackets, so it reads as the part being routed to rather than a photo dropped on a pattern. */ .hero__avatar::after { content: ""; position: absolute; inset: -7px; border-radius: calc(var(--radius-md) + 5px); pointer-events: none; background: linear-gradient(var(--copper), var(--copper)) 0 0 / 12px 1px no-repeat, linear-gradient(var(--copper), var(--copper)) 0 0 / 1px 12px no-repeat, linear-gradient(var(--copper), var(--copper)) 100% 0 / 12px 1px no-repeat, linear-gradient(var(--copper), var(--copper)) 100% 0 / 1px 12px no-repeat, linear-gradient(var(--copper), var(--copper)) 0 100% / 12px 1px no-repeat, linear-gradient(var(--copper), var(--copper)) 0 100% / 1px 12px no-repeat, linear-gradient(var(--copper), var(--copper)) 100% 100% / 12px 1px no-repeat, linear-gradient(var(--copper), var(--copper)) 100% 100% / 1px 12px no-repeat; opacity: 0.55; } /* Tech chips read as fabric cells: a configuration bit that lights when the cell is selected. */ .chip { position: relative; padding-left: 18px; transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease; } .chip::before { content: ""; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 1px; background: var(--copper-dim); opacity: 0.5; transition: background-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } .chip:hover { border-color: var(--line-strong); color: var(--text-primary); background: rgba(217, 138, 74, 0.09); } .chip:hover::before { opacity: 1; background: var(--copper-bright); box-shadow: 0 0 8px 1px rgba(255, 176, 102, 0.75); } /* ===================================================================== 3. Copper schematic ===================================================================== */ .trace-layer { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; display: none; /* switched on once the gutters are wide enough to route in */ } .trace-layer.is-routed { display: block; } .trace-layer .spine { fill: none; stroke: rgba(214, 160, 104, 0.2); stroke-width: 1.4; stroke-linecap: round; } .trace-layer .stub { fill: none; stroke: rgba(214, 160, 104, 0.16); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; transition: stroke 0.25s ease; } .trace-layer .stub.is-live { stroke: rgba(255, 176, 102, 0.7); } .trace-layer .via { fill: rgba(6, 9, 7, 0.9); stroke: rgba(214, 160, 104, 0.45); stroke-width: 1.2; } .trace-layer .pad { fill: rgba(214, 160, 104, 0.3); transition: fill 0.2s ease; } .trace-layer .pad.is-live { fill: var(--copper-bright); } .trace-layer .head { fill: var(--copper-bright); } .trace-layer .clk { fill: var(--solder-green); } /* Cards sit above the copper and light their heading when probed. */ .entry, .project, .skill-group { position: relative; z-index: 1; } .entry.is-live .entry__role, .project.is-live .project__title, .skill-group.is-live .skill-group__label { color: var(--copper-bright); transition: color 0.2s ease; } /* ===================================================================== 4. Die floorplan ===================================================================== */ .fp { position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 60; width: 212px; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-secondary); } .fp__toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(6, 9, 7, 0.92); backdrop-filter: blur(10px); font-family: inherit; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .fp__toggle:hover { border-color: var(--copper); color: var(--copper-bright); } .fp__toggle svg { width: 13px; height: 13px; flex: none; transition: transform 0.25s var(--ease-out); } .fp.is-open .fp__toggle svg { transform: rotate(180deg); } .fp__pct { margin-left: auto; color: var(--copper-bright); font-variant-numeric: tabular-nums; letter-spacing: 0; } .fp__die { position: relative; margin-bottom: 8px; padding: 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(6, 9, 7, 0.94); backdrop-filter: blur(10px); box-shadow: var(--shadow-lift); transform-origin: bottom right; transition: opacity 0.22s ease, transform 0.22s var(--ease-out); } .fp:not(.is-open) .fp__die { opacity: 0; transform: scale(0.94) translateY(6px); pointer-events: none; } /* I/O banks: pad rows ringing the die */ .fp__die::before { content: ""; position: absolute; inset: 5px; pointer-events: none; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--copper-dim) 0 3px, transparent 3px 8px) top / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--copper-dim) 0 3px, transparent 3px 8px) bottom / 100% 1px no-repeat, repeating-linear-gradient(180deg, var(--copper-dim) 0 3px, transparent 3px 8px) left / 1px 100% no-repeat, repeating-linear-gradient(180deg, var(--copper-dim) 0 3px, transparent 3px 8px) right / 1px 100% no-repeat; opacity: 0.5; } .fp__blocks { position: relative; display: flex; flex-direction: column; gap: 3px; padding-left: 14px; } /* the routing spine every block taps off */ .fp__blocks::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: linear-gradient( 180deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent ); } .fp__spark { position: absolute; left: 3.5px; width: 4px; height: 4px; border-radius: 50%; background: var(--copper-bright); box-shadow: 0 0 8px 1px rgba(255, 176, 102, 0.8); transition: top 0.45s var(--ease-out); pointer-events: none; } .fp__block { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; min-height: 20px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-inset); font-family: inherit; font-size: 0.6rem; color: var(--text-muted); text-align: left; cursor: pointer; overflow: hidden; transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease; } /* stub connecting each block back to the spine */ .fp__block::after { content: ""; position: absolute; left: -9px; top: 50%; width: 9px; height: 1px; background: var(--line-strong); } .fp__block:hover { border-color: var(--line-strong); color: var(--text-primary); } .fp__block.is-current { border-color: var(--copper); color: var(--copper-bright); background: rgba(217, 138, 74, 0.14); } /* how far through this block you have read */ .fp__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(217, 138, 74, 0.18); pointer-events: none; transition: width 0.2s linear; } .fp__name { position: relative; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fp__count { position: relative; font-variant-numeric: tabular-nums; opacity: 0.75; } .fp__legend { display: flex; justify-content: space-between; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .fp__legend b { color: var(--copper-bright); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; } @media (max-width: 760px) { .fp { width: 176px; } } /* ===================================================================== Print and reduced motion ===================================================================== */ @media print { .fp, .trace-layer, .fabric, .cfg { display: none !important; } .cfg-stage { opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { .cfg, .cfg-stage, .cfg .pin__led, .chip, .chip::before, .trace-layer .stub, .trace-layer .pad, .fp__die, .fp__spark, .fp__fill, .fp__toggle svg { transition: none; } .cfg-stage { opacity: 1; transform: none; } }