/* ============================================================
   INTERACTIONS.CSS — Vonulo Micro-interactions
   Premium-feel hover, focus, and active states for buttons,
   cards, inputs, nav links, tabs, and pills.
   ============================================================ */


/* ================================================================
   BUTTON INTERACTIONS
   Spring easing on hover, press feedback on active,
   focus-visible ring for keyboard navigation.
   ================================================================ */
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.97) translateY(0);
  transition-duration: var(--duration-fast);
}

.btn:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(196, 98, 45, 0.15);
}

/* Primary button — gradient shift on hover */
.btn-primary {
  background: linear-gradient(135deg, var(--clay), var(--clay-light));
  background-size: 200% 100%;
  background-position: left center;
  transition: all 0.3s var(--ease-out), background-position 0.4s ease;
}
.btn-primary:hover:not(:disabled) {
  background-position: right center;
  box-shadow: 0 8px 28px rgba(196, 98, 45, 0.4);
}

.btn-primary:active:not(:disabled) {
  box-shadow: 0 2px 8px rgba(196, 98, 45, 0.2);
}

/* Submit buttons (legacy class compatibility) */
.submit-btn:hover:not(:disabled),
.form-submit:hover:not(:disabled),
.cta-submit:hover:not(:disabled),
.sign-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(196, 98, 45, 0.3);
}

.submit-btn:active:not(:disabled),
.form-submit:active:not(:disabled),
.cta-submit:active:not(:disabled),
.sign-btn:active:not(:disabled) {
  transform: scale(0.98);
}


/* ================================================================
   CARD INTERACTIONS
   Lift on hover with shadow escalation.
   Image inside scales slightly for parallax feel.
   ================================================================ */
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:active {
  transform: translateY(-2px);
  transition-duration: var(--duration-fast);
}

/* Listing tile hover — image zoom */
.listing-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(26, 22, 18, 0.12);
  border-color: transparent;
}

.listing-tile:hover .listing-tile-img img {
  transform: scale(1.05);
}

/* Post card hover */
.post-card:hover {
  box-shadow: 0 8px 32px rgba(26, 22, 18, 0.07);
  transform: translateY(-2px);
}

/* Match card hover */
.match-card:hover {
  box-shadow: 0 10px 36px rgba(26, 22, 18, 0.08);
  transform: translateY(-2px);
}

/* Application card hover */
.app-card:hover {
  box-shadow: 0 6px 24px rgba(26, 22, 18, 0.06);
}

/* Listing card hover */
.listing-card:hover {
  box-shadow: 0 6px 24px rgba(26, 22, 18, 0.06);
}

/* Similar listing card */
.similar-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Feature card hover */
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 22, 18, 0.06);
}

/* Trust card hover */
.trust-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(196, 98, 45, 0.3);
}

/* Score card hover */
.score-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26, 22, 18, 0.08);
}

/* Step card hover */
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26, 22, 18, 0.08);
}


/* ================================================================
   INPUT FOCUS INTERACTIONS
   Border color change + glow ring on focus.
   Hover state before focus for subtle feedback.
   ================================================================ */
