/* ===========================================================================
   KURRENT.MARKET — UX polish & gestures (progressive enhancement)
   Loaded after app.css. Everything here is additive and safe to remove.
   Palette: bg #111, ink #f6f1ea, accent gold #e4c98f.
   =========================================================================== */

/* ---- Dialog overlays: animated backdrop ---------------------------------- */
.ux-overlay {
  transition: background-color 240ms ease;
}

/* ---- Dialog panel entrance ---------------------------------------------- */
/* The five sheet panels carry .fade-enter; we restyle that entrance so it
   feels like a native app instead of a flat fade. */
@media (min-width: 640px) {
  .fade-enter {
    animation: ux-pop 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    transform-origin: center bottom;
    will-change: transform, opacity;
  }
}
@keyframes ux-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.965); }
  to   { opacity: 1; transform: none; }
}

/* ---- Mobile bottom sheets: slide up + drag handle + swipe to dismiss ----- */
@media (max-width: 639px) {
  .fade-enter {
    animation: ux-sheet-up 340ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    will-change: transform;
    touch-action: pan-y;
  }
  /* Grab handle at the top of every sheet */
  .fade-enter::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 0.3rem;
    margin: -0.35rem auto 0.55rem;
    border-radius: 999px;
    background: rgba(246, 241, 234, 0.22);
  }
  /* While the finger is down, follow it 1:1 with no transition */
  .ux-sheet.ux-dragging {
    animation: none !important;
    transition: none !important;
  }
  /* Spring settle when released */
  .ux-sheet.ux-snapback {
    animation: none !important;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}
@keyframes ux-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* ---- Tap ripple --------------------------------------------------------- */
.ux-ripple-host { position: relative; overflow: hidden; }
.ux-ripple {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  transform: scale(0);
  opacity: 0.5;
  background: currentColor;
  mix-blend-mode: overlay;
  animation: ux-ripple 520ms ease-out forwards;
}
@keyframes ux-ripple {
  to { transform: scale(2.4); opacity: 0; }
}

/* ---- Press feedback on pills & CTAs (touch app-feel) --------------------- */
.head-pill,
.head-sell,
.glass-chip,
.bg-accent,
.rail-all,
.app-tabs button {
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 160ms ease,
              background-color 160ms ease,
              color 160ms ease;
}
.head-pill:active,
.head-sell:active,
.bg-accent:active,
.rail-all:active { transform: scale(0.96); }

