/*! me-motion.css - Maison Elowen motion system. Hidden states exist only under html.me-motion, a class that only me-motion.js adds:
 * without JS, with reduced motion or in the theme editor everything is visible. Only opacity and transform are animated.
 * Dawn sets html { font-size: 62.5% }, so 2.4rem = 24px. Lenis base styles (MIT) at the end; see assets/me-LICENCES.txt. */

/* 1. Reveal (data-me-reveal) and stagger (data-me-stagger: direct children, --me-i and --me-stagger written by JS). */
html.me-motion .me-wait[data-me-reveal],
html.me-motion [data-me-stagger] > .me-wait {
  opacity: 0;
  transform: translateY(2.4rem);
}
html.me-motion [data-me-reveal],
html.me-motion [data-me-stagger] > * {
  transition:
    opacity var(--me-duration-reveal, 800ms) var(--me-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--me-duration-reveal, 800ms) var(--me-ease, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: min(calc(var(--me-i, 0) * var(--me-stagger, 80ms)), 320ms); /* a long grid must not wait seconds */
}

html.me-motion [data-me-reveal].is-visible,
html.me-motion [data-me-stagger] > .is-visible {
  opacity: 1;
  transform: none;
}

/* 2. CSS-first scroll-driven variant, opt-in with data-me-css (JS does not observe these where supported). */
@supports (animation-timeline: view()) {
  html.me-motion [data-me-reveal][data-me-css] {
    transition: none;
    animation: me-reveal var(--me-duration-reveal, 800ms) var(--me-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}

@keyframes me-reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

/* 3. Hero: the LCP never hides. GSAP scales the img/svg inside [data-me-scale]; the wrapper clips it. */
[data-me-no-motion] {
  opacity: 1 !important;
  transform: none !important;
}

[data-me-scale] {
  overflow: hidden;
}

html.me-motion [data-me-scale] img,
html.me-motion [data-me-scale] svg {
  will-change: transform;
  transform-origin: center;
}

/* 4. Scene line, word by word. Starts at 0.6 (legible, 3:1 at 24px+); GSAP scrubs it, the IO fallback transitions it. */
.me-word {
  display: inline-block;
}

html.me-motion [data-me-words] .me-word {
  opacity: 0.85;
  will-change: transform;
}

html.me-motion [data-me-words].is-visible .me-word {
  opacity: 1;
  transition: opacity var(--me-duration-reveal, 800ms) var(--me-ease, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: min(calc(var(--me-i, 0) * var(--me-stagger, 80ms)), 320ms); /* a long grid must not wait seconds */
}

/* 5. Theme editor: merchants always see the content they click. */
html.shopify-design-mode [data-me-reveal],
html.shopify-design-mode [data-me-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* 6. Reduced motion: everything visible and still, whatever the JS did. */
@media (prefers-reduced-motion: reduce) {
  [data-me-reveal],
  [data-me-stagger] > *,
  .me-word,
  [data-me-scale] img,
  [data-me-scale] svg {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}

/* 7. Lenis 1.3.27 base styles (MIT, (c) 2024 darkroom.engineering). The upstream rule `.lenis.lenis-smooth iframe { pointer-events: none }`
 * is left out on purpose: it would block clicks on embedded video players; the page still scrolls natively over an iframe. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* Content is visible by default: hidden states exist only for elements far below the fold (.me-wait, set by JS) and never in print. */
@media print {
  html.me-motion [data-me-reveal], html.me-motion [data-me-stagger] > *, .me-word { opacity: 1 !important; transform: none !important; }
}

/* Images settle into place as their block arrives. */
html.me-motion [data-me-reveal] img,
html.me-motion [data-me-stagger] > * img {
  transition: opacity 600ms var(--me-ease, cubic-bezier(0.22, 1, 0.36, 1)), transform 1200ms var(--me-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
html.me-motion .me-wait[data-me-reveal]:not(.is-visible) img,
html.me-motion [data-me-stagger] > .me-wait:not(.is-visible) img { transform: scale(1.06); }

/* Perfume photographs. A band of window light crosses the glass once on hover, and the product photo drifts slightly with the scroll. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card__media .media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 224, 0.16) 50%, transparent 62%);
    transform: translateX(-70%);
  }
  .card:hover .card__media .media::after {
    opacity: 1;
    transform: translateX(70%);
    transition: transform 1400ms var(--me-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 200ms linear;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .product__media-item .media > img {
      animation: me-photo-drift linear both;
      animation-timeline: view();
    }
  }
}
@keyframes me-photo-drift {
  from { transform: scale(1.07) translateY(-2.5%); }
  to { transform: scale(1.07) translateY(2.5%); }
}