/* ============================================================
   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 — cross-document View Transitions API
   A régi és az új oldal között valódi crossfade fut: a böngésző
   pillanatképet készít a kifutó oldalról, és átúsztatja a befutóba, így
   soha nem villan be üres háttér, és nem látszik a tartalom felépülése.
   Az `@view-transition { navigation: auto; }` szabályt a wp_head bootstrap
   adja ki (csak ha a beállítás aktív); itt csak az animációkat hangoljuk.
   Támogatás nélküli böngészőkben a navigáció áttűnés nélkül, azonnal megy.
   ============================================================ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--lemzli-page-transition-duration, 320ms);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

/* raw-fade: a böngésző alap root-crossfade-je (kifutó fade-out + befutó
   fade-in) — ehhez nem kell extra szabály. */

/* slide: a crossfade mellé finom vízszintes elcsúszás. */
html.page-transition-style-slide::view-transition-old(root) {
  animation-name: lemzli-vt-fade-out, lemzli-vt-slide-out;
}

html.page-transition-style-slide::view-transition-new(root) {
  animation-name: lemzli-vt-fade-in, lemzli-vt-slide-in;
}

@keyframes lemzli-vt-fade-out {
  to { opacity: 0; }
}

@keyframes lemzli-vt-fade-in {
  from { opacity: 0; }
}

@keyframes lemzli-vt-slide-out {
  to { transform: translateX(-4%); }
}

@keyframes lemzli-vt-slide-in {
  from { transform: translateX(4%); }
}

/* ============================================================
   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;
  }

  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}