/* MIXTYS / Opening Night. Additive motion; original geometry and photos stay intact. */
:root {
  --mx-m7-ease: cubic-bezier(.16,1,.3,1);
  --mx-m7-quick: cubic-bezier(.22,.75,.25,1);
  --mx-m7-gold: rgba(191,137,72,.48);
}

/* The previous observer hid content indefinitely when a route replaced its root. */
html body #app .motion-ready,
html body #app .motion-ready.motion-in {
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  transition-delay:0s!important;
}
html body #app :is(.premium-float,.hero-category-card,.product-card,.expert-card,.news-card) {
  will-change:auto!important;
  transform-style:flat!important;
}
html body #app :is(.hero-feature-copy,.hero-feature-copy h1,.hero-feature-bg,.hero-category-card,.look-studio-shell,.look-stage),
html body #app .mx-page-frame.is-active>section,
html body #app .mx-page-frame.is-active>footer {
  animation:none!important;
}

/* Static hit areas: the label and arrow move, the link never runs from the pointer. */
html body #app :is(.button,.text-link,.search-pill,.header-actions>a,.header-actions>button) {
  transform:none!important;
  touch-action:manipulation;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .45s var(--mx-m7-ease)!important;
}
html body #app .button {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
html body #app .button::before {
  content:"";
  position:absolute;
  inset:-100% auto -100% 0;
  width:44%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-260%) skewX(-22deg);
  transition:transform .85s var(--mx-m7-ease);
  z-index:-1;
}
.mx-motion-label { display:inline-block; pointer-events:none; }
html body #app :is(.button,.text-link,.search-pill,.header-actions>a,.header-actions>button) :is(.mx-motion-label,svg) {
  translate:var(--mx-m7-x,0px) var(--mx-m7-y,0px);
  transition:translate .24s var(--mx-m7-ease),transform .55s var(--mx-m7-ease),scale .25s var(--mx-m7-quick);
}
html body #app :is(.button,.text-link,.search-pill).mx-m7-tracking :is(.mx-motion-label,svg),
html body #app .header-actions>.mx-m7-tracking svg {
  transition:translate .09s linear,transform .55s var(--mx-m7-ease),scale .25s var(--mx-m7-quick);
}
html body #app :is(.button,.text-link,.search-pill,.header-actions>a,.header-actions>button):active :is(.mx-motion-label,svg) {
  scale:.96;
}
html body #app :is(.button,.text-link,.search-pill,.hero-category-card,.product-media,.expert-card footer button,.mx-page-nav button):focus-visible {
  outline:2px solid #8f5d2e!important;
  outline-offset:4px;
}

/* Keep the full photograph framing. Light, depth and typography provide the response. */
html body #app :is(.hero-category-card,.product-card,.expert-card,.news-card,.ai-cards>a) {
  transform:none!important;
  transition:box-shadow .55s var(--mx-m7-ease),border-color .35s ease,background-color .35s ease!important;
}
html body #app :is(.hero-category-copy,.news-card .copy,.product-info,.expert-card-copy) {
  transition:translate .55s var(--mx-m7-ease);
}
html body #app :is(.hero-category-card,.product-media,.ai-cards>a,.world-card,.mini-tile):hover img {
  transform:none!important;
}
html body #app :is(.hero-category-copy,.news-card,.concierge>div:last-child>a,.expert-card footer button,.look-product-arrow,.mobile-overlay nav a) svg {
  transition:transform .55s var(--mx-m7-ease),color .3s ease;
}

/* The screen remains stationary while its contents arrive in an editorial sequence. */
html body #app .mx-page-frame.is-active::after {
  background:linear-gradient(90deg,transparent,var(--mx-m7-gold),transparent);
  animation:mx-m7-divider 1.15s var(--mx-m7-ease) both;
}
@keyframes mx-m7-divider {
  0% { opacity:0; transform:scaleX(.08); }
  35% { opacity:1; }
  100% { opacity:.62; transform:scaleX(1); }
}

/* Existing .open classes still control every overlay. No navigation is delayed. */
html body #app .overlay {
  transition:transform .32s var(--mx-m7-ease),visibility 0s linear .32s!important;
  visibility:hidden;
  pointer-events:none;
  box-shadow:0 30px 100px rgba(44,30,19,.16);
}
html body #app .overlay.open {
  visibility:visible;
  pointer-events:auto;
  transition:transform .56s var(--mx-m7-ease),visibility 0s!important;
}
html body #app .cart-drawer {
  transition:transform .28s var(--mx-m7-ease),visibility 0s linear .28s!important;
  visibility:hidden;
  pointer-events:none;
  box-shadow:-25px 0 100px rgba(44,30,19,.14);
}
html body #app .cart-drawer.open {
  visibility:visible;
  pointer-events:auto;
  transition:transform .44s var(--mx-m7-ease),visibility 0s!important;
}
html body #app .drawer-backdrop {
  transition:opacity .5s ease!important;
}
html body #app .modal {
  transform-origin:50% 66%;
  box-shadow:0 36px 110px rgba(44,30,19,.22);
}
html body #app .toast {
  transition:opacity .28s ease,transform .55s var(--mx-m7-ease)!important;
  pointer-events:none;
}
html body #app .cookie-banner.cookie-simple {
  transition:opacity .35s ease,transform .65s var(--mx-m7-ease),visibility 0s linear .65s;
}
html body #app .cookie-banner.cookie-simple.open { transition-delay:0s; }

