/**
 * Lazy Loading Styles für Produktseiten
 */

/* Lazy Sections - ganze Bereiche */
.lazy-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: calc(var(--animation-order, 0) * 0.15s);
    will-change: opacity, transform;
}

.lazy-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Lazy Elements - einzelne Komponenten */
.lazy-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: calc(var(--animation-order, 0) * 0.1s);
    will-change: opacity, transform;
}

.lazy-element.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Spezielle Effekte für verschiedene Elemente */
.feature-card-modern.lazy-element {
    transform: translateY(25px) scale(0.98);
}

.feature-card-modern.lazy-element.visible {
    transform: translateY(0) scale(1);
}

/* Horizontales Einblenden für Feature-Grid */
.features-grid-modern > .lazy-element:nth-child(odd) {
    transform: translateX(-25px);
    transition-property: opacity, transform;
}

.features-grid-modern > .lazy-element:nth-child(even) {
    transform: translateX(25px);
    transition-property: opacity, transform;
}

.features-grid-modern > .lazy-element.visible {
    transform: translateX(0);
}

/* Benefit Items erscheinen von unten */
.benefit-item.lazy-element {
    transform: translateY(30px);
}

/* Demo-Bereiche mit leichtem Zoom-Effekt */
.warehouse-values.lazy-element,
.warehouse-capacity.lazy-element,
.activity-log.lazy-element,
.compact-warehouse-tree.lazy-element {
    transform: scale(0.95) translateY(20px);
    transition-duration: 0.7s;
}

.warehouse-values.lazy-element.visible,
.warehouse-capacity.lazy-element.visible,
.activity-log.lazy-element.visible,
.compact-warehouse-tree.lazy-element.visible {
    transform: scale(1) translateY(0);
}

/* CTA mit besonderem Effekt */
.product-cta.lazy-section {
    transform: translateY(15px);
    transition-duration: 0.9s;
}

/* Reduzierte Animationen für Nutzer, die das bevorzugen */
@media (prefers-reduced-motion: reduce) {
    .lazy-section,
    .lazy-element {
        transition-duration: 0.3s !important;
        transform: translateY(10px) !important;
    }
    
    .features-grid-modern > .lazy-element:nth-child(odd),
    .features-grid-modern > .lazy-element:nth-child(even) {
        transform: translateY(10px) !important;
    }
    
    .lazy-section.visible,
    .lazy-element.visible,
    .features-grid-modern > .lazy-element.visible {
        transform: translateY(0) !important;
    }
}

/**
 * Product Badges Styles - MOVED TO prov.badges.css
 */

/* --- merged additions from style.css --- */

.team-card.loading {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}