/* ==========================================================================
   PRIDE OF BIHAR — MOTION DESIGN SYSTEM (motion.css)
   Heritage, Warm, Premium, Earthy, Elegant Motion
   Strict Performance: Transform & Opacity ONLY, Zero Layout Shifts (CLS < 0.1)
   ========================================================================== */

:root {
  /* Motion Easing Curves */
  --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);

  /* Motion Durations */
  --dur-micro: 160ms;
  --dur-quick: 240ms;
  --dur-ui: 350ms;
  --dur-reveal: 650ms;
  --dur-hero: 800ms;
}

/* ── 0. ULTRA-FAST NATURAL SPEED RENDERING ────────────────────────── */
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Speed: GPU composite layer for scroll performance */
.site-header, .product-card, .poster-card, .cart-drawer {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Speed: Fast lazy image decode */
img[loading="lazy"] {
  content-visibility: auto;
}

/* ── SKELETON SHIMMER PLACEHOLDERS (INSTANT PERCEIVED SPEED & ZERO CLS) ──── */
.skeleton-card {
  pointer-events: none;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03) !important;
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #f3ede6 0%, #ffffff 50%, #f3ede6 100%);
  background-size: 200% 100%;
  animation: pobShimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}

@keyframes pobShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 1. GLOBAL SCROLL PROGRESS BAR (CSS-Only / rAF driven) ──────────────── */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #d4af37, #f6db7e, #4a0e1c, #d4af37);
  background-size: 200% 100%;
  animation: pobProgressGlow 3s linear infinite;
  z-index: 100000;
  pointer-events: none;
  transition: width 0.1s linear;
}

@keyframes pobProgressGlow {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── 2. SITE HEADER SCROLLED STATE (DYNAMIC COMPACT BLUR) ────────────────── */
.site-header {
  transition: padding var(--dur-ui) var(--ease-luxe),
              background var(--dur-ui) var(--ease-luxe),
              box-shadow var(--dur-ui) var(--ease-luxe);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(32, 6, 13, 0.08) !important;
}

.site-header.scrolled .header-inner {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.site-header.scrolled .brand-logo-img {
  transform: scale(0.92);
}

/* ── 3. INTERSECTION OBSERVER SCROLL REVEALS ────────────────────────────── */
[data-reveal] {
  opacity: 1;
  transform: none;
}

html.js-motion-ready [data-reveal]:not(.revealed) {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--dur-reveal) var(--ease-luxe),
              transform var(--dur-reveal) var(--ease-luxe);
  will-change: opacity, transform;
}

html.js-motion-ready [data-reveal].revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Fade variants */
[data-reveal="fade"] {
  transform: translate3d(0, 0, 0);
}

[data-reveal="slide-up"] {
  transform: translate3d(0, 32px, 0);
}

[data-reveal="slide-left"] {
  transform: translate3d(32px, 0, 0);
}

[data-reveal="slide-right"] {
  transform: translate3d(-32px, 0, 0);
}

[data-reveal="zoom-in"] {
  transform: scale(0.94);
}
[data-reveal="zoom-in"].revealed {
  transform: scale(1);
}

/* Blur-in for premium media */
[data-reveal="blur-up"] {
  filter: blur(8px);
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--dur-reveal) var(--ease-luxe),
              transform var(--dur-reveal) var(--ease-luxe),
              filter var(--dur-reveal) var(--ease-luxe);
}
[data-reveal="blur-up"].revealed {
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

/* Stagger Delays */
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="250"] { transition-delay: 250ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="350"] { transition-delay: 350ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }

/* Mobile & Tablet Full Visibility Guarantee: Never cut off or hide page content */
@media (max-width: 860px) {
  [data-reveal], .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    visibility: visible !important;
  }
}

/* ── 4. HERO SECTION ENTRANCE CHOREOGRAPHY ──────────────────────────────── */
.hero-content {
  overflow: visible;
}

.hero-content > * {
  animation: pobHeroElementFade 0.85s var(--ease-luxe) both;
}

