/* ============================================================
   ARTAWEB -- Animations
   Scroll Reveals, Transitions, Parallax
   ============================================================ */

/* ----------------------------------------------------------
   Scroll Reveal Base
   Elements start hidden and reveal when entering viewport.
   The .is-visible class is added by scroll.js via IntersectionObserver.
   ---------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Staggered delays for child elements */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.45s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.6s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.75s; }

/* ----------------------------------------------------------
   Reveal Variants
   ---------------------------------------------------------- */
.reveal--fade {
    transform: none;
}

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

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

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

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

.reveal--scale {
    transform: scale(0.95);
}

.reveal--scale.is-visible {
    transform: scale(1);
}

/* ----------------------------------------------------------
   Section Label Reveal (underline grow)
   ---------------------------------------------------------- */
.section__label {
    position: relative;
    display: inline-block;
}

.section__label::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-accent);
    transition: width 0.6s ease 0.3s;
}

.is-visible .section__label::after,
.reveal.is-visible .section__label::after {
    width: 100%;
}

/* ----------------------------------------------------------
   Image Reveal (clip-path)
   ---------------------------------------------------------- */
.reveal-image {
    overflow: hidden;
}

.reveal-image img {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.reveal-image.is-visible img {
    clip-path: inset(0 0 0 0);
}

/* ----------------------------------------------------------
   Parallax Layer (subtle, handled by scroll.js)
   ---------------------------------------------------------- */
.parallax-layer {
    will-change: transform;
}

/* ----------------------------------------------------------
   Hover lift for interactive cards
   ---------------------------------------------------------- */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Lock body scroll while intro runs */
body.intro-running {
    overflow: hidden;
}

/* ----------------------------------------------------------
   Reduced Motion
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .reveal-image img {
        clip-path: none;
        transition: none;
    }

    .hero__scroll-line {
        animation: none;
    }

    .parallax-layer {
        will-change: auto;
    }

    /* Skip the intro overlay entirely if motion is reduced */
    .intro {
        display: none !important;
    }
}