/* Panel content has a paced entrance, including dynamically opened search/menu. */
@media (prefers-reduced-motion:no-preference) {
  html body #app .mobile-overlay.open nav>a {
    animation:mx-m7-menu .44s var(--mx-m7-ease) both;
    animation-delay:calc(.06s + min(var(--mx-m7-order,0),6)*.025s);
  }
  html body #app .search-overlay.open> :is(span,.big-search,.search-types,.search-examples),
  html body #app .cart-drawer.open> :is(span,h2,.drawer-list,.empty-cart,.drawer-total,.button) {
    animation:mx-m7-panel .36s .06s var(--mx-m7-ease) both;
  }
  html body #app .search-overlay.open>.search-types { animation-delay:.1s; }
  html body #app .search-overlay.open>.search-examples { animation-delay:.14s; }
  html body #app .cart-drawer.open>.drawer-list,
  html body #app .cart-drawer.open>.empty-cart { animation-delay:.1s; }
  html body #app .cart-drawer.open>.button { animation-delay:.14s; }
}
@keyframes mx-m7-menu {
  from { opacity:.15; translate:0 30px; clip-path:inset(0 0 70% 0); }
  to { opacity:1; translate:0 0; clip-path:inset(0); }
}
@keyframes mx-m7-panel {
  from { opacity:.15; translate:0 22px; }
  to { opacity:1; translate:0 0; }
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html body #app .button:hover::before { transform:translateX(370%) skewX(-22deg); }
  html body #app .button:hover { box-shadow:0 12px 32px rgba(117,77,36,.17); }
  html body #app :is(.button,.text-link):hover svg { transform:translateX(5px); }
  html body #app :is(.hero-category-card,.product-card,.expert-card,.news-card,.ai-cards>a):hover {
    box-shadow:0 22px 50px rgba(80,55,32,.14)!important;
  }
  html body #app :is(.hero-category-card,.news-card):hover :is(.hero-category-copy,.copy) { translate:0 -3px; }
  html body #app :is(.hero-category-card,.news-card,.concierge>div:last-child>a,.expert-card footer button,.look-product,.mobile-overlay nav a):hover svg {
    transform:translateX(6px);
  }
  html body #app .panel-close:hover svg,
  html body #app .modal-close:hover svg { transform:rotate(90deg); }
}

/* Covers CSS effects immediately; JavaScript also cancels running WAAPI effects live. */
@media (prefers-reduced-motion:reduce) {
  html body #app,
  html body #app *,
  html body #app *::before,
  html body #app *::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  html body #app :is(.mx-motion-label,svg,.hero-category-copy,.news-card .copy) { translate:none!important; scale:none!important; }
  html body #app .button::before { display:none; }
}
@media print {
  #app *,#app *::before,#app *::after { animation:none!important; transition:none!important; translate:none!important; }
}

/* The standalone partner page shares the same small, fixed-hit-area responses. */
.layout .btn { transform:none!important; touch-action:manipulation; }
.layout .btn :is(span,svg),.topbar .back .mx-motion-label {
  translate:var(--mx-m7-x,0px) var(--mx-m7-y,0px);
  transition:translate .2s var(--mx-m7-ease),transform .5s var(--mx-m7-ease);
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .layout .btn:hover svg { transform:translateX(5px); }
  .layout .btn:hover { box-shadow:0 12px 32px rgba(117,77,36,.17); }
}
@media (prefers-reduced-motion:reduce) {
  .layout *,.topbar * { animation:none!important; transition:none!important; translate:none!important; scroll-behavior:auto!important; }
}

/* Native scroll timeline: the existing reading indicator follows the real scroller.
   Older browsers keep the original passive JavaScript progress update. */
@supports (animation-timeline:scroll()) and (timeline-scope:--mx-reading) {
  @media (prefers-reduced-motion:no-preference) {
    #app { timeline-scope:--mx-reading; }
    #app main.mx-page-stack { scroll-timeline:--mx-reading block; }
    html body #app .scroll-progress {
      animation:mx-m7-reading auto linear both;
      animation-timeline:scroll(root block);
      transition:none;
    }
    html.mx-home-pager body #app .scroll-progress { animation-timeline:--mx-reading; }
  }
}
@keyframes mx-m7-reading { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* Scoped transition stays inside the catalogue, leaving navigation interactive. */
#catalog-grid::view-transition { pointer-events:none; }
#catalog-grid::view-transition-group(*) { animation-duration:.42s; animation-timing-function:var(--mx-m7-ease); }
@media (prefers-reduced-motion:reduce) {
  #catalog-grid::view-transition-group(*),#catalog-grid::view-transition-old(*),#catalog-grid::view-transition-new(*) { animation:none!important; }
}

/* Open panels own their scroll; wheel/touch gestures cannot move the page behind. */
html.mx-dialog-open,html.mx-dialog-open body { overflow:hidden!important; }
html.mx-dialog-open #app main.mx-page-stack { overflow-y:hidden!important; }
html body #app :is(.overlay,.cart-drawer,.modal-backdrop,.modal) { overscroll-behavior:contain; }
html body #app :is(input,textarea) { caret-color:#8f5d2e; }
html body #app ::selection { color:#29221c; background:#e5d3ba; }
html body #app :is(main.mx-page-stack,.overlay,.cart-drawer,.modal) { scrollbar-width:thin; scrollbar-color:#ad967b #f4efe7; }
/* Small screens retain ordinary touch scrolling instead of forced full-page snaps. */
@media (max-width:700px), (prefers-reduced-motion:reduce) {
  html body #app main.mx-page-stack { scroll-snap-type:none!important; }
}