/* ===========================================================================
   SAJIDMK / VISION GLASS — Premium Enterprise · Nov 2026
   Additive design layer. Original sections, content, JS and CMS remain intact.
   This restores real frosted material over the site's previously clear-only
   glass, with an obsidian / champagne-gold visual language.
   Pointer hover and keyboard focus provide spatial-style feedback. This is
   a responsive Safari/web experience, NOT a native visionOS/eye-tracking app.
   =========================================================================== */
:root {
  color-scheme: dark;
  --bg-deep: #08090c;
  --bg-panel: #151316;
  --bg-panel-2: #101014;
  --accent: #D4AF37;
  --accent-rgb: 212,175,55;
  --accent-deep: #B88B27;
  --accent-deep-rgb: 184,139,39;
  --accent-light: #F3D994;
  --accent-light-rgb: 243,217,148;
  --on-accent: #18120a;
  --glass-border: rgba(212,175,55,.22);
  --glass-border-bright: rgba(255,237,191,.37);
  --glass-floor: .50;
  --glass-ceil: .73;
  --glass-surface: rgba(15,15,19,.68);
  --glass-surface-strong: rgba(12,12,17,.82);
  --text: #fafafa;
  --text-dim: #dedee2;
  --text-faint: #bdbdc6;
  --text-primary: var(--text);
  --text-secondary: var(--text-dim);
  --text-tertiary: var(--text-faint);
  --blur-glass: blur(28px) saturate(1.65);
  --vision-ease: cubic-bezier(.2,.8,.2,1);
  --vision-border: rgba(218,181,99,.22);
  --vision-shadow: 0 18px 56px -30px rgba(0,0,0,.84),
                   inset 0 1px 0 rgba(255,255,255,.115),
                   inset 0 0 0 1px rgba(255,219,146,.025);
}
html { background: #08090c; }
body { color: #fafafa; background:#08090c; }
/* Calm the photographic environment; depth is carried by the material, not
   busy high-contrast imagery directly behind small type. */
html body .bg-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 53% 44% at 78% 12%,rgba(169,114,38,.13),transparent 76%),
    radial-gradient(ellipse 60% 55% at 5% 83%,rgba(9,9,18,.30),transparent 82%),
    linear-gradient(180deg,rgba(5,6,9,.68) 0%,rgba(7,8,11,.52) 42%,rgba(5,6,9,.77) 100%);
}
/* Base layers: specificity intentionally exceeds [CSS-70] which removed
   all material fills with !important. Keep hero/section backdrop *filter*
   managed by the original focus slider: only restore their surface. */
html body :is(.hero,.section,.recruiter-bar,.footer-panel) {
  background: linear-gradient(155deg,rgba(27,25,28,.63),rgba(10,11,15,.76)) !important;
  background-color:rgba(15,15,19,.66) !important;
  border-color:rgba(218,181,99,.19);
  border-top-color:rgba(246,232,201,.34);
  box-shadow:0 26px 76px -37px rgba(0,0,0,.78),inset 0 1px rgba(255,255,255,.12);
}
html body :is(.glass,.glass-clear,.glass-tight) {
  background: linear-gradient(157deg,rgba(36,34,39,.74) 0%,rgba(19,19,24,.67) 42%,rgba(12,12,17,.76) 100%) !important;
  background-color:rgba(18,17,22,.7) !important;
  border-color:var(--vision-border);
  border-top-color:rgba(244,225,177,.35);
  box-shadow:var(--vision-shadow) !important;
  -webkit-backdrop-filter:blur(28px) saturate(1.65);
  backdrop-filter:blur(28px) saturate(1.65);
}
/* Navigation and panels have a slightly stronger backing to stay readable
   when the landscape is lighter. */
