/* ============================================================================
   MEET.CSS · the only DOM the deep-dive chapter owns.

   Everything a child looks at is in the diorama (three.js). What is left here is
   the host box and the ergonomic invariants from design doc §2.2 that a canvas
   cannot express: touch-action, no overscroll/pull-to-refresh, no callout.

   THE MENTOR'S BUBBLE USED TO LIVE HERE TOO — a warm plate above the grip zone
   with a progress hairline and a tap-to-skip, drawn by voice.js's `Local`
   whenever the shell's vo.js was absent. The owner's caption ruling of
   2026-08-31 removed narration text from every surface, so `Local` is audio and
   timing only and there is nothing left for this file to paint. Nothing
   reserved the space it stood in: the diorama fills `.meet-host` and always did.

   THE GRIP-ZONE VARS WENT WITH IT, AND THAT IS NOT A LOSS. `--meet-grip-b/-x`
   (and `--meet-cream`, the bubble's ink) were declared here and, once the bubble
   was gone, read by nothing at all. The grip contract the product actually
   stands on is shell.css's `--cur-grip-vis` / `--cur-grip-b` — the same
   8%-of-what-the-child-can-see rule with the same desktop override, and every
   piece of chrome in the deck anchors to it. Two copies of one invariant, one of
   them unread, is how they drift.
   ========================================================================== */

.meet-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1c211a;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.meet-host canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ---- THE FINDABLE TARGETS (owner ruling 2026-08-31) -----------------------
   The one exception to "everything a child looks at is in the diorama", and it
   is deliberate. A point of interest is not scenery: it is the instruction. The
   deck's previous answer — light on the bone, brighter and breathing — was read
   by the owner as blobs of light rather than targets, so the points now carry
   the marker every children's game carries: a pulsing reticle with a magnifying
   glass in it, and a hard lock-on the moment the glass reaches the point.

   It is DOM because it is UI: it must be crisp at 390 px, it may float over the
   gap inside a ribcage, and it has to read the same on Compsognathus's white
   plate as on Microraptor's black feather — which is what the dark outline
   under every stroke is for. See shared/meet/common/spots.js (MarkLayer) for
   the states; this file only dresses them.
   -------------------------------------------------------------------------- */
.ms-marks {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;          /* the glass is dragged through this layer */
  opacity: 0;
  transition: opacity 200ms ease;
  contain: layout style;
}
.ms-mark {
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 44px;
  will-change: transform;
}
.ms-mark > *,
.ms-body > * {
  position: absolute;
  inset: 0;
  display: block;
}

/* the echo: "there is something here", from across the screen */
.ms-pulse {
  border-radius: 50%;
  border: 2.5px solid rgba(255, 247, 231, .95);
  box-shadow: 0 0 0 1.5px rgba(20, 11, 2, .55), 0 0 14px rgba(255, 186, 92, .55);
  animation: ms-echo 1900ms cubic-bezier(.22, .68, .36, 1) infinite;
  animation-delay: calc(var(--i, 0) * -370ms);
}
/* the reticle itself.
   THE STROKE IS CREAM, NOT AMBER. The first build drew it in the deck's warm
   amber and it sank straight into the scene: the diorama IS amber — orange
   clay, a warm key light, tan bone — so an amber ring on it is a hue match at
   the same value, which is the one thing a target may not be. The ring carries
   its warmth in the GLOW around it and its legibility in a near-white stroke
   over a dark keyline, which is the pair that survives both the pale plates and
   Microraptor's near-black feather. */
