/* ══════════════════════════════════════════════════════════════════════
   V82 SWIPE SYSTEM — Wave 4 Interactions
   tension → confirmation → release. Operating a precision instrument.

   USAGE
     <div class="v82-swipe-card" data-v82-swipe data-signal-id="...">
       …card content…
     </div>
   ══════════════════════════════════════════════════════════════════════ */

.v82-swipe-card {
  position: relative;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  /* During an active drag, motion follows the finger 1:1. Snap-back
     and dismiss transitions are applied via JS-toggled classes. */
}
.v82-swipe-card:active { cursor: grabbing; }

/* The motion target — JS writes transform on this element so the card
   itself stays untouched. Lets nested children animate independently. */
.v82-swipe-card-motion {
  will-change: transform, opacity;
  /* Default state — no transition during drag; transitions land via
     classes below for snap-back / dismiss / commit. */
}
.v82-swipe-card.is-snapping .v82-swipe-card-motion {
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
.v82-swipe-card.is-discarding .v82-swipe-card-motion {
  transition: transform 0.45s cubic-bezier(0.55,0,0.78,0.1),
              opacity   0.45s ease-out,
              filter    0.45s ease-out;
  transform: translateX(-120%) rotate(-8deg);
  opacity: 0;
  filter: blur(6px) saturate(0);
}
.v82-swipe-card.is-tracking .v82-swipe-card-motion {
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              opacity   0.45s ease-out,
              box-shadow 0.45s ease;
  transform: translateX(120%);
  opacity: 0;
  box-shadow: 0 0 36px rgba(0,209,255,0.65);
}

/* Hint chips revealed during drag — fade in as user pulls past threshold */
.v82-swipe-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  letter-spacing: 5px;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.18s ease;
  text-transform: uppercase;
  z-index: 2;
}
.v82-swipe-hint.left  { left: 20px; color: var(--v82-penalty-red); }
.v82-swipe-hint.right { right: 20px; color: var(--sovereign-blue); }
.v82-swipe-card.is-passed-discard .v82-swipe-hint.left  { opacity: 1; }
.v82-swipe-card.is-passed-track   .v82-swipe-hint.right { opacity: 1; }

/* Pulse trail — overlay that flashes when "track" commits */
.v82-swipe-pulse-trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,209,255,0.4), transparent);
  transform: translateX(-100%);
  opacity: 0;
  z-index: 1;
}
.v82-swipe-card.is-tracking .v82-swipe-pulse-trail {
  animation: v82-swipe-pulse-sweep 0.45s ease-out forwards;
}
@keyframes v82-swipe-pulse-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

/* Fracture lines for discard — appear briefly as the card dissolves */
.v82-swipe-fracture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(120deg, transparent 48%, rgba(255,59,48,0.35) 49%, rgba(255,59,48,0) 51%),
    linear-gradient(-30deg, transparent 53%, rgba(255,59,48,0.25) 54%, rgba(255,59,48,0) 56%);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.v82-swipe-card.is-passed-discard .v82-swipe-fracture { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .v82-swipe-card-motion { transition: none !important; }
  .v82-swipe-card.is-discarding .v82-swipe-card-motion,
  .v82-swipe-card.is-tracking   .v82-swipe-card-motion {
    transform: none !important; opacity: 0;
  }
  .v82-swipe-pulse-trail, .v82-swipe-fracture { display: none; }
}