/* Archive-note image visualizer (ADR-019: co-located component stylesheet).

   Styles the host box that replaces a note image with an interactive three.js
   hologram (see assets/visualizer/index.js). Depends on terminal.css for the
   shared :root amber tokens. */

/* The enhanced image's wrapper (`p.lk-image`) tints its whole subtree with a
   sepia/contrast filter — meant for a flat photo, but it would muddy the amber
   hologram (and a CSS filter can't be opted out of by a child). Drop it once a
   viewer is mounted; the hidden fallback image doesn't need it. */
.lk-image.lk-has-viz {
	filter: none;
}

/* The viewer host: sized in JS to match the image it stands in for, so it keeps
   the same float box. The canvas fills it absolutely. */
.lk-viz {
	position: relative;
	display: block;
	max-width: 100%;
	border-radius: 10px;
	overflow: hidden;
	cursor: grab;
	touch-action: none; /* let OrbitControls own drag/scroll gestures */
	background: var(--bg-output);
	box-shadow: 0 0 80px var(--image-shadow-alpha) inset, 0 0 15px var(--text-inverse) inset,
		0 0 2px var(--amber-alpha-20);
}

.lk-viz:active {
	cursor: grabbing;
}

.lk-viz .lk-viz-gl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Affordance: a small amber hint that fades once the operator starts dragging. */
.lk-viz::after {
	content: 'drag · scroll';
	position: absolute;
	right: 6px;
	bottom: 5px;
	padding: 1px 5px;
	font-size: 9px;
	letter-spacing: 0.08em;
	color: var(--amber);
	background: var(--black-alpha-55);
	border: 1px solid var(--amber-alpha-20);
	border-radius: 3px;
	pointer-events: none;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.lk-viz:active::after {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	/* The hologram's motion is its whole point (the CRT keeps its effects even under
	   Reduce Motion — see the theme's reduced-motion handling), so auto-rotate stays;
	   nothing to suppress here. Rule kept as the documented seam. */
}