/*
 * YE JUN Portfolio v13 — Fluid X-Ray Reveal component (work 02).
 * Scoped to [data-fluid-xray]. A full-bleed near-black / deep-navy stage: repeated published side
 * profiles, a skeleton revealed by the pointer trail. Without JS, without 2D canvas, or until both
 * local images decoded and the first frame rendered, the fallback poster <img> stays visible;
 * v13-fluid-xray.js adds .fluid-xray--ready only then, and the canvas fades in over the poster.
 * No labels, grids, crosshairs or warm colour live here — the canvas carries the whole image.
 */

[data-fluid-xray] {
  /* Cold X-ray palette (also read by the legacy figure renderer). */
  --xray-film: #04101e;
  --xray-glow: #4aa8ff;
  --xray-bone: #e6f3ff;
  --fluid-xray-stage: #03070e;
  position: relative;
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 18rem;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--fluid-xray-stage);
  color: var(--ink, #e8f0e9);
  border: 1px solid rgba(110, 170, 220, 0.14);
  cursor: crosshair;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

[data-fluid-xray].fluid-xray--hero {
  block-size: clamp(32rem, 86svh, 56rem);
}

[data-fluid-xray].fluid-xray--card {
  aspect-ratio: 4 / 5;
}

[data-fluid-xray] > img {
  position: absolute;
  inset: 0 0 auto;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: calc(100% - 3rem);
  padding: 5%;
  object-fit: contain;
  pointer-events: none;
}

[data-fluid-xray].fluid-xray--ready > img {
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
}

/* Embedded host (data-fluid-xray-embedded): the component sits on the existing 16:9 work-card media
   inside the case link. The in-flow poster sets the frame (portfolio.css keeps it 16:9), the link
   keeps its own cursor, and the poster stays in the accessibility tree under the live canvas
   (opacity, not visibility). It is hidden only after the canvas has faded in over it. */
[data-fluid-xray][data-fluid-xray-embedded] {
  min-block-size: 0;
  border: 0;
  cursor: inherit;
}

[data-fluid-xray][data-fluid-xray-embedded] > img {
  position: static;
  display: block;
  block-size: auto;
  padding: 0;
  object-fit: cover;
}

.work-row:hover [data-fluid-xray][data-fluid-xray-embedded] > img {
  transform: none;
}

[data-fluid-xray][data-fluid-xray-embedded].fluid-xray--ready > img {
  visibility: visible;
  opacity: 0;
  transition: opacity 0s linear 0.6s;
}

/* Optional native motion stays inert until policy allows playback. The still image remains directly
   underneath it, so decode, autoplay-policy and network failures all fail open without a blank card. */
[data-fluid-xray] > .fluid-xray__motion {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s linear;
}

[data-fluid-xray-motion].fluid-xray--motion-ready > .fluid-xray__motion {
  opacity: 1;
}

[data-fluid-xray][data-fluid-xray-embedded][data-fluid-xray-motion].fluid-xray--ready > img {
  visibility: visible;
  opacity: 1;
  transition: none;
}

[data-fluid-xray] > .fluid-xray__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

/* The canvas is only inserted once ready; it fades in over the still-visible poster. */
[data-fluid-xray].fluid-xray--ready > .fluid-xray__canvas {
  animation: fluid-xray-reveal-in 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes fluid-xray-reveal-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[data-fluid-xray] > figcaption {
  position: absolute;
  inset: auto 1rem 0.8rem;
  z-index: 1;
  margin: 0;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(206, 226, 242, 0.72);
  overflow-wrap: anywhere;
  pointer-events: none;
}

[data-fluid-xray] > figcaption b {
  color: var(--xray-glow);
  font-weight: 500;
}

[data-fluid-xray]:focus {
  outline: none;
}

/* Keyboard focus keeps the site-wide focus colour (non-embedded roots only take focus). */
[data-fluid-xray]:focus-visible {
  outline: 2px solid var(--accent, #52b980);
  outline-offset: 3px;
}

[data-fluid-xray][aria-pressed="true"] {
  border-color: rgba(120, 200, 255, 0.42);
}

@media (hover: none) {
  [data-fluid-xray] {
    cursor: auto;
  }
}

/* Device-appropriate instruction: hover/Space hint by default, finger hint on touch-primary
   devices (no hover + coarse pointer). Plain CSS, so it also holds without JS or canvas. */
.fluid-xray__hint--touch {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .fluid-xray__hint--pointer {
    display: none;
  }
  .fluid-xray__hint--touch {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-fluid-xray] {
    cursor: pointer;
  }

  [data-fluid-xray] > img,
  [data-fluid-xray].fluid-xray--ready > img,
  [data-fluid-xray][data-fluid-xray-embedded].fluid-xray--ready > img,
  [data-fluid-xray] > .fluid-xray__canvas {
    transition: none;
  }

  [data-fluid-xray].fluid-xray--ready > .fluid-xray__canvas {
    animation: none;
  }

  [data-fluid-xray-motion] > .fluid-xray__motion {
    display: none;
  }
}