/* =============================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================= */

/* Initial hidden state */
.anim-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--anim-duration) ease,
                transform var(--anim-duration) ease;
}

/* Visible state (added by IntersectionObserver) */
.anim-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children delays */
.anim-stagger > .anim-reveal:nth-child(1).is-visible { transition-delay: 0s; }
.anim-stagger > .anim-reveal:nth-child(2).is-visible { transition-delay: 0.1s; }
.anim-stagger > .anim-reveal:nth-child(3).is-visible { transition-delay: 0.2s; }
.anim-stagger > .anim-reveal:nth-child(4).is-visible { transition-delay: 0.3s; }
.anim-stagger > .anim-reveal:nth-child(5).is-visible { transition-delay: 0.4s; }
.anim-stagger > .anim-reveal:nth-child(6).is-visible { transition-delay: 0.5s; }
.anim-stagger > .anim-reveal:nth-child(7).is-visible { transition-delay: 0.6s; }
.anim-stagger > .anim-reveal:nth-child(8).is-visible { transition-delay: 0.7s; }
.anim-stagger > .anim-reveal:nth-child(9).is-visible { transition-delay: 0.8s; }

/* Hero seal - scale bounce */
.hero__seal-img {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero__seal-img.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Hero rope - slide down */
.hero__rope {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Fade in from left variant */
.anim-reveal--left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity var(--anim-duration) ease,
                transform var(--anim-duration) ease;
}

.anim-reveal--left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade in from right variant */
.anim-reveal--right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity var(--anim-duration) ease,
                transform var(--anim-duration) ease;
}

.anim-reveal--right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* No-JS fallback */
noscript + .content-panel .anim-reveal,
noscript + .content-panel .hero__seal-img,
noscript + .content-panel .hero__rope {
    opacity: 1;
    transform: none;
}