/* ==========================================================================
   ZABATLY TECH — Motion & Interaction Polish
   Lightweight, hardware-accelerated, accessibility-safe enhancements.
   NO layout, design, or content changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SMOOTH THEME TRANSITION
   Applies a gentle 260ms crossfade when switching dark ↔ light mode.
   Targets only color/background properties — never affects layout or
   transform-based animations already running on the page.
   -------------------------------------------------------------------------- */
html {
  transition:
    background-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    color            260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Extend the color transition to high-visibility surfaces */
.site-header,
.site-footer,
.main-content,
.product-card,
.category-card,
.modal-card,
.mobile-nav-panel {
  transition:
    background-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color     260ms cubic-bezier(0.4, 0, 0.2, 1),
    color            260ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. ENHANCED BUTTON INTERACTIONS
   Adds a subtle press-down scale (active) on all icon/action buttons.
   The existing hover states and colours are kept exactly as-is.
   -------------------------------------------------------------------------- */
.icon-btn {
  /* Preserve the existing transition, extend with transform */
  transition:
    color            0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background       0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color     0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform        0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-btn:hover {
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: scale(0.93) translateY(0);
}

/* Nav links — add transform to existing transition */
.nav-link {
  transition:
    color      0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform  0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-link:hover {
  transform: translateY(-1px);
}

.nav-link:active {
  transform: scale(0.96);
}

/* Primary CTA buttons (btn-primary-neon, btn-whatsapp-inquire, etc.) */
.btn-primary-neon,
.btn-whatsapp-inquire,
.btn-add-to-cart,
.btn-product-action,
.share-btn {
  transition:
    background    0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color  0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow    0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color         0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-primary-neon:hover,
.btn-whatsapp-inquire:hover,
.btn-add-to-cart:hover,
.btn-product-action:hover,
.share-btn:hover {
  transform: translateY(-2px);
}

.btn-primary-neon:active,
.btn-whatsapp-inquire:active,
.btn-add-to-cart:active,
.btn-product-action:active,
.share-btn:active {
  transform: scale(0.96) translateY(0);
}

/* --------------------------------------------------------------------------
   3. PRODUCT CARD INTERACTION SMOOTHNESS
   Adds transform to the existing card transition so the lift effect
   is hardware-accelerated and fluent.
   -------------------------------------------------------------------------- */
.product-card {
  will-change: transform;
  transition:
    background-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color     260ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform        0.25s cubic-bezier(0.34, 1.1, 0.64, 1);
}

.product-card:hover {
  transform: translateY(-4px);
}

.category-card {
  will-change: transform;
  transition:
    background-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color     260ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform        0.25s cubic-bezier(0.34, 1.1, 0.64, 1);
}

/* --------------------------------------------------------------------------
   4. PAGE CONTENT FADE-IN
   Soft 200ms fade when the main content area is updated by the router.
   Applied via JS class toggle (see app.js).
   -------------------------------------------------------------------------- */
@keyframes ztPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zt-page-enter {
  animation: ztPageIn 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* --------------------------------------------------------------------------
   5. HEADER BUTTON FIRST-VISIT BOUNCE
   One-shot bounce animation played only on first visit (class added by JS).
   Runs once, never again — does not block interaction.
   -------------------------------------------------------------------------- */
@keyframes ztFirstBounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-5px) scale(1.12); }
  55%  { transform: translateY(0) scale(0.97); }
  75%  { transform: translateY(-2px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

.zt-first-visit-bounce {
  animation: ztFirstBounce 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stagger: theme button bounces 180ms after lang button */
.zt-first-visit-bounce-delay {
  animation: ztFirstBounce 520ms 180ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* --------------------------------------------------------------------------
   6. MOBILE NAV PANEL SLIDE
   Smooth slide-in for the mobile hamburger menu panel if one is used.
   -------------------------------------------------------------------------- */
@keyframes ztSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-nav-panel.open {
  animation: ztSlideDown 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION — ACCESSIBILITY
   When the user has requested reduced motion, all motion enhancements
   are disabled. The page remains fully functional and styled.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html,
  .site-header,
  .site-footer,
  .main-content,
  .product-card,
  .category-card,
  .modal-card,
  .mobile-nav-panel,
  .icon-btn,
  .nav-link,
  .btn-primary-neon,
  .btn-whatsapp-inquire,
  .btn-add-to-cart,
  .btn-product-action,
  .share-btn {
    transition: none !important;
    animation: none !important;
  }

  .product-card:hover,
  .category-card:hover,
  .icon-btn:hover,
  .nav-link:hover,
  .btn-primary-neon:hover,
  .btn-whatsapp-inquire:hover {
    transform: none !important;
  }

  .zt-first-visit-bounce,
  .zt-first-visit-bounce-delay,
  .zt-page-enter {
    animation: none !important;
  }
}