/* One environment behind the complete portfolio. It never accepts pointer input. */
.spider-environment { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); contain: strict; }
.scene-canvas, .scene-poster, .scene-readability, .scene-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-poster { background: radial-gradient(ellipse at 80% 40%, rgb(101 30 65 / 17%), transparent 60%), url('../assets/images/spider-fallback.png') 78% 45% / min(1000px, 80vw) auto no-repeat; }
.scene-canvas { display: block; opacity: 0; transition: opacity 1.2s ease; }
.is-ready .scene-ready .scene-canvas { opacity: 1; }
.is-ready .scene-ready .scene-poster { visibility: hidden; }
.scene-readability { transition: opacity 1.2s ease; background: linear-gradient(90deg, rgb(9 9 15 / 91%), rgb(9 9 15 / 70%) 31%, rgb(9 9 15 / 15%) 60%, transparent 79%), linear-gradient(0deg, rgb(9 9 15 / 24%), transparent 40%); }
.scene-vignette { background: radial-gradient(ellipse at 67% 48%, transparent 24%, rgb(4 3 9 / 16%) 60%, rgb(4 3 9 / 72%) 100%); }
[data-theme="light"] .scene-readability { background: linear-gradient(90deg, rgb(245 243 248 / 96%), rgb(245 243 248 / 64%) 28%, rgb(245 243 248 / 5%) 58%, transparent); }
[data-theme="light"] .scene-vignette { background: radial-gradient(ellipse at 67% 48%, transparent 26%, rgb(245 243 248 / 12%) 70%, rgb(245 243 248 / 77%)); }
[data-theme="light"] .scene-poster { opacity: 1; filter: drop-shadow(12px 18px 16px rgb(44 23 54 / 18%)); }
/* Fixed texture stays still while the depth layers move around it. */
.spider-environment::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--line-strong) .6px, transparent .8px); background-size: 5px 5px; opacity: .14; mask-image: linear-gradient(120deg, transparent 30%, #000); }
[data-theme="light"] .spider-environment::after { opacity: .22; background-size: 6px 6px; }
.scene-exposed .scene-readability { opacity: .72; }
html.booting .page-loader { background: var(--bg); color: var(--text); }
/* A quiet gap exposes the SAME fixed environment between the hero and About. */
.scene-aperture { min-height: clamp(240px, 32vw, 390px); position: relative; display: flex; align-items: center; padding-block: 55px; }
.scene-aperture-copy { max-width: 280px; }
.scene-aperture .eyebrow { color: var(--subtle); font-size: .625rem; letter-spacing: .22em; }
.scene-aperture p + p { margin-top: 18px; font: clamp(1.9rem, 3.1vw, 3rem)/1.04 var(--display); color: var(--muted); letter-spacing: .02em; }
.scene-aperture small { display: block; margin-top: 16px; color: var(--subtle); font: .6875rem/1.5 var(--mono); }
.scene-motion { position: fixed; left: 18px; bottom: 18px; z-index: 21; display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 30px; background: var(--header); color: var(--muted); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: .6875rem; }
.scene-motion[hidden] { display: none; }
.scene-motion svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.scene-motion:hover { color: var(--text); border-color: var(--accent); }
.scene-motion[aria-pressed="true"] svg { opacity: .45; }
.scene-motion-paused .character-swing, .scene-motion-paused .profile-ring { animation-play-state: paused; }
.web-clicks { position: fixed; inset: 0; z-index: 80; width: 100%; height: 100%; pointer-events: none; }
/* Content surfaces retain a dark/light backing even when webs pass behind them. */
.education-section { background: rgb(14 12 21 / 88%); }
[data-theme="light"] .education-section { background: rgb(236 232 242 / 92%); }
@media (max-width: 820px) {
  .scene-aperture { min-height: 300px; }
  .scene-aperture-copy { max-width: 185px; }
  .scene-aperture .eyebrow { font-size: .5625rem; }
  .scene-readability { background: linear-gradient(90deg, rgb(9 9 15 / 92%), rgb(9 9 15 / 70%) 30%, rgb(9 9 15 / 24%) 70%, transparent); }
}
@media (max-width: 600px) {
  .scene-aperture { min-height: 310px; align-items: flex-end; padding-block: 24px; }
  .scene-aperture-copy { max-width: 148px; }
  .scene-aperture p + p { font-size: 1.6rem; }
  .scene-aperture small { display: none; }
  .scene-motion { left: 10px; bottom: 12px; min-height: 36px; padding: 8px 10px; font-size: .625rem; }
  .scene-poster { background-size: auto, 130vw auto; background-position: center, 62% 47%; }
  .scene-readability { background: linear-gradient(90deg, rgb(9 9 15 / 87%), rgb(9 9 15 / 59%) 50%, rgb(9 9 15 / 14%)); }
  [data-theme="light"] .scene-readability { background: linear-gradient(90deg, rgb(245 243 248 / 91%), rgb(245 243 248 / 63%) 50%, rgb(245 243 248 / 20%)); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-canvas, .scene-readability { transition: none; }
  .scene-motion, .web-clicks { display: none; }
}
@media print { .spider-environment, .scene-aperture, .scene-motion, .web-clicks { display: none; } }

.scene-poke { display: inline-flex; align-items: center; gap: 15px; padding: 10px 14px; min-height: 42px; margin-top: 22px; background: var(--header); color: var(--text); border: 1px solid var(--line-strong); border-radius: 6px; font: .6875rem/1.5 var(--mono); }
.scene-poke span { color: var(--accent); }.scene-poke:hover { border-color: var(--accent); background: var(--accent-soft); }
.scene-poke[hidden] { display: none; }.scene-poke:disabled { opacity: .5; cursor: default; }
@media (max-width: 600px) { .scene-poke { margin-top: 16px; padding: 9px 11px; min-height: 44px; font-size: .625rem; } }
@media print { .scene-poke { display: none; } }