/* Gazer mini-app — the AR-HUD starmap rendered inside the Display Glasses lens
   (.project--displayglasses .project__placeholder). The placeholder already
   carries a scroll-tied transform/filter (see style.css); the .gazer wrapper is
   a separate layer so the one-time intro scale/fade composes on top of that
   rather than fighting the inline --glasses-scale write. No background fill —
   the canvas blends additively over the lens image beneath it. */

/* Scoped accent (the HUD color). Lives only on the placeholder so it never
   touches the global --color-accent token. gazer.js reads it once via
   getComputedStyle for the canvas-drawn compass/crosshair/lines; the toast
   uses it directly in CSS. */
.project--displayglasses .project__placeholder {
  --gazer-accent: #ffc460;
}

/* The lens now holds the live gazer starmap, so the 10% white "you're here"
   overlay (style.css ::after) is no longer wanted — it reads as a grey block
   behind the HUD. Drop its fill so the starmap sits on the natural dark lens.
   (screens.js still drives --glasses-square-opacity; with no fill it's a no-op.) */
.project--displayglasses .project__placeholder::after {
  background: transparent;
}

.gazer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Intro layer: gazer.js drives scale/opacity for the app fade-in. Settled
     defaults so it reads correctly before/without the intro (reduced motion,
     cold paint). */
  transform: scale(1);
  opacity: 1;
  transform-origin: center;
  /* Screen-blend the WHOLE mini-app (canvas HUD + DOM pills) over the lens as
     one group, never just the canvas. This way the app reads as light added
     onto the glasses display: black contributes nothing (so the pills' solid
     #000 fill knocks the busy starfield out to the bare lens behind it) while
     the accent strokes/text and the star glow blend additively on top. */
  mix-blend-mode: screen;
}

.gazer__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Intro splash: the gazericon centered in the lens, scaled up + faded out by
   gazer.js once when the section scrolls into view. */
/* Scoped to outweigh `.project__media img` (style.css), which sets
   width:auto/max-* and would otherwise stretch the icon to fill the lens. */
.project--displayglasses .project__placeholder .gazer__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20%;
  height: auto;
  max-width: none;
  max-height: none;
  opacity: 0;
  transform: scale(1);
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

/* Constellation name toast — slides in from the top with an ease-out-back
   overshoot when the crosshair settles over a constellation. Sits on a rounded
   pill: under the wrapper's screen blend the #000 fill knocks the starfield out
   to the bare lens, and the accent stroke/text glow on top, for legibility. */
.gazer__toast {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translate(-50%, -120%);
  opacity: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--gazer-accent);
  background: #000;
  border: 1px solid var(--gazer-accent);
  border-radius: 999px;
  padding: 4px 12px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.gazer__toast--visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* Coordinate readout — the crosshair's RA/Dec, on a matching pill just above
   the compass. word-spacing opens up the single gap between the two figures. */
.gazer__readout {
  position: absolute;
  left: 50%;
  bottom: 11.5%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  word-spacing: 0.5em;
  white-space: nowrap;
  color: var(--gazer-accent);
  background: #000;
  border: 1px solid var(--gazer-accent);
  border-radius: 999px;
  padding: 3px 11px;
  pointer-events: none;
}

/* Reduced motion: the toast appears instantly (gazer.js also skips the intro
   and runs the app statically). */
@media (prefers-reduced-motion: reduce) {
  .gazer__toast {
    transition: none;
  }
}