/*--------------------------------------------------------------
# Scroll Reveal — text entrance animation
Lightweight, dependency-free scroll-triggered reveal used on
Home.aspx headings, paragraphs and card groups. Paired with
assets/js/scroll-reveal.js (IntersectionObserver).
--------------------------------------------------------------*/

/* Simple fade + rise block reveal (paragraphs, images, cards) */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

.reveal-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Word-by-word "text entering" reveal for headings */
.reveal-words {
    display: block;
    overflow: hidden;
}

.reveal-words .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.15em;
    margin-bottom: -0.15em;
}

.reveal-words .word-inner {
    display: inline-block;
    transform: translateY(115%);
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: calc(var(--i, 0) * 60ms);
}

.reveal-words.in-view .word-inner {
    transform: translateY(0);
}

/* Staggered reveal for a row/group of direct-child cards */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--i, 0) * 90ms);
}

.reveal-stagger.in-view > * {
    opacity: 1;
    transform: translateY(0);
}

/* Side-entrance reveal — pair a ".reveal-left" text column with a
   ".reveal-right" image column (or vice-versa) so each slides in
   from the side it visually sits on, meeting in the middle. */
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

.reveal-left {
    transform: translateX(-70px);
}

.reveal-right {
    transform: translateX(70px);
}

.reveal-left.in-view,
.reveal-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 991px) {
    /* On stacked mobile layouts a subtle rise reads better than a full side slide */
    .reveal-left,
    .reveal-right {
        transform: translateY(40px);
    }

    .reveal-left.in-view,
    .reveal-right.in-view {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-words .word-inner,
    .reveal-stagger > *,
    .reveal-left,
    .reveal-right {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}