.hero-content > *:nth-child(1) { animation-delay: 0.10s; } /* Tag pill */
.hero-content > *:nth-child(2) { animation-delay: 0.22s; } /* Title */
.hero-content > *:nth-child(3) { animation-delay: 0.36s; } /* Subtitle */
.hero-content > *:nth-child(4) { animation-delay: 0.48s; } /* Badges */
.hero-content > *:nth-child(5) { animation-delay: 0.60s; } /* Actions */

@keyframes pobHeroElementFade {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0px);
  }
}

/* Hero Jar Floating Animation (Subtle, slow, organic) */
.hero-card-img {
  animation: pobHeroJarFloat 6.5s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes pobHeroJarFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 15px 25px rgba(32, 6, 13, 0.22));
  }
  100% {
    transform: translate3d(0, -12px, 0) scale(1.02);
    filter: drop-shadow(0 25px 35px rgba(212, 175, 55, 0.28));
  }
}

/* Background poster subtle Ken Burns zoom */
.hero-slide-bg {
  transform: scale(1);
  transition: transform 9s var(--ease-soft);
  will-change: transform;
}

.hero-slide.active .hero-slide-bg {
  transform: scale(1.06);
}

/* ── 5. PRODUCT CARD LUXURY HOVER & LIFT ────────────────────────────────── */
.product-card {
  transition: transform var(--dur-ui) var(--ease-luxe),
              box-shadow var(--dur-ui) var(--ease-luxe),
              border-color var(--dur-ui) var(--ease-luxe);
  will-change: transform, box-shadow;
  position: relative;
}

.product-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-luxe);
  pointer-events: none;
  z-index: 1;
}

.product-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 16px 36px rgba(32, 6, 13, 0.12), 0 2px 10px rgba(212, 175, 55, 0.15) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
}

.product-card:hover::before {
  opacity: 1;
}

.product-card .card-img-wrap img {
  transition: transform 0.5s var(--ease-luxe);
  will-change: transform;
}

.product-card:hover .card-img-wrap img {
  transform: scale(1.06);
}

/* Product Card Button Micro-press */
.btn-card-add, .product-card .btn-primary, .product-card .btn-outline {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-quick) var(--ease-spring),
              background var(--dur-quick) var(--ease-luxe),
              color var(--dur-quick) var(--ease-luxe);
}

.btn-card-add:active, .product-card .btn-primary:active {
  transform: scale(0.96);
}

/* ── 6. BUTTON MICRO-INTERACTIONS & RIPPLE ──────────────────────────────── */
.btn-gold, .btn-primary, .auth-btn-submit, .btn-checkout {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-quick) var(--ease-spring),
              box-shadow var(--dur-quick) var(--ease-luxe),
              background-color var(--dur-quick) var(--ease-luxe);
}

.btn-gold:hover, .btn-primary:hover, .auth-btn-submit:hover {
  transform: translate3d(0, -2px, 0);
}

.btn-gold:active, .btn-primary:active, .auth-btn-submit:active, .btn-checkout:active {
  transform: scale(0.97) !important;
}

/* Button ripple wave */
.pob-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: pobRippleWave 0.6s linear;
  background-color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

