/* ============================================= */
/* Basis-Styles – immer vorhanden                */
/* ============================================= */
.mobile-section-transition {
    position: relative;
    text-align: center;
    margin-top: 20px;
}

.transition-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1.2rem;
	/* always visible — only rotate (no fade/scale) */
	opacity: 1;
    transform: perspective(400px) rotateY(0deg);
    transform-origin: center;
}

.transition-line {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-primary, #087a35), transparent);
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: center;
    transition: opacity 0.9s ease-out 0.2s, transform 1.1s cubic-bezier(0.22,1,0.36,1);
}

/* ============================================= */
/* Progressive Enhancement – nur wenn unterstützt */
/* ============================================= */

@supports (animation-timeline: view()) {
    .transition-icon {
        opacity: 1;                    /* sofort sichtbar */
        animation: iconSpin 0.6s both;
        animation-timeline: view();
        animation-range: entry 20% cover 60%;
    }

    @keyframes iconSpin {
        to { transform: perspective(400px) rotateY(360deg); }
    }

    .transition-line {
        animation: revealLine 1.3s both;
        animation-timeline: view();
        animation-range: entry 15% cover 65%;
    }

    @keyframes revealLine {
        to {
            opacity: 1;
            transform: scaleX(1);
        }
    }
}

/* ============================================= */
/* Fallback – Zeit-basierte sanfte Enthüllung     */
/* ============================================= */

@supports not (animation-timeline: view()) {
    /* Icon wird beim Erscheinen gedreht + sichtbar */
    .transition-icon.is-visible {
        opacity: 1;
        animation: iconSpinFallback 1.3s cubic-bezier(0.22,1,0.36,1) forwards;
    }

    @keyframes iconSpinFallback {
        from { transform: perspective(400px) rotateY(0deg);   opacity: 0.3; }
        to   { transform: perspective(400px) rotateY(360deg); opacity: 1;   }
    }

    /* Linie fade + scale */
    .transition-line.is-visible {
        opacity: 1;
        transform: scaleX(1);
    }
}