/* ============================================
   PREMIUM ANIMATIONS & EFFECTS - DG Holding
   ============================================ */

/* --- KEYFRAME ANIMATIONS --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(198, 60, 47, 0.4); }
  50% { box-shadow: 0 0 20px rgba(198, 60, 47, 0.8), 0 0 40px rgba(198, 60, 47, 0.3); }
}

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

@keyframes borderGlow {
  0%, 100% { border-color: rgba(198, 60, 47, 0.1); }
  50% { border-color: rgba(198, 60, 47, 0.5); }
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

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

/* --- SCROLL REVEAL BASE --- */
.dg-categories,
.dg-brands-section,
.dg-category-card,
.dg-brand-item,
.dg-benefits,
.dg-benefit {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dg-categories.dg-visible,
.dg-brands-section.dg-visible,
.dg-benefits.dg-visible {
  opacity: 1;
  transform: translateY(0);
}

.dg-category-card.dg-visible {
  opacity: 1;
  transform: translateY(0);
}

.dg-brand-item.dg-visible {
  opacity: 1;
  transform: translateY(0);
}

.dg-benefit.dg-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for brand items */
.dg-brand-item:nth-child(1).dg-visible { transition-delay: 0.05s; }
.dg-brand-item:nth-child(2).dg-visible { transition-delay: 0.1s; }
.dg-brand-item:nth-child(3).dg-visible { transition-delay: 0.15s; }
.dg-brand-item:nth-child(4).dg-visible { transition-delay: 0.2s; }
.dg-brand-item:nth-child(5).dg-visible { transition-delay: 0.25s; }
.dg-brand-item:nth-child(6).dg-visible { transition-delay: 0.3s; }
.dg-brand-item:nth-child(7).dg-visible { transition-delay: 0.35s; }
.dg-brand-item:nth-child(8).dg-visible { transition-delay: 0.4s; }
.dg-brand-item:nth-child(9).dg-visible { transition-delay: 0.45s; }
.dg-brand-item:nth-child(10).dg-visible { transition-delay: 0.5s; }

/* Stagger category cards */
.dg-category-card:nth-child(1).dg-visible { transition-delay: 0.1s; }
.dg-category-card:nth-child(2).dg-visible { transition-delay: 0.3s; }

/* Stagger benefits */
.dg-benefit:nth-child(1).dg-visible { transition-delay: 0s; }
.dg-benefit:nth-child(2).dg-visible { transition-delay: 0.1s; }
.dg-benefit:nth-child(3).dg-visible { transition-delay: 0.2s; }
.dg-benefit:nth-child(4).dg-visible { transition-delay: 0.3s; }
.dg-benefit:nth-child(5).dg-visible { transition-delay: 0.4s; }

/* --- CATEGORY CARDS (Anhänger & Container) --- */
.dg-category-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease,
              opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s ease !important;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent !important;
}

.dg-category-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transition: left 0.6s ease;
  z-index: 1;
  pointer-events: none;
}

.dg-category-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 30px rgba(198, 60, 47, 0.15) !important;
  border-color: rgba(198, 60, 47, 0.4) !important;
}

.dg-category-card:hover::before {
  left: 100%;
}

/* Card icon micro-animation */
.dg-category-card .card-icon {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  display: inline-block;
}

.dg-category-card:hover .card-icon {
  transform: scale(1.2) !important;
  animation: floatIcon 2s ease-in-out infinite;
}

/* --- RED CTA BUTTONS (dg-btn-red) --- */
.dg-btn-red {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s ease,
              background 0.35s ease !important;
  z-index: 2;
  background-size: 200% auto !important;
}

.dg-btn-red::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  transition: left 0.5s ease !important;
  z-index: -1 !important;
}

.dg-btn-red:hover {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(198, 60, 47, 0.5),
              0 0 40px rgba(198, 60, 47, 0.3) !important;
  background: linear-gradient(135deg, #d44030, #c63c2f, #e8503f) !important;
  background-size: 200% auto !important;
  animation: shimmer 1.5s ease infinite !important;
}

.dg-btn-red:hover::before {
  left: 100% !important;
}

.dg-btn-red:active {
  transform: scale(1.02) !important;
  box-shadow: 0 4px 15px rgba(198, 60, 47, 0.4) !important;
}

/* --- BRAND ITEMS (Top-Marken) --- */
.dg-brand-item {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s ease,
              border-color 0.35s ease,
              background-color 0.35s ease,
              opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative !important;
  overflow: hidden !important;
  border: 2px solid #e8eaed !important;
}

.dg-brand-item::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 100% !important; height: 3px !important;
  background: linear-gradient(90deg, #c63c2f, #e8503f, #c63c2f) !important;
  background-size: 200% auto !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.dg-brand-item:hover {
  transform: translateY(-8px) scale(1.05) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12), 0 5px 15px rgba(198, 60, 47, 0.1) !important;
  border-color: rgba(198, 60, 47, 0.3) !important;
  background-color: #fafbfc !important;
}

.dg-brand-item:hover::after {
  transform: scaleX(1) !important;
  animation: shimmer 2s ease infinite !important;
}

/* --- BRANDS SECTION TITLE --- */
.dg-brands-section h2 {
  position: relative !important;
  display: inline-block !important;
}

.dg-brands-section h2::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important; height: 3px !important;
  background: linear-gradient(90deg, #c63c2f, #e8503f) !important;
  border-radius: 2px !important;
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.dg-brands-section.dg-visible h2::after {
  width: 80px !important;
}

/* --- BENEFITS BAR MICRO-ANIMATIONS --- */
.dg-benefit {
  transition: transform 0.3s ease,
              opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  cursor: default;
}

.dg-benefit:hover {
  transform: translateY(-5px) !important;
}

.dg-benefit:hover .dg-benefit-icon {
  animation: floatIcon 1.5s ease-in-out infinite;
  transform: scale(1.15);
  transition: transform 0.3s ease;
}

/* --- PARALLAX EFFECT ON CATEGORIES SECTION --- */
.dg-categories {
  background-attachment: fixed !important;
  will-change: transform;
}

/* --- SMOOTH SCROLL BEHAVIOR --- */
html {
  scroll-behavior: smooth;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 768px) {
  .dg-category-card:hover {
    transform: translateY(-5px) scale(1.01) !important;
  }
  .dg-brand-item:hover {
    transform: translateY(-4px) scale(1.03) !important;
  }
  .dg-btn-red:hover {
    transform: scale(1.05) !important;
  }
}

/* --- REDUCED MOTION PREFERENCE --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .dg-categories, .dg-brands-section, .dg-category-card,
  .dg-brand-item, .dg-benefits, .dg-benefit {
    opacity: 1 !important;
    transform: none !important;
  }
}