/* cu-reveal — self-hosted entrance animations for Pages/Components/Animation.razor.
   Replaces the AOS library that used to load from unpkg.com. Production CSP has no unpkg origin in
   style-src, so aos.css was blocked on every page while aos.js still loaded from the CDN; the
   animations were dead in production and the site carried an external render dependency that a PWA
   should not have. Widening the CSP was the wrong trade, so the ~20 decorative transforms live here.

   Safety: this is pure CSS with animation-fill-mode: both. There is no observer and no JS, so a
   revealed element cannot be stranded at opacity 0 by a script failure the way [data-aos] can. If
   this stylesheet fails to load at all, content simply renders with no animation.

   Duration / delay / easing come in as inline custom properties set by Animation.razor. */

.cu-reveal {
    animation-name: cu-reveal-enter;
    animation-duration: var(--cu-reveal-duration, 600ms);
    animation-timing-function: var(--cu-reveal-easing, cubic-bezier(0.215, 0.61, 0.355, 1));
    animation-delay: var(--cu-reveal-delay, 0ms);
    animation-fill-mode: both;
}

@keyframes cu-reveal-enter {
    from {
        opacity: 0;
        transform: var(--cu-reveal-from, none);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cu-reveal {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* —— Starting transforms, one per FadeType —— */
.cu-reveal--fade {
    --cu-reveal-from: none;
}

.cu-reveal--fade-up {
    --cu-reveal-from: translate3d(0, 100px, 0);
}

.cu-reveal--fade-down {
    --cu-reveal-from: translate3d(0, -100px, 0);
}

.cu-reveal--fade-left {
    --cu-reveal-from: translate3d(100px, 0, 0);
}

.cu-reveal--fade-right {
    --cu-reveal-from: translate3d(-100px, 0, 0);
}

.cu-reveal--fade-up-right {
    --cu-reveal-from: translate3d(-100px, 100px, 0);
}

.cu-reveal--fade-up-left {
    --cu-reveal-from: translate3d(100px, 100px, 0);
}

.cu-reveal--flip-left {
    --cu-reveal-from: perspective(2500px) rotateY(-100deg);
}

.cu-reveal--flip-right {
    --cu-reveal-from: perspective(2500px) rotateY(100deg);
}

.cu-reveal--flip-up {
    --cu-reveal-from: perspective(2500px) rotateX(-100deg);
}

.cu-reveal--flip-down {
    --cu-reveal-from: perspective(2500px) rotateX(100deg);
}

.cu-reveal--zoom-in {
    --cu-reveal-from: scale(0.6);
}

.cu-reveal--zoom-in-up {
    --cu-reveal-from: translate3d(0, 100px, 0) scale(0.6);
}

.cu-reveal--zoom-in-down {
    --cu-reveal-from: translate3d(0, -100px, 0) scale(0.6);
}

.cu-reveal--zoom-in-left {
    --cu-reveal-from: translate3d(100px, 0, 0) scale(0.6);
}

.cu-reveal--zoom-in-right {
    --cu-reveal-from: translate3d(-100px, 0, 0) scale(0.6);
}

.cu-reveal--zoom-out {
    --cu-reveal-from: scale(1.2);
}

.cu-reveal--zoom-out-up {
    --cu-reveal-from: translate3d(0, 100px, 0) scale(1.2);
}

.cu-reveal--zoom-out-down {
    --cu-reveal-from: translate3d(0, -100px, 0) scale(1.2);
}

.cu-reveal--zoom-out-left {
    --cu-reveal-from: translate3d(100px, 0, 0) scale(1.2);
}

.cu-reveal--zoom-out-right {
    --cu-reveal-from: translate3d(-100px, 0, 0) scale(1.2);
}