﻿// =========================================================
// REVEAL ON SCROLL
// =========================================================

const revealElements = document.querySelectorAll(
    '.nr-card, .nr-text-block, .nr-image-wrapper, .nr-commitment-box, .nr-cta'
);



// =========================================================
// INTERSECTION OBSERVER
// =========================================================

const revealObserver = new IntersectionObserver(

    (entries) => {

        entries.forEach((entry) => {

            if (entry.isIntersecting) {

                entry.target.classList.add('nr-reveal-active');

            }

        });

    },

    {
        threshold: 0.15
    }

);



// =========================================================
// OBSERVE
// =========================================================

revealElements.forEach((element) => {

    element.classList.add('nr-reveal');

    revealObserver.observe(element);

});





// =========================================================
// HERO PARALLAX
// =========================================================

window.addEventListener('scroll', () => {

    const scrollY = window.scrollY;

    const heroVideo = document.querySelector('.nr-video-bg');

    if (heroVideo) {

        heroVideo.style.transform =
            `translateY(${scrollY * 0.15}px) scale(1.05)`;

    }

});





// =========================================================
// NAVBAR EFFECT
// =========================================================

window.addEventListener('scroll', () => {

    const navbar = document.querySelector('.navbar');

    if (!navbar) return;

    if (window.scrollY > 50) {

        navbar.classList.add('nr-navbar-scrolled');

    }
    else {

        navbar.classList.remove('nr-navbar-scrolled');

    }

});





// =========================================================
// SMOOTH BUTTON FEELING
// =========================================================

const buttons = document.querySelectorAll(
    '.nr-btn-primary, .nr-btn-secondary'
);

buttons.forEach((button) => {

    button.addEventListener('mousemove', (e) => {

        const rect = button.getBoundingClientRect();

        const x = e.clientX - rect.left;

        const y = e.clientY - rect.top;

        button.style.setProperty('--x', `${x}px`);

        button.style.setProperty('--y', `${y}px`);

    });

});

// =========================================================
// VIDEO PARALLAX
// =========================================================

window.addEventListener('scroll', () => {

    const section =
        document.querySelector('.nr-video-section');

    const video =
        document.querySelector('.nr-offer-video');

    if (!section || !video)
        return;

    const rect =
        section.getBoundingClientRect();

    const offset =
        rect.top * -0.15;

    video.style.transform =
        `translateY(${offset}px) scale(1.1)`;

});

document.addEventListener("DOMContentLoaded", () => {

    const elements =
        document.querySelectorAll(".reveal-text");

    const observer =
        new IntersectionObserver((entries) => {

            entries.forEach(entry => {

                if (entry.isIntersecting) {

                    entry.target.classList.add("active");

                    observer.unobserve(entry.target);

                }

            });

        }, {
            threshold: 0.15,

            rootMargin: "0px 0px -80px 0px"
        });

    elements.forEach(el => observer.observe(el));

});


