/* =============================================
   ANIMATIONS
   Link this AFTER main.css on every page:
   <link rel="stylesheet" href="css/animations.css">
   Also link animations.js before </body>:
   <script src="js/animations.js"></script>
============================================= */

/* =============================================
   PAGE LOAD — NAV FADE IN
============================================= */

nav {
    animation: fadeDown 0.5s ease both;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   HERO — STAGGERED ENTRANCE
============================================= */

.hero-text h1 {
    animation: fadeUp 0.7s ease 0.1s both;
}

.hero-text .subheading {
    animation: fadeUp 0.7s ease 0.25s both;
}
/*
.photo-collage .collage-center {
    animation: fadeUp 0.7s ease 0.15s both;
}

.photo-collage .collage-left {
    animation: fadeUp 0.7s ease 0.25s both;
}

.photo-collage .collage-right {
    animation: fadeUp 0.7s ease 0.35s both;
}
*/
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Note: collage-left and collage-right have
   their own transform (rotate). The fadeUp
   animation only fires on load — after it
   completes the element returns to its CSS
   transform rule naturally. */

/* =============================================
   SCROLL REVEAL — BASE STATE
   Elements start invisible. The JS adds
   .is-visible to trigger the transition.
============================================= */

.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Stagger delay variants for grid children */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* =============================================
   ABOUT SECTION — SLIDE IN
============================================= */

.about-text.reveal {
    transform: translateX(-24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

.about-button.reveal,
.about-image.reveal {
    transform: translateX(24px);
    transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}

.about-button.reveal.is-visible,
.about-image.reveal.is-visible {
    transform: translateX(0);
}

/* =============================================
   WORKS TITLE — LETTER SPACING EXPAND
============================================= */

.works-title.reveal {
    opacity: 0;
    letter-spacing: 4px;
    transition: opacity 0.8s ease, letter-spacing 0.8s ease;
    transform: none;
}

.works-title.reveal.is-visible {
    opacity: 1;
    letter-spacing: 10px;
}

/* =============================================
   GALLERY / PROJECT CARDS — STAGGER
============================================= */

.gallery-item.reveal,
.project-card.reveal,
.photo-item.reveal {
    transform: translateY(20px);
}

/* =============================================
   PAGE HEADER — TITLE ENTRANCE
============================================= */

.page-title.reveal {
    opacity: 0;
    letter-spacing: 6px;
    transition: opacity 0.8s ease, letter-spacing 0.9s ease;
    transform: none;
}

.page-title.reveal.is-visible {
    opacity: 1;
    letter-spacing: 14px;
}

/* =============================================
   PROJECT DETAIL — HEADER ENTRANCE
============================================= */

.project-tag.reveal {
    transition-delay: 0s;
}

.project-detail-title.reveal {
    transition-delay: 0.12s;
}

.project-byline.reveal {
    transition-delay: 0.22s;
}

.back-link.reveal {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

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

/* =============================================
   BANNER TITLE — FADE IN FROM BELOW
============================================= */

.banner-title.reveal {
    transition-delay: 0.2s;
}

/* =============================================
   SEE MORE SECTION
============================================= */

.see-more-title.reveal {
    transition-delay: 0s;
}

/* =============================================
   SMOOTH IMAGE LOAD FADE
   Prevents jarring pop-in on slower connections
============================================= */

img {
    transition: opacity 0.3s ease;
}