/* SAN Institute + Wiki fusion-depth v2 (2026-10-05) — local preview overlay over SAN V7.
   Scoped to html[data-fusion-palette] (Classic RGB / Atlas / Classic RGB Day), html[data-fusion-field]
   (Colour field scene) and html.fusion-depth (3D slabs, Institute home only; wiki routes are recoloured only). Existing palettes/scenes
   match none of these selectors and render exactly as before. */

#fusion-field{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(120% 90% at 20% 10%,color-mix(in srgb,var(--fz-a,#2f6fdf) 45%,transparent),transparent 60%),radial-gradient(90% 80% at 85% 30%,color-mix(in srgb,var(--fz-b,#1e9e6a) 45%,transparent),transparent 60%),radial-gradient(80% 70% at 50% 100%,color-mix(in srgb,var(--fz-c,#e0483e) 35%,transparent),transparent 65%),var(--fz-g,#070b16)}
html[data-fusion-field] #fusion-field{opacity:1}
html[data-fusion-field] .knowledge-scene{visibility:hidden!important}
body[data-knowledge-mode="2d"] #fusion-field{display:none}
@media(forced-colors:active){#fusion-field{display:none!important}}
@media print{#fusion-field{display:none!important}}

html[data-fusion-palette],html[data-fusion-field]{
  --fz-glass-a:rgba(255,255,255,.12);--fz-glass-b:rgba(255,255,255,.03);--fz-glass-line:rgba(255,255,255,.22);
  --fz-edge:#03060e;--fz-shadow:rgba(0,0,0,.55);--fz-spec:rgba(255,255,255,.16);--fz-bar:#0b1222;--fz-bar-line:rgba(255,255,255,.12)}
html.fusion-light{--fz-glass-a:rgba(255,255,255,.85);--fz-glass-b:rgba(255,255,255,.55);--fz-glass-line:rgba(255,255,255,.95);--fz-edge:#9aa6bd;--fz-shadow:rgba(30,40,70,.26);--fz-spec:rgba(255,255,255,.35);--fz-bar:#ffffff;--fz-bar-line:rgba(10,20,40,.12)}

/* Opaque control bar with the old SAN red / green / blue identity as its edge. */
html[data-fusion-palette] body .knowledge-bar{background:var(--fz-bar)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-color:var(--fz-bar-line)!important;border-image:none!important;
  box-shadow:inset 0 -4px 0 0 transparent,0 4px 0 -0px transparent,0 14px 34px rgba(0,0,0,.30)!important;position:relative}
html[data-fusion-palette] body .knowledge-bar::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:4px;border-radius:4px;pointer-events:none;
  background:linear-gradient(90deg,#2f6fdf 0 25%,#1e9e6a 25% 50%,#e0483e 50% 75%,#f2b33d 75%)}
html[data-fusion-palette] body .san-shell-tools select,html[data-fusion-palette] body .san-shell-tools button:not(.fusion-try),html[data-fusion-palette] body .san-view-switch{
  background:color-mix(in srgb,var(--fz-bar) 78%,var(--san-accent) 22%)!important;color:var(--ink)!important;border-color:color-mix(in srgb,var(--san-accent) 50%,transparent)!important}
html[data-fusion-palette] body .san-view-switch button[aria-pressed=true]{background:var(--ink)!important;color:var(--fz-bar)!important}
html[data-fusion-palette] body .san-paper-control{background:var(--fz-bar)!important;border-color:var(--fz-bar-line)!important}

.fusion-try{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border-radius:12px;border:1px solid rgba(47,111,223,.6);
  background:linear-gradient(135deg,rgba(47,111,223,.28),rgba(30,158,106,.24) 50%,rgba(224,72,62,.24));color:inherit;font:700 13px/1 "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.fusion-try::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;background:conic-gradient(#2f6fdf 0 33%,#1e9e6a 0 66%,#e0483e 0);box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.fusion-try .fusion-new{font:700 9px/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;padding:3px 5px;border-radius:5px;background:#f2b33d;color:#2a1a00}
.fusion-try[aria-pressed=true]{background:var(--fz-bar,#0b1222);border-color:var(--fz-bar-line,rgba(255,255,255,.2))}
.fusion-try:focus-visible{outline:3px solid #f2b33d;outline-offset:2px}
@media(max-width:760px){.fusion-try{width:40px;min-width:40px;padding:0;justify-content:center;gap:0}.fusion-try .fusion-label,.fusion-try .fusion-new{display:none}}


/* ---------- Institute home only: real CSS-3D slabs on the existing depth-tagged cards and panels ----------
   knowledge-glass/surfaces.js keep animating --san-rx/--san-ry/--san-lift (slow orientation);
   fusion adds pointer tilt, lift, glass face, tilt-aware edge thickness, specular and breathing.
   v2: scoped to body.san-observatory-home. Wiki routes get no fusion transforms (see below). */
html.fusion-depth body[data-san-spatial-reader].san-observatory-home :is([data-san-depth=card],[data-san-depth=panel]){
  transform:perspective(1200px) translateY(var(--san-lift,0px)) rotateX(calc(var(--san-rx,0deg) + var(--fz-tx,0deg))) rotateY(calc(var(--san-ry,0deg) + var(--fz-ty,0deg))) translateZ(var(--fz-z,0px));
  transition:box-shadow .45s ease}
html.fusion-depth body[data-san-spatial-reader].san-observatory-home [data-san-depth=card]{
  background:radial-gradient(360px circle at var(--fz-mx,30%) var(--fz-my,0%),var(--fz-spec),transparent 48%),linear-gradient(155deg,var(--fz-glass-a),var(--fz-glass-b)),var(--san-card-gradient,var(--san-panel))!important;
  border:1px solid var(--fz-glass-line)!important;border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),
    var(--fz-ex,0px) calc(var(--fz-ey,7px) * .45) 0 color-mix(in srgb,var(--fz-edge) 50%,var(--san-accent) 50%),
    var(--fz-ex,0px) var(--fz-ey,7px) 0 var(--fz-edge),
    calc(var(--fz-ex,0px) * 1.3) calc(var(--fz-ey,7px) + 3px) 0 -1px color-mix(in srgb,var(--fz-edge) 70%,transparent),
    0 34px 50px -24px var(--fz-shadow)!important;
  }
html.fusion-depth body[data-san-spatial-reader].san-observatory-home [data-san-depth=card]:nth-child(2n){animation-delay:-3s}
html.fusion-depth body[data-san-spatial-reader].san-observatory-home [data-san-depth=card]:nth-child(3n){animation-delay:-6s}
html.fusion-depth body[data-san-spatial-reader].san-observatory-home [data-san-depth=card]{position:relative}
html.fusion-depth body[data-san-spatial-reader].san-observatory-home :is([data-san-depth=card],[data-san-depth=panel]).fusion-hot{--fz-z:26px;animation-play-state:paused}
html.fusion-depth body[data-san-spatial-reader].san-observatory-home [data-san-depth=panel]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 0 color-mix(in srgb,var(--fz-edge) 55%,var(--san-accent) 45%),0 8px 0 var(--fz-edge),0 40px 70px -30px var(--fz-shadow)!important;
  border-color:var(--fz-glass-line)!important}
@keyframes fz-breathe{0%,100%{translate:0 0}50%{translate:0 -4px}}
html.fusion-depth body[data-knowledge-mode="2d"] :is([data-san-depth=card],[data-san-depth=panel]){transform:none!important;animation:none!important}

/* ---------- Wiki routes: recolour only ----------
   No shelf, no slabs, no pointer tilt, and the reader's depth-tagged panels / atlas cards are held flat
   (V7's own slow orientation transform is neutralised while a fusion palette or the colour field is on). */
html:is([data-fusion-palette],[data-fusion-field]) body.san-observatory-wiki [data-san-depth]{transform:none!important;animation:none!important;translate:none!important}

/* ---------- Institute hero panel under the colour field: real Encyclopedia plate ---------- */
.fusion-plate{display:none}
html[data-fusion-field] body.san-observatory-home .san-scene-aperture:has(.fusion-plate) > :not(.fusion-plate){display:none!important}
html[data-fusion-field] body.san-observatory-home .san-scene-aperture:has(.fusion-plate){justify-content:flex-start;gap:0;padding:14px;height:auto;min-height:0}
html[data-fusion-field] body.san-observatory-home .fusion-plate{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}
.fusion-plate-image{display:block;flex:1 1 auto;min-height:220px;max-height:400px;border-radius:14px 6px 14px 6px;overflow:hidden;background:#fffefb;border:1px solid var(--san-line-strong);box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.fusion-plate-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.fusion-plate-image:focus-visible{outline:3px solid var(--san-rim,#f2b33d);outline-offset:3px}
.fusion-plate-text{display:flex;flex-direction:column;gap:5px;padding:0 4px 2px;color:var(--ink)}
.fusion-plate-kicker{font:700 10.5px/1.3 "Segoe UI",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--san-rim,#f2b33d)}
.fusion-plate-text strong{font:700 19px/1.2 "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif}
.fusion-plate-text p{margin:0;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.fusion-plate-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:3px;font-size:13.5px;font-weight:650}
.fusion-plate-links a{color:var(--wiki-link,var(--accent))}
@media(max-width:760px){
  .fusion-plate-image{min-height:0;height:220px;flex:none}
  .fusion-plate-text p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  html.fusion-depth body[data-san-spatial-reader] :is([data-san-depth=card],[data-san-depth=panel]){animation:none!important;transition:none!important}
  #fusion-field{transition:none}
}
@media(forced-colors:active){html.fusion-depth body[data-san-spatial-reader] [data-san-depth=card]{background:Canvas!important}}
@media print{.fusion-try{display:none!important}}

/* ---------- Colour field engines (opt-in): compositor-only layers and video loop ---------- */
#fusion-field.fusion-layers,#fusion-field.fusion-video{overflow:hidden;background:var(--fz-g,#070b16)}
.fusion-layers .fz-l{position:absolute;inset:-7%;background-size:cover;background-position:center;background-repeat:no-repeat;
  translate:var(--fz-px,0px) var(--fz-py,0px);will-change:transform,opacity;backface-visibility:hidden}
.fusion-layers .fz-l0{animation:fz-drift0 64s ease-in-out infinite alternate}
.fusion-layers .fz-l1{opacity:0;animation:fz-fade 26s ease-in-out infinite,fz-drift1 52s ease-in-out infinite alternate}
.fusion-layers .fz-l2{opacity:0;animation:fz-fade 26s ease-in-out -13s infinite,fz-drift2 58s ease-in-out infinite alternate}
.fusion-layers:not(.is-running) .fz-l{animation-play-state:paused}
@keyframes fz-fade{0%,100%{opacity:0}50%{opacity:1}}
@keyframes fz-drift0{from{transform:scale(1.02) translate3d(-1%,0,0)}to{transform:scale(1.06) translate3d(1.2%,-.8%,0)}}
@keyframes fz-drift1{from{transform:scale(1.05) translate3d(1%,.8%,0)}to{transform:scale(1.02) translate3d(-1.4%,-.6%,0)}}
@keyframes fz-drift2{from{transform:scale(1.03) translate3d(-.6%,-1%,0)}to{transform:scale(1.07) translate3d(.9%,1%,0)}}
.fusion-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fusion-video video[hidden]{display:none}
#fusion-field.fusion-video:has(video[hidden]){background:radial-gradient(120% 90% at 20% 10%,color-mix(in srgb,var(--fz-a,#2f6fdf) 45%,transparent),transparent 60%),radial-gradient(90% 80% at 85% 30%,color-mix(in srgb,var(--fz-b,#1e9e6a) 45%,transparent),transparent 60%),radial-gradient(80% 70% at 50% 100%,color-mix(in srgb,var(--fz-c,#e0483e) 35%,transparent),transparent 65%),var(--fz-g,#070b16)}
@media(prefers-reduced-motion:reduce){.fusion-layers .fz-l{animation:none!important;translate:none}.fusion-layers .fz-l1,.fusion-layers .fz-l2{opacity:0}}