/* THE RAIL IN 3D (4 Oct 2026): see site/rail3d.js. The field sits behind the icons; icons tilt in perspective; the open
   door gets a lit sphere in its innovator colour (light from the upper left, a rim of the same colour, a soft shadow). */
#side{isolation:isolate}
#side .r3-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
#side-list li .tile{perspective:260px}
#side-list li .tile > svg{transform:rotateX(var(--r3x,0deg)) rotateY(var(--r3y,0deg)) translateZ(0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),color .25s,background .25s,box-shadow .25s!important;will-change:transform}
#side-list li .tile:hover > svg{transform:rotateX(var(--r3x,0deg)) rotateY(var(--r3y,0deg)) translateZ(10px) scale(1.06)}
/* the lit sphere behind the open door */
html body #side-list li.door5 .tile.on > svg{
  background:radial-gradient(circle closest-side at 50% 50%,rgba(var(--dc),.62),rgba(var(--dc),.30) 45%,rgba(var(--dc),.08) 72%,rgba(var(--dc),0) 100%)!important;
  box-shadow:0 0 22px -2px rgba(var(--dc),.55),0 0 6px rgba(var(--dc),.35)!important;color:#fff!important}
html body #side-list li.home-door .tile.on > svg{
  background:radial-gradient(circle closest-side at 50% 50%,rgba(227,200,120,.55),rgba(227,200,120,.26) 45%,rgba(227,200,120,.07) 72%,rgba(227,200,120,0) 100%)!important;
  box-shadow:0 0 22px -2px rgba(227,200,120,.5),0 0 6px rgba(227,200,120,.3)!important;color:#fff!important}
@media (prefers-reduced-motion:reduce){#side-list li .tile > svg{transform:none!important}}

/* backlit, no rims (4 Oct 2026, Victor: "remove these borders, just leave illuminated as if backlit or inner light") */
html body #side-list li .tile:hover > svg{box-shadow:0 0 18px -4px rgba(var(--dc,227,200,120),.45)!important;background:radial-gradient(circle closest-side,rgba(var(--dc,227,200,120),.26),rgba(var(--dc,227,200,120),0) 100%)!important}
html body #side-list li .tile > svg{outline:0!important;border:0!important}

/* CONTOUR LIGHT (4 Oct 2026, Victor: "no ugly circle around it ... add the inner glow to the object contour itself ... enlarge
   it say 25%"): no disc, no ring, no tint behind any icon; the open door's own strokes glow in its innovator colour */
html body #side-list li .tile > svg,html body #side-list li .tile:hover > svg,html body #side-list li .tile.on > svg,
html body .side li .tile > svg,html body .side li .tile:hover > svg,html body .side li .tile.on > svg{
  background:none!important;box-shadow:none!important;border:0!important;outline:0!important}
html body #side-list li .tile,html body #side-list li .tile:hover,html body #side-list li .tile.on{background:none!important;box-shadow:none!important}
html body #side-list li .tile.on > svg{transform:rotateX(var(--r3x,0deg)) rotateY(var(--r3y,0deg)) scale(1.25)!important;
  color:rgb(var(--dc,227,200,120))!important;
  filter:drop-shadow(0 0 1.5px rgba(var(--dc,227,200,120),.95)) drop-shadow(0 0 6px rgba(var(--dc,227,200,120),.7)) drop-shadow(0 0 14px rgba(var(--dc,227,200,120),.35))!important}
html body #side-list li.home-door .tile.on > svg{color:#e3c878!important;
  filter:drop-shadow(0 0 1.5px rgba(227,200,120,.95)) drop-shadow(0 0 6px rgba(227,200,120,.7)) drop-shadow(0 0 14px rgba(227,200,120,.35))!important}
html body #side-list li .tile:not(.on):hover > svg{filter:drop-shadow(0 0 5px rgba(var(--dc,227,200,120),.55))!important}
html body #side-list li.door5 .tile > svg,html body #side-list li.door5 .tile.on > svg,html body #side-list li.door5 .tile:hover > svg,
html body #side-list li.home-door .tile > svg,html body #side-list li.home-door .tile.on > svg,html body #side-list li.home-door .tile:hover > svg{background:none!important;box-shadow:none!important}
html body #side-list li .tile::after,html body #side-list li .tile.on::after{box-shadow:none!important;background:none!important}
html body #side-list li.door5 .tile.on,html body #side-list li.home-door .tile.on{background:none!important;box-shadow:none!important}