/* iansorin.fr homepage — WebGL immersive dark layer.
   Scoped to body.ian-webgl-on (added by ian-webgl.js). If JS fails, the page stays light (safe). */

/* ---- fixed WebGL layers (behind all content) ---- */
#ian-webgl-stage { position:fixed; inset:0; z-index:-3; background:#18122a; }   /* flat dark, no gradient */
#ian-webgl { position:fixed; inset:0; z-index:-2; width:100%; height:100%; display:block; pointer-events:none; }
#ian-webgl-veil { position:fixed; inset:0; z-index:-1; background:#1a1428; opacity:0; pointer-events:none; transition:opacity .4s linear; }

html.ian-webgl-html, body.ian-webgl-on { background:#1d1730 !important; }

/* make theme wrappers transparent so the canvas shows through */
body.ian-webgl-on,
body.ian-webgl-on #wrapper, body.ian-webgl-on .site, body.ian-webgl-on #inner-wrap,
body.ian-webgl-on .site-container, body.ian-webgl-on .content-container, body.ian-webgl-on .content-area,
body.ian-webgl-on .site-main, body.ian-webgl-on main, body.ian-webgl-on article,
body.ian-webgl-on .entry-content, body.ian-webgl-on .content-bg, body.ian-webgl-on .single-content,
body.ian-webgl-on .hentry, body.ian-webgl-on .post-content-wrap { background:transparent !important; box-shadow:none !important; }

/* ===== dark theme overrides (homepage only) ===== */
body.ian-webgl-on .ian-home { color:#fff; }
body.ian-webgl-on .ian-home a:not(.ian-btn-primary):not(.ian-btn-ghost):not(.ian-book-amazon-btn):not(.ian-gh-link) { color:inherit; }

/* sections: transparent, reveal canvas; neutralize the full-bleed solid bands */
body.ian-webgl-on .ian-home .ian-section { background:transparent !important; }
body.ian-webgl-on .ian-home .ian-hero,
body.ian-webgl-on .ian-home .ian-contact { background:transparent !important; box-shadow:none !important; clip-path:none !important; color:#fff; }
body.ian-webgl-on .ian-home .ian-hero::before,
body.ian-webgl-on .ian-home .ian-hero::after,
body.ian-webgl-on .ian-home .ian-hero .ian-wrap::before,
body.ian-webgl-on .ian-home .ian-hero .ian-wrap::after,
body.ian-webgl-on .ian-home .ian-contact::before,
body.ian-webgl-on .ian-home .ian-contact::after,
body.ian-webgl-on .ian-home .ian-contact .ian-wrap::before,
body.ian-webgl-on .ian-home .ian-contact .ian-wrap::after,
body.ian-webgl-on .ian-home .ian-shelf-wrap::before,
body.ian-webgl-on .ian-home .ian-gh-card::before { display:none !important; }


/* headings + text -> light */
body.ian-webgl-on .ian-home .ian-h2,
body.ian-webgl-on .ian-home .ian-h3,
body.ian-webgl-on .ian-home .ian-h4,
body.ian-webgl-on .ian-home h1, body.ian-webgl-on .ian-home h2, body.ian-webgl-on .ian-home h3, body.ian-webgl-on .ian-home h4 { color:#fff !important; text-shadow:0 2px 26px rgba(20,15,35,.55); }
body.ian-webgl-on .ian-home .ian-lead { color:rgba(255,255,255,.78) !important; }
body.ian-webgl-on .ian-home .ian-find-card p { color:rgba(255,255,255,.66) !important; }

/* eyebrows */
body.ian-webgl-on .ian-home .ian-eyebrow { background:rgba(156,137,184,.18) !important; color:#cdbce8 !important; border:1px solid rgba(156,137,184,.3); }
body.ian-webgl-on .ian-home .ian-eyebrow.pink { background:rgba(240,166,202,.16) !important; color:#F0A6CA !important; }

/* dark-glass cards (find / article / cert / social / default bento) */
body.ian-webgl-on .ian-home .ian-find-card,
body.ian-webgl-on .ian-home a.ian-article-card,
body.ian-webgl-on .ian-home .ian-cert-card,
body.ian-webgl-on .ian-home a.ian-social-link,
body.ian-webgl-on .ian-home .ian-bento-card:not(.dark):not(.purple):not(.pink) {
  background:rgba(255,255,255,.055) !important; border:1px solid rgba(255,255,255,.1) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff !important;
}
body.ian-webgl-on .ian-home .ian-find-card:hover,
body.ian-webgl-on .ian-home a.ian-article-card:hover,
body.ian-webgl-on .ian-home .ian-cert-card:hover,
body.ian-webgl-on .ian-home a.ian-social-link:hover { border-color:rgba(240,166,202,.4) !important; box-shadow:0 12px 40px rgba(0,0,0,.35) !important; }

body.ian-webgl-on .ian-home .ian-article-title { color:#fff !important; }
body.ian-webgl-on .ian-home .ian-bento-card:not(.dark):not(.purple):not(.pink) .ian-bento-label { color:#F0A6CA !important; }
body.ian-webgl-on .ian-home .ian-bento-card:not(.dark):not(.purple):not(.pink) .ian-bento-body,
body.ian-webgl-on .ian-home .ian-bento-card:not(.dark):not(.purple):not(.pink) .ian-bento-highlight { color:rgba(255,255,255,.88) !important; }
body.ian-webgl-on .ian-home .ian-cert-card span { color:rgba(255,255,255,.62) !important; }

/* see-all link */
body.ian-webgl-on .ian-home a.ian-see-all { color:#cdbce8 !important; border-color:rgba(255,255,255,.18) !important; background:rgba(255,255,255,.04) !important; }

/* tool chips -> dark + white logo tile */
body.ian-webgl-on .ian-home .ian-tool { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 7px;
  background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.14) !important; color:#fff !important; border-radius:9999px; }
body.ian-webgl-on .ian-home .ian-tool.logo-only { padding:6px 14px; }
body.ian-webgl-on .ian-home .ian-tool-ic { width:24px; height:24px; border-radius:7px; background:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
body.ian-webgl-on .ian-home .ian-tool-ic img { width:16px; height:16px; object-fit:contain; display:block; }
body.ian-webgl-on .ian-home .ian-tool .ian-tool-wm { height:16px; width:auto; display:block; }

/* GitHub chart card keeps dark; ensure contrast */
body.ian-webgl-on .ian-home .ian-gh-head p { color:rgba(255,255,255,.72) !important; }

/* ===== figure / content composition (desktop only) ===== */
@media (min-width:901px) {
  body.ian-webgl-on .ian-home section.ian-fig-right > .ian-section-head,
  body.ian-webgl-on .ian-home section.ian-fig-right > .ian-find-grid,
  body.ian-webgl-on .ian-home section.ian-fig-right > .ian-cert-grid,
  body.ian-webgl-on .ian-home section.ian-fig-right > .ian-social-grid,
  body.ian-webgl-on .ian-home section.ian-fig-right > .ian-bento,
  body.ian-webgl-on .ian-home section.ian-fig-right > .ian-section-head-row,
  body.ian-webgl-on .ian-home section.ian-fig-right > * { max-width:600px; margin-left:auto !important; margin-right:0 !important; }
  body.ian-webgl-on .ian-home section.ian-fig-left > .ian-section-head,
  body.ian-webgl-on .ian-home section.ian-fig-left > .ian-find-grid,
  body.ian-webgl-on .ian-home section.ian-fig-left > .ian-cert-grid,
  body.ian-webgl-on .ian-home section.ian-fig-left > .ian-social-grid,
  body.ian-webgl-on .ian-home section.ian-fig-left > .ian-bento,
  body.ian-webgl-on .ian-home section.ian-fig-left > .ian-section-head-row,
  body.ian-webgl-on .ian-home section.ian-fig-left > * { max-width:600px; margin-right:auto !important; margin-left:0 !important; }
  body.ian-webgl-on .ian-home section.ian-fig-right .ian-section-head.center,
  body.ian-webgl-on .ian-home section.ian-fig-left .ian-section-head.center { text-align:left; }
  body.ian-webgl-on .ian-home section.ian-fig-right .ian-find-grid,
  body.ian-webgl-on .ian-home section.ian-fig-left  .ian-find-grid,
  body.ian-webgl-on .ian-home section.ian-fig-right .ian-cert-grid,
  body.ian-webgl-on .ian-home section.ian-fig-left  .ian-cert-grid,
  body.ian-webgl-on .ian-home section.ian-fig-right .ian-social-grid,
  body.ian-webgl-on .ian-home section.ian-fig-left  .ian-social-grid { grid-template-columns:1fr !important; }
  body.ian-webgl-on .ian-home section.ian-fig-right .ian-bento,
  body.ian-webgl-on .ian-home section.ian-fig-left  .ian-bento { grid-template-columns:1fr 1fr !important; }
  body.ian-webgl-on .ian-home section.ian-fig-right .ian-bento-card.span-3,
  body.ian-webgl-on .ian-home section.ian-fig-left  .ian-bento-card.span-3 { grid-column:span 2 !important; }
}

/* Header: force SOLID white on the homepage. The global header is a 0.85 white glass;
   over the dark WebGL it turned greyish and clashed with the (pure white) logo.
   Solid white makes it match the logo and look identical to the other pages. */
body.ian-webgl-on .site-header,
body.ian-webgl-on .site-header-wrap,
body.ian-webgl-on .site-header-row-container,
body.ian-webgl-on .site-header-main-section-left,
body.ian-webgl-on .kadence-sticky-header,
body.ian-webgl-on #masthead { background:#ffffff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }