/* motion-3d.css — the box a Blender clip (/motion-3d.js, /brand/3d/) sits in. The box has its size before any
   file arrives (no layout shift); the fallback markup inside it shows until the poster has loaded, and again if
   the files fail. The clip's canvas keeps a margin around the object, so hosts may pull it in with a negative
   margin. Reduced motion is handled in motion-3d.js (the animated file is never requested); the fade below is
   switched off too. */
.m3d{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--m3d,64px);aspect-ratio:1;line-height:0;vertical-align:middle;pointer-events:none;user-select:none}
.m3d-loop{aspect-ratio:4/3}
.m3d > img{grid-area:1/1;width:100%;height:100%;object-fit:contain;display:block;opacity:0;transition:opacity .18s cubic-bezier(.2,.7,.2,1)}
.m3d.m3d-on > img{opacity:1}
.m3d > :not(img){grid-area:1/1}
.m3d.m3d-on > :not(img),.m3d.m3d-wait > :not(img){visibility:hidden}
.m3d.m3d-off > img{display:none}
@media (prefers-reduced-motion:reduce){.m3d > img{transition:none}}
/* hosts */
html[data-design=m2] .tk-zero .big.m3d-host{width:auto;height:auto;border:0;border-radius:0;background:none!important;margin:-14px 0 -10px}  /* m2.css paints .big a card tile with !important */
.tk-wait3d{margin:0 auto 4px}