/**
 * RESELLA MOTION DESIGN SYSTEM
 * Centralized motion tokens, easing curves, and microinteractions.
 * Preserves original layouts, typography, and brand identity.
 */

:root {
  /* ── Durations ── */
  --motion-dur-instant: 100ms;
  --motion-dur-fast: 160ms;
  --motion-dur-normal: 240ms;
  --motion-dur-moderate: 300ms;
  --motion-dur-slow: 400ms;

  /* ── Easing Curves ── */
  /* Snappy UI default (Material / iOS hybrid) */
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  /* Entrance / deceleration (fast start, smooth landing) */
  --motion-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  /* Exit / acceleration (clean departure) */
  --motion-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  /* Tactile spring (gentle overshoot for micro-feedback) */
  --motion-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
  /* Instant touch release */
  --motion-ease-touch: cubic-bezier(0.25, 1, 0.5, 1);
  /* Smooth continuous transition */
  --motion-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   1. BUTTONS & CONTROLS MICROINTERACTIONS
   ========================================================================== */

/* Universal tactile feedback for interactive buttons */
button,
.btn,
.browser-main-button,
.qpb-cta,
.queue-empty-add,
.details-save-top-btn,
.filter-btn,
.tab-pill,
.sel-all-btn,
.select-toggle-new,
.select-toggle-btn,
.sheet-close-btn,
.photo-regeneration-actions button,
.account-dialog-actions button,
.img-action-btn,
.generated-download-button,
.channel-action-btn,
.app-top-brand,
.app-top-icon,
.app-top-avatar,
#credits-floating-pill,
.nav-account-subtab,
.mobile-install-action,
.generation-choice-close,
.scene-example-dialog-close {
  transition: transform var(--motion-dur-fast) var(--motion-ease-touch),
              background-color var(--motion-dur-fast) var(--motion-ease-standard),
              border-color var(--motion-dur-fast) var(--motion-ease-standard),
              box-shadow var(--motion-dur-fast) var(--motion-ease-standard),
              opacity var(--motion-dur-fast) var(--motion-ease-standard);
}

/* Subtle active compression on press */
button:active:not(:disabled):not(.is-loading):not([aria-disabled="true"]),
.btn:active:not(:disabled):not([aria-disabled="true"]),
.browser-main-button:active:not(:disabled),
.qpb-cta:active,
.queue-empty-add:active,
.details-save-top-btn:active,
.sheet-close-btn:active,
.img-action-btn:active,
.generated-download-button:active,
.mobile-install-action:active {
  transform: scale(0.97);
}

/* Floating credits pill press */
#credits-floating-pill:active {
  transform: scale(0.96);
}

/* Top header icon buttons press */
.app-top-icon:active,
.app-top-avatar:active,
.app-top-brand:active {
  transform: scale(0.93);
}

/* Pill buttons (tabs, filter chips) press */
.tab-pill:active,
.filter-btn:active,
.select-toggle-new:active,
.sel-all-btn:active,
.mini-chip:active,
.ai-chip:active {
  transform: scale(0.96);
}

