/* Phase 17: premium product-showcase motion for Dolfin detail pages. */
.dolfin-product-motion { max-width: 78rem; overflow: clip; }
.dolfin-product-motion .dolfin-product__layout { gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.dolfin-product-motion .product-gallery { position: relative; }
.dolfin-product-motion .product-gallery::before { position: absolute; z-index: 2; inset: -.5rem auto -.5rem -.5rem; width: .22rem; border-radius: 999px; background: linear-gradient(180deg, #f26a21, #0079b8); content: ""; transform: scaleY(0); transform-origin: top; transition: transform 1200ms cubic-bezier(.16, 1, .3, 1) 350ms; }
.dolfin-product-motion .product-gallery__main { position: relative; border-radius: .75rem; background: radial-gradient(circle at 50% 45%, #fff, #edf7fb); box-shadow: 0 1.4rem 3.4rem rgb(1 39 57 / 10%); }
.dolfin-product-motion .product-gallery__main::after { position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 65%); border-radius: inherit; pointer-events: none; content: ""; }
.dolfin-product-motion .product-gallery__main img { transition: transform 950ms cubic-bezier(.16, 1, .3, 1), filter 700ms ease; }
.dolfin-product-motion .product-gallery__main:hover img { transform: scale(1.035) rotate(-.7deg); filter: drop-shadow(0 1.1rem 1rem rgb(0 45 68 / 16%)); }
.dolfin-product-motion .product-gallery__main img.is-swapping { animation: dolfin-product-swap 650ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-product-motion .product-gallery__thumb { transition: border-color 260ms ease, transform 350ms cubic-bezier(.16, 1, .3, 1), box-shadow 350ms ease; }
.dolfin-product-motion .product-gallery__thumb:hover { transform: translateY(-.18rem); box-shadow: 0 .7rem 1.3rem rgb(0 79 117 / 12%); }

.dolfin-product-motion .product-info { position: relative; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--dolfin-border); border-radius: .75rem; background: #fff; box-shadow: 0 1.2rem 3rem rgb(1 39 57 / 8%); }
.dolfin-product-motion .product-info::before { position: absolute; inset: 0 0 auto; height: .22rem; border-radius: .75rem .75rem 0 0; background: linear-gradient(90deg, #0079b8, #29a8e8, #f26a21); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 1200ms cubic-bezier(.16, 1, .3, 1) 350ms; }
.dolfin-product-motion .product-info__brand { letter-spacing: .13em; }
.dolfin-product-motion .product-info__name { font-size: clamp(1.8rem, 3.5vw, 2.7rem); line-height: 1.08; }
.dolfin-product-motion .product-info__price { display: inline-block; font-size: clamp(1.8rem, 3vw, 2.35rem); transition: transform 400ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-product-motion .product-info:hover .product-info__price { transform: translateX(.2rem); }
.dolfin-product-motion .product-actions__qty-select { transition: border-color 250ms ease, box-shadow 300ms ease, transform 300ms ease; }
.dolfin-product-motion .product-actions__qty-select:focus { transform: translateY(-.1rem); box-shadow: 0 .6rem 1.2rem rgb(0 79 117 / 10%); }
.dolfin-product-motion .product-actions__btn { transition: color 260ms ease, background 260ms ease, border-color 260ms ease, transform 350ms cubic-bezier(.16, 1, .3, 1), box-shadow 350ms ease; }
.dolfin-product-motion .product-actions__btn:hover { transform: translateY(-.18rem); box-shadow: 0 .75rem 1.5rem rgb(0 79 117 / 14%); }
.dolfin-product-motion .product-specs tr { transition: background-color 250ms ease; }
.dolfin-product-motion .product-specs tr:hover { background: #f1f9fc; }

.dolfin-product-motion .dolfin-product__full-desc { padding: clamp(1.5rem, 3vw, 2.25rem); border-left: .22rem solid #0079b8; border-radius: 0 .65rem .65rem 0; background: linear-gradient(135deg, #f1f9fc, #fff); box-shadow: 0 1rem 2.4rem rgb(1 39 57 / 6%); }
.dolfin-product-motion .related-products { padding-top: 1rem; }
.dolfin-product-motion .related-products__title { display: flex; align-items: center; gap: 1rem; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.dolfin-product-motion .related-products__title::after { width: 5rem; height: 2px; background: linear-gradient(90deg, #0079b8, #f26a21); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 1000ms cubic-bezier(.16, 1, .3, 1) 380ms; }
.dolfin-product-motion .dolfin-card--related { border-radius: .65rem; box-shadow: 0 .8rem 2rem rgb(1 39 57 / 7%); transition: opacity 700ms ease, transform 950ms cubic-bezier(.16, 1, .3, 1), box-shadow 400ms ease; }
.dolfin-product-motion .dolfin-card--related:hover { transform: translateY(-.4rem); box-shadow: 0 1.3rem 2.7rem rgb(0 94 139 / 14%); }

.dolfin-product-motion-ready [data-dolfin-product-reveal] { opacity: 0; transform: translateY(2rem); }
.dolfin-product-motion-ready [data-dolfin-product-reveal="gallery"] { transform: translateX(-2.5rem); transition: opacity 900ms ease, transform 1200ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-product-motion-ready [data-dolfin-product-reveal="info"] { transform: translateX(2.5rem); transition: opacity 900ms 120ms ease, transform 1200ms 120ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-product-motion-ready [data-dolfin-product-reveal="description"] { transform: translateY(2rem) scale(.99); transition: opacity 820ms ease, transform 1050ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-product-motion-ready [data-dolfin-product-reveal="related"] { transition: opacity 850ms ease, transform 1100ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-product-motion-ready [data-dolfin-product-reveal].dolfin-product-is-visible { opacity: 1; transform: none; }
.dolfin-product-motion-ready [data-dolfin-product-reveal="gallery"].dolfin-product-is-visible::before { transform: scaleY(1); }
.dolfin-product-motion-ready [data-dolfin-product-reveal="info"].dolfin-product-is-visible::before { transform: scaleX(1); }
.dolfin-product-motion-ready [data-dolfin-product-info] { opacity: 0; transform: translateY(.85rem); transition: opacity 600ms ease, transform 780ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(320ms + var(--dolfin-info-delay, 0ms)); }
.dolfin-product-motion-ready .dolfin-product-is-visible [data-dolfin-product-info] { opacity: 1; transform: none; }
.dolfin-product-motion-ready [data-dolfin-spec-row] { opacity: 0; transform: translateX(.7rem); transition: opacity 520ms ease, transform 680ms cubic-bezier(.16, 1, .3, 1), background-color 250ms ease; transition-delay: calc(700ms + var(--dolfin-spec-delay, 0ms)); }
.dolfin-product-motion-ready .dolfin-product-is-visible [data-dolfin-spec-row] { opacity: 1; transform: none; }
.dolfin-product-motion-ready [data-dolfin-related-card] { opacity: 0; transform: translateY(2rem); transition-delay: calc(280ms + var(--dolfin-related-delay, 0ms)); }
.dolfin-product-motion-ready .dolfin-product-is-visible [data-dolfin-related-card] { opacity: 1; transform: none; }
.dolfin-product-motion-ready [data-dolfin-product-reveal="related"].dolfin-product-is-visible .related-products__title::after { transform: scaleX(1); }

@keyframes dolfin-product-swap { 0% { opacity: .25; transform: scale(.975); } 100% { opacity: 1; transform: none; } }

@media (max-width: 47.99rem) {
  .dolfin-product-motion-ready [data-dolfin-product-reveal="gallery"],
  .dolfin-product-motion-ready [data-dolfin-product-reveal="info"] { transform: translateY(1.8rem); }
  .dolfin-product-motion-ready [data-dolfin-product-reveal].dolfin-product-is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dolfin-product-motion *,
  .dolfin-product-motion *::before,
  .dolfin-product-motion *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .dolfin-product-motion-ready [data-dolfin-product-reveal],
  .dolfin-product-motion-ready [data-dolfin-product-info],
  .dolfin-product-motion-ready [data-dolfin-spec-row],
  .dolfin-product-motion-ready [data-dolfin-related-card] { opacity: 1; transform: none; }
}
