/* AWMY hero-cube — component styles (shared by the lab and the landing).
   Colors come from page variables (--paper/--ink) with a mono fallback. */
.cube{ width:100%; height:auto; display:block; }
.cube .edge{ fill:var(--paper, #FFFFFF); stroke:var(--ink, #0B0A08); stroke-width:2;
  stroke-linejoin:miter; vector-effect:non-scaling-stroke;
  transform-box:view-box; transform-origin:0 0; }
/* Face breathing and the cursor response are driven by JS (cube.js) via the CSS translate property —
   the unfold itself lives in transform, so the layers compose cleanly. */
.cube .core{ fill:var(--ink, #0B0A08); }
/* Blue scanner snake — a blue duplicate of the symbol (colors the figure, like the green one), over the selected symmetric figures */
/* Symbol color is set by SVG fill filters (#awmy-white/blue/green in the cube.js defs),
   NOT by CSS filter: older iOS Safari does not apply CSS filter to SVG <image>. Here — only opacity/transitions. */
.cube #core-blue image{ opacity:0; transition:opacity 280ms ease; }
/* Symbols — white on the black core; the scan wave dims them via opacity */
.cube #core-symbols image{ opacity:0;
  transform-box:fill-box; transform-origin:center;
  transition-property:opacity, transform; transition-timing-function:ease-out; }
/* Green duplicate of the symbol — the majority group ("target found"), colors the figure, background stays black */
.cube #core-green image{ opacity:0; transition:opacity 650ms ease; }
.cube .core-frame{ fill:none; stroke:var(--ink, #0B0A08); stroke-width:8; vector-effect:non-scaling-stroke; }
@media (prefers-reduced-motion: reduce){
  .cube #core-symbols image{ transition:none; opacity:1; }
}