/* ===================================
   SUMA CENTER - Widget Animationen
   Lebendige Hintergrund-Animationen für alle Widgets
   Mit alternierenden Hintergrund-Varianten
   ================================== */

/* ===================================
   HINTERGRUND-VARIANTEN FÜR WIDGETS
   ================================== */

/* Standard-Variante (mit Animationen) */
.smg-widget-bg-default {
    background: linear-gradient(135deg, var(--smg-50) 0%, var(--smg-100) 100%) !important;
    position: relative;
    overflow: hidden;
}

.smg-widget-bg-default::before {
    content: '';
    position: absolute;
    top: -25%;
    left: -15%;
    width: 35%;
    height: 150%;
    background: linear-gradient(135deg, rgba(var(--smg-500-rgb), 0.03), rgba(var(--smg-500-rgb), 0.01));
    transform: rotate(-15deg);
    animation: defaultFloat 40s ease-in-out infinite;
    z-index: 0;
}

.smg-widget-bg-default::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 30%;
    height: 140%;
    background: linear-gradient(-135deg, rgba(var(--smg-500-rgb), 0.02), rgba(var(--smg-500-rgb), 0.005));
    transform: rotate(20deg);
    animation: defaultFloat 50s ease-in-out infinite reverse;
    z-index: 0;
}

/* Neutrale Variante (minimale Animationen) */
.smg-widget-bg-neutral {
    background: linear-gradient(135deg, var(--smg-gray-50) 0%, var(--smg-white) 50%, var(--smg-gray-100) 100%) !important;
    position: relative;
    overflow: hidden;
}

.smg-widget-bg-neutral::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 30%;
    height: 140%;
    background: linear-gradient(45deg, rgba(227, 30, 36, 0.01), rgba(227, 30, 36, 0.005));
    transform: rotate(15deg);
    animation: gentleFloat 60s ease-in-out infinite;
    z-index: 1;
}

/* Weiße Variante (keine Animationen) */
.smg-widget-bg-white {
    background: var(--smg-white) !important;
    position: relative;
}

.smg-widget-bg-white::before,
.smg-widget-bg-white::after {
    display: none !important;
}

/* Dunkle Variante (für Kontrast) - Neutrales Grau statt dunkles Rot */
.smg-widget-bg-dark {
    background: linear-gradient(135deg, var(--smg-gray-900) 0%, var(--smg-gray-800) 100%) !important;
    color: white;
    position: relative;
    overflow: hidden;
}

.smg-widget-bg-dark::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -15%;
    width: 40%;
    height: 160%;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    transform: rotate(-20deg);
    animation: darkFloat 45s ease-in-out infinite;
    z-index: 1;
}

/* Transparente Variante (für Overlays) */
.smg-widget-bg-transparent {
    background: transparent !important;
    position: relative;
}

.smg-widget-bg-transparent::before,
.smg-widget-bg-transparent::after {
    display: none !important;
}

/* ===================================
   ANIMATIONEN FÜR HINTERGRUND-VARIANTEN
   ================================== */

@keyframes defaultFloat {
    0%, 100% {
        transform: rotate(-15deg) translateY(0px) translateX(0px);
        opacity: 0.4;
    }
    50% {
        transform: rotate(-15deg) translateY(-15px) translateX(10px);
        opacity: 0.6;
    }
}

@keyframes gentleFloat {
    0%, 100% {
        transform: rotate(15deg) translateY(0px);
        opacity: 0.3;
    }
    50% {
        transform: rotate(15deg) translateY(-10px);
        opacity: 0.5;
    }
}

@keyframes darkFloat {
    0%, 100% {
        transform: rotate(-20deg) translateX(0px);
        opacity: 0.8;
    }
    50% {
        transform: rotate(-20deg) translateX(15px);
        opacity: 1;
    }
}

/* ===================================
   ANIMATION GESCHWINDIGKEIT
   ================================== */

/* Langsame Animationen (60s) */
.suma-animation-slow.smg-widget-bg-default::before {
    animation-duration: 60s;
}

