/* ============================================================
   SOLVER SOCIETY — depth pass (Phase 1)
   Injected at build time on every page. Three planes:
   wall (fixed, existing) · this layer (equations + light,
   parallax-slow) · content (scrolls normally).
   Never carries meaning — decorative only, aria-hidden.
   ============================================================ */

/* ------------------------------------------------------------
   Site re-theme: the brand's DEEP NAVY brick wall.
   Loaded after each page's own styles, so these win.
   Every page reads the wall from these variables, so this one
   block re-colors the whole site. Delete it to go back to grey.
   ------------------------------------------------------------ */
:root{
  --brick:#16304F!important; --brick-lo:#0F2440!important; --brick-hi:#1E3D63!important;
  --mortar:#0A1B31!important;
  --nav-bg:#132A47!important;
  --slate:#132A47!important;
}
body{background:#0A1B31!important}

#ss-depth{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

/* uneven wall lighting: dark corners, a warm patch, a cool patch —
   what makes a real wall read as a surface instead of a color */
.ssd-ao{position:absolute;inset:-6%;will-change:transform;
  background:
    radial-gradient(46% 34% at 12% 88%,rgba(6,16,22,.34),transparent 70%),
    radial-gradient(40% 30% at 92% 84%,rgba(6,16,22,.28),transparent 70%),
    radial-gradient(34% 26% at 22% 8%,rgba(255,244,214,.05),transparent 70%),
    radial-gradient(52% 40% at 64% 20%,rgba(255,255,255,.045),transparent 72%),
    radial-gradient(30% 44% at 50% 55%,rgba(8,20,26,.10),transparent 75%)}

/* fine grain so the wall has tooth (tiny SVG noise, tiled) */
.ssd-grain{position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size:160px 160px}

/* soft light: a slow breathing glow high on the wall */
.ssd-glow{position:absolute;inset:-10%;
  background:
    radial-gradient(60% 42% at 30% 12%,rgba(165,214,167,.10),transparent 70%),
    radial-gradient(50% 38% at 78% 30%,rgba(0,229,255,.05),transparent 70%);
  will-change:transform}

/* chalk equations drifting on the wall */
.ssd-eq{position:absolute;inset:0;will-change:transform}
.ssd-eq span{position:absolute;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-weight:600;color:#FFFFFF;opacity:.13;white-space:nowrap;
  text-shadow:0 0 16px rgba(0,229,255,.65)}
.ssd-eq .c{color:#00E5FF;opacity:.15}
.ssd-eq .g{color:#A5D6A7;opacity:.15}

@media (prefers-reduced-motion:no-preference){
  .ssd-glow{animation:ssd-breathe 14s ease-in-out infinite}
  .ssd-eq span{animation:ssd-float 9s ease-in-out infinite}
  .ssd-eq span:nth-child(2n){animation-duration:12s;animation-delay:-3s}
  .ssd-eq span:nth-child(3n){animation-duration:15s;animation-delay:-7s}
}
@keyframes ssd-breathe{0%,100%{opacity:.85}50%{opacity:1.0}}
@keyframes ssd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ------------------------------------------------------------
   Character entrance — plays once, only after the live app is
   ready (html.ss-anim added by depth.js), never for visitors
   who prefer reduced motion, and never twice (html.ss-entered).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  html.ss-anim:not(.ss-entered) img[src*="_welcome"],
  html.ss-anim:not(.ss-entered) img[src*="_presenting"]{
    animation:ssd-enter 1s cubic-bezier(.16,1,.3,1) both}
  html.ss-anim:not(.ss-entered) img[src*="bandit_"]{animation-delay:.18s}
}
@keyframes ssd-enter{
  0%{opacity:0;transform:translateY(52px) scale(.93)}
  55%{opacity:1}
  78%{transform:translateY(-6px) scale(1.005)}
  100%{opacity:1;transform:none}
}