/* ANJOUO logo motion — stage styles (all classes prefixed lm-).
   Transplanted from the anjouo-ouo-face-motion-simple piece; stage only. */

/* Wrapper: replaces the old text wordmark in the 40px header, top-left.
   The stage is sized so the letters render at the ORIGINAL wordmark's
   cap height (17px font ≈ 12.2px caps -> 66px stage). The wrap is 74px
   tall with -17px vertical margins, so its layout footprint stays
   exactly the header's 40px and nothing else on the page moves; the
   stage simply uses the header's padding air. Transparent on the dark
   theme (page bg shows through); on the light theme it becomes the
   dark brand chip so the white letters/dome stay readable. */
.lm-wrap {
  flex: none;
  height: 74px;
  margin: -17px 0;
  padding: 4px 5px;
  border-radius: 14px;
  background: transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
/* Light theme: no dark chip — the letters switch to ink sprites
   (JS) and the white dome gets a soft outline shadow instead. */
[data-theme="light"] .lm-dome { filter: drop-shadow(0 1px 3px rgba(11, 13, 20, 0.35)); }

/* Parallax wrapper — the whole stage drifts/tilts a hair toward the
   pointer in wordmark state; suspended while the robot head is up */
.lm-parallax {
  width: 100%;
  will-change: transform;
}

/* Stage: one coordinate space, 246 × 216 native units.
   The wordmark band is vertically centred: letter tops at y = 88,
   letter height 40 (tops 40.7407%, height 18.5185%). */
.lm-stage {
  position: relative;
  height: 65px;
  width: 74px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Head group: carries the robot-state breathing + pointer tilt.
   Hidden until the readiness gate confirms every letter sprite is
   decoded, so the wordmark is revealed complete in one go — never
   letter by letter, never a half-built flash. */
.lm-headgroup {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  opacity: 0;
  visibility: hidden;
}
.lm-wrap.lm-ready .lm-headgroup { opacity: 1; visibility: visible; }

/* ---- robot helmet dome + visor (behind the letters) ---- */
.lm-dome {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("/brand-layers/dome.png?v=20261023a") 0 0 / 100% 100% no-repeat;
  opacity: 0;
  will-change: transform, opacity;
}
.lm-visor {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("/brand-layers/visor.png?v=20261023a") 0 0 / 100% 100% no-repeat;
  opacity: 0;
  will-change: transform, opacity;
}
/* Cyan panel patch on the dome's crown — what the letter A BECOMES in
   robot state (the A crossfades into this; no letterform remains) */
/* The panel is a CHILD of the dome (positioned in dome space:
   dome is x 28..218, y 16..170; the panel patch is x 76..170,
   y 19..52) so it inherits the dome's scale + absorb pulse exactly —
   it can never drift or respawn offset from the head. */
.lm-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("/brand-layers/hood.png?v=20261023a") 0 0 / 100% 100% no-repeat;
  opacity: 0;
  will-change: transform, opacity;
}

/* ---- letters: wrappers sit on the wordmark slots; JS springs them ---- */
.lm-slot {
  position: absolute;
  top: 40.7407%;           /* y 88 */
  height: 18.5185%;        /* 40 units */
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}
.lm-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.lm-slot .lm-cyan { opacity: 0; }
/* N / J stay white on a white dome in robot state: a soft dark drop
   shadow keeps them readable where they overlap the helmet (it is
   invisible against the dark background in wordmark state) */
.lm-s-n img, .lm-s-j img { filter: drop-shadow(0 1px 2px rgba(5, 7, 12, 0.5)); }
/* Light theme: that dark drop-shadow is invisible on dark backgrounds
   but shows as a weird dark halo behind the ink N/J on light ones. */
[data-theme="light"] .lm-s-n img, [data-theme="light"] .lm-s-j img { filter: none; }
.lm-slot .lm-face-glow { filter: drop-shadow(0 0 4px rgba(42, 171, 238, 0.85)); }
/* left / width in % of the 246-unit stage width; slots unchanged */
.lm-s-a  { left: 0%;       width: 13.4146%; }
.lm-s-n  { left: 18.2927%; width: 11.7886%; }
.lm-s-j  { left: 34.9593%; width: 8.9431%; }
.lm-s-o1 { left: 49.1870%; width: 14.6341%; }
.lm-s-u  { left: 68.6992%; width: 11.7886%; }
.lm-s-o2 { left: 85.3659%; width: 14.6341%; }

/* Pupil dot inside each O's counter (hole): 9 native units of 246 */
.lm-pupil {
  position: absolute;
  top: 50%;                /* wordmark eye centre y = 108 / 216 */
  width: 4.0650%;          /* 9 / 246 */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #ffffff;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}
.lm-p-left  { left: 56.5041%; } /* eye centre x = 139 / 246 */
.lm-p-right { left: 92.6829%; } /* eye centre x = 228 / 246 */

/* extracted reference letters: pre-sized so the flight's uniform
   scale lands them on their exact reference rects */
.lm-slot img.lm-exact {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  height: auto;
  transform: translate(-50%, -50%);
}
.lm-slot img.lm-ex-o { width: 90.2%; }
.lm-slot img.lm-ex-u { width: 121.6%; }