.suma-animation-slow.smg-widget-bg-default::after {
    animation-duration: 75s;
}

.suma-animation-slow.smg-widget-bg-neutral::before {
    animation-duration: 90s;
}

.suma-animation-slow.smg-widget-bg-dark::before {
    animation-duration: 70s;
}

/* Normale Animationen (30s) - Default */
.suma-animation-normal.smg-widget-bg-default::before,
.smg-widget-bg-default::before {
    animation-duration: 40s;
}

.suma-animation-normal.smg-widget-bg-default::after,
.smg-widget-bg-default::after {
    animation-duration: 50s;
}

.suma-animation-normal.smg-widget-bg-neutral::before,
.smg-widget-bg-neutral::before {
    animation-duration: 60s;
}

.suma-animation-normal.smg-widget-bg-dark::before,
.smg-widget-bg-dark::before {
    animation-duration: 45s;
}

/* Schnelle Animationen (15s) */
.suma-animation-fast.smg-widget-bg-default::before {
    animation-duration: 20s;
}

.suma-animation-fast.smg-widget-bg-default::after {
    animation-duration: 25s;
}

.suma-animation-fast.smg-widget-bg-neutral::before {
    animation-duration: 30s;
}

.suma-animation-fast.smg-widget-bg-dark::before {
    animation-duration: 22s;
}

/* Animationen deaktivieren */
.suma-no-animations::before,
.suma-no-animations::after {
    animation: none !important;
}

/* ===================================
   WIDGET-SPEZIFISCHE ÜBERSCHREIBUNGEN
   ================================== */

/* Neutrale Variante überschreibt Standard-Animationen */
.smg-services-widget.smg-widget-bg-neutral::before,
.smg-services-widget.smg-widget-bg-neutral::after,
.smg-news-events-widget.smg-widget-bg-neutral::before,
.smg-news-events-widget.smg-widget-bg-neutral::after,
.smg-brands-widget.smg-widget-bg-neutral::before,
.smg-brands-widget.smg-widget-bg-neutral::after,
.smg-quickaccess-widget.smg-widget-bg-neutral::before,
.smg-quickaccess-widget.smg-widget-bg-neutral::after,
.smg-centerplan-widget.smg-widget-bg-neutral::before,
.smg-centerplan-widget.smg-widget-bg-neutral::after {
    display: none !important;
}

/* Dunkle Variante - Text-Farben anpassen */
.smg-widget-bg-dark .smg-widget-title,
.smg-widget-bg-dark .service-title,
.smg-widget-bg-dark .news-title,
.smg-widget-bg-dark .brand-title {
    color: white !important;
}

.smg-widget-bg-dark .smg-widget-subtitle,
.smg-widget-bg-dark .service-description,
.smg-widget-bg-dark .news-description {
    color: rgba(255, 255, 255, 0.8) !important;
}

.smg-widget-bg-dark .service-card,
.smg-widget-bg-dark .news-card,
.smg-widget-bg-dark .brand-logo {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white;
}

/* Allgemeine Widget-Container mit z-index für Inhalte */
.smg-widget-header,
.services-grid,
.news-events-grid,
.brand-grid,
.quick-access-grid,
.smg-centerplan-container,
.smg-social-media-seamless-strip {
    position: relative;
    z-index: 2;
}

/* 2025 MODERNE WIDGET ANIMATIONEN */

/* Subtile Radial Gradient Animationen */
@keyframes modernRadialPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.02;
    }
    50% {
        transform: scale(1.1) rotate(2deg);
        opacity: 0.04;
    }
}

@keyframes modernRadialFloat {
    0%, 100% {
        transform: translateX(0px) translateY(0px) scale(1);
        opacity: 0.01;
    }
    33% {
        transform: translateX(10px) translateY(-5px) scale(1.05);
        opacity: 0.03;
    }
    66% {
        transform: translateX(-5px) translateY(8px) scale(0.95);
        opacity: 0.02;
    }
}

