/* * NobodyInJP WebP image motion. * Pure presentation enhancement: no LQIP, no derivative images and no hidden * image state unless the runtime has attached an explicit pending marker. */ /* * First-paint gate. * * The synchronous marker is written in , before body images can paint. * Keep this list aligned with the runtime's product hero/card/thumb roles. * The marker has a 3.2s fail-open timeout and is replaced by per-image pending * state during normal initialization. */ html.ni-image-motion-boot body.goods_body #goodsInfo #zoom1 img, html.ni-image-motion-boot body.goods_body #imglist img, html.ni-image-motion-boot body.goods_body .ni-spec-box img, html.ni-image-motion-boot body.goods_body .catt img, html.ni-image-motion-boot .ni-product-card img, html.ni-image-motion-boot [data-ni-product-card] img, html.ni-image-motion-boot .ni-content-product-card img, html.ni-image-motion-boot .ni-sidebar-product img, html.ni-image-motion-boot .goodsItem img, html.ni-image-motion-boot .goodsBox img, html.ni-image-motion-boot .goodsBox2 img, html.ni-image-motion-boot .goodsList img, html.ni-image-motion-boot .new_img img, html.ni-image-motion-boot .ni-home-product-carousel img { opacity: 0; } img.ni-image-motion { opacity: 1; filter: none; transform: none; transition: opacity var(--ni-image-motion-duration, 280ms) ease, filter var(--ni-image-motion-duration, 280ms) ease, transform var(--ni-image-motion-duration, 280ms) cubic-bezier(.22, .61, .36, 1); will-change: auto; } img.ni-image-motion[data-ni-image-motion-state="pending"] { opacity: 0; will-change: opacity, filter, transform; } img.ni-image-motion[data-ni-image-motion-kind="product-hero"][data-ni-image-motion-state="pending"] { filter: blur(2px); transform: scale(1.004); } img.ni-image-motion[data-ni-image-motion-kind="product-card"][data-ni-image-motion-state="pending"] { transform: scale(.992); } img.ni-image-motion[data-ni-image-motion-kind="content"][data-ni-image-motion-state="pending"] { filter: blur(1.5px); transform: translateY(2px); } img.ni-image-motion[data-ni-image-motion-kind="transaction"][data-ni-image-motion-state="pending"] { filter: none; transform: none; } /* Gallery/spec thumbnails stay crisp; only opacity is animated. */ img.ni-image-motion[data-ni-image-motion-kind="detail-thumb"][data-ni-image-motion-state="pending"] { filter: none; transform: none; } img.ni-image-motion[data-ni-image-motion-state="ready"] { opacity: 1; filter: none; transform: none; will-change: auto; } /* * Product hero convergence. * * ni_product.css owns hover and gallery/spec crossfades. Keep the initial * decode reveal on the actual hero image, but let the direct child media node * own opacity while a replacement is transitioning. A replacement * may contain an image that still carries the shared runtime's pending marker; * hiding that inner image would leave the newly selected variant blank. */ html body.goods_body #goodsInfo.ni-v43-product #zoom1.ni-main-image-link img.ni-image-motion { transition: opacity var(--ni-image-motion-duration, 390ms) ease, filter var(--ni-image-motion-duration, 390ms) ease, transform .32s ease; } html body.goods_body #goodsInfo.ni-v43-product #zoom1.ni-main-image-link.is-ni-media-transitioning > .ni-main-media-next img.ni-image-motion { opacity: 1; filter: none; transform: none; will-change: auto; } /* Disney-style carousel entrance: only the runtime may opt a carousel into * the pending state, so a JS failure leaves the original carousel visible. */ .ni-carousel-media-pending { opacity: 0; } .ni-carousel-media-ready { opacity: 1; transition: opacity 380ms ease; } @media (prefers-reduced-motion: reduce) { img.ni-image-motion, img.ni-image-motion[data-ni-image-motion-state="pending"], img.ni-image-motion[data-ni-image-motion-state="ready"], .ni-carousel-media-pending, .ni-carousel-media-ready { opacity: 1; filter: none; transform: none; transition-duration: .01ms; } }