/* Desktop hover refinements (mouse only) */
@media (hover: hover) and (pointer: fine) {
  .browser-main-button:hover:not(:disabled) {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 6px 18px rgba(102, 84, 241, 0.35);
  }
  .browser-main-button:active:not(:disabled) {
    transform: translateX(-50%) scale(0.98);
  }

  .qpb-cta:hover {
    box-shadow: 0 4px 14px rgba(102, 84, 241, 0.28);
    transform: translateY(-1px);
  }

  .queue-empty-add:hover {
    border-color: var(--primary-light, #8B7CF6);
    box-shadow: 0 4px 12px rgba(102, 84, 241, 0.15);
    transform: translateY(-1px);
  }

  .tab-pill:hover:not(.active) {
    background: var(--surface3, #E7E8EF);
    color: var(--text, #17171C);
  }

  .app-top-icon:hover {
    background: rgba(102, 84, 241, 0.08);
    color: var(--primary, #6654F1);
  }

  #credits-floating-pill:hover {
    background: #e8e4ff;
    border-color: rgba(102, 84, 241, 0.18);
  }
}

/* Disabled buttons */
button:disabled,
.btn:disabled,
button[aria-disabled="true"],
.btn[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.55;
  transform: none !important;
}

/* Focus visible for accessibility */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary, #6654F1) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   2. BOTTOM NAVIGATION & TABS
   ========================================================================== */

/* Refined bottom tab press and transitions */
.nav-tab {
  transition: background-color var(--motion-dur-normal) var(--motion-ease-smooth),
              color var(--motion-dur-fast) var(--motion-ease-standard),
              padding var(--motion-dur-normal) var(--motion-ease-spring),
              transform var(--motion-dur-instant) var(--motion-ease-touch) !important;
}

.nav-tab:active {
  transform: scale(0.96) !important;
}

/* Active tab pill entrance */
.nav-tab.active {
  animation: resellaTabPillPop var(--motion-dur-normal) var(--motion-ease-spring) !important;
}

@keyframes resellaTabPillPop {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Tab icon transitions (outline to filled smooth crossfade) */
.nav-tab-icon .icon-filled,
.nav-tab-icon .icon-outline {
  transition: opacity var(--motion-dur-fast) var(--motion-ease-standard),
              transform var(--motion-dur-normal) var(--motion-ease-spring) !important;
}

.nav-tab .icon-filled {
  opacity: 0;
  transform: scale(0.85);
}

.nav-tab.active .icon-filled {
  opacity: 1;
  transform: scale(1);
}

.nav-tab .icon-outline {
  opacity: 1;
  transform: scale(1);
}

.nav-tab.active .icon-outline {
  opacity: 0;
  transform: scale(1.1);
}

/* Tab label text expansion */
.nav-tab-label {
  transition: max-width var(--motion-dur-normal) var(--motion-ease-spring),
              opacity var(--motion-dur-fast) var(--motion-ease-enter),
              margin-left var(--motion-dur-normal) var(--motion-ease-spring),
              transform var(--motion-dur-normal) var(--motion-ease-spring) !important;
}

/* Central add product button & menu */
#bottom-bar-main #add-product-btn {
  transition: transform var(--motion-dur-fast) var(--motion-ease-touch),
              box-shadow var(--motion-dur-fast) var(--motion-ease-standard);
}

#bottom-bar-main #add-product-btn:active {
  transform: scale(0.95) !important;
}

#bottom-bar-main .add-product-choice {
  transition: opacity var(--motion-dur-fast) var(--motion-ease-standard),
              transform var(--motion-dur-normal) var(--motion-ease-spring) !important;
}

#bottom-bar-main .add-product-menu.is-open .add-product-choice:active {
  transform: translateY(1px) scale(0.94) !important;
}

/* Desktop sidebar tabs hover */
@media (hover: hover) and (pointer: fine) {
  #bottom-bar-main .nav-tab:hover:not(.active) {
    background: #F7F7FC !important;
    color: var(--text, #17171C) !important;
    transform: translateX(2px) !important;
  }
}

/* ==========================================================================
   3. MODALS, POPUPS & BOTTOM SHEETS
   ========================================================================== */

/* Native HTML5 Dialog entrance animation */
dialog[open] {
  animation: resellaDialogEnter var(--motion-dur-normal) var(--motion-ease-enter) both;
}

dialog[open]::backdrop {
  animation: resellaBackdropFadeIn var(--motion-dur-normal) var(--motion-ease-enter) both;
}

@keyframes resellaDialogEnter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes resellaBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Bottom Sheet mobile enter/exit */
.sheet-backdrop {
  transition: opacity var(--motion-dur-fast) var(--motion-ease-enter),
              visibility var(--motion-dur-fast) !important;
}

.bottom-sheet {
  transition: transform var(--motion-dur-fast) var(--motion-ease-exit) !important;
  will-change: transform;
}

.sheet-backdrop.open .bottom-sheet {
  transition: transform var(--motion-dur-moderate) var(--motion-ease-enter) !important;
}

/* Desktop Bottom Sheet (centered modal variant) */
@media (min-width: 700px) {
  .bottom-sheet {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px)) scale(0.97) !important;
    transition: opacity var(--motion-dur-fast) var(--motion-ease-exit),
                transform var(--motion-dur-fast) var(--motion-ease-exit) !important;
  }

  .sheet-backdrop.open .bottom-sheet {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) !important;
    transition: opacity var(--motion-dur-fast) var(--motion-ease-enter),
                transform var(--motion-dur-normal) var(--motion-ease-enter) !important;
  }
}

/* Fullscreen Image Lightbox Modal */
.img-modal {
  transition: opacity var(--motion-dur-fast) var(--motion-ease-enter);
}

.img-modal-close:active {
  transform: scale(0.92) !important;
}

.img-modal-nav:active:not(:disabled) {
  transform: translateY(-50%) scale(0.92) !important;
}

.img-modal-thumb {
  transition: transform var(--motion-dur-fast) var(--motion-ease-touch),
              border-color var(--motion-dur-fast) var(--motion-ease-standard);
}

.img-modal-thumb:active {
  transform: scale(0.95) !important;
}

/* ==========================================================================
   4. PRODUCT CARDS & LISTS
   ========================================================================== */

.product-card {
  transition: border-color var(--motion-dur-fast) var(--motion-ease-standard),
              box-shadow var(--motion-dur-fast) var(--motion-ease-standard),
              transform var(--motion-dur-fast) var(--motion-ease-standard) !important;
}

