/* ═══════════════════════════════════════════
   Loomic E-Commerce - Custom Styles
   ═══════════════════════════════════════════ */

/* ─── Marquee Animation ─── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 20s linear infinite;
}

/* ─── Announcement Bar Seasonal Styles ─── */
/* Generic seasonal gradient - animated */
.announcement-seasonal {
  background: linear-gradient(90deg, #f97316 0%, #fb923c 25%, #fbbf24 50%, #fb923c 75%, #f97316 100%);
  background-size: 200% 100%;
  animation: seasonalGradient 4s ease infinite;
}

@keyframes seasonalGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Season-specific variations */
.announcement-winter {
  background: linear-gradient(90deg, #1e40af 0%, #3b82f6 25%, #60a5fa 50%, #3b82f6 75%, #1e40af 100%);
  background-size: 200% 100%;
  animation: seasonalGradient 4s ease infinite;
}

.announcement-spring {
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 25%, #86efac 50%, #4ade80 75%, #16a34a 100%);
  background-size: 200% 100%;
  animation: seasonalGradient 4s ease infinite;
}

.announcement-summer {
  background: linear-gradient(90deg, #f97316 0%, #fb923c 25%, #fbbf24 50%, #fb923c 75%, #f97316 100%);
  background-size: 200% 100%;
  animation: seasonalGradient 4s ease infinite;
}

.announcement-autumn {
  background: linear-gradient(90deg, #b45309 0%, #d97706 25%, #f59e0b 50%, #d97706 75%, #b45309 100%);
  background-size: 200% 100%;
  animation: seasonalGradient 4s ease infinite;
}

/* Pulse animation for special offers */
.announcement-pulse {
  animation: announcementPulse 2s ease-in-out infinite;
}

@keyframes announcementPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Shimmer effect */
.announcement-shimmer {
  position: relative;
  overflow: hidden;
}

.announcement-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -50%; }
  100% { left: 150%; }
}

/* Floating emoji animation */
@keyframes floatEmoji {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.emoji-float {
  animation: floatEmoji 2s ease-in-out infinite;
}

/* ─── Scroll Entrance Animations ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }
.stagger-6 { transition-delay: 0.48s; }
.stagger-7 { transition-delay: 0.56s; }
.stagger-8 { transition-delay: 0.64s; }

/* ─── Cookie Banner ─── */
.cookie-backdrop {
  backdrop-filter: blur(4px);
}

/* ─── Dropdown ─── */
.dropdown {
  position: relative;
}
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
  pointer-events: none;
}
.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Padding bridge so hover doesn't break between link and menu */
.dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
  z-index: 50;
}

/* ─── Product Card ─── */
.product-card {
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid transparent;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: rgba(249,115,22,0.3);
}
.product-card .cart-btn {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s ease-out;
}
.product-card:hover .cart-btn {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Slideshow ─── */
.slide {
  display: none;
}
.slide.active {
  display: block;
}
.slide-content {
  animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ─── Mobile Menu ─── */
.mobile-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.mobile-panel.open {
  max-height: 800px;
}

/* ─── Submenu ─── */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.submenu.open {
  max-height: 400px;
}

/* ─── Smooth image hover ─── */
.img-zoom {
  transition: transform 0.4s ease;
}
.img-zoom:hover {
  transform: scale(1.05);
}

/* ─── Star rating ─── */
.star-filled { color: #F97316; }
.star-empty { color: #CBD5E1; }

/* ─── Announcement bar mobile ─── */
@media (min-width: 768px) {
  .announcement-mobile { display: none !important; }
  .announcement-desktop { display: flex !important; }
}
@media (max-width: 767px) {
  .announcement-mobile { display: flex !important; }
  .announcement-desktop { display: none !important; }
}

/* ─── Focus states ─── */
input:focus, button:focus {
  outline: none;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-marquee { animation: none; }
}