/* ==========================================================================
   DEXIE theme - motion and hierarchy layer
   Loaded after dexie.css.

   House rules this obeys:
     near-square geometry (2-4px), no pills, no circular badges
     short tight shadows, never soft 40-70px blooms
     small tight utility type (~12px/500) rather than soft grey 15px
     white is the page; ink and copper are accents
     layout + hierarchy + motion carry the design, colour is the last 10%
     everything respects prefers-reduced-motion
   ========================================================================== */

/* ---------- 1. scroll reveal -------------------------------------------- */
.dx-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .38s cubic-bezier(.16,.84,.44,1),
              transform .38s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.dx-reveal.is-in { opacity: 1; transform: none; }

/* grid children stagger in sequence, 40ms apart, capped so a long
   grid never feels like it is loading in slow motion */
.dx-stagger > * { transition-delay: calc(var(--i, 0) * 40ms); }

/* ---------- 2. sticky masthead that condenses --------------------------- */
.dx-masthead {
  transition: box-shadow .2s ease, border-color .2s ease;
}
.dx-masthead.is-stuck {
  box-shadow: 0 1px 2px rgba(21,32,46,.06), 0 6px 16px -12px rgba(21,32,46,.28);
  border-bottom-color: var(--rule-2);
}
.dx-masthead.is-stuck .dx-masthead__inner { min-height: 62px; }
.dx-masthead__inner { transition: min-height .22s ease; }

/* ---------- 3. section rhythm ------------------------------------------- */
/* Vertical rhythm tiers rather than one flat gap between everything. */
.dx-section        { padding-block: 0 0; margin-bottom: 72px; }
.dx-section--tight { margin-bottom: 44px; }
.dx-section--wide  { margin-bottom: 104px; }

/* A section head that reads as a head: rule, eyebrow, title, action. */
.dx-sechead {
  border-top: 1px solid var(--ink);
  padding-top: 14px;
  align-items: flex-start;
}
.dx-sechead__eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 8px;
}

/* ---------- 4. product card: quiet until touched ------------------------ */
.product-thumb { position: relative; }

.product-thumb .image { position: relative; overflow: hidden; }
.product-thumb .image img {
  transition: transform .5s cubic-bezier(.16,.84,.44,1);
}
.product-thumb:hover .image img { transform: scale(1.05); }

/* Actions sit flush to the image edge and rise on intent. On touch, where
   there is no hover, they are simply always visible - see the media query. */
.dx-card-actions {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 10px;
  background: linear-gradient(to top, rgba(255,255,255,.97), rgba(255,255,255,0));
  transform: translateY(101%);
  opacity: 0;
  transition: transform .24s cubic-bezier(.16,.84,.44,1), opacity .18s ease;
}
.product-thumb:hover .dx-card-actions,
.product-thumb:focus-within .dx-card-actions {
  transform: none;
  opacity: 1;
}
.product-thumb .caption { position: relative; z-index: 1; }

/* Touch devices get no hover, so never hide the buy button behind one. */
@media (hover: none) {
  .dx-card-actions {
    position: static;
    transform: none;
    opacity: 1;
    background: none;
    padding: 0;
    margin-top: 14px;
  }
}

/* Press feedback without moving the layout. */
.dx-btn-cart:active, .btn:active { transform: scale(.985); }
.dx-btn-cart, .btn { transition: background .16s, color .16s, transform .08s ease; }

/* ---------- 5. sale flag: sharp, not a badge ---------------------------- */
.dx-flag {
  border-radius: 0;
  padding: 6px 10px;
  letter-spacing: .1em;
  box-shadow: 0 1px 2px rgba(21,32,46,.14);
}

/* ---------- 6. tile hover: reveal, do not bounce ------------------------ */
.dx-tile {
  overflow: hidden;
  transition: background .22s ease, color .22s ease;
}
.dx-tile::after {
  content: "";
  position: absolute;
  left: 18px; bottom: 14px;
  width: 22px; height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s cubic-bezier(.16,.84,.44,1);
}
.dx-tile:hover::after { transform: scaleX(1); }

/* ---------- 7. hero: weight and edge ------------------------------------ */
.dx-slot--tall { position: relative; }
.dx-slot--tall::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,.28), transparent 62%);
  pointer-events: none;
}
.dx-slot--tall > * { position: relative; z-index: 1; }
.dx-slot__title { text-wrap: balance; }

/* ---------- 8. links that mean it --------------------------------------- */
.dx-sechead__link {
  position: relative;
  border-bottom: 0;
  padding-bottom: 3px;
}
.dx-sechead__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .24s cubic-bezier(.16,.84,.44,1);
}
.dx-sechead__link:hover::after { transform: scaleX(0); }

/* ---------- 9. studio credit -------------------------------------------- */
.dx-credit {
  border-top: 1px solid var(--rule);
  margin-top: 18px;
  padding-top: 16px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.dx-credit a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.dx-credit a:hover { color: var(--copper); }

/* ---------- 10. accessibility floor ------------------------------------- */
a, button, [role="button"], .dx-tile, .product-thumb a { cursor: pointer; }

/* Touch targets: 44px minimum on the controls people actually press. */
@media (max-width: 767px) {
  .dx-iconlink, .dx-btn-cart, .dx-btn-icon, .btn { min-height: 44px; }
  .dx-social__link { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .dx-reveal { opacity: 1; transform: none; transition: none; }
  .dx-stagger > * { transition-delay: 0ms; }
  .product-thumb .image img,
  .dx-card-actions,
  .dx-tile::after,
  .dx-sechead__link::after { transition: none; }
  .product-thumb:hover .image img { transform: none; }
}