/* Tactile physical-skin reveal: catalogue artwork stays unchanged beneath the light. */
.physical-showroom {
  transform-style: preserve-3d;
}
.physical-showroom::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 26%;
  left: -9%;
  width: 118%;
  height: 62%;
  border: 1px solid rgba(255, 139, 185, .34);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(233, 62, 127, .13), inset 0 0 14px rgba(255, 139, 185, .08);
  pointer-events: none;
  transform: rotate(-13deg) rotateX(64deg);
  animation: physicalOrbitGlow 17s ease-in-out infinite alternate;
}
.physical-showroom .showroom-orbit {
  z-index: 0;
  opacity: .8;
  animation: physicalGlowBreathe 8s ease-in-out infinite alternate;
}
.physical-showroom .display-card {
  z-index: 2;
  isolation: isolate;
  transform-style: preserve-3d;
  animation: physicalFloat 8s ease-in-out infinite, physicalCardTilt 12s ease-in-out infinite alternate;
  transition: box-shadow .55s cubic-bezier(.22,.75,.24,1), filter .55s ease;
  will-change: transform;
}
.physical-showroom .display-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px -4px -7px 5px;
  border: 1px solid rgba(255, 198, 222, .56);
  border-radius: inherit;
  background: linear-gradient(145deg, #c7aab8, #594451 22%, #241923 76%, #9d6a83);
  box-shadow: 0 18px 28px rgba(0, 0, 0, .42);
  transform: translateZ(-2px);
}
.physical-showroom .display-card img {
  position: relative;
  z-index: 1;
  backface-visibility: hidden;
}
.physical-showroom .display-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 35%, rgba(255, 255, 255, .04) 43%, rgba(255, 214, 234, .34) 50%, rgba(255, 255, 255, .08) 55%, transparent 63%);
  background-size: 240% 100%;
  background-position: 180% 0;
  mix-blend-mode: screen;
  animation: physicalSkinSheen 7.2s ease-in-out infinite;
}
.physical-showroom .peel-corner {
  z-index: 3;
  width: 49px;
  height: 49px;
  transform-origin: 100% 0%;
  backface-visibility: hidden;
  filter: drop-shadow(-3px 5px 5px rgba(0, 0, 0, .34));
  animation: physicalPeelLift 7.2s cubic-bezier(.22,.75,.24,1) infinite;
}
.physical-showroom .showroom-caption,
.physical-showroom .showroom-note {
  position: relative;
  z-index: 3;
}
.physical-showroom:hover .display-card,
.physical-showroom:focus-within .display-card {
  filter: brightness(1.035);
  box-shadow: 3px 6px 0 -2px #513144, 6px 12px 0 -6px #d0a4b7, 0 48px 72px #000b, 0 0 38px rgba(242, 82, 149, .19);
}
@keyframes physicalOrbitGlow {
  from { transform: rotate(-16deg) rotateX(64deg) scale(.98); opacity: .65; }
  to { transform: rotate(-10deg) rotateX(64deg) scale(1.025); opacity: 1; }
}
@keyframes physicalGlowBreathe {
  from { opacity: .58; transform: scale(.96); }
  to { opacity: .95; transform: scale(1.045); }
}
@keyframes physicalCardTilt {
  from { transform: rotate(-9deg) rotateY(-13deg) rotateX(8deg) translateZ(0); }
  to { transform: rotate(-6deg) rotateY(-7deg) rotateX(4deg) translateZ(7px); }
}
@keyframes physicalSkinSheen {
  0%, 24% { background-position: 180% 0; opacity: .25; }
  56%, 72% { background-position: -80% 0; opacity: .8; }
  100% { background-position: -80% 0; opacity: .25; }
}
@keyframes physicalPeelLift {
  0%, 18%, 88%, 100% { transform: translate3d(0, 0, 3px) rotateX(0) rotateY(0); }
  38%, 66% { transform: translate3d(-3px, 3px, 10px) rotateX(18deg) rotateY(-16deg); }
}
@media (max-width: 760px) {
  .physical-showroom::before { left: -5%; width: 110%; height: 72%; top: 18%; }
  .physical-showroom .display-card { animation-duration: 9s, 15s; }
  .physical-showroom .peel-corner { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .physical-showroom::before,
  .physical-showroom .showroom-orbit,
  .physical-showroom .display-card,
  .physical-showroom .display-card::after,
  .physical-showroom .peel-corner {
    animation: none !important;
    will-change: auto;
  }
  .physical-showroom .display-card { transform: rotate(-7deg); }
  .physical-showroom .display-card::after { opacity: .24; background-position: 0 0; }
  .physical-showroom .peel-corner { transform: translateZ(3px); }
}

/* Crossfade the exact selected catalogue image into both physical previews. */
.physical-showroom .display-card .skin-art-departing,
#physicalDialog .skin-preview .skin-art-departing {
  position: absolute !important;
  z-index: 4 !important;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  animation: physicalSkinDepart .72s cubic-bezier(.22,.75,.24,1) both;
}
.physical-showroom .display-card .skin-art-arriving,
#physicalDialog .skin-preview .skin-art-arriving {
  animation: physicalSkinArrive .72s cubic-bezier(.22,.75,.24,1) both;
}
@keyframes physicalSkinDepart {
  from { opacity: 1; filter: blur(0) brightness(1); transform: translate3d(0, 0, 5px) scale(1); }
  to { opacity: 0; filter: blur(3px) brightness(1.28); transform: translate3d(-9px, -5px, 10px) scale(.985); }
}
@keyframes physicalSkinArrive {
  from { opacity: .25; filter: blur(2px) brightness(1.3); transform: translate3d(10px, 10px, 8px) scale(.965) rotateY(-5deg); }
  to { opacity: 1; filter: blur(0) brightness(1); transform: translate3d(0, 0, 0) scale(1) rotateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .physical-showroom .display-card .skin-art-departing,
  .physical-showroom .display-card .skin-art-arriving,
  #physicalDialog .skin-preview .skin-art-departing,
  #physicalDialog .skin-preview .skin-art-arriving { animation: none !important; }
}