/**
 * static/css/swipe.css
 * CineSwipe Tinder-Style Card Deck, 3D Cascading Geometry, & Modern Typography.
 * Aesthetic: Vseti.app & Hirehi.ru dark matte style + zero neon glow.
 */

/* Viewport Layout Container */
.swipe-container, .deck-stage, main.swipe-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 12px 20px 20px;
  min-height: calc(100vh - 64px);
  position: relative;
  overflow: visible;
}

/* Card Deck Relative Stage */
.card-deck, .deck-container, .card-stack {
  position: relative;
  width: 100%;
  max-width: 390px;
  height: 590px;
  max-height: calc(100vh - 145px);
  perspective: 1000px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  margin: 0 auto;
  flex-shrink: 0;
}


/* Ambient Cinema Aura: Smooth organic oval halo directly behind the card stack */
.ambient-backdrop-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 720px;
  margin-top: -360px;
  margin-left: -260px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.42;
  filter: blur(75px);
  will-change: transform, opacity;
  display: block !important;
  visibility: visible !important;
}

.ambient-aura-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  display: block !important;
  visibility: visible !important;
}

.ambient-aura-img.is-loaded {
  opacity: 1 !important;
}

.movie-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-2xl, 24px);
  overflow: hidden;
  background-color: var(--bg-card, #181c26);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: 50% 100%;
  cursor: grab;
  transition: border-color var(--transition-fast);
}

.movie-card:active {
  cursor: grabbing;
}

/* Active Top Card */
.movie-card:nth-last-child(1), .movie-card.card-top {
  z-index: 10;
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
}

/* 2nd Card */
.movie-card:nth-last-child(2), .movie-card.card-next {
  z-index: 9;
  transform: translate3d(0, 14px, 0) scale(0.96);
  opacity: 0.90;
  pointer-events: none;
  filter: brightness(0.85);
}

/* 3rd Card */
.movie-card:nth-last-child(3) {
  z-index: 8;
  transform: translate3d(0, 26px, 0) scale(0.92);
  opacity: 0.70;
  pointer-events: none;
  filter: brightness(0.70);
}

/* Older queue cards */
.movie-card:nth-last-child(n+4) {
  display: none;
  opacity: 0;
  pointer-events: none;
}

/* =============================================================================
   2. Physics Animation States (GPU-Accelerated)
   ============================================================================= */
.movie-card.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
  will-change: transform;
}

.movie-card.is-reverting {
  transition: transform var(--transition-spring) !important;
  cursor: grab;
}

.movie-card.is-flying {
  transition: transform var(--transition-exit), opacity 350ms ease !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.movie-card.is-arriving {
  animation: cardFlyIn 350ms var(--transition-spring) forwards;
}

@keyframes cardFlyIn {
  0% {
    transform: translate3d(-100vw, -40px, 0) rotate(-20deg);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

/* =============================================================================
   3. Typographic Stamps (Clean & Restrained)
   ============================================================================= */
.stamp {
  position: absolute;
  top: 28px;
  z-index: 30;
  padding: 6px 18px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 100ms ease;
  will-change: opacity;
  white-space: nowrap;
}

/* Typographic LIKE Stamp */
.stamp.stamp-like {
  left: 24px;
  color: var(--accent-emerald);
  border: 2px solid var(--accent-emerald);
  background-color: rgba(16, 185, 129, 0.16);
  transform: rotate(-12deg);
}

/* Typographic NOPE Stamp */
.stamp.stamp-nope, .stamp.stamp-dislike {
  right: 24px;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  color: var(--accent-rose);
  border: 2px solid var(--accent-rose);
  background-color: rgba(239, 68, 68, 0.16);
  transform: rotate(12deg);
}

/* Typographic SUPERLIKE Stamp */
.stamp.stamp-super, .stamp.stamp-superlike {
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-brand);
  border: 2px solid var(--accent-brand);
  background-color: rgba(59, 130, 246, 0.16);
}

/* =============================================================================
   4. Card Media & Gradient Scrim
   ============================================================================= */
.card-media, .card-poster-wrap, .poster-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-base);
}

.card-poster, .poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Smooth Gradient Scrim for Outstanding Contrast */
.card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 15, 20, 0.0) 0%,
    rgba(13, 15, 20, 0.15) 35%,
    rgba(13, 15, 20, 0.70) 70%,
    rgba(13, 15, 20, 0.98) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* IMDb Rating Badge Top Right (Restrained Matte Gold) */
.imdb-badge, .card-rating-badge.imdb-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.30);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 15;
  white-space: nowrap;
}

.card-rating-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-amber);
  z-index: 5;
}

/* Bottom Metadata Overlay */
.card-content, .card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  background: transparent;
  z-index: 10;
}

