@casoon/dragonfly/effects/visual/reflections.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Reflexionseffekte
 * 
 * Diese Datei enthält verschiedene Reflexionseffekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@keyframes reflection-shine {
    0% { transform: scaleY(-1%) translateY(0%); }

    50% { transform: scaleY(-1%) translateY(var(--spacing-2-5)); }

    100% { transform: scaleY(-1%) translateY(0%); }
}

@layer components {
    .reflection {
        overflow: hidden;
        position: relative;
    }

    .reflection::after {
        background: linear-gradient(
            to bottom,
            transparent,
            var(--reflection-color, rgb(255 255 255 / 20%))
        );
        content: '';
        inset: 0;
        opacity: var(--opacity-50);
        pointer-events: none;
        position: absolute;
        transform: scaleY(-1%);
    }

    .reflection-strong::after {
        background: linear-gradient(
            to bottom,
            transparent,
            var(--reflection-color, rgb(255 255 255 / 0.4))
        );
        opacity: var(--opacity-70);
    }

    .reflection-soft::after {
        background: linear-gradient(
            to bottom,
            transparent,
            var(--reflection-color, rgb(255 255 255 / 10%))
        );
        opacity: var(--opacity-30);
    }

    .reflection-color::after {
        background: linear-gradient(
            to bottom,
            transparent,
            var(--reflection-color, rgb(255 255 255 / 20%))
        );
        mix-blend-mode: overlay;
    }

    .reflection-hover:hover::after {
        animation: reflection-shine 2s infinite;
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .reflection-hover:hover::after {
            animation: var(--animation-none);
        }
    }
}