/* ============================================================
   Harrington Compliance — 3D feature mark tiles
   Used on platform.html for the Automations cards.
   ============================================================ */

.fx3d{
  position:relative;
  width:128px;height:128px;flex:none;
  border-radius:32px;
  display:grid;place-items:center;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 55%),
    linear-gradient(152deg, var(--blue-50) 0%, #EAF6FF 100%);
  box-shadow:inset 0 0 0 1px var(--blue-100), var(--sh-xs);
  color:var(--blue-700);
  transition:transform .55s var(--ease-spring), box-shadow .45s var(--ease-out);
}

/* Faint dot field behind the geometry so the tile reads as a
   surface rather than a floating cutout. */
.fx3d::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, var(--blue-200) 1px, transparent 0);
  background-size:13px 13px;
  opacity:.42;
}

.fx3d canvas{
  position:relative;z-index:1;
  width:128px;height:128px;display:block;
  opacity:0;transform:scale(.9);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.fx3d.is-live canvas{opacity:1;transform:none}

/* The SVG icon is the fallback: it holds the space until — and
   only if — a tile actually renders. */
.fx3d-fallback{
  position:absolute;z-index:2;
  width:46px;height:46px;stroke-width:1.35;
  transition:opacity .45s var(--ease-out);
}
.fx3d.is-live .fx3d-fallback{opacity:0}

.card--lift:hover .fx3d{
  transform:translateY(-4px) scale(1.035);
  box-shadow:inset 0 0 0 1px var(--blue-200), var(--sh-md);
}

@media(max-width:1000px){
  .fx3d,.fx3d canvas{width:112px;height:112px}
  .fx3d{border-radius:28px}
}
@media(max-width:600px){
  .fx3d,.fx3d canvas{width:104px;height:104px}
  .fx3d{border-radius:26px}
}

@media(prefers-reduced-motion:reduce){
  .fx3d canvas{transition:none}
  .card--lift:hover .fx3d{transform:none}
}

/* Small marker so the test page is obviously the test page. */
.test-flag{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.4em .95em;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--amber-100);color:#8A5A05;border:1px solid #F2D9A8;font-weight:600;
}