/* ==========================================================================
   Ember — ambient companion (additive module)
   Ported from ember-flame-v6.html. Everything here targets elements that
   ember.js creates itself; no rule selects or restyles an existing app element.

   Stacking: Ember owns z 90-95. That sits above both dust layers (margin dust
   z 0, burst dust z 60) and Parang (z 0), and below the Bridge modal (z 200),
   so the modal still covers it. The numbers are relative to Ember's own layers
   only -- nothing existing was renumbered to make room.
   ========================================================================== */

.ember-layer {
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  box-sizing: border-box;
}

/* Light layers are ORDINARY alpha, deliberately not mix-blend-mode: screen.
   A blend mode (and likewise any CSS filter) makes Chrome re-rasterise the
   host page's own text on every screen that does not scroll -- measured at up
   to 34,625 changed pixels outside Ember's corner, GPU path included, with no
   layout or colour change, only letter edges. With plain alpha: 0. Visually
   the difference is small: on light themes `screen` barely showed at all,
   and on dark themes the two read almost the same. */
#ember-ground { z-index: 90; }
#ember-glow   { z-index: 91; }

#ember-body {
  z-index: 92;
  transform-origin: 50% 100%;
}
#ember-body > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
/* The flame is a canvas with its tint and glow baked in (ember.js paints it),
   sized and offset inline so the glow has room around the body box. */
#ember-flame {
  position: absolute;
  display: block;
  pointer-events: none;
}

.ember-particle {
  z-index: 93;
  border-radius: 50%;
  opacity: 0;
}

.ember-snore {
  z-index: 94;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  user-select: none;
  transform: translate(-50%, -50%);
}

/* The only interactive element. Transparent; it just tracks the flame. */
#ember-hit {
  z-index: 95;
  pointer-events: auto;
  background: transparent;
  border: 0;
  border-radius: 40% 40% 45% 45%;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
}
#ember-hit[data-mode="active"]   { cursor: grab; }
#ember-hit[data-dragging="true"] { cursor: grabbing; }
#ember-hit:focus { outline: none; }
#ember-hit:focus-visible {
  /* neutral grey so it reads on the dark landing and on light/dark themes */
  outline: 2px dashed rgba(128, 128, 128, 0.85);
  outline-offset: 2px;
}

#ember-hit[data-follow="true"]   { pointer-events: none; }  /* sits under the cursor while following */

/* Control panel: the blueprint oil lamp from frontend/ember/ember button.html,
   shown only while Ember is awake (ember.js toggles [hidden]).

   Colour follows the page, through the --bp-* properties below:
     - landing page: the file's own transparent treatment -- faint blue washes,
       white linework;
     - study page (dig screen): the Batik Parang colour. Shapes take --primary,
       exactly what .parang-shape paints, and the linework takes --base, the
       ground the Parang sits on, so the lamp reads as a cut-out of that pattern.
   Gated with the same :has() test the Parang layer uses. NOTHING here is
   transitioned: fills are fed by theme custom properties, and a transitioned
   var-fed property keeps its old value across a theme switch (see CLAUDE.md).

   Width is half the first cut: 95px at <=1280, growing to 140px by 1460.
   The artwork sits on transparent ground, so only its drawn parts take the
   pointer; empty space between them still reaches the page.

   Deliberately left out of the file: the SVG feTurbulence/feDisplacementMap
   "roughen" filter and the hover drop-shadow filter. Any filter on an Ember
   layer makes Chrome re-rasterise the host page's text (see the note on the
   light layers above). Hover is shown by fill instead. */
#ember-controls {
  left: auto;
  top: auto;
  right: 16px;
  bottom: 12px;
  z-index: 96;
  width: clamp(95px, calc(25vw - 225px), 140px);
  line-height: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  --bp-ink:   #f7f8f8;                  /* linework */
  --bp-shell: rgba(34, 83, 132, .05);   /* lamp body */
  --bp-face:  rgba(34, 83, 132, .12);   /* button faces */
  --bp-hover: rgba(255, 255, 255, .10);
  --bp-solid: #225384;                  /* thumb, track core, pressed inner face */
}
body:has(#dig-screen:not(.hidden)) #ember-controls {
  --bp-ink:   var(--base);
  --bp-shell: var(--primary);
  --bp-face:  var(--primary);
  --bp-hover: color-mix(in srgb, var(--primary) 82%, var(--base));
  --bp-solid: var(--primary);
}
#ember-controls[hidden] { display: none !important; }

