/**
 * CuiveMedia Products Page Animation Styles
 * Animated Hero & Service Cards with Anime.js
 */

/* ========================================
   ANIMATED HERO WITH BACKGROUND IMAGE
   ======================================== */

.products-hero {
    position: relative;
    overflow: hidden;
    /* Hintergrundbild beibehalten */
    background: url('../images/products/hero-bg.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Animiertes Gradient-Overlay über dem Bild */
.products-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(-45deg,
        rgba(204, 51, 0, 0.85),
        rgba(153, 0, 0, 0.8),
        rgba(100, 20, 20, 0.85),
        rgba(204, 51, 0, 0.8),
        rgba(180, 40, 10, 0.85),
        rgba(153, 0, 0, 0.8)
    );
    background-size: 400% 400%;
    animation: heroGradientShift 12s ease infinite;
    pointer-events: none;
}

@keyframes heroGradientShift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Lichteffekte und Akzente */
.products-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(255, 200, 150, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
    animation: heroAccentPulse 6s ease-in-out infinite;
    pointer-events: none;
}

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

/* Hero content z-index */
.products-hero .container {
    position: relative;
    z-index: 1;
}

/* Hero letter styling für Anime.js */
.hero-letter {
    display: inline-block;
    will-change: transform, opacity;
}

/* ========================================
   SERVICE CARDS ENHANCED ANIMATIONS
   ======================================== */

.service-card {
    will-change: transform, box-shadow, opacity;
    perspective: 1000px;
}

/* Glowing border effect on hover */
.service-card::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        transparent,
        rgba(204, 51, 0, 0.3),
        transparent,
        rgba(204, 51, 0, 0.3)
    );
    background-size: 400% 400%;
    border-radius: 1rem;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover::after {
    opacity: 1;
    animation: borderGlow 3s ease infinite;
}

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

/* Service icon floating animation */
.service-icon {
    position: relative;
}

.service-icon img {
    will-change: transform;
}

/* Icon glow effect */
.service-card:hover .service-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(204, 51, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: iconGlowPulse 2s ease-in-out infinite;
}

@keyframes iconGlowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.5;
    }
}

/* Service title underline animation */
.service-title::after {
    transition: width 0.4s ease;
}

.service-card:hover .service-title::after {
    width: 100px;
}

/* List items stagger animation */
.service-details li {
    will-change: transform, opacity;
}

/* Service link ripple effect */
.service-link {
    position: relative;
    overflow: hidden;
}

.service-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(204, 51, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.service-link:hover::before {
    width: 300px;
    height: 300px;
}

/* ========================================
   CTA SECTION ANIMATIONS
   ======================================== */

.cta-section {
    position: relative;
    overflow: hidden;
}

/* Animated gradient overlay for CTA */
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(-45deg,
        rgba(204, 51, 0, 0.9),
        rgba(153, 0, 0, 0.85),
        rgba(180, 40, 10, 0.9),
        rgba(204, 51, 0, 0.85)
    );
    background-size: 300% 300%;
    animation: ctaGradientShift 8s ease infinite;
    pointer-events: none;
    z-index: 0;
}

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

/* Light streaks effect */
.cta-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        transparent 60%
    );
    animation: ctaLightStreak 6s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes ctaLightStreak {
    0% {
        transform: translateX(-30%) translateY(-30%) rotate(45deg);
    }
    100% {
        transform: translateX(30%) translateY(30%) rotate(45deg);
    }
}

.cta-section > * {
    position: relative;
    z-index: 1;
}

/* CTA button pulse */
.cta-section .cta-button {
    position: relative;
    animation: ctaButtonPulse 2s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes ctaButtonPulse {
    0%, 100% {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 0 15px rgba(255, 255, 255, 0);
    }
}

/* ========================================
   SCROLL REVEAL ANIMATIONS
   ======================================== */

.services-container {
    will-change: transform, opacity;
}

/* Section title animation */
.page-title {
    will-change: transform, opacity;
}

.intro-text {
    will-change: transform, opacity;
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .products-hero::before {
        animation: none;
        background: rgba(204, 51, 0, 0.85);
    }

    .cta-section::before {
        animation: none;
    }

    .cta-section::after {
        display: none;
    }
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    .products-hero::after,
    .cta-section::after {
        display: none; /* Disable light effects on mobile for performance */
    }

    .products-hero {
        background-attachment: scroll; /* Disable parallax on mobile */
    }

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