/**
 * Unified Mobile Feedback System
 * Task #30 - Provides consistent visual and haptic feedback for mobile interactions
 *
 * CSS Variables for easy global customization:
 * --mobile-feedback-scale: Scale transform on tap (default: 0.95)
 * --mobile-feedback-duration: Animation duration (default: 0.15s)
 * --mobile-feedback-timing: Timing function (default: ease-out)
 */

:root {
  /* Global mobile feedback settings */
  --mobile-feedback-scale: 0.95;
  --mobile-feedback-duration: 0.15s;
  --mobile-feedback-timing: ease-out;

  /* Haptic feedback duration (in ms, used by JavaScript) */
  --mobile-haptic-light: 10;
  --mobile-haptic-medium: 20;
  --mobile-haptic-heavy: 30;
}

/* Base mobile feedback class - apply to any interactive element */
.mobile-feedback {
  transition: transform var(--mobile-feedback-duration) var(--mobile-feedback-timing);
  -webkit-tap-highlight-color: transparent; /* Remove default mobile highlight */
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 1024px) {
  .mobile-feedback:active {
    transform: scale(var(--mobile-feedback-scale));
  }
}

/* Stronger feedback for primary actions */
.mobile-feedback-strong {
  --mobile-feedback-scale: 0.92;
}

/* Lighter feedback for subtle interactions */
.mobile-feedback-light {
  --mobile-feedback-scale: 0.97;
}

/* No scale feedback (for elements that only need haptic) */
.mobile-feedback-haptic-only {
  --mobile-feedback-scale: 1;
}

/* ===== SPECIFIC ELEMENT CLASSES ===== */

/* Products Header Buttons */
.products-header-button.mobile-feedback,
.favorite-button.mobile-feedback {
  --mobile-feedback-scale: 0.94;
}

/* Header Buttons */
.header-back-button.mobile-feedback,
.header-faq-button.mobile-feedback,
.header-profile-button.mobile-feedback,
.header-logo-button.mobile-feedback {
  --mobile-feedback-scale: 0.96;
}

/* Bottom Nav Buttons (already have feedback, just ensuring consistency) */
.bottom-nav-button.mobile-feedback {
  --mobile-feedback-scale: 0.95;
}

/* Footer Buttons */
.footer-button.mobile-feedback {
  --mobile-feedback-scale: 0.96;
}

/* Catalog Cards */
.catalog.mobile-feedback {
  --mobile-feedback-scale: 0.97;
  --mobile-feedback-duration: 0.2s;
}

/* FAQ Button */
.page-faq-button.mobile-feedback {
  --mobile-feedback-scale: 0.95;
}

/* Star Ratings */
.star.mobile-feedback,
.rating-star.mobile-feedback {
  --mobile-feedback-scale: 0.9;
  --mobile-feedback-duration: 0.1s;
}

/* Picker Controls */
.picker-control.mobile-feedback,
.picker-title.mobile-feedback {
  --mobile-feedback-scale: 0.94;
}

/* Favorites Filter Buttons */
.favorites-filter-btn.mobile-feedback {
  --mobile-feedback-scale: 0.96;
}

/* Product Card Tags */
.product-tag.mobile-feedback,
.tag-option.mobile-feedback {
  --mobile-feedback-scale: 0.94;
}

/* Cart Elements */
.cart-checkbox.mobile-feedback,
.cart-delete-btn.mobile-feedback,
.cart-item-btn.mobile-feedback {
  --mobile-feedback-scale: 0.93;
}

/* Cart Controls */
.cart-control.mobile-feedback {
  --mobile-feedback-scale: 0.96;
}

/* Tab Buttons */
.tab-button.mobile-feedback {
  --mobile-feedback-scale: 0.97;
}

/* ===== GRAIN TEXTURE OVERLAY (OPTIONAL EFFECT) ===== */

/* Container for grain effect */
.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.3'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  transition: opacity 0.2s ease-out;
}

.grain-overlay.active {
  opacity: 0.15;
}

/* Radial reveal effect for grain (activated on touch) */
.grain-reveal {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.grain-reveal.active {
  opacity: 1;
}

/* Desktop: Disable mobile feedback effects */
@media (min-width: 1025px) {
  .mobile-feedback:active {
    transform: none;
  }

  .grain-overlay,
  .grain-reveal {
    display: none;
  }
}