/* ---------------------------------------------------------------
   ARQAM RASHED / PORTFOLIO 2026
   Direction: four visual worlds, one continuous 3D surface.
   Palette, type, and structure are deliberate, not decorative.
   --------------------------------------------------------------- */

:root{
  --bg:#070708;
  --ink:#E2E2E5;
  --accent:#D4FF00;
  --accent-strong:#D4FF00;
  --muted:#8A8A90;
  --line:rgba(226,226,229,.18);
  --accent-soft:rgba(212,255,0,.12);
  --display:'Archivo Black','Arial Black',sans-serif;
  --body:'Archivo',Arial,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
  --serif:'Instrument Serif',Georgia,serif;
  --hud-h:64px;
  --pad:5vw;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--bg);
  scrollbar-color:var(--accent) var(--bg);
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  position:relative;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  position:relative;
  touch-action:pan-y pinch-zoom;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-booting{overflow:hidden}
::selection{background:var(--accent);color:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
a,button,[role="button"]{cursor:pointer}
button:disabled{cursor:not-allowed}
img{max-width:100%;display:block}
p,h1,h2,h3,h4,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;left:16px;top:16px;z-index:400;
  padding:12px 16px;background:var(--ink);color:var(--bg);
  font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  transform:translateY(-180%);transition:transform .2s var(--ease);
}
.skip:focus{transform:translateY(0)}
#main:focus{outline:none}

/* Grain and structural overlay (GPU-composited, zero blend-mode stall) */
.grain{
  position:fixed;inset:0;z-index:80;pointer-events:none;
  opacity:.05;contain:strict;transform:translateZ(0);
  background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 0);
  background-size:24px 24px;
}
.act-1,.act-3,.act-4,.act-5,.site-footer{contain:layout style}
.grain::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.035),transparent 18%,transparent 82%,rgba(0,0,0,.08));
}

/* WebGL surface */
#gl{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;display:block;
  pointer-events:none;
}
body.no-gl #gl{display:none}
body.no-gl{
  background:
    radial-gradient(ellipse at 50% 38%,rgba(212,255,0,.07),transparent 55%),
    var(--bg);
}