/* 3D Card Entrance Animationen */
@keyframes modern3DCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95) rotateX(10deg);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.02) rotateX(-2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
    }
}

@keyframes geometricFloat {
    0%, 100% { 
        transform: rotate(30deg) scale(1) translateY(0px); 
        opacity: 0.8;
    }
    25% { 
        transform: rotate(30deg) scale(1.02) translateY(-5px); 
        opacity: 1;
    }
    50% { 
        transform: rotate(30deg) scale(0.98) translateY(8px); 
        opacity: 0.9;
    }
    75% { 
        transform: rotate(30deg) scale(1.01) translateY(-3px); 
        opacity: 1;
    }
}

@keyframes waveFloat {
    0%, 100% { 
        transform: rotate(45deg) translateY(0px) scale(1); 
        opacity: 0.6;
    }
    33% { 
        transform: rotate(45deg) translateY(-10px) scale(1.02); 
        opacity: 0.9;
    }
    66% { 
        transform: rotate(45deg) translateY(5px) scale(0.98); 
        opacity: 0.8;
    }
}

@keyframes mapFloat {
    0%, 100% { 
        transform: rotate(35deg) translateX(0px) translateY(0px); 
        opacity: 0.8;
    }
    25% { 
        transform: rotate(35deg) translateX(10px) translateY(-5px); 
        opacity: 1;
    }
    50% { 
        transform: rotate(35deg) translateX(-5px) translateY(10px); 
        opacity: 0.9;
    }
    75% { 
        transform: rotate(35deg) translateX(8px) translateY(-8px); 
        opacity: 1;
    }
}

/* Spezielle Animationen für verschiedene Widget-Typen */
@keyframes pulseGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(227, 30, 36, 0.1);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(227, 30, 36, 0.2);
        transform: scale(1.01);
    }
}

@keyframes subtleRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hover-Effekte für Widget-Container - DEAKTIVIERT
   ⚠️ Verursachte unerwünschte Hervorhebung des gesamten Widgets beim Hover
.smg-services-widget:hover::before,
.smg-news-events-widget:hover::before,
.smg-brands-widget:hover::before,
.smg-quickaccess-widget:hover::before,
.smg-centerplan-widget:hover::before {
    animation-duration: 15s;
    opacity: 1;
}
*/

/* Reduzierte Bewegung für Accessibility */
@media (prefers-reduced-motion: reduce) {
    .smg-services-widget::before,
    .smg-services-widget::after,
    .smg-news-events-widget::before,
    .smg-news-events-widget::after,
    .smg-brands-widget::before,
    .smg-brands-widget::after,
    .smg-quickaccess-widget::before,
    .smg-quickaccess-widget::after,
    .smg-centerplan-widget::before,
    .smg-centerplan-widget::after {
        animation: none;
        opacity: 0.3;
    }
}

