/**
 * Globale leichte Motion für Tailwind-Templates.
 * Nutzung: class="tw-reveal" + data-tw-reveal
 * Hero/Above-the-fold: class="tw-reveal tw-reveal--immediate" (+ optional --delay-*)
 */
.tw-reveal {
    opacity: 0;
    transform: translateY(0.85rem);
    transition:
        opacity 0.55s ease-out,
        transform 0.55s ease-out;
}

.tw-reveal.is-in {
    opacity: 1;
    transform: none;
}

.tw-reveal--immediate {
    opacity: 0;
    transform: translateY(0.85rem);
    animation: tw-reveal-rise 0.65s ease-out both;
}

.tw-reveal--delay-1 {
    transition-delay: 0.08s;
    animation-delay: 0.08s;
}

.tw-reveal--delay-2 {
    transition-delay: 0.16s;
    animation-delay: 0.16s;
}

.tw-reveal--delay-3 {
    transition-delay: 0.24s;
    animation-delay: 0.24s;
}

.tw-reveal--delay-4 {
    transition-delay: 0.32s;
    animation-delay: 0.32s;
}

.tw-reveal--delay-5 {
    transition-delay: 0.4s;
    animation-delay: 0.4s;
}

@keyframes tw-reveal-rise {
    from {
        opacity: 0;
        transform: translateY(0.85rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tw-reveal,
    .tw-reveal--immediate {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}

/* Lazy-Grid: Sichtbarkeit über [hidden], erste Batch ohne JS sichtbar */
[x-cloak] {
    display: none !important;
}

.tw-lazy-sentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
}

.tw-lazy-more-wrap[hidden],
.tw-lazy-item[hidden] {
    display: none !important;
}

.tw-lazy-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.55rem 1.25rem;
    border: 1px solid color-mix(in oklab, var(--color-primary, #f49631) 55%, transparent);
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.tw-lazy-more:hover {
    border-color: var(--color-primary, #f49631);
    background: color-mix(in oklab, var(--color-primary, #f49631) 12%, transparent);
}

.tw-lazy-item {
    content-visibility: auto;
    contain-intrinsic-size: 320px;
}