/* Calibrated motion-v3 selected render, integrated with Tatyana's final profile.
   The Wearing component remains in place; its own image travels into that slot. */
.wearing-figma .w-thumb.w-thumb-calibrated {
  width: 143px; height: 173px; overflow: visible; box-shadow: none;
}
.wearing-figma .w-thumb-calibrated img {
  position: absolute; max-width: none; object-fit: contain; inset: auto;
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .22));
}
/* 136.569 × 162.227px garment: the approved Figma height, with its own
   54px glow padding. Never fit the glow's canvas as if it were the fabric. */
.wearing-figma[data-profile-theme="grey"] .w-thumb.w-thumb-calibrated {
  width: 142.259px; top: 4.106px;
}
.wearing-figma[data-profile-theme="grey"] .w-thumb-calibrated img,
.hoodie-reveal[data-profile-theme="grey"] .hr-hero { filter: none; }
/* White Hoodie card 404:2720: the garment carries no shadow; its light is the white halo and
   the blue wash behind it. The intro hero matches, so nothing pops off when it docks. */
.wearing-figma[data-profile-theme="white"] .w-thumb-calibrated img,
.hoodie-reveal[data-profile-theme="white"] .hr-hero { filter: none; }
.hoodie-reveal { overflow: hidden; isolation: isolate; touch-action: manipulation; }
.hr-background { position: absolute; inset: 0; background: var(--p-bg, #191919); }
.hr-glow {
  position: absolute; width: 96%; max-width: 550px; aspect-ratio: 1;
  left: 50%; top: 57%; opacity: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at 46% 40%, rgba(239, 245, 255, .24), rgba(172, 188, 216, .15) 32%, rgba(105, 129, 219, .12) 47%, transparent 69%);
  filter: blur(20px);
}
.hr-hero {
  position: absolute; inset: auto; left: 0; top: 0; max-width: none;
  object-fit: contain; transform-origin: 0 0; will-change: transform, opacity;
  pointer-events: none; filter: drop-shadow(0 15px 24px rgba(0, 0, 0, .22));
}
.hr-mark {
  position: absolute; top: 0; left: 0; transform-origin: 50% 42%; pointer-events: none;
  background: linear-gradient(158deg, #fff 0%, #dfe1e3 19%, #5e6268 43%, #fafcff 53%, #b6bbc2 70%, #7b818b 83%, #e1e5eb 100%);
  -webkit-mask: url('/assets/motion/q-mark.png') center / 100% 100% no-repeat;
  mask: url('/assets/motion/q-mark.png') center / 100% 100% no-repeat;
}
.hr-skip {
  position: absolute; right: 16px; bottom: calc(var(--safe-bottom, 0px) + 18px);
  min-height: 44px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(230, 238, 255, .2); background: rgba(40, 43, 49, .86);
  color: #f2f4f8; font: 400 12px/20px var(--p-font, sans-serif); cursor: pointer;
}
.hr-skip:focus-visible { outline: 2px solid #d6e2ff; outline-offset: 3px; }
.hr-skip[hidden] { display: none; }
.pp.motion-running .st, .pp.motion-running .pp-top { transition: none; }
.wearing.motion-running { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hoodie-reveal { display: none; }
  .pp.motion-profile .st, .pp.motion-profile .pp-top { opacity: 1; transform: none; transition: none; }
}

/* Match the close-up mark to the physical logo on the two monochrome prototypes. */
.hoodie-reveal[data-garment-appearance="black-on-black"] .hr-mark {
  background: var(--monochrome-mark-black);
}
.hoodie-reveal[data-garment-appearance="white-on-white"] .hr-mark {
  background: var(--monochrome-mark-white);
}
.wearing-figma .w-thumb-uncalibrated { width:143px; height:173px; overflow:visible; }
.wearing-figma .w-thumb-uncalibrated img { width:100%; height:100%; object-fit:contain; }