.form-input:hover:not(:focus),
.form-select:hover:not(:focus),
.form-textarea:hover:not(:focus),
.email-input:hover:not(:focus),
.cta-input:hover:not(:focus),
.waitlist-input:hover:not(:focus) {
  border-color: var(--clay-light);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.email-input:focus,
.cta-input:focus,
.sig-input:focus,
.modal-textarea:focus,
.waitlist-input:focus {
  border-color: var(--clay);
  background: var(--white);
  box-shadow: var(--shadow-glow-clay);
  transition: border-color 0.2s ease, box-shadow 0.3s ease;
}

/* Search input focus */
.ai-search-bar:focus-within {
  border-color: var(--clay);
  box-shadow: 0 8px 40px rgba(196, 98, 45, 0.15);
}


/* ================================================================
   NAV LINK INTERACTIONS
   Underline slides in from left on hover via ::after.
   ================================================================ */
.nav-link {
  position: relative;
  overflow: hidden;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 14px;
  right: 14px;
  height: 1.5px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* CTA link should not have the underline */
.nav-link.cta::after {
  display: none;
}


/* ================================================================
   TAB INTERACTIONS
   Smooth background/color transition for active state.
   ================================================================ */
.tab-btn,
.platform-tab,
.cta-tab,
.sort-btn,
.filter-chip {
  transition: all var(--duration-fast) ease;
}

.tab-btn:hover:not(.active) {
  color: var(--ink);
  background: var(--cream);
}

.platform-tab:not(.active):hover {
  color: var(--ink);
}

.sort-btn:hover:not(.active) {
  border-color: var(--warm-grey-light);
  color: var(--ink);
}

.filter-chip:hover:not(.active) {
  border-color: var(--clay);
  color: var(--clay);
}


/* ================================================================
   LINK INTERACTIONS
   Smooth color transition on hover.
   ================================================================ */
a {
  transition: color var(--duration-fast) ease;
}

.section-action,
.view-listing-link {
  background-image: linear-gradient(var(--clay), var(--clay));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: color var(--duration-fast) ease, background-size 0.3s var(--ease-out);
  text-decoration: none;
}
.section-action:hover,
.view-listing-link:hover {
  background-size: 100% 1px;
}

.footer-col a {
  background-image: linear-gradient(var(--clay-light), var(--clay-light));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: color var(--duration-fast) ease, background-size 0.3s ease;
}
.footer-col a:hover {
  color: var(--white);
  background-size: 100% 1px;
}


/* ================================================================
   PILL / TAG HOVER
   Background and border transition.
   ================================================================ */
.pill:hover {
  border-color: var(--clay-light);
  color: var(--clay);
}

.tag:hover {
  border-color: var(--warm-grey-light);
}

.filter-item {
  transition: all 0.18s ease;
}

.filter-item:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--sand);
}


/* ================================================================
   SAVE / LIKE BUTTON
   Scale pop on hover and heartPop on toggle.
   ================================================================ */
.save-btn {
  transition: transform var(--duration-fast) ease;
}

.save-btn:hover {
  transform: scale(1.2);
}

.save-btn.saved {
  animation: heartPop 0.4s var(--ease-spring);
}


/* ================================================================
   CONVERSATION CARD HOVER
   ================================================================ */
.conv-card {
  transition: all 0.18s ease;
}

.conv-card:hover {
  border-color: var(--clay-light);
  box-shadow: 0 4px 16px rgba(196, 98, 45, 0.08);
}


/* ================================================================
   IMAGE TRANSITIONS
   Smooth scale on hover for gallery, listing images.
   ================================================================ */
.gallery-main img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-main:hover img {
  transform: scale(1.02);
}

.gallery-thumb img {
  transition: transform 0.3s ease;
}

.gallery-thumb:hover img {
  transform: scale(1.06);
}

.listing-tile-img img {
  transition: transform var(--duration-slow) ease;
}


/* ================================================================
   OPTION CARD INTERACTIONS (quiz, category selectors)
   ================================================================ */
.option-card,
.cat-option,
.id-opt {
  transition: all var(--duration-fast) ease;
}

.option-card:hover {
  border-color: rgba(196, 98, 45, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196, 98, 45, 0.1);
}

.cat-option:hover {
  border-color: var(--clay);
}

.id-opt:hover {
  border-color: var(--clay);
}


/* ================================================================
   MODAL CLOSE BUTTON
   ================================================================ */
.modal-close {
  transition: all var(--duration-fast) ease;
}

.modal-close:hover {
  background: var(--sand);
  color: var(--ink);
  transform: rotate(90deg);
}


/* ================================================================
   PAYMENT METHOD CARD
   ================================================================ */
.payment-method {
  transition: all var(--duration-fast) ease;
}

.payment-method:hover {
  border-color: var(--clay);
}


/* ================================================================
   PROFILE EDIT BUTTON
   ================================================================ */
.profile-edit-btn,
.edit-profile-btn,
.card-action-btn {
  transition: all var(--duration-fast) ease;
}

.profile-edit-btn:hover,
.edit-profile-btn:hover {
  border-color: var(--clay);
}

.card-action-btn:hover {
  border-color: var(--clay);
  color: var(--clay);
}


/* ================================================================
   TOAST TRANSITION
   ================================================================ */
.toast {
  transition: all 0.3s var(--ease-spring);
}