/* Decorative technical studies. The parent controls color and dimensions.
   Use on a dark panel, e.g. color: #eaf1e7; background: #173e35.
   Animation is opt-in: .drawing-active on the SVG or any ancestor. */
.cm-tech-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: inherit;
  pointer-events: none;
}
.cm-tech-svg :is(path, circle, ellipse) { vector-effect: non-scaling-stroke; }
.cm-tech-svg .cm-tech-guides { opacity: .24; stroke-width: 1; }
.cm-tech-svg .cm-tech-ground { opacity: .32; stroke-width: 1; }
.cm-tech-svg .cm-tech-back { opacity: .4; }
.cm-tech-svg .cm-tech-portal-depth { opacity: .65; }
.cm-tech-svg .cm-tech-dashed { stroke-dasharray: 3 7; }
.cm-tech-svg .cm-tech-accent { color: #c2e77e; stroke: #c2e77e; }
.cm-tech-svg .cm-tech-water { opacity: .35; stroke-dasharray: 36 14; }
.cm-tech-svg .cm-tech-detail { stroke-width: 1.2; }
.cm-tech-svg .cm-tech-frame-rear { opacity: .55; }
.cm-tech-svg .cm-tech-crossmembers { opacity: .7; }
.cm-tech-svg .cm-tech-pedestal { stroke-width: 1.5; }

/* Nothing moves until a panel is activated; base drawings remain complete
   when scripts are unavailable or when the user requests reduced motion. */
.drawing-active .cm-tech-module {
  animation: cm-tech-module-in 1.35s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--module-delay, 0ms);
}
.drawing-active .cm-tech-portal-trace {
  stroke-dasharray: 1050;
  animation: cm-tech-trace-in 1.9s cubic-bezier(.3, 0, .2, 1) both;
}
.drawing-active .cm-tech-arm {
  transform-box: view-box;
  transform-origin: 300px 214px;
  animation: cm-tech-arm-turn 2.5s cubic-bezier(.18, .65, .25, 1) both;
}
.drawing-active .cm-tech-frame-front {
  animation: cm-tech-frame-in 1.6s cubic-bezier(.16, 1, .3, 1) both;
}
.drawing-active .cm-tech-crossmembers {
  animation: cm-tech-members-in 1.4s .25s ease-out both;
}
/* The cupola is already open: reveal its fixed, connected geometry.
   Moving the lid as a 2D layer would detach the hinges and actuators. */
.drawing-active .cm-tech-dome-section {
  animation: cm-tech-dome-reveal 1.8s cubic-bezier(.2, .75, .2, 1) both;
}
@keyframes cm-tech-module-in {
  from { opacity: 0; transform: translate(0, -22px); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes cm-tech-trace-in {
  from { stroke-dashoffset: 1050; opacity: .3; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes cm-tech-arm-turn {
  from { transform: rotate(-18deg); }
  to { transform: rotate(0); }
}
@keyframes cm-tech-frame-in {
  from { opacity: .05; transform: translate(-24px, 19px); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes cm-tech-members-in {
  from { opacity: 0; }
  to { opacity: .7; }
}
@keyframes cm-tech-dome-reveal {
  from { opacity: .2; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-tech-svg *,
  .drawing-active .cm-tech-svg * {
    animation: none !important;
    transition: none !important;
  }
  .cm-tech-svg .cm-tech-dome-section { opacity: 1; }
}