/* ============================================================
   TRUETAP-XRAY.CSS - Sprint B interactive x-ray reveal

   Progressive-enhancement contract:
   - The .tt-xray overlay is created by assets/js/truetap-xray.js
     and appended inside the Inside TrueTap render frame. Without
     the script, none of this exists and the stage is unchanged.
   - Disabled by the kill switch (window.TRUETAP_XRAY_ENABLED =
     false or ?tt-xray=off), by prefers-reduced-motion, and
     whenever CSS radial masks are unsupported.
   - Nothing here modifies any .itt-* rule; the overlay only
     layers on top of the existing render frame.

   Visual language (final polish): the material should appear to
   become locally translucent - "I can see through the material
   here" - never "I am looking through a circular UI window".
   No hard ring, no neon circumference, no magnifying glass.
   ============================================================ */

/* ---- Overlay: reveal plate masked to a localized lens -------
   The reveal <img> is pixel-identical to the assembled plate
   (same manifest geometry, same frame), so the radial mask
   creates the x-ray window with zero visual jumping. The mask
   feather is deliberately wide: the transition from assembled
   to translucent should be felt before any shape is noticed. */

.tt-xray {
  position: absolute;
  inset: 0;
  z-index: 6;               /* above plates, below nothing interactive */
  pointer-events: none;     /* never blocks stack/legend/replay input */
  opacity: 0;
  transition: opacity 240ms ease;
}

.tt-xray__img,
.tt-xray__haze,
.tt-xray__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(
    circle var(--ttx-r, 72px) at var(--ttx-x, -400px) var(--ttx-y, -400px),
    #000 42%, rgba(0, 0, 0, 0.5) 58%, transparent 84%
  );
  mask-image: radial-gradient(
    circle var(--ttx-r, 72px) at var(--ttx-x, -400px) var(--ttx-y, -400px),
    #000 42%, rgba(0, 0, 0, 0.5) 58%, transparent 84%
  );
}

.tt-xray__img {
  user-select: none;
  -webkit-user-drag: none;
}

/* Translucent-material cue: a barely-there warm haze that makes the
   lens area read as "surface gone soft", not as a cut-out window. */
.tt-xray__haze {
  background: rgba(255, 252, 247, 0.07);
}

/* Footwear internal credential layer (browser-rendered, replaces the
   split-construction plate inside the moving lens only). */
.tt-xray__svg {
  pointer-events: none;
}

/* ---- Lens chrome: greatly softened --------------------------
   Only a faint warm internal illumination remains; the visible
   circumference and edge stroke are reduced to a whisper. */

.tt-xray__lens {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--ttx-r, 72px) * 2);
  height: calc(var(--ttx-r, 72px) * 2);
  border-radius: 50%;
  transform: translate3d(
    calc(var(--ttx-x, -400px) - var(--ttx-r, 72px)),
    calc(var(--ttx-y, -400px) - var(--ttx-r, 72px)),
    0
  );
  box-shadow:
    0 0 0 1px rgba(198, 90, 30, 0.045),
    0 0 22px rgba(198, 90, 30, 0.065),
    inset 0 0 20px rgba(198, 90, 30, 0.045),
    inset 0 0 3px rgba(255, 255, 255, 0.14);
  background: radial-gradient(
    circle at 50% 42%,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0) 58%
  );
}

/* ---- Identity card: localized contrast inside the lens only -- */

.tt-xray--idcard .tt-xray__img {
  filter: contrast(1.09) saturate(1.07);
}

.tt-xray--idcard .tt-xray__haze {
  background: rgba(198, 90, 30, 0.06);
}

.tt-xray--idcard .tt-xray__lens {
  background: radial-gradient(
    circle at 50% 42%,
    rgba(255, 244, 235, 0.10),
    rgba(255, 255, 255, 0) 58%
  );
}

/* ---- Interaction hint ----------------------------------------
   Quiet line inside the stage, above the bottom annotations,
   clear of "Illustrative views - not to scale.". Shown while the
   lens is first available; fades permanently after the user's
   first successful reveal in the page session. */

.tt-xray__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(2.6rem, 4vw, 3.4rem);
  transform: translateX(-50%);
  z-index: 7;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--itt-ink-muted, #8a8a8a);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 420ms ease,
    visibility 0s linear 470ms;
  pointer-events: none;
}

.tt-xray__hint.is-hint-on {
  opacity: 0.72;
  visibility: visible;
  transition: opacity 420ms ease;
}

.tt-xray__hint.is-hint-done {
  opacity: 0;
  visibility: hidden;
}

/* ---- Touch: vertical scroll stays native, horizontal drags --
   drive the lens. Applied only while the module is active. */

[data-itt-stage].tt-xray-armed {
  touch-action: pan-y;
}

/* ---- Small screens: even quieter chrome ---------------------- */

@media (max-width: 640px) {
  .tt-xray__lens {
    box-shadow:
      0 0 0 1px rgba(198, 90, 30, 0.04),
      0 0 16px rgba(198, 90, 30, 0.055),
      inset 0 0 14px rgba(198, 90, 30, 0.04),
      inset 0 0 3px rgba(255, 255, 255, 0.12);
  }
}

/* ---- Reduced motion: the tracking lens never appears -------- */

@media (prefers-reduced-motion: reduce) {
  .tt-xray,
  .tt-xray__hint {
    display: none !important;
  }
}