/* ============================================================
   NANOBIT — MOTION & ANIMATION SYSTEM
   3-Layer Progressive Motion Architecture:
     Layer 1 (Default):  Content always 100% visible (opacity:1, transform:none)
     Layer 2 (Modern):   Enhanced inside @supports (animation-timeline: view())
     Layer 3 (Fallback): IntersectionObserver via main.js (.nb-io) for Firefox/Safari
   Strict compliance with WCAG AA & prefers-reduced-motion.
   ============================================================ */

/* ── LAYER 1: BASE DEFAULTS (Content Always Visible) ──────── */
[data-reveal],
.reveal-item,
.about-hero,
.about-stats,
.about-story,
.about-values,
.contact-hero,
.contact-section,
.faq-hero,
.faq-section,
.legal-hero,
.legal-content-section {
  opacity: 1;
  transform: none;
}

/* ── LAYER 2: MODERN CSS SCROLL-DRIVEN ANIMATIONS ─────────── */
@supports (animation-timeline: view()) {
  @keyframes nb-view-fade-rise {
    0% {
      opacity: 0;
      transform: translateY(24px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes nb-view-scale-subtle {
    0% {
      opacity: 0.2;
      transform: scale(0.96);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  [data-reveal] {
    animation: nb-view-fade-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }

  .about-stat-card,
  .about-value-card,
  .faq-category-block,
  .return-step-item {
    animation: nb-view-fade-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }
}

/* ── LAYER 3: INTERSECTION OBSERVER FALLBACK (.nb-io) ─────── */
.nb-io [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow, 0.3s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              transform var(--duration-slow, 0.3s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: opacity, transform;
}

.nb-io [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* 1. Button active tap feel & Apple spring easing */
a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

.btn,
.product-card__btn,
.btn-primary,
.btn-secondary,
.btn-outline {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:active,
.product-card__btn:active,
.header-search__btn:active,
.icon-btn:active {
  transform: scale(0.97);
}

/* 1.1 Apple Smooth Card Physics */
.product-card,
.category-card,
.trust-item,
.account-nav-card,
.account-card,
.account-order-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(25, 21, 18, 0.07);
}

/* 2. Cart Icon Bounce on Add-to-Cart */
@keyframes nb-cart-bounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.25) rotate(-8deg); }
  50% { transform: scale(0.9) rotate(4deg); }
  75% { transform: scale(1.1) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}

.is-cart-animating .header-action-btn--cart .nb-icon,
.is-cart-animating [data-cart-count] {
  animation: nb-cart-bounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 3. Badge Pulse (Flash Deals / Urgency) */
@keyframes nb-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.badge-sale,
.badge-flash {
  animation: nb-badge-pulse 2.5s infinite ease-in-out;
}

/* 4. Skeleton Shimmer Loading Effect */
@keyframes nb-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.search-skeleton,
.skeleton-box {
  background: linear-gradient(
    90deg,
    var(--color-surface-alt, #ece8e3) 25%,
    var(--color-base, #f6f4f1) 50%,
    var(--color-surface-alt, #ece8e3) 75%
  );
  background-size: 200% 100%;
  animation: nb-shimmer 1.5s infinite linear;
}

/* 5. Spinner Rotation */
@keyframes nb-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.nb-icon--spin {
  animation: nb-spin 0.8s linear infinite;
  display: inline-block;
}

/* ── PREFERS-REDUCED-MOTION ACCESSIBILITY ─────────────────── */
@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;
  }

  [data-reveal],
  .nb-io [data-reveal]:not(.is-in),
  .nb-io [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}