/* Public storefront motion. Layout, colour and type stay in printjoya.css. */
:root {
  --pj-fast: .18s;
  --pj-base: .28s;
  --pj-reveal: .55s;
  --pj-hero: .75s;
  --pj-ease: cubic-bezier(.22, 1, .36, 1);
  --pj-distance: 16px;
}

@keyframes pj-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pj-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pj-rise {
  from { opacity: 0; transform: translateY(var(--pj-distance)); }
  to { opacity: 1; transform: none; }
}
@keyframes pj-from-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes pj-to-right {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(20px); }
}
@keyframes pj-from-left {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: none; }
}
@keyframes pj-to-left {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(-20px); }
}
@keyframes pj-pop { 45% { transform: scale(1.12); } }

.header { animation: pj-fade .45s ease both; }
.nav-trigger {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left calc(100% - 2px);
  background-size: 0 1px;
  transition: color var(--pj-fast) ease, background-size var(--pj-fast) ease;
}
.nav-trigger:hover, .nav-trigger:focus-visible, .nav-trigger[aria-expanded="true"] { background-size: 100% 1px; }
.nav-trigger svg { transition: transform var(--pj-fast) var(--pj-ease); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop:not([hidden]) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s var(--pj-ease);
}
.nav-drop.is-open { opacity: 1; transform: none; }

.hero-copy .eyebrow { animation: pj-rise var(--pj-hero) var(--pj-ease) both; }
.hero-copy h1 { animation: pj-rise var(--pj-hero) var(--pj-ease) .08s both; }
.hero-copy > p { animation: pj-rise var(--pj-hero) var(--pj-ease) .16s both; }
.hero-copy .actions { animation: pj-rise .7s var(--pj-ease) .24s both; }
.hero-copy .hero-note { animation: pj-rise .65s var(--pj-ease) .32s both; }
.hero .album-experience { animation: pj-fade .8s ease .12s both; }

.pj-motion .promise-strip,
.pj-motion .editorial,
.pj-motion .studio-banner,
.pj-motion .craft-banner,
.pj-motion .last-call,
.pj-motion .collection-heading,
.pj-motion .section-heading,
.pj-motion .discovery-grid > .discovery-card,
.pj-motion .process-grid > div,
.pj-motion .featured-grid > .product-card,
.pj-motion .product-grid > .product-card,
.pj-motion .related-grid > a,
.pj-motion .process > .eyebrow,
.pj-motion .process > h2,
.pj-motion .quality-section > .comparison,
.pj-motion .quality-section > div,
.pj-motion .occasion-section > .eyebrow,
.pj-motion .occasion-section > h2,
.pj-motion .occasion-section > .occasion-links,
.pj-motion .home-faq > div,
.pj-motion .footer,
.pj-motion main.page-width > .page-title {
  opacity: 0;
  transform: translateY(var(--pj-distance));
}
.pj-motion .promise-strip.is-in,
.pj-motion .editorial.is-in,
.pj-motion .studio-banner.is-in,
.pj-motion .craft-banner.is-in,
.pj-motion .last-call.is-in,
.pj-motion .collection-heading.is-in,
.pj-motion .section-heading.is-in,
.pj-motion .discovery-grid > .discovery-card.is-in,
.pj-motion .process-grid > div.is-in,
.pj-motion .featured-grid > .product-card.is-in,
.pj-motion .product-grid > .product-card.is-in,
.pj-motion .related-grid > a.is-in,
.pj-motion .process > .eyebrow.is-in,
.pj-motion .process > h2.is-in,
.pj-motion .quality-section > .comparison.is-in,
.pj-motion .quality-section > div.is-in,
.pj-motion .occasion-section > .eyebrow.is-in,
.pj-motion .occasion-section > h2.is-in,
.pj-motion .occasion-section > .occasion-links.is-in,
.pj-motion .home-faq > div.is-in,
.pj-motion .footer.is-in,
.pj-motion main.page-width > .page-title.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--pj-reveal) var(--pj-ease), transform var(--pj-reveal) var(--pj-ease);
  transition-delay: var(--pj-delay, 0ms);
}

