/* Motion: the LRPDV opening, the sheets, and the flight of a product into the bag. */
dialog.sheet[open] {
  animation: sheet-up 0.46s var(--ease-out);
}
dialog.sheet[open]::backdrop {
  animation: fade-in 0.3s ease-out;
}
dialog.sheet.is-closing {
  animation: sheet-down 0.24s ease-in forwards;
}
dialog.sheet.is-closing::backdrop {
  animation: fade-out 0.24s ease-in forwards;
}
.product-sheet[open] .sheet-body,
.product-sheet[open] .sheet-actions {
  animation: rise-in 0.5s 0.08s var(--ease-out) both;
}
.vitrine-photo.is-arriving {
  visibility: hidden;
}
dialog.lightbox[open] {
  animation: fade-in 0.25s ease-out;
}
@media (min-width: 760px) {
  dialog.product-sheet[open] {
    animation: pop-in 0.4s var(--ease-out);
  }
  dialog.product-sheet.is-closing {
    animation: pop-out 0.2s ease-in forwards;
  }
  dialog.cart-sheet[open] {
    animation: slide-in-right 0.42s var(--ease-out);
  }
  dialog.cart-sheet.is-closing {
    animation: slide-out-right 0.24s ease-in forwards;
  }
}

/* A copy of the product photo flies on an arc into the bag (motion.mjs draws the arc). */
.flyer {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  margin: 0;
  object-fit: cover;
  border-radius: 18px;
  pointer-events: none;
  box-shadow:
    0 0 0 2px var(--champagne),
    0 14px 30px -10px rgb(32 27 23 / 0.6);
  will-change: transform, opacity;
}
.bag-button.is-bumping .icon,
.bag-bar.is-bumping .bag-bar-count .icon {
  animation: bag-bump 0.5s var(--ease-spring);
}
.bag-button.is-bumping::after,
.bag-bar.is-bumping .bag-bar-count::after {
  content: "";
  position: absolute;
  inset: 4px auto auto 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--champagne);
  animation: ring-out 0.6s ease-out forwards;
  pointer-events: none;
}
.bag-bar-count {
  position: relative;
}
.bag-count.is-rolling,
#cartCountMobile.is-rolling,
#cartTotalMobile.is-rolling {
  animation: roll-in 0.36s var(--ease-out);
}
.toast:not([hidden]) {
  animation: toast-in 0.36s var(--ease-out);
}
.shelf.is-revealed .product-card {
  animation: rise-in 0.5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* The opening: the LRPDV lockup on marfim, as in the identity, then it hands over to the store. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--marfim);
}
.splash.is-leaving {
  pointer-events: none;
}
.splash {
  transition: background-color 0.5s ease-in;
}
.splash.is-leaving {
  background-color: rgb(247 244 236 / 0);
}
.splash.is-leaving .splash-word {
  opacity: 0;
  transition: opacity 0.2s;
}
.splash.is-leaving .m-box {
  fill: rgb(32 27 23 / 0);
  transition: fill 0.5s;
}
.splash-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
}
.splash .lr-mark {
  width: 88px;
  height: 88px;
  animation: mark-in 0.55s var(--ease-spring) both;
}
.splash .lr-mark .m-box {
  fill: var(--espresso);
}
.splash .lr-mark path,
.splash .lr-mark .m-spark,
.splash-word path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.splash .lr-mark .m-l {
  animation: letter-up 0.42s 0.18s var(--ease-out) both;
}
.splash .lr-mark .m-r {
  animation: letter-up 0.42s 0.27s var(--ease-out) both;
}
.splash .lr-mark .m-spark {
  transform-origin: 50% 50%;
  animation: spark-in 0.6s 0.5s var(--ease-spring) both;
  filter: drop-shadow(0 0 3px rgb(210 174 104 / 0.9));
}
.splash-word {
  width: 190px;
  height: 44px;
  fill: var(--espresso);
}
.splash-word path {
  animation: letter-slide 0.5s var(--ease-out) both;
  animation-delay: calc(0.55s + var(--i, 0) * 60ms);
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
}
@keyframes sheet-down {
  to {
    transform: translateY(100%);
  }
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
}
@keyframes pop-out {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
  }
}
@keyframes slide-out-right {
  to {
    transform: translateX(100%);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
@keyframes bag-bump {
  35% {
    transform: scale(1.28) rotate(-8deg);
  }
  70% {
    transform: scale(0.94);
  }
}
@keyframes ring-out {
  from {
    opacity: 0.9;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes roll-in {
  from {
    opacity: 0;
    transform: translateY(60%);
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
}
@keyframes mark-in {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
}
@keyframes letter-up {
  from {
    opacity: 0;
    transform: translateY(35%);
  }
}
@keyframes spark-in {
  from {
    opacity: 0;
    transform: scale(0) rotate(45deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.5) rotate(0);
  }
}
@keyframes letter-slide {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .splash {
    display: none;
  }
}

/* The card photo grows into the showcase (product-sheet.mjs moves a copy inside the dialog). */
.morph {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  margin: 0;
  object-fit: cover;
  transform-origin: 0 0;
  pointer-events: none;
}
dialog.sheet.from-card[open],
dialog.product-sheet.from-card[open] {
  animation: fade-in 0.22s ease-out;
}