/* ============================================================
   BAMBOX PREMIUM — MOTION SYSTEM
   Type: Luxury Micro-Interactions
   Performance: GPU-accelerated only
============================================================ */

/* ============================================================
   1. GLOBAL MOTION TOKENS
============================================================ */

:root {
  --motion-fast: 160ms;
  --motion-normal: 320ms;
  --motion-slow: 640ms;

  --ease-standard: cubic-bezier(.19,1,.22,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
}

/* ============================================================
   2. FADE & LIFT (PRIMARY LUXURY MOTION)
============================================================ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Utility */
.animate-fade-up {
  animation: fadeUp var(--motion-normal) var(--ease-standard) both;
}

.animate-fade-in {
  animation: fadeIn var(--motion-normal) var(--ease-soft) both;
}

/* ============================================================
   3. STAGGER SUPPORT (PURE CSS)
============================================================ */

[data-animate="stagger"] > * {
  opacity: 0;
  animation: fadeUp var(--motion-normal) var(--ease-standard) forwards;
}

[data-animate="stagger"] > *:nth-child(1) { animation-delay: 80ms; }
[data-animate="stagger"] > *:nth-child(2) { animation-delay: 160ms; }
[data-animate="stagger"] > *:nth-child(3) { animation-delay: 240ms; }
[data-animate="stagger"] > *:nth-child(4) { animation-delay: 320ms; }
[data-animate="stagger"] > *:nth-child(5) { animation-delay: 400ms; }

/* ============================================================
   4. BUTTON MICRO-INTERACTIONS
============================================================ */

.btn,
.btn-primary,
.btn-outline {
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.btn:hover,
.btn-primary:hover,
.btn-outline:hover {
  transform: translateY(-2px);
}

.btn:active,
.btn-primary:active,
.btn-outline:active {
  transform: translateY(0);
}

/* ============================================================
   5. CARD / PANEL ELEVATION
============================================================ */

.card,
.panel,
.surface {
  transition:
    transform var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard);
}

.card:hover,
.panel:hover,
.surface:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.08);
}

/* ============================================================
   6. FORM FOCUS FEEDBACK
============================================================ */

input,
textarea,
select {
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

/* ============================================================
   7. IMAGE & PRODUCT PREVIEW MOTION
============================================================ */

.product-preview img,
.demo-frame img {
  transition:
    transform var(--motion-slow) var(--ease-standard);
}

.product-preview:hover img,
.demo-frame:hover img {
  transform: scale(1.03);
}

/* ============================================================
   8. PAGE LOAD POLISH (SAFE)
============================================================ */

body {
  animation: fadeIn 240ms ease both;
}

/* ============================================================
   9. REDUCED MOTION (ACCESSIBILITY)
============================================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}