/* animations.css — Entrance reveal animations */

/* ===== ENTRANCE ANIMATIONS ===== */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* .reveal = "I'm an element that wants to animate when scrolled into view"
   .is-visible = "I'm now on screen" (added by main.js on scroll)
   Together they trigger the entrance animation */

/* Initial state: hidden until revealed (prevents flash when animation starts) */
.reveal {
    opacity: 0;
    transform: translateY(24px);
}

.reveal.is-visible {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: both;
}
.reveal.is-visible { animation-name: fadeSlideUp; }
.reveal.reveal-slide-in.is-visible { animation-name: fadeSlideIn; }
.reveal.reveal-scale.is-visible { animation-name: scaleFadeIn; }

.reveal-stagger > .reveal.is-visible {
    animation-delay: calc(var(--stagger-index, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
    .reveal.is-visible,
    .reveal.reveal-slide-in.is-visible,
    .reveal.reveal-scale.is-visible,
    .work-tab-panel.is-active {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .curtain-stack-card,
    .album-flip-card-inner,
    .cascade-item,
    .service-card,
    .package-card,
    .package-tile,
    .split-work-thumb,
    .stack-row,
    .folder,
    .spine {
        transition: none !important;
    }
}