.ms-body {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(22, 13, 3, .46) 52%, rgba(22, 13, 3, .10) 100%);
  animation: ms-breathe 2600ms ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -430ms);
  transition: transform 90ms cubic-bezier(.2, .9, .3, 1);
}
.ms-ring { overflow: visible; }
.ms-ring circle { fill: none; stroke-linecap: round; }
.ms-ring-track {
  stroke: #fff6e6;
  stroke-width: 8;
  stroke-dasharray: 16 12;
  /* the dark keyline is not decoration: without it a light stroke disappears
     into pale bone, which is the whole failure this marker exists to end */
  filter: drop-shadow(0 0 1.5px rgba(16, 9, 2, .98)) drop-shadow(0 0 5px rgba(16, 9, 2, .7));
  transform-origin: 50% 50%;
  animation: ms-spin 11s linear infinite;
}
.ms-ring-fill {
  stroke: #fff;
  stroke-width: 11;
  opacity: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  /* THE ARC NEEDS THE KEYLINE TOO. It shipped with only a warm glow under it,
     which was legible on every tan plate and invisible on h3n8q's bone slice —
     a white stroke with an amber halo, on bone already reading near 255. The
     dark keyline goes FIRST so the amber glow lands outside it, exactly as on
     the rest track. */
  filter: drop-shadow(0 0 1.5px rgba(16, 9, 2, 1))
          drop-shadow(0 0 3px rgba(16, 9, 2, .9))
          drop-shadow(0 0 7px rgba(255, 168, 56, .95));
  transition: opacity 90ms linear;
}
.ms-glyph {
  inset: 26%;                    /* the glass sits INSIDE its own reticle */
  fill: none;
  stroke: #fff8ec;
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1.5px rgba(16, 9, 2, .98)) drop-shadow(0 1px 2px rgba(16, 9, 2, .75));
}

/* ---- ARMED: the interaction for THIS point has started -------------------
   The state the owner said was missing. It is not a fade — the echo stops in
   one frame, the reticle snaps in, the dashes give way to a solid arc that
   jumps straight to the arm floor and then sweeps to full as the glass closes.
   Same number the shader's own arm term uses, same frame. */
.ms-mark.armed .ms-pulse {
  animation: none;
  transform: scale(1.30);
  border-color: rgba(255, 214, 138, .95);
  box-shadow: 0 0 0 1.5px rgba(20, 11, 2, .55), 0 0 22px 6px rgba(255, 168, 56, .85);
}
.ms-mark.armed .ms-body {
  transform: scale(.84);
  animation: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 172, 62, .58) 50%, rgba(255, 146, 34, .16) 100%);
  box-shadow: 0 0 0 3px rgba(255, 250, 236, .80), 0 0 26px 6px rgba(255, 170, 60, .75);
}
.ms-mark.armed .ms-ring-track { stroke: rgba(38, 20, 4, .55); animation: none; filter: none; }
.ms-mark.armed .ms-ring-fill { opacity: 1; }
.ms-mark.armed .ms-glyph { stroke: #fff; stroke-width: 3; }

/* ---- FOUND: it pops, and the plate's own warm ring is the mark from here --
   The fade is on the marker and the SCALE is on its body: the marker's own
   `transform` is the inline translate JS writes every frame, and an animation
   on it would snap the whole thing to the top-left corner. */
.ms-mark.found { animation: ms-gone 360ms ease-out forwards; }
.ms-mark.found .ms-body { animation: ms-pop 360ms cubic-bezier(.2, .9, .3, 1) forwards; }
.ms-mark.found .ms-pulse { animation: none; opacity: 0; }
/* already spent when the layer was rebuilt — the same end state, no second pop */
.ms-mark.gone { opacity: 0; }
.ms-mark.gone * { animation: none; }

@keyframes ms-echo {
  0%   { transform: scale(.80); opacity: 0; }
  18%  { opacity: .9; }
  100% { transform: scale(1.62); opacity: 0; }
}
@keyframes ms-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.065); }
}
@keyframes ms-spin { to { transform: rotate(360deg); } }
@keyframes ms-pop {
  0%   { transform: scale(1); }
  100% { transform: scale(1.75); }
}
@keyframes ms-gone {
  0%   { opacity: 1; }
  70%  { opacity: .45; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* the target must still be a target: the reticle and the lock-on stay, only
     the looping motion goes */
  .ms-pulse { animation: none; opacity: .55; transform: scale(1.3); }
  .ms-body, .ms-ring-track { animation: none; }
}