/* Final visual layer: enhances the existing HTML interface without turning 3D into content. */
:root{
  --scene-accent:var(--green);
  --scene-accent-rgb:121,234,179;
}
html[data-scene-tone="blue"]{--scene-accent:var(--blue);--scene-accent-rgb:109,169,255}
html[data-scene-tone="amber"]{--scene-accent:var(--amber);--scene-accent-rgb:233,195,111}

body{background-color:var(--bg)}
main{isolation:isolate}
section{position:relative}
section[id]::after{
  content:"";position:absolute;left:50%;bottom:0;width:min(calc(100% - 42px),var(--max));height:1px;
  transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--scene-accent-rgb),.18) 18%,rgba(255,255,255,.045) 50%,rgba(var(--scene-accent-rgb),.18) 82%,transparent)
}

/* Clear keyboard affordances. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--scene-accent);outline-offset:4px
}

/* Active navigation is driven by site.js. */
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{right:0;background:var(--scene-accent);box-shadow:0 0 10px rgba(var(--scene-accent-rgb),.45)}

/* A consistent technical-panel surface across the existing boxes. */
.runtime-card,.pipeline-shell,.component-card,.metric-card,.verification-table-wrap,.scope-card,
.regression-row,.repo-card,.limit-card,.final-panel,.source-grid article,.architecture-notes article{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 55px rgba(0,0,0,.10)
}

.fx-card,.component-card,.metric-card,.scope-card,.repo-card,.limit-card,.final-panel{
  position:relative
}
.fx-card::before,.component-card::before,.metric-card::after,.scope-card::before,.repo-card::before,.limit-card::before,.final-panel::before{
  content:"";position:absolute;inset:8px;pointer-events:none;opacity:.42;
  background:
    linear-gradient(var(--scene-accent),var(--scene-accent)) left top/12px 1px no-repeat,
    linear-gradient(var(--scene-accent),var(--scene-accent)) left top/1px 12px no-repeat,
    linear-gradient(var(--scene-accent),var(--scene-accent)) right bottom/12px 1px no-repeat,
    linear-gradient(var(--scene-accent),var(--scene-accent)) right bottom/1px 12px no-repeat;
  transition:opacity .18s ease,filter .18s ease
}
.fx-card:hover::before,.component-card:hover::before,.metric-card:hover::after,.scope-card:hover::before,.repo-card:hover::before,.limit-card:hover::before,.final-panel:hover::before{
  opacity:.8;filter:drop-shadow(0 0 5px rgba(var(--scene-accent-rgb),.35))
}

/* Pointer light follows the card position already calculated by site.js. */
.fx-card,.component-card,.scope-card,.repo-card,.limit-card{
  background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--scene-accent-rgb),.055),transparent 46%)
}

/* Section labels behave like part of the chrome rather than detached captions. */
.section-index{position:relative;padding-left:18px;color:var(--scene-accent);transition:color .25s ease}
.section-index::before{content:"";position:absolute;left:0;top:8px;width:2px;height:28px;background:var(--scene-accent);box-shadow:0 0 14px rgba(var(--scene-accent-rgb),.22)}
.section-index::after{content:"";display:block;width:54px;height:1px;margin-top:13px;background:linear-gradient(90deg,var(--scene-accent),transparent)}

/* The architecture remains normal readable HTML; visual motion only reinforces direction. */
.flow-node{overflow:hidden;transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
.flow-node::after{content:"";position:absolute;left:-120%;bottom:0;width:75%;height:1px;background:linear-gradient(90deg,transparent,var(--scene-accent),transparent);opacity:.65;animation:nodeSignal 6s linear infinite}
.flow-node:nth-child(2)::after{animation-delay:.45s}.flow-node:nth-child(3)::after{animation-delay:.9s}.flow-node:nth-child(4)::after{animation-delay:1.35s}.flow-node:nth-child(5)::after{animation-delay:1.8s}.flow-node:nth-child(6)::after{animation-delay:2.25s}.flow-node:nth-child(7)::after{animation-delay:2.7s}
.flow-node:hover{transform:translateY(-4px);border-color:rgba(var(--scene-accent-rgb),.52);box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 -1px 0 rgba(var(--scene-accent-rgb),.35)}
@keyframes nodeSignal{0%,58%{transform:translateX(0);opacity:0}62%{opacity:.75}82%{transform:translateX(310%);opacity:.75}86%,100%{transform:translateX(310%);opacity:0}}

/* Verification remains a normal table, but stays usable on long scans. */
.verification-table th{position:sticky;top:0;z-index:2;backdrop-filter:blur(14px)}
.verification-table tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--scene-accent)}
.verification-table a{text-underline-offset:3px;text-decoration-color:rgba(var(--scene-accent-rgb),.35)}
.verification-table a:hover{text-decoration-color:var(--scene-accent);color:var(--text)}

/* Metrics gain depth without becoming dashboard gauges. */
.metric-card{transition:transform .2s ease,border-color .2s ease,background .2s ease}
.metric-card:hover{transform:translateY(-4px);border-color:rgba(var(--scene-accent-rgb),.42);background-color:rgba(10,17,24,.90)}
.metric-number{transition:color .25s ease,text-shadow .25s ease}
html[data-scene-tone="blue"] .metric-number{color:var(--blue)}
html[data-scene-tone="amber"] .metric-number{color:var(--amber)}

/* Lists and timeline keep their information density while feeling connected. */
.regression-row:hover{background:linear-gradient(90deg,rgba(var(--scene-accent-rgb),.045),rgba(9,15,22,.74) 45%)}
.timeline-item::before{transition:border-color .25s ease,box-shadow .25s ease}
.timeline-item:hover::before{border-color:var(--scene-accent);box-shadow:0 0 18px rgba(var(--scene-accent-rgb),.38)}
.timeline-item:hover h3{color:#fff}

/* Runtime panel gets restrained internal depth rather than a separate 3D scene. */
.runtime-body{position:relative;z-index:1}
.runtime-line{transition:background .16s ease,padding-left .16s ease}
.runtime-line:hover{background:linear-gradient(90deg,rgba(var(--scene-accent-rgb),.05),transparent);padding-left:7px}
.runtime-live{color:var(--scene-accent);transition:color .25s ease}

/* Slightly more legible glass when the animated background is visible. */
.section-dark,.ticker-band,.site-header{backdrop-filter:blur(18px) saturate(122%)}
.source-band{backdrop-filter:blur(10px)}

@media(max-width:760px){
  section[id]::after{width:calc(100% - 28px)}
  .section-index{padding-left:14px}
  .section-index::before{height:20px}
  .fx-card::before,.component-card::before,.metric-card::after,.scope-card::before,.repo-card::before,.limit-card::before,.final-panel::before{inset:6px}
}

@media(prefers-reduced-motion:reduce){
  .flow-node::after{display:none}
}