/* ============================================================
   Keyframes
   ============================================================ */
@keyframes imageReveal {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 100% 0, calc(100% - 10vw) 100%, 0 100%); }
}

@keyframes imageRevealMobile {
  from { clip-path: polygon(0 0, 0 0, 0 calc(100% - 6vw), 0 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%); }
}

@keyframes wordSlam {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Page transitions
   ============================================================ */
html.page-transition-enabled body > :not(#wpadminbar) {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(1px);
  transition:
    opacity var(--lemzli-page-transition-duration, 260ms) ease,
    transform var(--lemzli-page-transition-duration, 260ms) ease,
    filter var(--lemzli-page-transition-duration, 260ms) ease;
  will-change: opacity, transform, filter;
}

html.page-transition-enabled.page-transition-loaded body > :not(#wpadminbar) {
  opacity: 1;
  transform: none;
  filter: none;
}

html.page-transition-enabled.page-transition-leaving body > :not(#wpadminbar) {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(2px);
}

html.page-transition-enabled.page-transition-style-slide body > :not(#wpadminbar) {
  transform: translateX(18px);
}

html.page-transition-enabled.page-transition-style-slide.page-transition-loaded body > :not(#wpadminbar) {
  transform: none;
}

html.page-transition-enabled.page-transition-style-slide.page-transition-leaving body > :not(#wpadminbar) {
  transform: translateX(-18px);
}

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero__image-panel {
    animation: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10vw) 100%, 0 100%);
  }

  .hero__word {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lookbook__slide {
    transition: none;
  }

  .featured-product__image img {
    transition: none;
  }

  html.page-transition-enabled body > :not(#wpadminbar),
  html.page-transition-enabled.page-transition-loaded body > :not(#wpadminbar),
  html.page-transition-enabled.page-transition-leaving body > :not(#wpadminbar) {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}