/* 
   ============================================================================
   STICKY HEADER - Bleibt oben während Card-Stack scrollt
   JavaScript-gesteuert wegen Lenis Smooth Scroll Kompatibilität
   ============================================================================
*/

/* Wichtig: Services-Container darf kein overflow:hidden haben */
.services {
    overflow: visible !important;
}

.services .container {
    overflow: visible !important;
}

/* Basis-Styles für den Section Header */
.services .section-header {
    /* Header folgt der ersten Card via JavaScript transform */
    position: relative;
    will-change: transform;
    transition: none;
    z-index: 500;
}

/* 
   ============================================================================
   SCROLL STACK CONTAINER
   ============================================================================
*/

.scroll-stack-scroller {
    position: relative;
    width: 100%;
}

.scroll-stack-inner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-stack-card {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin-bottom: 100px;
    /* Will be overridden by JS */
    will-change: transform;
    transform-origin: top center;

    /* CRITICAL: Disable transitions to allow instant JS updates */
    transition: none !important;
}

.scroll-stack-end {
    height: 1px;
    width: 100%;
    visibility: hidden;
}

/* Ensure service cards look good in the stack */
.service-card.scroll-stack-card {
    margin-left: auto;
    margin-right: auto;
    background: white;
    z-index: 1;
    /* Base z-index, JS will increase this */

    /* NUCLEAR OPTION: Completely disable ANY hover-related transitions/effects */
    transition: none !important;
    pointer-events: auto !important;
    /* Keep clickable but... */
}

/* Force all pseudo-elements to also have no transitions */
.service-card.scroll-stack-card::before,
.service-card.scroll-stack-card::after {
    transition: none !important;
}

/* Re-enable transition ONLY for the orange line */
.service-card.scroll-stack-card::before {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Lock all child elements too */
.service-card.scroll-stack-card *,
.service-card.scroll-stack-card .service-icon {
    transition: none !important;
}

/* 
   ============================================================================
   DISABLE ALL HOVER EFFECTS
   WICHTIG: Keine transform-Property bei Hover setzen - das kollidiert mit JS!
   ============================================================================
*/

.service-card.scroll-stack-card:hover {
    /* KEINE transform hier! Das würde mit dem JavaScript kollidieren */
    box-shadow: var(--shadow-md) !important;
    border-color: var(--gray-200) !important;
}

.service-card.scroll-stack-card:hover .service-icon {
    /* KEINE transform hier - Icon wird nur durch is-active gesteuert */
}

.service-card.scroll-stack-card:hover::after {
    /* Glow bei Hover deaktiviert - wird nur durch is-active gesteuert */
}

/* 
   ============================================================================
   ACTIVE STATE - Orange Line
   ============================================================================
*/

/* Show orange line when active */
.service-card.scroll-stack-card.is-active::before {
    transform: scaleX(1) !important;
}

/* Ensure hover does NOT affect the orange line when active */
.service-card.scroll-stack-card.is-active:hover::before {
    transform: scaleX(1) !important;
}

/* Hide orange line when NOT active */
.service-card.scroll-stack-card:not(.is-active)::before,
.service-card.scroll-stack-card:not(.is-active):hover::before {
    transform: scaleX(0) !important;
}

/* 
   ============================================================================
   ACTIVE STATE - Icon Animation
   Rotation & Scale NUR wenn Karte in Ansicht gescrollt wird
   ============================================================================
*/

.service-card.scroll-stack-card.is-active .service-icon {
    transform: scale(1.1) rotateY(360deg) !important;
    filter: grayscale(0) !important;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                filter 0.5s ease !important;
}

.service-card.scroll-stack-card:not(.is-active) .service-icon {
    transform: none !important;
    filter: grayscale(0.3) !important;
    transition: transform 0.5s ease, filter 0.3s ease !important;
}

/* 
   ============================================================================
   ACTIVE STATE - Glow Effect
   Glow NUR wenn Karte in Ansicht gescrollt wird
   ============================================================================
*/

.service-card.scroll-stack-card.is-active::after {
    opacity: 1 !important;
    transition: opacity 0.5s ease !important;
}

.service-card.scroll-stack-card:not(.is-active)::after {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}