.card-content button, .card-content a,
.card-info button, .card-info a,
.btn-trailer-preview {
  pointer-events: auto;
}

.card-title-row, .movie-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.card-movie-title, .card-title, .movie-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-movie-year, .card-year, .movie-year {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.card-genres, .movie-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.genre-tag, .genre-chip {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  line-height: 1.3;
}

.card-rating-row, .movie-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.825rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.rating-score, .rating-pill {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-amber);
}

/* =============================================================================
   5. Action Controls Bar (Matte Clean Hairline Buttons)
   ============================================================================= */
.action-controls, .controls-deck, .controls-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}

.action-btn, .btn-action {
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  color: var(--text-secondary);
}

.action-btn svg, .btn-action svg {
  width: 24px;
  height: 24px;
}

.action-btn:active, .btn-action:active {
  transform: scale(0.92);
}

/* Undo Button */
.action-btn-undo, .btn-action.undo, #btn-undo {
  width: 50px;
  height: 50px;
}
.action-btn-undo:hover, .btn-action.undo:hover, #btn-undo:hover {
  border-color: rgba(245, 158, 11, 0.4);
  background-color: rgba(245, 158, 11, 0.10);
  color: var(--accent-amber);
  transform: scale(1.05);
}

/* Nope / Dislike Button */
.action-btn-nope, .btn-action.dislike, .btn-action.btn-dislike, #btn-dislike {
  width: 64px;
  height: 64px;
}
.action-btn-nope:hover, .btn-action.dislike:hover, .btn-action.btn-dislike:hover, #btn-dislike:hover {
  border-color: rgba(239, 68, 68, 0.45);
  background-color: rgba(239, 68, 68, 0.12);
  color: var(--accent-rose);
  transform: scale(1.05);
}

/* Superlike Button */
.action-btn-super, .btn-action.superlike, .btn-action.btn-superlike, #btn-superlike {
  width: 50px;
  height: 50px;
}
.action-btn-super:hover, .btn-action.superlike:hover, .btn-action.btn-superlike:hover, #btn-superlike:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background-color: rgba(59, 130, 246, 0.10);
  color: var(--accent-brand);
  transform: scale(1.05);
}

/* Like Button */
.action-btn-like, .btn-action.like, .btn-action.btn-like, #btn-like {
  width: 64px;
  height: 64px;
}
.action-btn-like:hover, .btn-action.like:hover, .btn-action.btn-like:hover, #btn-like:hover {
  border-color: rgba(16, 185, 129, 0.45);
  background-color: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald);
  transform: scale(1.05);
}

/* Recs Drawer Button */
.action-btn-recs, .btn-action.recs, #btn-recs {
  width: 50px;
  height: 50px;
}
.action-btn-recs:hover, .btn-action.recs:hover, #btn-recs:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background-color: rgba(59, 130, 246, 0.10);
  color: var(--accent-brand);
  transform: scale(1.05);
}

/* Keyboard Hints */
.keyboard-hints, .shortcuts-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 0.775rem;
  color: var(--text-muted);
}

.kbd, kbd {
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* Empty Deck State */
.deck-empty-state, .empty-state {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  background-color: var(--bg-surface);
  border: 1px dashed var(--border-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  gap: 16px;
  display: none;
}
.deck-empty-state.active, .empty-state.active {
  display: flex;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
}

.empty-state-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 300px;
  line-height: 1.5;
}

/* =============================================================================
   MOBILE (390W & SMALL SCREENS) VIEWPORT ADAPTATIONS
   ============================================================================= */
@media (max-width: 640px) {
  /* HIDE INSTRUCTIONS AND KEYBOARD HINTS ON MOBILE */
  .keyboard-hints,
  .shortcuts-legend,
  .gesture-hint,
  .deck-hint {
    display: none !important;
  }

  /* Compact deck stage without scrolling */
  .swipe-container, .deck-stage, main.swipe-view {
    padding: 6px 10px 10px !important;
    min-height: calc(100vh - 56px) !important;
    justify-content: flex-start !important;
  }

  .card-deck, .deck-container, .card-stack {
    max-width: 360px !important;
    height: 520px !important;
    max-height: calc(100vh - 135px) !important;
  }

  .action-controls, .controls-deck {
    margin-top: 10px !important;
    gap: 12px !important;
  }

  .action-btn-nope, .btn-action.dislike, .btn-action.btn-dislike, #btn-dislike,
  .action-btn-like, .btn-action.like, .btn-action.btn-like, #btn-like {
    width: 58px !important;
    height: 58px !important;
  }

  .action-btn-undo, .btn-action.undo, #btn-undo,
  .action-btn-super, .btn-action.superlike, #btn-superlike {
    width: 48px !important;
    height: 48px !important;
  }
}