@keyframes pobRippleWave {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── 7. CART DRAWER & BADGE SPRING ANIMATIONS ───────────────────────────── */
.cart-drawer {
  transition: transform 0.38s var(--ease-luxe) !important;
  will-change: transform;
}

.cart-overlay {
  transition: opacity 0.32s var(--ease-sharp), visibility 0.32s !important;
}

/* Cart Badge Bounce Animation */
@keyframes pobBadgePop {
  0% { transform: scale(0.7); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.cart-badge.pop-bounce {
  animation: pobBadgePop 0.35s var(--ease-spring);
}

/* Cart item enter stagger */
.cart-item {
  animation: pobCartItemIn 0.32s var(--ease-luxe) both;
}

@keyframes pobCartItemIn {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Empty cart float */
.empty-cart-illustration {
  animation: pobFloatSlow 4s ease-in-out infinite alternate;
}

@keyframes pobFloatSlow {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -8px, 0); }
}

/* ── 8. ACCORDION / FAQ SMOOTH HEIGHT (GRID 0fr -> 1fr) ──────────────────── */
.faq-card {
  transition: border-color var(--dur-quick) var(--ease-luxe),
              box-shadow var(--dur-quick) var(--ease-luxe);
}

.faq-card.open {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.12) !important;
}

.faq-card .faq-q {
  transition: color var(--dur-quick) var(--ease-luxe);
}

.faq-card.open .faq-q {
  color: var(--primary) !important;
}

.faq-icon-arrow {
  display: inline-block;
  transition: transform var(--dur-ui) var(--ease-spring);
}

.faq-card.open .faq-icon-arrow {
  transform: rotate(180deg);
  color: var(--gold);
}

.faq-answer-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-ui) var(--ease-luxe);
}

.faq-card.open .faq-answer-collapse {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
}

/* ── 9. NUMBER COUNTER PULSE ON SCROLL ──────────────────────────────────── */
.stat-item {
  transition: transform var(--dur-ui) var(--ease-luxe);
}

.stat-item:hover {
  transform: translate3d(0, -4px, 0);
}

.stat-val {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ── 10. MARQUEE SMOOTH HOVER PAUSE ─────────────────────────────────────── */
.marquee-bar:hover .marquee-track {
  animation-play-state: paused;
}

/* ── 11. BADGE SHIMMER (BESTSELLER / GI TAGGED) ─────────────────────────── */
.badge-gold, .badge-kansa, .hero-badge-item, .card-badge {
  position: relative;
  overflow: hidden;
}

.badge-gold::after, .badge-kansa::after, .card-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: rotate(30deg);
  animation: pobBadgeShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pobBadgeShimmer {
  0%, 80% { left: -60%; }
  100% { left: 140%; }
}

/* ── 12. PROMOTIONAL POSTER CARD TILT & GLOW ────────────────────────────── */
.poster-card {
  overflow: hidden;
  transition: transform var(--dur-ui) var(--ease-luxe),
              box-shadow var(--dur-ui) var(--ease-luxe);
}

.poster-card:hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: 0 20px 45px rgba(32, 6, 13, 0.2) !important;
}

.poster-card .poster-card-img {
  transition: transform 0.75s var(--ease-luxe);
  will-change: transform;
}

.poster-card:hover .poster-card-img {
  transform: scale(1.05);
}

/* ── 13. SKELETON LOADERS (NO LAYOUT SHIFT) ──────────────────────────────── */
.pob-skeleton {
  background: linear-gradient(90deg, #f1e9e3 25%, #fcfaf7 50%, #f1e9e3 75%);
  background-size: 200% 100%;
  animation: pobSkeletonLoading 1.5s infinite;
  border-radius: 8px;
}

@keyframes pobSkeletonLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 14. VIEW TRANSITIONS API SUPPORT ───────────────────────────────────── */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 0.24s var(--ease-sharp) both pobViewFadeOut;
}

::view-transition-new(root) {
  animation: 0.28s var(--ease-luxe) both pobViewFadeIn;
}

@keyframes pobViewFadeOut {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -6px, 0); }
}

@keyframes pobViewFadeIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── 15. DESKTOP MAGNETIC INTERACTION WRAPPER ───────────────────────────── */
@media (min-width: 1024px) {
  .magnetic-wrap {
    display: inline-block;
    transition: transform 0.22s var(--ease-luxe);
    will-change: transform;
  }
}

/* ── 16. ACCESSIBILITY: STRICT PREFERS-REDUCED-MOTION GUARD ─────────────── */
@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;
  }

  #scroll-progress-bar {
    display: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .hero-slide-bg, .hero-card-img, .empty-cart-illustration {
    animation: none !important;
    transform: none !important;
  }

  .badge-gold::after, .badge-kansa::after, .card-badge::after {
    display: none !important;
  }
}