.ember-bp {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* the outer <svg> is hit-tested as a whole box; only its drawn shapes take the pointer */
  pointer-events: none;
}
.ember-bp * { pointer-events: visiblePainted; }
.ember-bp .ember-bp-construction * { pointer-events: none; }    /* guide lines drawn over the buttons */
.ember-bp:focus, .ember-bp *:focus { outline: none; }

.ember-bp-shell       { fill: var(--bp-shell); stroke: var(--bp-ink); stroke-width: 3; }
.ember-bp-line        { fill: none; stroke: var(--bp-ink); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ember-bp-outline     { stroke-width: 3.2; }
.ember-bp-fine        { stroke-width: 1.15; opacity: .72; }
.ember-bp-hair        { stroke-width: .75; opacity: .48; }
.ember-bp-hatch       { fill: url(#ember-bp-hatch); opacity: .62; pointer-events: none; }
.ember-bp-hatch-line  { stroke: var(--bp-ink); }
.ember-bp-construction { fill: none; stroke: var(--bp-ink); stroke-width: .8; opacity: .28; pointer-events: none; }

.ember-bp-btn { cursor: pointer; }
.ember-bp-face { fill: var(--bp-face); stroke: var(--bp-ink); stroke-width: 3; }
.ember-bp-btn:hover .ember-bp-face { fill: var(--bp-hover); }
.ember-bp-btn.is-on .ember-bp-outer,
.ember-bp-btn.is-on:hover .ember-bp-outer { fill: var(--bp-ink); }
.ember-bp-btn.is-on .ember-bp-inner { fill: var(--bp-solid); }
.ember-bp-glyph  { fill: none; stroke: var(--bp-ink); stroke-width: .85; stroke-linejoin: round; pointer-events: none; }
.ember-bp-btn.is-on .ember-bp-glyph { fill: var(--bp-ink); }
.ember-bp-swatch { stroke: var(--bp-ink); stroke-width: 3; pointer-events: none; }

/* keyboard focus: a dashed ring drawn in the artwork's own line style */
.ember-bp-focus, .ember-bp-thumb-focus {
  fill: none;
  stroke: var(--bp-ink);
  stroke-width: 2.5;
  stroke-dasharray: 7 6;
  opacity: 0;
  pointer-events: none;
}
.ember-bp-btn:focus-visible .ember-bp-focus,
.ember-bp-slider:focus-visible .ember-bp-thumb-focus { opacity: .9; }
/* the focus ring must still read against the page, not only the lamp */
.ember-bp-btn:focus-visible .ember-bp-focus { stroke: var(--bp-solid); stroke-width: 4; }

.ember-bp-track       { fill: none; stroke: var(--bp-ink); stroke-width: 10; stroke-linecap: round; opacity: .92; pointer-events: none; }
.ember-bp-track-inner { fill: none; stroke: var(--bp-solid); stroke-width: 4.2; stroke-linecap: round; pointer-events: none; }
.ember-bp-slider-hit  { fill: none; stroke: transparent; stroke-width: 34; stroke-linecap: round; cursor: grab; touch-action: none; }
.ember-bp-thumb       { fill: var(--bp-solid); stroke: var(--bp-ink); stroke-width: 3; cursor: grab; touch-action: none; }
.ember-bp-slider.is-dragging .ember-bp-slider-hit,
.ember-bp-slider.is-dragging .ember-bp-thumb { cursor: grabbing; }

/* The Syntax stage widens its panel to within 24px of both viewport edges at
   every width, so no corner is clear there (measured at 25 viewport sizes).
   Ember steps out of the way on that stage only. This is a read-only test of
   state the app already exposes -- the same :has() mechanism the Parang layer
   uses -- and Ember's dormant/active state is untouched by it. */
body:has(#dig-screen:not(.hidden) #panel-syntax:not(.hidden)) .ember-layer {
  display: none !important;
}

@media print {
  .ember-layer { display: none !important; }
}