/* ============================================================
   ET StromFluss — Shared Motion System (Phase 4)
   Only transform/opacity — no layout-affecting animation, no
   heavy libraries. Respects prefers-reduced-motion and degrades
   safely with no JS (see the <noscript> rule shipped per page).
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Staggered card reveal: nth-child delay steps, capped so long grids don't feel sluggish */
.card-grid.reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.card-grid.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.card-grid.reveal-stagger.in > *:nth-child(1) { transition-delay: .02s; }
.card-grid.reveal-stagger.in > *:nth-child(2) { transition-delay: .08s; }
.card-grid.reveal-stagger.in > *:nth-child(3) { transition-delay: .14s; }
.card-grid.reveal-stagger.in > *:nth-child(4) { transition-delay: .20s; }
.card-grid.reveal-stagger.in > *:nth-child(n+5) { transition-delay: .24s; }

/* Timeline (Projektablauf) connecting-line draw */
.steps-row { position: relative; }
.steps-row .step-line {
    position: absolute; top: 20px; left: 0; right: 0; height: 2px;
    background: var(--border); z-index: 0;
    transform: scaleX(0); transform-origin: left; transition: transform 1s ease;
}
.steps-row.in .step-line { transform: scaleX(1); }

.btn { position: relative; overflow: hidden; }
.btn-pr::after {
    content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transform: skewX(-20deg); transition: left .65s ease;
}
.btn-pr:hover::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .card-grid.reveal-stagger > *, .steps-row .step-line,
    .hero-g > div:first-child, .hero-right-card {
        opacity: 1 !important; transform: none !important;
        animation: none !important; transition: none !important;
    }
}

/* Reduce motion cost on low-power / small mobile viewports: fewer staggered steps */
@media (max-width: 480px) {
    .card-grid.reveal-stagger.in > *:nth-child(n) { transition-delay: 0s !important; }
}