/* ---- Bottom nav: springy active state + accent dot ---------------------- */
@media (max-width: 767px) {
  .app-tabs button i {
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .app-tabs button[aria-current="page"] i { transform: translateY(-1px) scale(1.06); }
  .app-tabs button[aria-current="page"]:not(.app-tab-sell) span { position: relative; }
  .app-tabs button[aria-current="page"]:not(.app-tab-sell) span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.3rem;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 999px;
    background: #e4c98f;
    transform: translateX(-50%);
    animation: ux-dot-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
@keyframes ux-dot-in {
  from { transform: translateX(-50%) scale(0); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* ---- Header lifts off the page once you scroll -------------------------- */
.market-bar {
  transition: box-shadow 220ms ease, background-color 220ms ease;
}
body.ux-scrolled .market-bar {
  box-shadow: inset 0 -1px 0 rgba(246, 241, 234, 0.14), 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* ---- Scroll reveal for home rails -------------------------------------- */
.ux-reveal {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.ux-reveal.ux-in {
  opacity: 1;
  transform: none;
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===========================================================================
   ROUND 2 — tiles, product page, checkout, desktop density, swipe transitions
   =========================================================================== */

/* ---- Home floor: richer product tiles ---------------------------------- */
.tile-stage { overflow: hidden; }
.tile-photo { transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) and (min-width: 1024px) {
  .market-tile {
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 280ms ease, border-color 200ms ease;
  }
  .market-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 46px rgba(20, 18, 16, 0.5);
  }
  .market-tile:hover .tile-photo { transform: translateY(-4px) scale(1.07); }
  /* a soft light sweep across the image on hover */
  .tile-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(246, 241, 234, 0.09), transparent 42%);
    opacity: 0;
    transition: opacity 280ms ease;
    pointer-events: none;
  }
  .market-tile:hover .tile-stage::after { opacity: 1; }
}
/* Featured floor slides lift too */
@media (hover: hover) and (min-width: 1024px) {
  .lot-hero { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease; }
  .lot-hero:hover { transform: translateY(-3px); box-shadow: 0 26px 50px rgba(0, 0, 0, 0.4); }
}

/* ---- Product page polish ------------------------------------------------ */
.pdp-cta {
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 160ms ease, border-color 160ms ease, box-shadow 200ms ease;
}
.pdp-cta.is-primary:hover { box-shadow: 0 12px 28px rgba(228, 201, 143, 0.28); }
.pdp-cta:active { transform: scale(0.98); }
.pdp-thumbs button,
.pdp-tile { transition: transform 180ms ease, border-color 180ms ease, opacity 180ms ease; }
.pdp-thumbs button:active { transform: scale(0.95); }
@media (hover: hover) and (min-width: 1024px) {
  .pdp-tile:hover { transform: translateY(-3px); }
}
.pdp-zoom-hint { transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease; }
.pdp-stage:hover .pdp-zoom-hint { transform: scale(1.12); }
/* Full-screen viewer feels swipeable on touch */
.pdp-viewer-stage { touch-action: pan-y; }

/* ---- Checkout & offer flow --------------------------------------------- */
#checkoutHandoff button,
#otcSubmit,
#checkoutTerms,
.field-input {
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 160ms ease, border-color 160ms ease, box-shadow 180ms ease;
}
#checkoutHandoff button:active { transform: scale(0.97); }
/* Make the active handoff choice read clearly */
#checkoutHandoff button.bg-white { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
/* Inputs glow a touch when focused */
.field-input:focus,
.glass-chip:is(input, select, textarea):focus {
  box-shadow: 0 0 0 3px rgba(228, 201, 143, 0.22);
}

/* ---- Desktop density & hover affordances ------------------------------- */
@media (hover: hover) and (min-width: 1024px) {
  .rail-all,
  .menu-row,
  .foot-col button,
  .foot-col a { transition: color 160ms ease, transform 160ms ease; }
  .rail-all:hover { color: #e4c98f; }
  .foot-col button:hover,
  .foot-col a:hover { color: #f6f1ea; transform: translateX(2px); }
  /* search bar feels alive on focus */
  .market-bar .glass-chip:focus { box-shadow: 0 0 0 3px rgba(228, 201, 143, 0.18); }
}

/* ---- Swipe-between-tabs content transition ----------------------------- */
#spaViewOutlet.ux-swipe-in-left { animation: ux-slide-in-left 300ms cubic-bezier(0.16, 1, 0.3, 1); }
#spaViewOutlet.ux-swipe-in-right { animation: ux-slide-in-right 300ms cubic-bezier(0.16, 1, 0.3, 1); }

/* ---- Page moves: only the outlet, header stays put ---------------------- */
#spaViewOutlet { view-transition-name: market-page; }
::view-transition-old(market-page) {
  animation: 160ms ease both ux-fade-out;
}
html.ux-forward::view-transition-new(market-page) {
  animation: 340ms cubic-bezier(0.16, 1, 0.3, 1) both ux-rise;
}
html.ux-back::view-transition-new(market-page) {
  animation: 340ms cubic-bezier(0.16, 1, 0.3, 1) both ux-rise-back;
}
@keyframes ux-fade-out {
  to { opacity: 0; }
}
@keyframes ux-rise {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes ux-rise-back {
  from { opacity: 0; transform: translateY(-10px); }
}
/* The tapped product photo travels to the product page */
::view-transition-group(ux-shared) {
  animation-duration: 440ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(ux-shared),
::view-transition-new(ux-shared) {
  animation: none;
  mix-blend-mode: normal;
  height: 100%;
  overflow: hidden;
  object-fit: contain;
}

/* Momentum on sideways rows, gentle snap so a flick lands on a card */
.rail-track,
.carousel-track,
.cat-row,
.pdp-thumbs {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.rail-track { scroll-snap-type: x proximity; }
.rail-track > .market-tile { scroll-snap-align: start; }

/* A tap on a card presses in, then the page takes over */
.market-tile:active,
.lot-hero:active,
.pdp-tile:active { transform: scale(0.985); }

/* Sheet scrim fades in instead of popping */
.ux-overlay:not(.hidden) { animation: ux-dim 220ms ease; }
@keyframes ux-dim {
  from { background-color: transparent; }
}
@keyframes ux-slide-in-left {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ux-slide-in-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Respect reduced motion: drop every bit of movement ----------------- */
@media (prefers-reduced-motion: reduce) {
  .fade-enter { animation: none !important; }
  .ux-ripple { display: none !important; }
  .ux-reveal,
  .ux-reveal.ux-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .head-pill:active,
  .head-sell:active,
  .bg-accent:active,
  .rail-all:active,
  .app-tabs button[aria-current="page"] i { transform: none !important; }
  .app-tabs button[aria-current="page"] span::after { animation: none !important; }
  .market-tile:hover,
  .market-tile:hover .tile-photo,
  .lot-hero:hover,
  .pdp-cta:active,
  .pdp-tile:hover,
  .pdp-stage:hover .pdp-zoom-hint,
  #checkoutHandoff button:active { transform: none !important; }
  .tile-stage::after { display: none !important; }
  #spaViewOutlet.ux-swipe-in-left,
  #spaViewOutlet.ux-swipe-in-right { animation: none !important; }
  .market-tile:active,
  .lot-hero:active,
  .pdp-tile:active { transform: none !important; }
  .ux-overlay:not(.hidden) { animation: none !important; }
  ::view-transition-old(market-page),
  ::view-transition-new(market-page),
  ::view-transition-group(ux-shared) { animation: none !important; }
}