/* Fluid Alloy — optional chrome.
 * The component draws entirely on a <canvas>; these classes are just
 * convenient containers. All tokens are overridable. Prefix: fa-
 * ENOK · the open media company · enok.com · on The Cloud
 */

:root {
  --fa-radius: 20px;
  --fa-backing: #0a0b0d;      /* shows through canvas edge anti-aliasing */
  --fa-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.65);
}

/* A surface wrapper: give it a size and drop a canvas (or let mount make one). */
.fa-surface {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--fa-radius);
  background: var(--fa-backing);
  box-shadow: var(--fa-shadow);
  isolation: isolate;
}

.fa-surface--pill { border-radius: 999px; }
.fa-surface--flat { box-shadow: none; }

/* The canvas the component mounts (or one you pass in). */
.fa-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* Common ready-made sizes — use or ignore. */
.fa-surface--card  { width: 100%; aspect-ratio: 16 / 10; }
.fa-surface--tile  { width: 100%; aspect-ratio: 1 / 1; }
.fa-surface--strip { width: 100%; height: 64px; }
.fa-surface--orb   { width: 160px; height: 160px; border-radius: 999px; }

/* Optional caption sitting over the metal. */
.fa-caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  margin: 0;
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* The component already renders a still alloy; nothing to soften here,
     but keep any host transitions calm too. */
  .fa-surface { transition: none; }
}