/* Deliberate visual overload. The escape hatch always stays above it. */
body { overflow-x:clip; }
.noise-layer { position:fixed;inset:94px 0 0;z-index:40;overflow:hidden;pointer-events:none;contain:layout paint; }
.noise-piece { position:absolute;will-change:transform; }
.noise-feedback { position:absolute;left:0;top:calc(100% + 9px);max-width:240px;background:#111;color:#fff200;border:1px solid #fff200;padding:7px 9px;font:9px/1.4 'IBM Plex Mono',monospace;white-space:normal;opacity:0;visibility:hidden;translate:0 8px;transition:opacity .2s,translate .25s; }
.noise-piece[data-state=inspecting],.noise-piece[data-state=avoiding] { z-index:5; }
.noise-piece[data-state=inspecting] .noise-feedback,.noise-piece[data-state=avoiding] .noise-feedback { opacity:1;visibility:visible;translate:0 0; }
.noise-piece[data-state=inspecting][data-behavior=unfold] .noise-drift { outline:3px solid #fff200;outline-offset:5px; }
.noise-persona[data-state=inspecting] .persona-line i { background:#fff200;color:#111; }
.noise-persona[data-state=inspecting] .ux-meter i { background:#111; }
.noise-job[data-state=inspecting] b { background:#111;color:#fff200;padding:2px; }
.noise-wireframe[data-state=inspecting] .wire-layout i { background:#fff200; }
.noise-wireframe[data-state=inspecting] .wire-layout i:last-child { background:#111; }
.noise-journey svg path:first-child { stroke-dasharray:260;stroke-dashoffset:0; }
.noise-journey[data-state=inspecting] svg path:first-child { stroke-dashoffset:calc(180 * (1 - var(--attention,0)));stroke-width:4; }
.noise-matrix[data-state=inspecting] .ux-matrix span { background:#fff;color:#111; }
.noise-matrix[data-state=inspecting][data-quadrant="0"] .ux-matrix span:nth-child(1),.noise-matrix[data-state=inspecting][data-quadrant="1"] .ux-matrix span:nth-child(2),.noise-matrix[data-state=inspecting][data-quadrant="2"] .ux-matrix span:nth-child(3),.noise-matrix[data-state=inspecting][data-quadrant="3"] .ux-matrix span:nth-child(4) { background:#111;color:#fff200; }
[data-behavior=scan][data-state=inspecting] .wire-layout { background:linear-gradient(0deg,transparent calc(var(--attention-y)*100% - 5%),#fff200 calc(var(--attention-y)*100% - 5%) calc(var(--attention-y)*100% + 5%),transparent calc(var(--attention-y)*100% + 5%)); }
[data-behavior=scan][data-state=inspecting] .wire-layout i { background:transparent; }
[data-behavior=highlight][data-state=inspecting] p { background:linear-gradient(90deg,#fff200 calc(var(--attention)*100%),transparent 0); }
[data-behavior=spotlight][data-state=inspecting] .noise-drift { color:#fff200;background:radial-gradient(circle at calc(var(--attention)*100%) 50%,#555 0,#111 55%); }
[data-behavior=pin][data-state=inspecting] .noise-drift { outline:1px dashed #111;outline-offset:8px; }
[data-behavior=tether][data-state=inspecting] .noise-drift { box-shadow:12px 0 0 #fff200!important; }
.expressive-hint { position:fixed;top:104px;left:4.2%;z-index:41;padding:7px 10px;background:#111;color:#fff200;font:9px/1.4 'IBM Plex Mono',monospace;pointer-events:none; }
[data-mode=simple] .expressive-hint,[data-transition] .expressive-hint { display:none; }
[data-transition] .noise-feedback { visibility:hidden; }
.noise-drift { animation:unnecessary-float calc(4s + var(--n)*.3s) ease-in-out infinite alternate;animation-delay:calc(var(--n)*-.7s); }
.noise-piece[data-free=true] .noise-drift { animation:none; }
.noise-label .noise-drift { padding:11px 15px;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.1em;white-space:nowrap;background:#fff200d9;border:1px solid #111;box-shadow:6px 6px 0 #111;rotate:var(--turn); }
.noise-label:nth-child(3n) .noise-drift { background:#111;color:#fff200; }
.noise-persona,.noise-job,.noise-journey,.noise-wireframe,.noise-sticky,.noise-matrix { width:218px; }
.noise-piece:not(.noise-label) .noise-drift { background:#ffffffec;border:1px solid #111;padding:15px;box-shadow:6px 6px 0 #111;rotate:var(--turn); }
.noise-piece small { display:block;font:9px/1.4 'IBM Plex Mono',monospace;letter-spacing:.04em;margin-bottom:12px; }
.noise-piece strong { display:block;font:600 20px/1.08 'DM Sans',sans-serif;letter-spacing:-.04em; }
.noise-piece p { font:12px/1.5 'DM Sans',sans-serif;margin-top:9px; }
.noise-piece p b { font:9px 'IBM Plex Mono',monospace; }
.noise-piece em { display:block;font:9px/1.5 'IBM Plex Mono',monospace;font-style:normal;margin-top:12px; }
.noise-persona .persona-line { display:flex;gap:10px;align-items:center; }
.persona-line i { display:grid;place-items:center;background:#111;color:#fff200;min-width:37px;height:42px;font:24px 'DM Sans',sans-serif; }
.ux-meter { display:flex;gap:4px;margin-top:12px; }.ux-meter i { height:5px;flex:1;background:#ddd; }.ux-meter i:first-child { background:#111; }
.noise-piece.noise-job .noise-drift,.noise-piece.noise-sticky .noise-drift { background:#fff200eb; }
.noise-cta .noise-drift { background:#111!important;color:#fff200;min-width:180px;border:1px solid #fff200!important;box-shadow:6px 6px 0 #fff200!important; }
.noise-cta:nth-child(odd) .noise-drift { background:#fff200!important;color:#111;border-color:#111!important;box-shadow:6px 6px 0 #111!important; }
.noise-cta strong { font-size:29px; }
.noise-cta small { margin-bottom:7px; }
.journey-steps { display:flex;align-items:center;justify-content:space-between;margin-top:15px;font:8px 'IBM Plex Mono',monospace; }
.noise-journey svg { width:100%;height:45px;margin-top:8px;color:#111; }
.wire-layout { border:1px solid #111;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px; }
.wire-layout i { height:25px;border:1px solid #777;background:linear-gradient(30deg,transparent 48%,#888 49% 50%,transparent 51%); }
.wire-layout i:first-child { grid-column:1/-1;height:10px;background:#111; }
.wire-layout i:last-child { grid-column:2/4;height:10px;background:#fff200; }
.ux-matrix { display:grid;grid-template-columns:1fr 1fr;border:1px solid #111; }
.ux-matrix span { display:grid;place-items:center;height:48px;font:9px 'IBM Plex Mono',monospace;border:1px solid #111; }
.ux-matrix span:first-child { background:#fff200; }
.noise-grid .noise-drift { width:180px;height:130px;border:1px solid #1119;background:repeating-linear-gradient(90deg,transparent 0 14px,#1116 14px 15px),repeating-linear-gradient(0deg,transparent 0 14px,#1116 14px 15px);rotate:var(--turn); }
.noise-cross .noise-drift { font:100 110px/1 Arial,sans-serif;animation:orbit 13s linear infinite; }
.noise-outline .noise-drift { width:150px;height:150px;border:2px solid #111;box-shadow:13px 13px 0 -1px #fff20055,13px 13px 0 #111;rotate:var(--turn); }
.noise-square .noise-drift { width:120px;height:170px;background:#fff20088;mix-blend-mode:multiply;rotate:var(--turn); }
.noise-stripes .noise-drift { width:240px;height:80px;background:repeating-linear-gradient(90deg,#111a 0 2px,transparent 2px 8px);rotate:-28deg; }
.noise-ribbon { position:absolute;left:-10%;width:130%;overflow:hidden;white-space:nowrap;border-block:1px solid #111;transform:translateY(var(--parallax,0px)) rotate(-13deg); }
.noise-ribbon span { display:block;width:max-content;animation:overkill-marquee 22s linear infinite; }
.ribbon-one { top:29%;background:#fff200b3;font:500 clamp(25px,3vw,52px)/1.4 'DM Sans',sans-serif;letter-spacing:-.04em; }
.ribbon-two { top:76%;font:11px/2 'IBM Plex Mono',monospace;background:#ffffffc9;transform:translateY(calc(var(--parallax,0px)*-1)) rotate(9deg); }
.ribbon-two span { animation-direction:reverse;animation-duration:15s; }
.mouse-satellite,.cursor-echo { position:absolute;left:0;top:0;visibility:hidden;will-change:transform; }
.has-pointer .mouse-satellite,.has-pointer .cursor-echo { visibility:visible; }
.mouse-satellite b { display:block;font:80px/.8 Arial; }
.mouse-satellite .mono { display:block;background:#fff200;padding:6px;border:1px solid #111;font-size:8px; }
.cursor-echo { width:calc(28px + var(--echo)*9px);height:calc(28px + var(--echo)*9px);border:1px solid #111;opacity:calc(.7 - var(--echo)*.08);background:#fff20022; }
[data-mode=expressive] .overreact { translate:var(--react-x,0px) var(--react-y,0px);rotate:var(--react-tilt,0deg);will-change:translate,rotate; }
[data-mode=expressive] .hero h1 { text-shadow:7px 4px 0 #fff200, -5px -2px 0 #1112; }
[data-mode=expressive] .hero h1 .highlight:before { animation:yellow-overreach 5s ease-in-out infinite alternate; }
[data-mode=expressive] .project-art { overflow:visible; }
[data-mode=expressive] .project-info { position:relative;z-index:2; }
[data-mode=expressive] .art-grid { animation-duration:5s; }
[data-mode=expressive] .orbit-square i { animation-duration:7s; }
[data-mode=expressive] .ticker>div { animation-duration:12s; }
[data-mode=expressive] .work-callout { transform:rotate(-1.4deg);box-shadow:8px 8px 0 #111; }
[data-mode=expressive] .project-art .image-window { box-shadow:18px 18px 0 #fff200, -12px -12px 0 #1112; }
[data-transition] .mode-switch { cursor:progress; }
[data-transition] *,[data-transition] *::before,[data-transition] *::after { animation-play-state:paused!important;transition:none!important; }
[data-transition] { overflow-anchor:none; }
[data-mode=simple] .noise-layer { display:none; }
[data-mode=simple][data-transition=resolve] .noise-layer { display:block; }
[data-transition=expand] .noise-layer { visibility:hidden; }
[data-transition=resolve] .hero,[data-transition=expand] .hero { overflow:visible;z-index:3; }
[data-mode=simple] .hero h1>span { display:inline-block; }
[data-mode=simple] .hero h1>span:not(:last-child) { margin-right:.18em; }
.transformation-guide { display:none;position:fixed;z-index:49;bottom:24px;left:50%;transform:translateX(-50%);align-items:center;gap:25px;background:#111;color:#fff;padding:15px 20px;border:1px solid #fff;font:10px 'IBM Plex Mono',monospace;letter-spacing:.04em;pointer-events:none;white-space:nowrap; }
[data-transition] .transformation-guide { display:flex; }
.transformation-steps { display:flex;gap:5px; }.transformation-steps i { width:20px;height:4px;background:#666; }
.transformation-guide[data-step="1"] i:first-child,.transformation-guide[data-step="2"] i:nth-child(-n+2),.transformation-guide[data-step="3"] i { background:#fff200; }
[data-mode=simple] .overreact { translate:none;rotate:none;will-change:auto; }
/* Allow the Web Animations entrance to override reveal styles. */
[data-mode=simple].js-ready .reveal { opacity:1;transform:none; }
@keyframes unnecessary-float { 0%,15% { transform:translate(0,0); } 45%,55% { transform:translate(30px,0); } 85%,100% { transform:translate(30px,-40px); } }
@keyframes overkill-marquee { to { transform:translateX(-40%); } }
@keyframes yellow-overreach { from { transform:scaleX(.8) skewX(-10deg); } to { transform:scaleX(1.4) skewX(10deg); } }
@media(max-width:760px) {
  .noise-layer { top:112px; }
  .noise-piece .noise-drift { zoom:.68; }
  .noise-grid .noise-drift { width:130px;height:100px; }
  .noise-ribbon { width:180%;left:-20%; }
  .ribbon-one { font-size:25px; }
  .transformation-guide { bottom:14px;gap:12px;padding:12px;font-size:8px; }
  .transformation-steps i { width:12px; }
  .expressive-hint { top:120px;left:6%;max-width:88%;font-size:8px; }
  .header nav,[data-mode=simple] .header nav { gap:16px;font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .noise-drift,.noise-ribbon span { animation:none!important; }
  [data-mode=expressive] .overreact { translate:none;rotate:none; }
  .mouse-satellite,.cursor-echo { display:none; }
}