/*
 * Maison Mits motion direction
 * Quiet, editorial movement built around one easing system and restrained depth.
 */

:root {
  --motion-ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 260ms;
  --motion-base: 520ms;
  --motion-slow: 860ms;
}

/* Opening composition */
.motion-enabled .hero-picture img {
  animation: luxury-image-settle 1600ms var(--motion-ease-luxury) both;
}

.motion-enabled .hero-copy > * {
  opacity: 0;
  animation: luxury-copy-rise 900ms var(--motion-ease-luxury) forwards;
}

.motion-enabled .hero-copy > :nth-child(1) { animation-delay: 120ms; }
.motion-enabled .hero-copy > :nth-child(2) { animation-delay: 190ms; }
.motion-enabled .hero-copy > :nth-child(3) { animation-delay: 280ms; }
.motion-enabled .hero-copy > :nth-child(4) { animation-delay: 360ms; }
.motion-enabled .hero-copy > :nth-child(5) { animation-delay: 420ms; }

/* Scroll reveals. Attributes are added only when JavaScript is active. */
.motion-enabled [data-luxury-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 720ms var(--motion-ease-soft) var(--motion-delay, 0ms),
    transform 900ms var(--motion-ease-luxury) var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-enabled [data-luxury-reveal="card"] {
  transform: translate3d(0, 18px, 0) scale(0.992);
}

.motion-enabled [data-luxury-reveal="media"] {
  transform: translate3d(0, 14px, 0) scale(1.012);
}

.motion-enabled [data-luxury-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* One interaction tempo across the storefront. */
.site-header,
.announcement,
.nav-logo,
.nav-lockup,
.button,
.text-button,
.favourite-add,
.favourites-more,
.filters button,
.mood-index-bar,
.mood-sheet-option,
.index-product,
.index-product-discover,
.combo-content .text-button,
.builder-grid > button,
.size-selector button,
.product-detail-actions button,
.whatsapp-float,
.menu-panel nav a,
.menu-panel nav button,
.menu-service {
  transition-timing-function: var(--motion-ease-luxury) !important;
}

.button,
.text-button,
.favourite-add,
.favourites-more,
.filters button,
.mood-index-bar,
.mood-sheet-option,
.index-product-discover,
.combo-content .text-button,
.builder-grid > button,
.size-selector button,
.product-detail-actions button,
.whatsapp-float,
.menu-service {
  transition-duration: var(--motion-base) !important;
}

.index-product-visual img,
.favourite-visual img,
.combo-gallery img,
.builder-scent-image img,
.campaign-banner img,
.ritual-media img,
.product-detail-image {
  transition-duration: 1050ms !important;
  transition-timing-function: var(--motion-ease-luxury) !important;
}

.index-product-discover img,
.text-button img,
.menu-service > img,
.mood-index-change img {
  transition-duration: 440ms !important;
  transition-timing-function: var(--motion-ease-luxury) !important;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover,
  .favourite-add:hover,
  .favourites-more:hover,
  .combo-content .text-button:hover {
    transform: translateY(-3px);
  }

  .whatsapp-float:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 18px 42px rgba(10, 38, 29, 0.3);
  }

  .index-product:hover {
    transform: translateY(-5px);
  }

  .index-product:hover .index-product-visual img,
  .favourite-card:hover .favourite-visual img,
  .combo-card:hover .combo-gallery img {
    transform: scale(1.022);
  }
}

/* More composed overlay entrances. */
.drawer,
.menu-panel,
.product-detail,
.builder,
.mood-sheet,
.drawer-backdrop,
.mood-sheet-backdrop {
  animation-timing-function: var(--motion-ease-luxury) !important;
}

.drawer,
.menu-panel,
.product-detail,
.builder,
.mood-sheet {
  animation-duration: 560ms !important;
}

.drawer-backdrop,
.mood-sheet-backdrop {
  animation-duration: 420ms !important;
}

.drawer-backdrop.is-closing,
.mood-sheet-backdrop.is-closing {
  animation: luxury-fade-out 420ms var(--motion-ease-soft) both !important;
  pointer-events: none;
}

.cart-drawer.is-closing {
  animation: luxury-drawer-right-out 500ms var(--motion-ease-luxury) both !important;
  pointer-events: none;
}

.menu-panel.is-closing {
  animation: luxury-drawer-left-out 500ms var(--motion-ease-luxury) both !important;
  pointer-events: none;
}

.product-detail.is-closing,
.builder.is-closing {
  animation: luxury-panel-out 480ms var(--motion-ease-soft) both !important;
  pointer-events: none;
}

.mood-sheet.is-closing {
  animation: luxury-sheet-out 500ms var(--motion-ease-luxury) both !important;
  pointer-events: none;
}

@keyframes luxury-image-settle {
  from { opacity: 0.88; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes luxury-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes luxury-drawer-right-out {
  from { transform: translateX(0); }
  to { transform: translateX(104%); }
}

@keyframes luxury-drawer-left-out {
  from { transform: translateX(0); }
  to { transform: translateX(-104%); }
}

@keyframes luxury-panel-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.992); }
}

@keyframes luxury-sheet-out {
  from { transform: translate(50%, 0); }
  to { transform: translate(50%, 104%); }
}

@media (max-width: 700px) {
  .motion-enabled [data-luxury-reveal] {
    transform: translate3d(0, 16px, 0);
    transition-duration: 620ms, 760ms;
  }

  .motion-enabled [data-luxury-reveal="card"] {
    transform: translate3d(0, 13px, 0) scale(0.995);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  .motion-enabled .hero-picture img,
  .motion-enabled .hero-copy > *,
  .motion-enabled [data-luxury-reveal],
  .drawer,
  .menu-panel,
  .product-detail,
  .builder,
  .mood-sheet,
  .drawer-backdrop,
  .mood-sheet-backdrop {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}