.product-card { transition: box-shadow var(--pj-base) ease; }
.product-card:hover { box-shadow: 0 12px 32px #21145f14; }
.gallery-thumbs button { transition: border-color var(--pj-fast) ease, opacity var(--pj-fast) ease; }
#gallery-image.pj-swap { animation: pj-fade var(--pj-base) ease; }
.swatch, .path-choice { transition: box-shadow var(--pj-fast) ease, border-color var(--pj-fast) ease, background-color var(--pj-fast) ease; }
.step-panel:not([hidden]), [data-panel]:not([hidden]), [data-checkout-step]:not([hidden]) { animation: pj-fade .24s ease; }

.btn:active { transform: translateY(0); }
.footer a, .text-link { transition: color var(--pj-fast) ease; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea, select.select-control { transition: border-color var(--pj-fast) ease, box-shadow var(--pj-fast) ease; }
.search-results a { animation: pj-fade .22s ease; }
.toast { animation: pj-rise var(--pj-base) var(--pj-ease); }
.error:not([hidden]) { animation: pj-rise var(--pj-base) ease; }
.bag-count.pj-bump, .wish-button.pj-ack { animation: pj-pop .35s ease; }

#cart-drawer:not([hidden]):not(.is-leaving) .cart-sheet { animation: pj-from-right .32s var(--pj-ease); }
#cart-drawer.is-leaving .cart-sheet { animation: pj-to-right .2s ease forwards; }
#mobile-nav:not([hidden]):not(.is-leaving) .mobile-nav-sheet,
#filter-sheet:not([hidden]):not(.is-leaving) .filter-sheet { animation: pj-from-left .32s var(--pj-ease); }
#mobile-nav.is-leaving .mobile-nav-sheet,
#filter-sheet.is-leaving .filter-sheet { animation: pj-to-left .2s ease forwards; }
#search-dialog:not([hidden]):not(.is-leaving) .search-dialog,
#quick-dialog:not([hidden]):not(.is-leaving) .quick-dialog,
#zoom-dialog:not([hidden]):not(.is-leaving) .image-dialog { animation: pj-fade .26s ease; }
#search-dialog.is-leaving .search-dialog,
#quick-dialog.is-leaving .quick-dialog,
#zoom-dialog.is-leaving .image-dialog { animation: pj-fade-out .16s ease forwards; }
#cart-drawer:not([hidden]):not(.is-leaving) > .fixed.inset-0,
#mobile-nav:not([hidden]):not(.is-leaving) > .fixed.inset-0,
#filter-sheet:not([hidden]):not(.is-leaving) > .fixed.inset-0,
#search-dialog:not([hidden]):not(.is-leaving) > .fixed.inset-0,
#quick-dialog:not([hidden]):not(.is-leaving) > .fixed.inset-0,
#zoom-dialog:not([hidden]):not(.is-leaving) > .fixed.inset-0 { animation: pj-fade .22s ease; }
.is-leaving > .fixed.inset-0 { animation: pj-fade-out .16s ease forwards; }

@supports (interpolate-size: allow-keywords) {
  .faq-list details { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height .32s ease, opacity .28s ease;
  }
  .faq-list details[open]::details-content { height: auto; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pj-motion .promise-strip,
  .pj-motion .editorial,
  .pj-motion .studio-banner,
  .pj-motion .craft-banner,
  .pj-motion .last-call,
  .pj-motion .collection-heading,
  .pj-motion .section-heading,
  .pj-motion .discovery-grid > .discovery-card,
  .pj-motion .process-grid > div,
  .pj-motion .featured-grid > .product-card,
  .pj-motion .product-grid > .product-card,
  .pj-motion .related-grid > a,
  .pj-motion .process > .eyebrow,
  .pj-motion .process > h2,
  .pj-motion .quality-section > .comparison,
  .pj-motion .quality-section > div,
  .pj-motion .occasion-section > .eyebrow,
  .pj-motion .occasion-section > h2,
  .pj-motion .occasion-section > .occasion-links,
  .pj-motion .home-faq > div,
  .pj-motion .footer,
  .pj-motion main.page-width > .page-title,
  .nav-drop:not([hidden]) {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (hover: none) {
  .product-card:hover { box-shadow: none; }
}