/* mark3d.js: the solid Share mark. --n layers stack along Z (--z) at
 * --mark3d-step apart, centred on the box; the front face in ink and the
 * extrusion a step toward --mark3d-base. The hero rests turned, follows the
 * pointer (--rx/--ry) and breathes; the rail's small one heads Share's row. */

.mark3d {
  position: relative;
  display: block;
  width: 64px;
  height: 72px;
  margin-bottom: var(--sv-space-3);
  perspective: 520px;
  color: var(--sv-ink);
}
.mark3d::after {
  content: "";
  position: absolute;
  left: 15%; right: 15%; bottom: -18px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.16), transparent);
  animation: sv-mark3d-shadow calc(var(--pulse) * 2) var(--sv-ease-inout) infinite;
}
.mark3d-float, .mark3d-solid { position: absolute; inset: 0; transform-style: preserve-3d; }
.mark3d-float { animation: sv-float calc(var(--pulse) * 2) var(--sv-ease-inout) infinite; }
.mark3d-solid {
  transform: rotateX(var(--rx, 12deg)) rotateY(var(--ry, -18deg));
  transition: transform var(--sv-dur-cine) var(--sv-ease-out);
  animation: sv-mark3d-enter 1200ms var(--sv-ease-out) backwards;
}
.mark3d svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  transform: translateZ(calc((var(--z) - var(--n) / 2) * var(--mark3d-step, 1px)));
}
/* #brand-symbol paints with currentColor, so the layers set color, not fill. */
.mark3d .side { color: color-mix(in srgb, currentColor 42%, var(--mark3d-base, var(--sv-surface))); }
@keyframes sv-mark3d-enter {
  from { transform: rotateX(28deg) rotateY(-378deg) scale(0.4); }
}
@keyframes sv-mark3d-shadow { 50% { transform: scaleX(0.82); opacity: 0.7; } }

/* The rail's Share avatar is the small solid (mark3d.js): it rests turned,
 * leans the other way on hover and spins while Share works. */
.mark3d.small { width: 18px; height: 20px; margin: 0; perspective: 120px; color: inherit; --mark3d-step: 0.5px; --mark3d-base: var(--sv-emphasis-surface, #000); }
.mark3d.small::after { content: none; }
.mark3d.small .mark3d-float { animation: none; }
.mark3d.small .mark3d-solid { --rx: 10deg; --ry: -24deg; animation: none; transition: transform var(--sv-dur-slow) var(--sv-ease-out); }
.c-open:hover .mark3d.small .mark3d-solid { --rx: -8deg; --ry: 26deg; }
.chats .c-home .running .mark3d.small .mark3d-solid { animation: sv-mark3d-spin calc(var(--pulse) * 2) var(--sv-ease-inout) infinite; }
@keyframes sv-mark3d-spin {
  from { transform: rotateX(10deg) rotateY(-24deg); }
  60%, to { transform: rotateX(10deg) rotateY(336deg); }
}