/* Intersection Observer Animationen */
.widget-animate-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.widget-animate-in.in-viewport {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation für Widget-Inhalte */
.widget-animate-in.in-viewport .service-card,
.widget-animate-in.in-viewport .news-card,
.widget-animate-in.in-viewport .brand-logo,
.widget-animate-in.in-viewport .quick-access-item {
    animation: fadeInUp 0.6s ease forwards;
}

.widget-animate-in.in-viewport .service-card:nth-child(1) { animation-delay: 0.1s; }
.widget-animate-in.in-viewport .service-card:nth-child(2) { animation-delay: 0.2s; }
.widget-animate-in.in-viewport .service-card:nth-child(3) { animation-delay: 0.3s; }
.widget-animate-in.in-viewport .service-card:nth-child(4) { animation-delay: 0.4s; }

.widget-animate-in.in-viewport .news-card:nth-child(1) { animation-delay: 0.1s; }
.widget-animate-in.in-viewport .news-card:nth-child(2) { animation-delay: 0.2s; }
.widget-animate-in.in-viewport .news-card:nth-child(3) { animation-delay: 0.3s; }

.widget-animate-in.in-viewport .brand-logo:nth-child(1) { animation-delay: 0.05s; }
.widget-animate-in.in-viewport .brand-logo:nth-child(2) { animation-delay: 0.1s; }
.widget-animate-in.in-viewport .brand-logo:nth-child(3) { animation-delay: 0.15s; }
.widget-animate-in.in-viewport .brand-logo:nth-child(4) { animation-delay: 0.2s; }
.widget-animate-in.in-viewport .brand-logo:nth-child(5) { animation-delay: 0.25s; }
.widget-animate-in.in-viewport .brand-logo:nth-child(6) { animation-delay: 0.3s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glasmorphism-Effekte für Karten */
.service-card,
.news-card,
.brand-logo,
.quick-access-item {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Micro-Animationen für Buttons und Links - Using centralized hover system */
/* Note: Add 'suma-btn-hover' class to HTML elements instead of CSS @extend */
.smg-btn,
.service-cta,
.news-events-view-all {
    /* Base styles only - hover effects come from suma-btn-hover class in HTML */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Spezielle Effekte für verschiedene Widget-Typen - Enhanced with centralized system */
/* Note: Add 'suma-card-hover' class to HTML elements for base hover effects */
.smg-services-widget .service-card:hover {
    animation: pulseGlow 2s ease-in-out infinite;
}

.smg-centerplan-widget .smg-centerplan-container:hover {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* Performance-Optimierungen */
.smg-services-widget::before,
.smg-services-widget::after,
.smg-news-events-widget::before,
.smg-news-events-widget::after,
.smg-brands-widget::before,
.smg-brands-widget::after,
.smg-quickaccess-widget::before,
.smg-quickaccess-widget::after,
.smg-centerplan-widget::before,
.smg-centerplan-widget::after {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Highlight-Effekt für Widget-Navigation */
.highlight-widget {
    animation: highlightPulse 2s ease-in-out;
    position: relative;
}

.highlight-widget::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, rgba(227, 30, 36, 0.2), rgba(227, 30, 36, 0.1));
    border-radius: 20px;
    z-index: -1;
    animation: highlightGlow 2s ease-in-out;
}

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

@keyframes highlightGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Animate-Card Klasse für JavaScript */
.animate-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    animation: cardSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cardSlideUp {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-slide-up {
    opacity: 0;
    transform: translateY(50px);
    animation: slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   ANIMATION GESCHWINDIGKEITS-VARIANTEN
   ================================== */

/* Langsame Animationen (60s) */
.smg-animation-slow::before { animation-duration: 60s !important; }
.smg-animation-slow::after { animation-duration: 65s !important; }

/* Normale Animationen (30s) - Standard */
.smg-animation-normal::before { animation-duration: 30s !important; }
.smg-animation-normal::after { animation-duration: 35s !important; }

/* Schnelle Animationen (15s) */
.smg-animation-fast::before { animation-duration: 15s !important; }
.smg-animation-fast::after { animation-duration: 18s !important; }

/* Animationen komplett deaktivieren */
.smg-no-animations::before,
.smg-no-animations::after {
    animation: none !important;
    opacity: 0.1 !important;
}

/* ===================================
   RESPONSIVE ANIMATION ANPASSUNGEN
   ================================== */

/* Auf Mobile Geräten Animationen reduzieren */
@media (max-width: 768px) {
    .smg-services-widget::before,
    .smg-services-widget::after,
    .smg-news-events-widget::before,
    .smg-news-events-widget::after,
    .smg-brands-widget::before,
    .smg-brands-widget::after,
    .smg-quickaccess-widget::before,
    .smg-quickaccess-widget::after,
    .smg-centerplan-widget::before,
    .smg-centerplan-widget::after {
        animation-duration: 45s !important;
        opacity: 0.3 !important;
    }
}

/* Dark Mode Anpassungen - DISABLED
 * Automatic dark mode detection removed to prevent unwanted UI changes
 */