/* Shared 1.2x desktop treatment for the 2D -> 3D corner-fold control. */
.about-hero h2.name {
  font-size: 51.2px;
}

body.zh .about-hero h2.name {
  font-size: 43.2px;
}

#m3d-entrance {
  width: 86.4px;
  height: 86.4px;
}

#m3d-entrance[data-state="folded"]:hover,
#m3d-entrance[data-state="folded"]:focus-visible,
#m3d-entrance[data-state="folded"].wave {
  width: 132px;
  height: 132px;
}

#m3d-entrance .dot {
  top: 14.4px;
  right: 14.4px;
  width: 16.8px;
  height: 16.8px;
  background: radial-gradient(
    circle,
    #ffb36b 0 5.4px,
    rgba(232, 160, 76, 0.5) 6px 7.8px,
    transparent 8.4px
  );
}

#m3d-entrance .dot::after {
  box-shadow: 0 0 28.8px 9.6px rgba(255, 179, 107, 0.45);
}

#m3d-entrance .m3d-entrance-label {
  position: absolute;
  top: 18px;
  right: 67.2px;
  display: flex;
  min-height: 52.8px;
  align-items: center;
  justify-content: center;
  padding: 10.8px 18px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 19.2px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #f3ead6;
  background: #2c1f16;
  border: 1.2px solid #c9a86a;
  box-shadow: 0 8.4px 28.8px rgba(29, 19, 12, 0.24);
  opacity: 1;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    opacity 0.18s ease,
    transform 0.2s ease;
}

#m3d-entrance:hover .m3d-entrance-label,
#m3d-entrance:focus-visible .m3d-entrance-label {
  color: #2a2118;
  background: #f0e6cf;
  border-color: #8f6f3d;
  transform: translateY(-1.2px);
}

#m3d-entrance:focus-visible {
  outline: none;
}

#m3d-entrance:focus-visible .m3d-entrance-label {
  outline: 3.6px solid #ffb36b;
  outline-offset: 3.6px;
}

#m3d-entrance[data-state="flat"] .m3d-entrance-label,
#m3d-entrance[data-state="flattening"] .m3d-entrance-label,
#m3d-entrance[data-state="unfolding"] .m3d-entrance-label,
#m3d-entrance[data-state="peeling"] .m3d-entrance-label {
  pointer-events: none;
  opacity: 0;
}

@media not ((any-pointer: fine) and (min-width: 1024px)) {
  #m3d-entrance .m3d-entrance-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #m3d-entrance .m3d-entrance-label {
    transition: none;
  }
}