/* Navigation remains native. Both same-origin documents opt in through CSS.
   Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@view-transition */
@view-transition {
  navigation: auto;
}

:root {
  --butti-motion-ease: cubic-bezier(.22, .61, .36, 1);
  --butti-motion-gold: #a88a52;
}

@media (prefers-reduced-motion: no-preference) {
  /* Each name belongs to a single, stable element in every document. No
     temporary names survive in the back/forward cache. */
  .site-header { view-transition-name: butti-header; }
  .announcement { view-transition-name: butti-announcement; }
  .category-nav { view-transition-name: butti-categories; }
  .mobile-bottom { view-transition-name: butti-mobile-navigation; }

  ::view-transition { pointer-events: none; }
  ::view-transition-group(root) {
    animation-duration: 260ms;
    animation-timing-function: var(--butti-motion-ease);
  }
  ::view-transition-old(root) {
    animation: butti-page-out 180ms var(--butti-motion-ease) both;
    mix-blend-mode: normal;
  }
  ::view-transition-new(root) {
    animation: butti-page-in 260ms var(--butti-motion-ease) both;
    mix-blend-mode: normal;
  }
  ::view-transition-group(butti-header),
  ::view-transition-group(butti-announcement),
  ::view-transition-group(butti-categories),
  ::view-transition-group(butti-mobile-navigation) {
    animation: none;
  }
  ::view-transition-old(butti-header),
  ::view-transition-old(butti-announcement),
  ::view-transition-old(butti-categories),
  ::view-transition-old(butti-mobile-navigation) {
    display: none;
  }
  ::view-transition-new(butti-header),
  ::view-transition-new(butti-announcement),
  ::view-transition-new(butti-categories),
  ::view-transition-new(butti-mobile-navigation) {
    animation: none;
    opacity: 1;
  }

  /* A first visit has no outgoing snapshot. Arriving home from an inner page
     also leaves the dedicated ring reveal as the sole entrance treatment. */
  html:has(body[data-route=""])::view-transition-old(root) {
    animation: none;
    opacity: 0;
  }
  html:has(body[data-route=""])::view-transition-new(root) {
    animation: none;
    opacity: 1;
  }
}

@keyframes butti-page-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -5px, 0); }
}
@keyframes butti-page-in {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Primary actions: a restrained lift, warm shadow and travelling arrow. */
.button,
.admin-button {
  transition: transform 220ms var(--butti-motion-ease),
    background-color 220ms ease, border-color 220ms ease,
    color 220ms ease, box-shadow 220ms ease;
}
.button:not(:disabled):is(:hover, :focus-visible),
.admin-button:not(:disabled):is(:hover, :focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px -13px #594826b3;
}
.button:active,
.admin-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 9px -8px #59482699;
}
.button-outline:not(:disabled):is(:hover, :focus-visible),
.admin-button.admin-secondary:not(:disabled):is(:hover, :focus-visible) {
  border-color: var(--butti-motion-gold);
  background-color: #b99c6212;
  box-shadow: inset 0 0 0 1px #b99c625c;
}
.button > svg:last-child,
.admin-button > svg:last-child,
.text-link > svg:last-child,
.channel-switch > svg:last-child {
  transition: transform 230ms var(--butti-motion-ease);
}
.button:not(:disabled):is(:hover, :focus-visible) > svg:last-child,
.admin-button:not(:disabled):is(:hover, :focus-visible) > svg:last-child,
.text-link:is(:hover, :focus-visible) > svg:last-child,
.channel-switch:is(:hover, :focus-visible) > svg:last-child {
  transform: translateX(3px);
}

/* Existing link sizes and colours are preserved; only the line moves. */
.text-link {
  position: relative;
  border-bottom-color: transparent;
}
.text-link::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(.35);
  transform-origin: left center;
  opacity: .55;
  transition: transform 260ms var(--butti-motion-ease), opacity 200ms ease;
  pointer-events: none;
}
.text-link:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  opacity: 1;
}
.desktop-nav a:focus-visible::after { width: 100%; }
.category-nav a,
.channel-switch {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left calc(100% - 5px);
  transition: color 200ms ease, background-size 240ms var(--butti-motion-ease);
}
.category-nav a:is(:hover, :focus-visible),
.channel-switch:is(:hover, :focus-visible) {
  background-size: 100% 1px;
}

/* Selection controls retain their layout. No photograph is scaled here. */
.quick-add {
  transition: transform 300ms var(--butti-motion-ease), background-color 200ms ease;
}
.quick-add:is(:hover, :focus-visible) { background-color: #ece4d4; }
.quick-add svg { transition: transform 240ms var(--butti-motion-ease); }
.quick-add:is(:hover, :focus-visible) svg { transform: rotate(90deg); }
.favorite-button,
.product-save,
.quantity-control button,
.filter-chip,
.channel-pills button {
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.favorite-button:is(:hover, :focus-visible),
.product-save:is(:hover, :focus-visible) {
  background-color: #eee5d2;
  box-shadow: 0 0 0 2px #b49b6940;
}
.quantity-control button:is(:hover, :focus-visible),
.filter-chip:is(:hover, :focus-visible) {
  background-color: #e4d8c1;
}
.channel-pills button:is(:hover, :focus-visible):not(.active) {
  background-color: #eae2d3;
}
button[data-favorite][aria-pressed="true"]:is(:hover, :focus-visible) svg {
  animation: butti-favorite-pulse 320ms var(--butti-motion-ease) 1;
}
@keyframes butti-favorite-pulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .button,
  .admin-button,
  .button > svg,
  .admin-button > svg,
  .text-link::after,
  .text-link > svg,
  .channel-switch,
  .channel-switch > svg,
  .category-nav a,
  .quick-add,
  .quick-add svg,
  .favorite-button,
  .favorite-button svg,
  .product-save,
  .product-save svg,
  .quantity-control button,
  .filter-chip,
  .channel-pills button {
    transition: none !important;
    animation: none !important;
  }
  .button:is(:hover, :focus-visible, :active),
  .admin-button:is(:hover, :focus-visible, :active),
  .button:is(:hover, :focus-visible) > svg,
  .admin-button:is(:hover, :focus-visible) > svg,
  .text-link:is(:hover, :focus-visible) > svg,
  .channel-switch:is(:hover, :focus-visible) > svg,
  .quick-add:is(:hover, :focus-visible) svg {
    transform: none;
  }
}