html body :is(#topNav,.mob-drawer,.motion-command-panel,.cmdk-panel) {
  background:rgba(13,13,18,.88) !important;
  border-color:rgba(238,202,127,.27);
  box-shadow:0 16px 48px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.13) !important;
  -webkit-backdrop-filter:blur(30px) saturate(1.7);
  backdrop-filter:blur(30px) saturate(1.7);
}
html body :is(.btn,.recruiter-link,.cert-btn,.cf-submit,.tk-card,.tk-note,.gv-row,
 .cs-item,.tl-item,.tl-quote,.tl-subroles,.bd-card,.diag-console,.geo-vault,
 .status-strip,.hero-photo-tag,.fx-panel,.fx-handle,.fx-preview-chip,.fx-bold) {
  background:linear-gradient(145deg,rgba(39,35,33,.60),rgba(12,13,18,.73)) !important;
  background-color:rgba(16,16,20,.70) !important;
  border-color:rgba(218,181,99,.20);
  box-shadow:inset 0 1px rgba(255,255,255,.095),0 12px 34px -22px rgba(0,0,0,.7);
}
/* Do not paint light decorative covers over the content. The reflective
   highlight is subtle, clips to cards and never intercepts interaction. */
html body :is(.glass,.glass-clear,.glass-tight)::before {
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,222,155,.095),transparent 65%) !important;
  pointer-events:none;
}
html body :is(.glass,.glass-clear,.glass-tight)::after {
  background:transparent !important;
  pointer-events:none;
}
/* Essential legibility while preserving existing typography and layout. */
html body :is(.hero,.section,.recruiter-bar,.footer-panel) :is(h1,h2,h3,h4) {
  color:#fafafa;
  text-shadow:0 2px 14px rgba(0,0,0,.30);
}
html body :is(.hero,.section,.recruiter-bar,.footer-panel) :is(p,li,small,blockquote) {
  text-shadow:0 1px 5px rgba(0,0,0,.34);
}
html body :is(.section-intro,.case-sub,.cert-desc,.section p,.hero p,.now-text,.helper) {
  line-height:1.7;
}
html body :is(.nav-link,.nav-brand,.nav-cta) { text-shadow:none; }
html body :is(.section-label,.eyebrow,.recruiter-label,.term-prompt,.term-ok) { color:#e8c571; }
html body :is(.section-label .dot,.ping,.accent-dot[aria-pressed="true"]) {
  box-shadow:0 0 0 4px rgba(212,175,55,.08),0 0 18px rgba(212,175,55,.36);
}
/* Elevated controls and legible input fields: restores backing removed by
   [CSS-70], without changing any existing form behavior. */
html body main :is(input:not([type="range"]):not(.term-input),textarea,select) {
  background:rgba(9,10,14,.62) !important;
  background-color:rgba(9,10,14,.62) !important;
  border-color:rgba(235,204,144,.25);
  color:#fafafa;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
html body main :is(input,textarea,select)::placeholder {color:#bfc0c6;opacity:1;}
html body main :is(input,textarea,select):focus-visible {
  outline:2px solid #e4c776;
  outline-offset:2px;
  border-color:#e4c776;
}
html body :is(.skill-tags>*,.client-showcase-chips span) {
  background:rgba(22,20,22,.70) !important;
  border-color:rgba(212,175,55,.22);
}
html body .motion-command-launch {
  background:rgba(17,16,20,.9);color:#f6e7c3;
  border:1px solid rgba(223,187,100,.42);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
html body .motion-command-result:is(:hover,:focus-visible,[aria-selected="true"]){
  background:rgba(213,170,66,.16);
}

/* Gold should remain unmistakable on primary actions, rather than being
   swallowed by the all-cards material rule. */
html body :is(.nav-cta,.cf-submit,.cert-btn.primary,.btn.primary,.tk-primary) {
  background:linear-gradient(112deg,#f4dfaa,#d4af37) !important;
  background-color:#d4af37 !important;
  color:#211807 !important;
  border-color:rgba(255,234,173,.65) !important;
  text-shadow:none !important;
  box-shadow:0 12px 27px -13px rgba(212,175,55,.62),inset 0 1px rgba(255,255,255,.24) !important;
}
html body :is(.nav-cta,.cf-submit,.cert-btn.primary,.btn.primary,.tk-primary):is(:hover,:focus-visible) {
  background:linear-gradient(112deg,#ffe9b9,#e0b746) !important;
  color:#191205 !important;
}

/* Distinct real-world client feature, retaining all original assets and
   original CMS bindings. */
html body #client-projects :is(.real-world-feature,.client-case) {
  background:linear-gradient(139deg,rgba(38,31,26,.82),rgba(13,14,18,.82)) !important;
  border-color:rgba(218,181,99,.37);
  box-shadow:0 24px 70px -32px #000c,inset 0 1px rgba(255,238,201,.2) !important;
}
html body #client-projects .client-showcase,
html body #client-projects .real-world-case-body .case-body-inner {
  background:rgba(10,10,14,.72) !important;
}
html body #client-projects .client-showcase-content p,
html body #client-projects .case-col p {color:#e9e4db;}
html body #client-projects .client-showcase-cta {
  color:#1f1608 !important;
  background:linear-gradient(105deg,#F3DC9D,#D4AF37) !important;
  border-color:rgba(255,230,157,.52);
  box-shadow:0 13px 29px -11px rgba(212,175,55,.54);
}
/* Holographic terminal: actual typed commands continue to function. */
html body .term-window {
  border-color:rgba(221,183,100,.38);
  box-shadow:0 28px 64px -34px rgba(0,0,0,.94),0 0 45px -40px rgba(212,175,55,.55) !important;
}
html body .term-titlebar {
  background:rgba(8,8,13,.36);
  border-bottom-color:rgba(233,200,128,.24);
}
html body .term-out {color:#e9e7e3;}
html body .term-input { background:transparent !important; color:#fff; caret-color:#e5c16e; }
html body .term-prompt-row:focus-within .term-prompt::after {
  content:"";display:inline-block;width:6px;height:1em;margin-left:7px;
  vertical-align:-.18em;background:#deb964;
  animation:vision-caret 1s steps(1,end) infinite;
}
@keyframes vision-caret {50%{opacity:0;}}
/* Radial skills: draw attention to active data, not the entire SVG. */
html body .radar-axis.is-active .radar-fill,
html body .radar-axis.is-active .radar-dot {
  filter:drop-shadow(0 0 7px rgba(247,205,113,.5));
}
html body .radar-axis:is(:focus-within,:hover) .radar-dot {
  filter:drop-shadow(0 0 9px rgba(247,205,113,.55));
}
html body .cert-card {transform:translateZ(0);}
/* Hover/focus emulates the web affordances used by gaze/pinch in visionOS.
   No eye tracking is claimed or performed; no transforms on interactive
   project cards that already have an independent tilt animation. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html body :is(.cert-card,.proof-stat,.now-card,.bd-card,.highlight-card,.status-chip,.recruiter-link):hover {
    transform:translateY(-4px) scale(1.012);
    border-color:rgba(239,199,114,.52);
    box-shadow:0 24px 45px -29px rgba(0,0,0,.95),0 0 34px -25px rgba(225,175,77,.75),inset 0 1px rgba(255,255,255,.2) !important;
    transition:transform .32s var(--vision-ease),border-color .3s ease,box-shadow .3s ease;
  }
}
html body :is(.cert-card,.proof-stat,.now-card,.bd-card,.highlight-card,.recruiter-link):focus-within {
  border-color:rgba(242,201,106,.7);
  box-shadow:0 0 0 1px rgba(231,192,101,.22),0 15px 32px -20px rgba(0,0,0,.85) !important;
}
html body :is(a,button,[role="button"],input,textarea,select):focus-visible {
  outline:2px solid #f1cf81;
  outline-offset:3px;
}
/* Responsive layers: modest blur avoids overtaxing phone GPUs. */
@media (max-width:700px){
  html body :is(.glass,.glass-clear,.glass-tight) {
    -webkit-backdrop-filter:blur(16px) saturate(1.3);
    backdrop-filter:blur(16px) saturate(1.3);
    background:rgba(15,15,20,.87) !important;
  }
  html body :is(.hero,.section,.recruiter-bar,.footer-panel) {
    background:rgba(14,14,19,.86) !important;
  }
  html body #client-projects .client-showcase {background:rgba(10,10,14,.87) !important;}
}
@media (prefers-reduced-motion:reduce){
  html body .term-prompt::after {animation:none !important;}
  html body :is(.cert-card,.proof-stat,.now-card,.bd-card,.highlight-card,.status-chip,.recruiter-link){transition:none !important;}
}
@supports not (backdrop-filter:blur(2px)) {
  html body :is(.glass,.glass-clear,.glass-tight) {background:rgba(14,14,18,.94) !important;}
}
@media print{
  html body :is(.hero,.section,.recruiter-bar,.footer-panel,.glass,.glass-clear,.glass-tight) {
    background:#fff !important;box-shadow:none !important;color:#111 !important;
  }
  html body .bg-field::after{display:none;}
}