/* ═══════════════════════════════════════════════════════════
   SNAIL3D — THE SPECIMEN design system · shell.css
   shared skin for every page on snail3d.com
   ink #0a0a0c / bone #e9e4d6 / ONE lime accent #b8ff2e
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0a0a0c;
  --ink2:#131316;
  --bone:#e9e4d6;
  --dim:#8f8a98;
  --faint:#5c5866;
  --lime:#b8ff2e;
  --cyan:#b8ff2e;          /* legacy alias — one accent */
  --amber:#ffb84d;
  --pink:#ff6e9c;
  --ice:#7ee0ff;
  --red:#ff6e5a;
  --line:rgba(233,228,214,.09);
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --disp:'Space Grotesk',system-ui,sans-serif;
}

/* film grain overlay (pass z-index via inline style if needed) */
.shell-grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E")}

/* the shell canvas lives behind everything */
#shellbg{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none}
#shellbg ~ main, #shellbg ~ .wrap, #shellbg ~ body > *{position:relative}

/* difference-blend cursor (injected by shell-chrome.js) */
.shell-cur{position:fixed;z-index:9999;pointer-events:none;left:0;top:0;mix-blend-mode:difference;transform:translate(-100px,-100px)}
.shell-cur .ring{width:30px;height:30px;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-style .25s}
.shell-cur .dot{position:absolute;width:4px;height:4px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}
.shell-cur .readout{position:absolute;transform:translate(14px,10px);font:10px/1 var(--mono);color:#fff;white-space:nowrap;letter-spacing:.08em}
@media (hover:none){.shell-cur{display:none}}
@media (pointer:coarse){.shell-cur{display:none}}

/* shared footer strip */
.shell-foot{border-top:1px solid var(--line);padding:26px 6vw;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:10px/1.8 var(--mono);letter-spacing:.16em;color:var(--faint);position:relative;z-index:5;background:rgba(10,10,12,.55);backdrop-filter:blur(6px)}
.shell-foot a{color:var(--dim);text-decoration:none;transition:.2s}
.shell-foot a:hover{color:var(--lime)}
.shell-foot .big{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--bone)}
.shell-foot .big i{font-style:normal;color:var(--lime)}

::selection{background:var(--lime);color:#000}
