/* ===========================================================
   Brikka — Reveal- & Bounce-Animationen
   Elemente mit .reveal starten unsichtbar und werden via JS
   (IntersectionObserver) animiert, sobald sie in den Viewport kommen.
   =========================================================== */

/* ---------- Reveal (Standard: von unten einblenden) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 650ms var(--ease-out),
                transform 650ms var(--ease-bounce);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Varianten */
.reveal--left  { transform: translateX(-40px) rotate(-3deg); }
.reveal--left.is-visible  { transform: translateX(0) rotate(0); }

.reveal--right { transform: translateX(40px) rotate(3deg); }
.reveal--right.is-visible { transform: translateX(0) rotate(0); }

.reveal--scale {
    transform: scale(0.80);
    transition-timing-function: var(--ease-bounce);
}
.reveal--scale.is-visible { transform: scale(1); }

.reveal--bounce {
    transform: translateY(70px) scale(0.55);
    transition: opacity 700ms var(--ease-out),
                transform 750ms var(--ease-bounce);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal--bounce.is-visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Drop-In für Klötze (für dynamisch gerenderte Inhalte) */
.reveal--drop {
    opacity: 0;
    transform: translateY(-80px) rotate(180deg);
}
.reveal--drop.is-visible {
    opacity: 1;
    transform: translateY(0) rotate(0);
    transition: opacity 500ms var(--ease-out),
                transform 700ms var(--ease-bounce);
}

/* Pop von oben — z.B. für Badges */
.reveal--pop {
    opacity: 0;
    transform: scale(0.4) translateY(-20px);
    transition: opacity 500ms var(--ease-out),
                transform 600ms var(--ease-spring);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal--pop.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Fade-Only — für subtilere Elemente */
.reveal--fade {
    opacity: 0;
    transform: none;
    transition: opacity 800ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal--fade.is-visible {
    opacity: 1;
}

/* ===========================================================
   TILT / PARALLAX — 3D Neigung per Mouse
   Klassen werden per JS auf Data-Attributen gesetzt
   =========================================================== */
[data-tilt] {
    transform-style: preserve-3d;
    transition: transform 80ms linear, box-shadow var(--t-fast) var(--ease-out);
    will-change: transform;
}

/* ===========================================================
   SHIMMER — Lade-Glanz-Effekt für Hero-Logo beim ersten Laden
   =========================================================== */
@keyframes shimmer-pass {
    0%   { transform: translateX(-120%) skewX(-20deg); }
    100% { transform: translateX(220%) skewX(-20deg); }
}

.shimmer-once::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    animation: shimmer-pass 0.7s var(--ease-out) forwards;
    pointer-events: none;
    z-index: 2;
}

/* ===========================================================
   CURSOR-TRAIL DOTS
   =========================================================== */
.cursor-dot {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    animation: cursor-pop 0.5s var(--ease-bounce) forwards;
}

@keyframes cursor-pop {
    0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(0.4); }
    60%  { opacity: 0.6; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.6) translateY(-20px); }
}

@media (hover: none) {
    .cursor-dot { display: none; }
}

/* ===========================================================
   STAGGER HELPERS
   Per inline --reveal-delay gesteuert (via JS)
   =========================================================== */
.stagger-children > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms var(--ease-out),
                transform 500ms var(--ease-bounce);
    transition-delay: var(--stagger-delay, 0ms);
}

.stagger-children.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================================
   Reduced Motion
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal--left,
    .reveal--right,
    .reveal--scale,
    .reveal--bounce,
    .reveal--drop,
    .reveal--pop,
    .reveal--fade {
        opacity: 1;
        transform: none;
        transition: none;
    }

    [data-tilt] {
        transform: none !important;
    }

    .cursor-dot {
        display: none;
    }
}