@charset "UTF-8";

/*
 * Maison YAMM canvas motion.
 *
 * The persistent V2 shell keeps the current SSR navigation structure while
 * reproducing the mature canvas timing: veil fade, elastic left reveal,
 * compressed exit and directional child views.
 */
.yamm-offcanvas {
  --yamm-offcanvas-width: min(470px, 100vw);
  --yamm-offcanvas-ease: cubic-bezier(.22, 1, .36, 1);
  visibility: hidden;
  pointer-events: none;
}

.yamm-offcanvas.is-wide {
  --yamm-offcanvas-width: min(980px, 100vw);
}

.yamm-offcanvas.is-preparing,
.yamm-offcanvas.is-open,
.yamm-offcanvas.is-closing {
  visibility: visible;
}

.yamm-offcanvas.is-open {
  pointer-events: auto;
}

.yamm-offcanvas.is-preparing,
.yamm-offcanvas.is-closing {
  pointer-events: none;
}

.yamm-offcanvas__backdrop {
  background: rgba(0, 0, 0, .38);
  opacity: 0;
  transition: opacity .5s ease;
}

.yamm-offcanvas.is-open .yamm-offcanvas__backdrop {
  opacity: 1;
}

.yamm-offcanvas.is-closing .yamm-offcanvas__backdrop {
  opacity: 0;
}

.yamm-offcanvas__drawer {
  width: var(--yamm-offcanvas-width);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #fffdf8;
  box-shadow: 24px 0 70px rgba(0, 0, 0, .18);
  opacity: .98;
  transform-origin: left center;
  transform: translate3d(-104%, 0, 0) scaleX(.985);
  transition:
    transform .66s var(--yamm-offcanvas-ease),
    opacity .46s ease,
    width .54s var(--yamm-offcanvas-ease);
  will-change: transform, opacity, width;
}

.yamm-offcanvas.is-open .yamm-offcanvas__drawer {
  opacity: 1;
  transform: translate3d(0, 0, 0) scaleX(1);
}

.yamm-offcanvas.is-closing .yamm-offcanvas__drawer {
  opacity: .72;
  transform: translate3d(-108%, 0, 0) scaleX(.82);
}

/* Root has no heading: do not reserve the child-view title block. */
.yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__heading {
  display: none;
}

.yamm-offcanvas__panel {
  z-index: 1;
  transform: translate3d(0, 0, 0);
  opacity: 1;
  will-change: transform, opacity;
}

.yamm-offcanvas__panel.is-entering-forward,
.yamm-offcanvas__panel.is-entering-back {
  z-index: 3;
}

.yamm-offcanvas__panel.is-leaving-forward,
.yamm-offcanvas__panel.is-leaving-back {
  z-index: 2;
  pointer-events: none;
}

.yamm-offcanvas__panel.is-entering-forward {
  animation: yammOffcanvasPanelInForward .46s cubic-bezier(.22, 1, .36, 1) both;
}

.yamm-offcanvas__panel.is-entering-back {
  animation: yammOffcanvasPanelInBack .46s cubic-bezier(.22, 1, .36, 1) both;
}

.yamm-offcanvas__panel.is-leaving-forward {
  animation: yammOffcanvasPanelOutForward .24s cubic-bezier(.4, 0, .2, 1) both;
}

.yamm-offcanvas__panel.is-leaving-back {
  animation: yammOffcanvasPanelOutBack .24s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes yammOffcanvasPanelInForward {
  from { opacity: 0; transform: translate3d(38px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes yammOffcanvasPanelInBack {
  from { opacity: 0; transform: translate3d(-30px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes yammOffcanvasPanelOutForward {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(24px, 0, 0); }
}

@keyframes yammOffcanvasPanelOutBack {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-24px, 0, 0); }
}

/* The close mark collapses into a discreet dash during the compressed exit. */
.yamm-offcanvas__close {
  transition: opacity .24s ease;
}

.yamm-offcanvas__close:hover {
  opacity: .62;
}

.yamm-offcanvas__close:active {
  opacity: .46;
}

.yamm-offcanvas__close svg {
  overflow: visible;
}

.yamm-offcanvas__close svg path {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    opacity .28s ease;
}

.yamm-offcanvas.is-closing .yamm-offcanvas__close svg path:nth-child(1) {
  transform: translateY(2px) rotate(-45deg) scaleX(.80);
}

.yamm-offcanvas.is-closing .yamm-offcanvas__close svg path:nth-child(2) {
  transform: translateY(2px) rotate(45deg) scaleX(.80);
}

/* Quiet interaction motion, matching the horizontal view language. */
.yamm-offcanvas__link,
.yamm-offcanvas__back {
  transition:
    opacity .2s ease,
    transform .34s cubic-bezier(.22, 1, .36, 1),
    color .2s ease;
}

.yamm-offcanvas__link:hover,
.yamm-offcanvas__link:focus-visible {
  color: #111;
  opacity: .62;
  transform: translate3d(3px, 0, 0);
}

.yamm-offcanvas__back:hover,
.yamm-offcanvas__back:focus-visible {
  opacity: .58;
  transform: none;
}

/*
 * The drawer is already the visual entry. Its inner content resolves a fraction
 * later so the reveal reads as one progressive luxury movement, not a hard cut.
 */
.yamm-offcanvas__close,
.yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__nav,
.yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__locale {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  filter: blur(1.5px);
  transition:
    opacity .52s var(--yamm-offcanvas-ease),
    transform .58s var(--yamm-offcanvas-ease),
    filter .58s var(--yamm-offcanvas-ease);
}

.yamm-offcanvas.is-open .yamm-offcanvas__close,
.yamm-offcanvas.is-open .yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__nav,
.yamm-offcanvas.is-open .yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__locale {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.yamm-offcanvas.is-open .yamm-offcanvas__close {
  transition-delay: .08s;
}

.yamm-offcanvas.is-open .yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__nav {
  transition-delay: .13s;
}

.yamm-offcanvas.is-open .yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__locale {
  transition-delay: .19s;
}

.yamm-offcanvas.is-closing .yamm-offcanvas__close,
.yamm-offcanvas.is-closing .yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__nav,
.yamm-offcanvas.is-closing .yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__locale {
  transition-delay: 0s;
}

/* Keep the archive's compact canvas proportion on tablets instead of widening to 560px. */
@media (max-width: 980px) {
  .yamm-offcanvas,
  .yamm-offcanvas.is-wide {
    --yamm-offcanvas-width: min(470px, 100vw);
  }
}

@media (max-width: 470px) {
  .yamm-offcanvas,
  .yamm-offcanvas.is-wide {
    --yamm-offcanvas-width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yamm-offcanvas__backdrop,
  .yamm-offcanvas__drawer,
  .yamm-offcanvas__panel,
  .yamm-offcanvas__close,
  .yamm-offcanvas__close svg path,
  .yamm-offcanvas__link,
  .yamm-offcanvas__back,
  .yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__nav,
  .yamm-offcanvas__panel[data-yamm-nav-panel="root"] .yamm-offcanvas__locale {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
}
