:root {
  --shop-hover-fast: 140ms;
  --shop-hover-select: 240ms;
  --shop-hover-sweep: 360ms;
  --shop-hover-ease: cubic-bezier(.16, 1, .3, 1);
  --shop-hover-step: steps(3, end);
  --shop-hover-lift: 3px;
}

.product-card, .project-frame { position: relative; }
.product-card::before, .project-frame::before {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) left top / 16px 2px,
    linear-gradient(var(--ink), var(--ink)) left top / 2px 16px,
    linear-gradient(var(--ink), var(--ink)) right top / 16px 2px,
    linear-gradient(var(--ink), var(--ink)) right top / 2px 16px,
    linear-gradient(var(--ink), var(--ink)) left bottom / 16px 2px,
    linear-gradient(var(--ink), var(--ink)) left bottom / 2px 16px,
    linear-gradient(var(--ink), var(--ink)) right bottom / 16px 2px,
    linear-gradient(var(--ink), var(--ink)) right bottom / 2px 16px;
  background-repeat: no-repeat;
  opacity: var(--shop-card-selected, 0);
  transform: translateY(calc((1 - var(--shop-card-selected, 0)) * 4px));
  transition: opacity var(--shop-hover-fast), transform var(--shop-hover-select) var(--shop-hover-step);
}
.product-card .product-meta {
  transform: translateX(calc(var(--shop-card-selected, 0) * var(--shop-hover-lift)));
  transition: transform var(--shop-hover-select) var(--shop-hover-ease);
}
.product-card:has(> .product-link:focus-visible),
.product-card:has(> .product-link:active),
.project-frame:focus-within, .project-frame:active { --shop-card-selected: 1; }
.product-link:hover img { opacity: 1; }

.pill:is([data-checkout-trigger], [data-add]) {
  --shop-control-selected: 0;
  position: relative;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  transform: translateY(calc(var(--shop-control-selected) * var(--shop-hover-lift) * -1));
  box-shadow: inset 1px 1px 0 var(--muted), 3px 3px 0 var(--silver);
  transition: transform var(--shop-hover-fast) var(--shop-hover-step), box-shadow var(--shop-hover-fast);
}
.pill:is([data-checkout-trigger], [data-add])::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 3px;
  height: 3px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--paper) 0 8px, var(--silver) 8px 12px, var(--muted) 12px 16px);
  transform: scaleX(var(--shop-control-selected));
  transform-origin: left;
  transition: transform var(--shop-hover-sweep) var(--shop-hover-step);
}
.pill:is([data-checkout-trigger], [data-add]) > span {
  transform: translateX(calc(var(--shop-control-selected) * 6px));
  transition: transform var(--shop-hover-select) var(--shop-hover-ease);
}
.pill:is([data-checkout-trigger], [data-add]):is(:hover, :active) { opacity: 1; }
.pill:is([data-checkout-trigger], [data-add]):focus-visible:not(:disabled) { --shop-control-selected: 1; }
.pill:is([data-checkout-trigger], [data-add]):active:not(:disabled) {
  --shop-control-selected: 1;
  transform: translate(2px, 2px);
  box-shadow: inset 1px 1px 0 var(--silver);
}

.category-rail [data-category] {
  --shop-tab-selected: 0;
  position: relative;
  isolation: isolate;
  border-radius: 2px;
}
.category-rail [data-category]::before {
  content: "";
  position: absolute;
  inset: 4px -4px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--paper), var(--silver) 50%, var(--panel));
  border: 1px solid var(--silver);
  opacity: var(--shop-tab-selected);
  transform: scaleX(calc(.25 + var(--shop-tab-selected) * .75));
  transform-origin: left;
  transition: transform var(--shop-hover-select) var(--shop-hover-step), opacity var(--shop-hover-fast);
}
.category-rail [data-category]:is([aria-pressed="true"], :focus-visible, :active) { --shop-tab-selected: 1; color: var(--ink); }
.category-rail [data-category][aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--ink); }

.store-header .nadia-site-navigation__link {
  --shop-nav-selected: 0;
  position: relative;
  transform: translateY(calc(var(--shop-nav-selected) * -2px));
  transition: transform var(--shop-hover-select) var(--shop-hover-step);
}
.store-header .nadia-site-navigation__link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 6px;
  height: 2px;
  background: var(--ink);
  pointer-events: none;
  transform: scaleX(var(--shop-nav-selected));
  transform-origin: left;
  transition: transform var(--shop-hover-select) var(--shop-hover-step);
}
.store-header .nadia-site-navigation__link:focus-visible { --shop-nav-selected: 1; }
.store-header .nadia-site-navigation__link:active { --shop-nav-selected: 1; transform: translateY(1px); }
.collection-entry i { transition: transform var(--shop-hover-select) var(--shop-hover-ease); }
.collection-entry:is(:focus-visible, :active) i { transform: translate(4px, -3px); }

footer [data-replay] { position: relative; --shop-replay-selected: 0; }
footer [data-replay]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 4px;
  background: repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  transform: scaleX(var(--shop-replay-selected));
  transform-origin: left;
  transition: transform var(--shop-hover-select) var(--shop-hover-step);
}
footer [data-replay]:is(:focus-visible, :active) { --shop-replay-selected: 1; }

@media (hover: hover) and (pointer: fine) {
  .product-card:has(> .product-link:hover), .project-frame:hover { --shop-card-selected: 1; }
  .pill:is([data-checkout-trigger], [data-add]):hover:not(:disabled) { --shop-control-selected: 1; }
  .category-rail [data-category]:hover { --shop-tab-selected: 1; color: var(--ink); }
  .store-header .nadia-site-navigation__link:hover { --shop-nav-selected: 1; }
  .collection-entry:hover i { transform: translate(4px, -3px); }
  footer [data-replay]:hover { --shop-replay-selected: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card::before, .project-frame::before, .product-card .product-meta,
  .pill:is([data-checkout-trigger], [data-add]),
  .pill:is([data-checkout-trigger], [data-add])::after,
  .pill:is([data-checkout-trigger], [data-add]) > span,
  .category-rail [data-category]::before,
  .store-header .nadia-site-navigation__link,
  .store-header .nadia-site-navigation__link::after,
  .collection-entry i, footer [data-replay]::after { transition: none; }

  .product-card::before, .project-frame::before, .product-card .product-meta,
  .pill:is([data-checkout-trigger], [data-add]),
  .pill:is([data-checkout-trigger], [data-add]):active:not(:disabled),
  .pill:is([data-checkout-trigger], [data-add]) > span,
  .category-rail [data-category]::before,
  .store-header .nadia-site-navigation__link,
  .store-header .nadia-site-navigation__link:active,
  .collection-entry:is(:hover, :focus-visible, :active) i { transform: none; }
}