/* Brand tile (src/views/Mark3D.tsx) in place of the old Spline scene. Sized from its box (container
   units), colored with the site tokens so the palette swapper applies. */
.mark3d {
  display: grid;
  place-items: center;
  container-type: size;
  perspective: 60em;
  pointer-events: none;
}

.mark3d-tile {
  display: grid;
  place-items: center;
  width: min(45cqmin, 15em);
  aspect-ratio: 1;
  border-radius: 12%;
  background: linear-gradient(145deg, var(--_colors---kaki--dark), var(--_colors---brown--base));
  color: var(--_colors---cream--base);
  box-shadow: 0 2em 4em rgba(20, 20, 22, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform-style: preserve-3d;
  animation: mark3d-float 9s ease-in-out infinite;
}

.mark3d-tile span {
  font-family: Otto, Georgia, serif;
  font-size: min(18cqmin, 6em);
  line-height: 1;
  letter-spacing: -0.04em;
  transform: translateZ(0.12em);
}

@keyframes mark3d-float {
  0%, 100% { transform: rotateX(12deg) rotateY(-18deg); }
  50% { transform: rotateX(-8deg) rotateY(22deg) translateY(-0.3em); }
}

@media (prefers-reduced-motion: reduce) {
  .mark3d-tile {
    animation: none;
    transform: rotateX(8deg) rotateY(-12deg);
  }
}