.product-card:active {
  transform: scale(0.992) !important;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    border-color: var(--border-strong, #D5D7E2);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
  .product-card.selected:hover {
    border-color: var(--primary, #6654F1);
    box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-md);
  }
}

/* Checkbox circular feedback in select mode */
.card-check-circle {
  transition: background-color var(--motion-dur-fast) var(--motion-ease-standard),
              border-color var(--motion-dur-fast) var(--motion-ease-standard),
              transform var(--motion-dur-fast) var(--motion-ease-spring) !important;
}

.product-card.selected .card-check-circle {
  transform: scale(1.05);
}

.card-check-circle svg {
  transition: opacity var(--motion-dur-fast) var(--motion-ease-standard),
              transform var(--motion-dur-fast) var(--motion-ease-spring) !important;
}

/* Three-dot options menu button */
.card-3dot {
  transition: transform var(--motion-dur-instant) var(--motion-ease-touch),
              background-color var(--motion-dur-fast) var(--motion-ease-standard) !important;
}

.card-3dot:active {
  transform: scale(0.92) !important;
}

/* Smoother skeleton shimmer sweep */
.skeleton::after {
  animation: skeletonSweep 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

/* ==========================================================================
   5. CAMERA & PHOTO CAPTURE
   ========================================================================== */

.product-camera-shutter {
  transition: transform var(--motion-dur-fast) var(--motion-ease-touch),
              box-shadow var(--motion-dur-fast) var(--motion-ease-standard) !important;
}

.product-camera-shutter:not(:disabled):active {
  transform: scale(0.92) !important;
}

.product-camera-shutter span {
  transition: transform var(--motion-dur-fast) var(--motion-ease-touch);
}

.product-camera-shutter:not(:disabled):active span {
  transform: scale(0.88);
}

/* Flash feedback */
.product-camera-capture-feedback.is-visible {
  animation: resellaCameraFlash 220ms cubic-bezier(0.1, 0.9, 0.2, 1) both !important;
}

@keyframes resellaCameraFlash {
  0% { opacity: 0.65; }
  100% { opacity: 0; }
}

/* Camera thumbnail entrance animation */
.product-camera-thumb {
  animation: resellaCameraThumbEnter var(--motion-dur-fast) var(--motion-ease-spring) both;
  transition: transform var(--motion-dur-fast) var(--motion-ease-touch),
              opacity var(--motion-dur-fast) var(--motion-ease-standard);
}

@keyframes resellaCameraThumbEnter {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.product-camera-thumb-remove {
  transition: transform var(--motion-dur-instant) var(--motion-ease-touch),
              background-color var(--motion-dur-fast) var(--motion-ease-standard) !important;
}

.product-camera-thumb-remove:active {
  transform: scale(0.88) !important;
}

.product-camera-confirm:not(:disabled):active {
  transform: scale(0.96) !important;
}

/* ==========================================================================
   6. AI GENERATION & ACTIVITY INDICATORS
   ========================================================================== */

/* Shimmer on updating cards */
.product-card.is-updating::after {
  animation: cardSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

/* Smooth continuous spinners */
.add-product-spinner,
.image-spin,
.img-spin,
.scene-spin,
.plan-loader-spin {
  will-change: transform;
}

/* Generation choice cards */
.generation-mode-option {
  transition: border-color var(--motion-dur-fast) var(--motion-ease-standard),
              background-color var(--motion-dur-fast) var(--motion-ease-standard),
              transform var(--motion-dur-fast) var(--motion-ease-touch),
              box-shadow var(--motion-dur-fast) var(--motion-ease-standard) !important;
}

.generation-mode-option:active {
  transform: scale(0.98) !important;
}

/* ==========================================================================
   7. TOASTS & NOTIFICATIONS
   ========================================================================== */

.app-toast {
  transform: translateY(12px) scale(0.97);
  transition: opacity var(--motion-dur-fast) var(--motion-ease-exit),
              transform var(--motion-dur-fast) var(--motion-ease-exit) !important;
}

.app-toast.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity var(--motion-dur-fast) var(--motion-ease-enter),
              transform var(--motion-dur-normal) var(--motion-ease-spring) !important;
}

.app-toast::before {
  transition: transform var(--motion-dur-normal) var(--motion-ease-spring);
}

.app-toast.visible::before {
  transform: scale(1.15);
}

/* Publish toast */
.publish-toast {
  animation: resellaToastIn var(--motion-dur-normal) var(--motion-ease-spring) both !important;
}

@keyframes resellaToastIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.publish-toast-progress > span {
  transition: width 240ms linear !important;
}

/* ==========================================================================
   8. ACCESSIBILITY & PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .screen.anim-enter-right,
  .screen.anim-enter-left,
  .screen.anim-enter-fade,
  .nav-tab.active,
  dialog[open],
  dialog[open]::backdrop,
  .publish-toast,
  .product-camera-thumb {
    animation: none !important;
  }

  .bottom-sheet,
  .sheet-backdrop,
  .app-toast {
    transition: none !important;
  }
}