/* Metallic 3D cubes — CSS transform-style (inspired by product-style chrome renders) */

.mc-scene {
  --mc-s: 64px;
  --mc-half: calc(var(--mc-s) / 2);
  position: relative;
  width: var(--mc-s);
  height: var(--mc-s);
  perspective: 520px;
  perspective-origin: 50% 42%;
}

.mc-scene--md {
  --mc-s: 48px;
}

.mc-scene--sm {
  --mc-s: 36px;
}

.mc-scene--lg {
  --mc-s: 58px;
}

.mc-scene--xl {
  --mc-s: 96px;
}

.mc-ground {
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%);
  width: calc(var(--mc-s) * 1.35);
  height: calc(var(--mc-s) * 0.28);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.14) 0%, transparent 72%);
  pointer-events: none;
}

.mc-axis {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.mc-cube {
  width: var(--mc-s);
  height: var(--mc-s);
  position: relative;
  transform-style: preserve-3d;
  margin: 0 auto;
}

.mc-face {
  position: absolute;
  inset: 0;
  width: var(--mc-s);
  height: var(--mc-s);
  backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -10px 24px rgba(0, 0, 0, 0.45);
}

/* Brushed metal + specular — faces pick up light differently */
.mc-face--front {
  transform: rotateY(0deg) translateZ(var(--mc-half));
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 42%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(165deg, #e4e4e4 0%, #8c8c8c 38%, #3a3a3a 100%);
}

.mc-face--back {
  transform: rotateY(180deg) translateZ(var(--mc-half));
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    linear-gradient(195deg, #5a5a5a 0%, #1e1e1e 100%);
}

.mc-face--right {
  transform: rotateY(90deg) translateZ(var(--mc-half));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, transparent 45%),
    linear-gradient(180deg, #b0b0b0 0%, #4a4a4a 55%, #222 100%);
}

.mc-face--left {
  transform: rotateY(-90deg) translateZ(var(--mc-half));
  background:
    linear-gradient(45deg, rgba(0, 0, 0, 0.15) 0%, transparent 50%),
    linear-gradient(0deg, #6a6a6a 0%, #2c2c2c 100%);
}

.mc-face--top {
  transform: rotateX(90deg) translateZ(var(--mc-half));
  background:
    linear-gradient(180deg, #f2f2f2 0%, #c8c8c8 45%, #909090 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -6px 12px rgba(0, 0, 0, 0.2);
}

.mc-face--bottom {
  transform: rotateX(-90deg) translateZ(var(--mc-half));
  background: linear-gradient(0deg, #2a2a2a 0%, #0f0f0f 100%);
  box-shadow: inset 0 -4px 12px rgba(0, 0, 0, 0.6);
}

/* Spin A: steady Y orbit with fixed tilt (common “product cube”) */
.mc-spin-a .mc-axis {
  animation: mc-spin-a 18s linear infinite;
}

@keyframes mc-spin-a {
  from {
    transform: rotateX(-20deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-20deg) rotateY(360deg);
  }
}

/* Spin B: alternate tilt + reverse Y (second clip feel) */
.mc-spin-b .mc-axis {
  animation: mc-spin-b 22s linear infinite;
}

@keyframes mc-spin-b {
  from {
    transform: rotateX(14deg) rotateY(0deg);
  }
  to {
    transform: rotateX(14deg) rotateY(-360deg);
  }
}

/* Spin C: tumble — both axes (more dramatic) */
.mc-spin-c .mc-axis {
  animation: mc-spin-c 22s linear infinite;
}

@keyframes mc-spin-c {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* Row: two cubes (selected work) */
.mc-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  position: relative;
}

.mc-row .mc-scene:last-child .mc-axis {
  animation-duration: 20s;
  animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
  .mc-spin-a .mc-axis {
    animation: none !important;
    transform: rotateX(-18deg) rotateY(32deg);
  }

  .mc-spin-b .mc-axis {
    animation: none !important;
    transform: rotateX(14deg) rotateY(-28deg);
  }

  .mc-spin-c .mc-axis {
    animation: none !important;
    transform: rotateX(22deg) rotateY(38deg);
  }

  .mc-row .mc-scene:last-child .mc-axis {
    transform: rotateX(-18deg) rotateY(-32deg);
  }
}