/* Public-page motion is progressive: no waiting element is hidden by these rules. */
:root {
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  --motion-gold: #e4b749;
  --motion-ink: #213c35;
}

.motion-active .motion-enter {
  animation: offtab-enter 620ms var(--motion-ease) var(--motion-delay, 0ms) both;
}

@keyframes offtab-enter {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

/* Individual translate preserves the existing angle/scale of the catalogue artwork. */
.motion-active .hero-art .motion-enter {
  animation-name: offtab-art-enter;
}

@keyframes offtab-art-enter {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

.motion-active :is(.catalog-card, .store-card, .branch-card) {
  transition: transform 240ms var(--motion-ease);
}

.motion-active :is(.product-card, .catalog-card, .store-card, .branch-card):focus-within {
  transform: translateY(-3px);
}

.motion-active .product-card:focus-within .product-media img {
  transform: scale(1.035);
}

.motion-active :is(.button, .add-button, .icon-button):focus-visible {
  transform: translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {
  .motion-active :is(.catalog-card, .store-card, .branch-card):hover {
    transform: translateY(-3px);
  }
  .motion-to-top:hover { transform: translateY(-3px); }
}

/* Keep header height stable, avoiding a layout jump when it becomes sticky. */
@media (min-width: 1024px) {
  .motion-active .site-header {
    position: sticky;
    top: 0;
    z-index: 110;
  }
  .motion-active .site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    pointer-events: none;
    box-shadow: 0 8px 24px #213c351c;
    background: #dbe2d3;
    opacity: 0;
    transition: opacity 240ms var(--motion-ease);
  }
  .motion-active.motion-header-scrolled .site-header::after { opacity: 1; }
  .motion-active .guide-content section { scroll-margin-top: 175px; }
}

/* One slow decorative movement, paused whenever the hero or browser tab is out of view. */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .motion-active .hero-art-orbit {
    animation: offtab-orbit 58s linear infinite;
    animation-play-state: paused;
  }
  .motion-active.motion-hero-in-view .hero-art-orbit { animation-play-state: running; }
}

@keyframes offtab-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.motion-to-top {
  position: fixed;
  inset-inline-end: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 1px solid #d4bd77;
  border-radius: 50%;
  background: #f5cf6f;
  color: var(--motion-ink);
  box-shadow: 0 4px 16px #213c3512;
  cursor: pointer;
  transition: transform 200ms var(--motion-ease);
  -webkit-tap-highlight-color: transparent;
}
.motion-to-top[hidden] { display: none !important; }
.motion-to-top svg { width: 21px; height: 21px; }
.motion-to-top:focus-visible {
  outline: 3px solid var(--motion-ink);
  outline-offset: 4px;
}
.motion-to-top:active { transform: translateY(-1px); }

.motion-reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 120;
  pointer-events: none;
  background: var(--motion-gold);
  transform: scaleX(0);
  transform-origin: right center;
}

@media (max-width: 600px) {
  .motion-to-top {
    inset-inline-end: 16px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }
}

/* Setting changes take effect immediately; the back-to-top action still works. */
.motion-active.motion-reduced .motion-enter {
  animation: none !important;
  opacity: 1 !important;
  translate: none !important;
}
.motion-active.motion-reduced .hero-art-orbit { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-active .motion-enter,
  .motion-active .hero-art-orbit { animation: none !important; opacity: 1 !important; translate: none !important; }
  .motion-active :is(.product-card, .catalog-card, .store-card, .branch-card, .button, .add-button, .icon-button),
  .motion-active .product-media img,
  .motion-to-top { transition: none !important; }
  .motion-active :is(.product-card, .catalog-card, .store-card, .branch-card, .button, .add-button, .icon-button):is(:hover, :focus-within, :focus-visible),
  .motion-active .product-card:is(:hover, :focus-within) .product-media img,
  .motion-to-top:is(:hover, :active) { transform: none !important; }
}

@media (forced-colors: active) {
  .motion-to-top { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .motion-reading-progress { background: Highlight; }
}

@media print {
  .motion-to-top, .motion-reading-progress { display: none !important; }
  .motion-active .site-header { position: static !important; }
  .motion-active .motion-enter { animation: none !important; opacity: 1 !important; translate: none !important; }
  .motion-active .hero-art-orbit { animation: none !important; }
}