/* Discover — swipe-to-wishlist deck (Waldart).
   Editorial, restrained, full-bleed imagery. Tokens from tokens.css. */

.discover {
  max-width: 52rem;
  margin: 0 auto;
  padding: 3rem 1.6rem 5rem;
  text-align: center;
  font-family: var(--font);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

.discover__header {
  margin-bottom: 2.4rem;
}

.discover__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.8rem;
}

.discover__title {
  font-weight: 600;
  font-size: var(--h-xl);
  color: var(--text-primary);
  margin: 0 0 0.6rem;
}

.discover__lead {
  font-size: var(--t-lg);
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 38rem;
  line-height: 1.5;
}

/* ---- Card stage ---------------------------------------------------------- */

.discover__stage {
  position: relative;
  width: 100%;
  max-width: 38rem;
  aspect-ratio: 4 / 5;
  margin: 2.4rem auto 0;
  touch-action: pan-y;
}

.discover-card {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-tint);
  box-shadow: var(--shadow);
  transform: translateY(calc(var(--depth, 0) * 1.4rem)) scale(calc(1 - var(--depth, 0) * 0.04));
  transition: transform 0.35s ease, opacity 0.35s ease;
  will-change: transform;
  user-select: none;
  touch-action: pan-y;
}

.discover-card.is-dragging {
  transition: none;
  cursor: grabbing;
}

.discover-card.fly-right {
  transform: translate(140%, -4%) rotate(18deg) !important;
  opacity: 0;
}

.discover-card.fly-left {
  transform: translate(-140%, -4%) rotate(-18deg) !important;
  opacity: 0;
}

.discover-card__media {
  position: relative;
  width: 100%;
  height: 100%;
}

.discover-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.discover-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 13, 18, 0.62) 0%, rgba(10, 13, 18, 0) 44%);
}

/* Drag-intent stamps */
.discover-card__decision {
  position: absolute;
  top: 2rem;
  font-size: 2.2rem;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(10, 13, 18, 0.28);
  transition: opacity 0.12s linear, transform 0.18s var(--ease-premium);
}

.discover-card__decision--like {
  right: 2rem;
  background: var(--brand);
  transform: rotate(14deg) scale(calc(0.65 + 0.35 * var(--like-opacity, 0)));
  opacity: var(--like-opacity, 0);
}

.discover-card__decision--skip {
  left: 2rem;
  background: #c0563f;
  transform: rotate(-14deg) scale(calc(0.65 + 0.35 * var(--skip-opacity, 0)));
  opacity: var(--skip-opacity, 0);
}

/* Tinder-style colour wash — brand green on like (right), warm red on skip
   (left). Dedicated layers (not pseudo-elements, to avoid clobbering the text
   scrim); opacity tracks the drag-intent vars set on the card. */
.discover-card__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
.discover-card__wash--like {
  background: linear-gradient(to left, rgba(102, 159, 42, 0.7), rgba(102, 159, 42, 0.15));
  opacity: var(--like-opacity, 0);
}
.discover-card__wash--skip {
  background: linear-gradient(to right, rgba(192, 86, 63, 0.7), rgba(192, 86, 63, 0.15));
  opacity: var(--skip-opacity, 0);
}

.discover-card__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 1.6rem 1.8rem;
  text-align: left;
  color: #fff;
  z-index: 2;
}

.discover-card__title {
  font-weight: 600;
  font-size: var(--h-sm);
  margin: 0 0 0.4rem;
}

.discover-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.discover-card__price {
  font-size: var(--t-lg);
  font-weight: 600;
}

.discover-card__group {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---- Controls ------------------------------------------------------------ */

.discover__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 2.4rem;
}

.discover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  color: var(--text-primary);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(10, 13, 18, 0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.discover-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 13, 18, 0.16);
}

.discover-btn:active {
  transform: scale(0.94);
}

.discover-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.discover-btn svg {
  width: 1.7rem;
  height: 1.7rem;
}

.discover-btn--skip,
.discover-btn--like {
  width: 4rem;
  height: 4rem;
}

.discover-btn--undo {
  width: 3.2rem;
  height: 3.2rem;
  color: var(--text-muted);
}

.discover-btn--like {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.discover-btn--skip {
  background: var(--surface);
  color: var(--text-muted);
}

.discover__hint {
  margin-top: 1.4rem;
  font-size: var(--t-sm);
  color: var(--text-muted);
}

/* ---- End state ----------------------------------------------------------- */

.discover__end {
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
}

.discover__end-title {
  font-weight: 600;
  font-size: var(--h-md);
  color: var(--text-primary);
  margin: 0;
}

.discover__end-text {
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.discover__cta {
  display: inline-block;
  font-size: var(--t-md);
  letter-spacing: 0.02em;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease;
}

.discover__cta:hover {
  background: var(--green-600);
  color: #fff;
}

@media (max-width: 480px) {
  .discover {
    padding-top: 2rem;
  }
  .discover__stage {
    max-width: 100%;
  }
}

/* Desktop: size the card off the viewport height so header + deck + controls
   never exceed one screen. Width follows from the 4/5 aspect ratio. */
@media (min-width: 769px) {
  .discover {
    padding: 1.5rem 1.6rem 2.5rem;
  }
  .discover__header {
    margin-bottom: 1.2rem;
  }
  .discover__lead {
    font-size: var(--t-md);
  }
  .discover__stage {
    width: auto;
    max-width: 100%;
    height: min(58vh, 30rem);
    margin-top: 1.4rem;
  }
  .discover__controls {
    margin-top: 1.6rem;
  }
  .discover__hint {
    margin-top: 1rem;
  }
}