/* Angebote Block - Swiper Styles */

.angebote-fullpage-slider {
    @apply w-full overflow-hidden;
}

.angebote-fullpage-slider .swiper-slide {
    @apply flex items-center justify-center h-full;
    pointer-events: none;
}

.angebote-fullpage-slider .swiper-slide-active {
    pointer-events: auto;
}

/* Nicht-aktive Slides: Content ausblenden */
.angebote-fullpage-slider .swiper-slide:not(.swiper-slide-active) .offer-slide-content {
    opacity: 0;
    pointer-events: none;
}

.angebote-fullpage-slider .swiper-slide-active .offer-slide-content {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Custom Navigation Buttons */
.angebote-fullpage-slider .swiper-button-prev,
.angebote-fullpage-slider .swiper-button-next {
    @apply text-gray-900 bg-white/90 w-[60px] h-[60px] rounded-full shadow-md transition-all duration-300;
}

.angebote-fullpage-slider .swiper-button-prev:hover,
.angebote-fullpage-slider .swiper-button-next:hover {
    @apply bg-white scale-110;
}

.angebote-fullpage-slider .swiper-button-prev::after,
.angebote-fullpage-slider .swiper-button-next::after {
    @apply text-2xl font-bold;
}

/* Custom Pagination */
.angebote-fullpage-slider .swiper-pagination {
    @apply bottom-[30px];
}

.angebote-fullpage-slider .swiper-pagination-bullet {
    @apply w-3 h-3 bg-white/50 opacity-100 transition-all duration-300;
}

.angebote-fullpage-slider .swiper-pagination-bullet-active {
    @apply bg-white w-10 rounded-md;
}

/* View Transition Animations */
::view-transition-group(angebote-*) {
    overflow: clip;
}

::view-transition-old(angebote-*) {
    animation: fade-slide-out 0.4s ease-out;
}

::view-transition-new(angebote-*) {
    animation: fade-slide-in 0.4s ease-out;
}

@keyframes fade-slide-out {
    from {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    to {
        transform: translateX(-100px) scale(0.95);
        opacity: 0;
    }
}

@keyframes fade-slide-in {
    from {
        transform: translateX(100px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* ============================================
   KOMPLEXE SLIDE ANIMATION
   Gestaffelte Animation mit Bounce-Effekt
   Optimiert für Swiper Fade-Effekt
   ============================================ */

/* Initiale Zustände: Alle Elemente unsichtbar */
.offer-slide-content,
.offer-slide-title,
.offer-slide-description,
.offer-slide-price,
.offer-slide-date,
.offer-slide-button {
    opacity: 0;
}

/* Reset für nicht-aktive Slides */
.angebote-fullpage-slider .swiper-slide-prev .offer-slide-content,
.angebote-fullpage-slider .swiper-slide-next .offer-slide-content,
.angebote-fullpage-slider .swiper-slide-prev .offer-slide-title,
.angebote-fullpage-slider .swiper-slide-next .offer-slide-title,
.angebote-fullpage-slider .swiper-slide-prev .offer-slide-description,
.angebote-fullpage-slider .swiper-slide-next .offer-slide-description,
.angebote-fullpage-slider .swiper-slide-prev .offer-slide-price,
.angebote-fullpage-slider .swiper-slide-next .offer-slide-price,
.angebote-fullpage-slider .swiper-slide-prev .offer-slide-date,
.angebote-fullpage-slider .swiper-slide-next .offer-slide-date,
.angebote-fullpage-slider .swiper-slide-prev .offer-slide-button,
.angebote-fullpage-slider .swiper-slide-next .offer-slide-button {
    animation: none !important;
    opacity: 1;
    transform: none;
}

/* 1. Slide-Container: Fade-In Grundbewegung */
.angebote-fullpage-slider .swiper-slide-active {
    animation: slideBaseFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideBaseFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 3. Content-Kachel: Skalierung von 0.8 auf 1.0 (synchron mit Bild) */
.offer-slide-content {
    will-change: transform, opacity;
}

.angebote-fullpage-slider .swiper-slide-active .offer-slide-content {
    animation: contentScaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes contentScaleIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1.0);
        opacity: 1;
    }
}

/* 4. Text-Elemente: Verzögertes Einfaden von oben (nach Scaling) */
.offer-slide-title,
.offer-slide-description {
    will-change: transform, opacity;
}

.angebote-fullpage-slider .swiper-slide-active .offer-slide-title {
    animation: textFadeInDown 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

.angebote-fullpage-slider .swiper-slide-active .offer-slide-description {
    animation: textFadeInDown 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

@keyframes textFadeInDown {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 5. Preis & Datum: Subtiler Bounce-Effekt (scale 0 → 1.02 → 1.0) */
.offer-slide-price,
.offer-slide-date {
    will-change: transform, opacity;
}

.angebote-fullpage-slider .swiper-slide-active .offer-slide-price {
    animation: bounceScaleIn 0.6s cubic-bezier(0.34, 1.1, 0.64, 1) 0.7s forwards;
}

.angebote-fullpage-slider .swiper-slide-active .offer-slide-date {
    animation: bounceScaleIn 0.6s cubic-bezier(0.34, 1.1, 0.64, 1) 0.75s forwards;
}

@keyframes bounceScaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.005);
        opacity: 1;
    }
    100% {
        transform: scale(1.0);
        opacity: 1;
    }
}

/* 6. Button: Verzögertes Erscheinen */
.offer-slide-button {
    will-change: transform, opacity;
}

.offer-slide-button a,
.offer-slide-button a:hover,
.offer-slide-button a:focus {
    color: white !important;
}

.angebote-fullpage-slider .swiper-slide-active .offer-slide-button {
    animation: buttonFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards;
}

@keyframes buttonFadeIn {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Performance-Optimierung: GPU-Beschleunigung */
.offer-slide-content,
.offer-slide-title,
.offer-slide-description,
.offer-slide-price,
.offer-slide-date,
.offer-slide-button {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .angebote-fullpage-slider .swiper-button-prev,
    .angebote-fullpage-slider .swiper-button-next {
        @apply w-10 h-10;
    }
    
    .angebote-fullpage-slider .swiper-button-prev::after,
    .angebote-fullpage-slider .swiper-button-next::after {
        @apply text-lg;
    }
    
    /* Schnellere Animationen auf Mobile */
    .swiper-slide-active .offer-slide-content {
        animation-duration: 0.5s;
    }
    
    .swiper-slide-active .offer-slide-title,
    .swiper-slide-active .offer-slide-description,
    .swiper-slide-active .offer-slide-price,
    .swiper-slide-active .offer-slide-date,
    .swiper-slide-active .offer-slide-button {
        animation-duration: 0.4s;
    }
}