www.rosslai.com

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	
	>

<channel>
	<title>www.rosslai.com</title>
	<link>https://rosslai.com</link>
	<description>www.rosslai.com</description>
	<pubDate>Sun, 22 Feb 2026 02:51:29 +0000</pubDate>
	<generator>https://rosslai.com</generator>
	<language>en</language>
	
		
	<item>
		<title>HOME PAGE 19/04/25 Duplicate with Glitch Hover copy</title>
				
		<link>https://rosslai.com/HOME-PAGE-19-04-25-Duplicate-with-Glitch-Hover-copy</link>

		<pubDate>Sun, 22 Feb 2026 02:51:29 +0000</pubDate>

		<dc:creator>www.rosslai.com</dc:creator>

		<guid isPermaLink="true">https://rosslai.com/HOME-PAGE-19-04-25-Duplicate-with-Glitch-Hover-copy</guid>

		<description>   . . &#60;img width="768" height="508" width_o="768" height_o="508" data-src="https://freight.cargo.site/t/original/i/b17b90f15bb3fba67ef996385e3e1c1a8f45458abb75ab8a4e61b0c573edc7fa/Screenshot-2026-01-14-at-3.57.31PM.png" data-mid="245185671" border="0"  src="https://freight.cargo.site/w/768/i/b17b90f15bb3fba67ef996385e3e1c1a8f45458abb75ab8a4e61b0c573edc7fa/Screenshot-2026-01-14-at-3.57.31PM.png" /&#62;Luke 21:16-18&#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp;&#38;nbsp;&#38;nbsp; Self Portrait 25’ [o] lla Rouge :: Tri-X B&#38;amp;W Kodak 35mm Print  -&#38;nbsp;  /* --- BACKSCREEN PARALLAX --- */ .cinematic-backdrop { position: fixed; inset: 0; background-image: url('https://freight.cargo.site/t/original/i/197fade6c6c9230e7fb43697fe224d6fc3c6be1560b33a8ad85a629869f6b741/Screenshot-2026-02-10-at-4.14.51PM.png'); background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.08); opacity: 0; transition: opacity 1400ms ease; z-index: -2; pointer-events: none; will-change: transform; } .cinematic-backdrop.active { opacity: 1; } /* --- FOREGROUND FADE OUT --- */ .image-link img { position: relative; z-index: 2; transition: opacity 1200ms ease, transform 1200ms ease; } .image-link.fade-out img { opacity: 0; transform: scale(0.98); }    &#38;nbsp;  /* --- BACKSCREEN PARALLAX --- */ .cinematic-backdrop { position: fixed; inset: 0; background-image: url('https://freight.cargo.site/t/original/i/197fade6c6c9230e7fb43697fe224d6fc3c6be1560b33a8ad85a629869f6b741/Screenshot-2026-02-10-at-4.14.51PM.png'); background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.08); opacity: 0; transition: opacity 1400ms ease; z-index: -2; pointer-events: none; will-change: transform; } .cinematic-backdrop.active { opacity: 1; } /* --- FOREGROUND FADE OUT --- */ .image-link img { position: relative; z-index: 2; transition: opacity 1200ms ease, transform 1200ms ease; } .image-link.fade-out img { opacity: 0; transform: scale(0.98); }   


    Click Again to Enter


/* --- BACKDROP IMAGE --- */
.cinematic-backdrop {
    position: fixed;
    inset: 0;
    background-image: url('https://freight.cargo.site/t/original/i/4e3e4732fb3b53d6d9bfd759adba83614b6eceb29830c29405e886ad786a4179/Screenshot-2026-02-21-at-7.19.08AM.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1.12);
    opacity: 0;
    transition: opacity 1600ms ease, transform 2400ms cubic-bezier(.19,1,.22,1);
    z-index: -3;
    pointer-events: none;
}

.cinematic-backdrop.active {
    opacity: 1;
    transform: scale(1.05);
}

/* --- FOREGROUND IMAGE FADE --- */
.image-link img {
    transition: opacity 1200ms ease, transform 1200ms ease;
}

.image-link.fade-out img {
    opacity: 0;
    transform: scale(0.98);
}

/* --- BLACK BACK PAGE --- */
.backpage {
    position: fixed;
    inset: 0;
    background: #0a0a0a;
    color: #d4d4d4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8vw;
    text-align: center;
    opacity: 0;
    transition: opacity 1400ms ease;
    z-index: -2;
}

.backpage.active {
    opacity: 1;
    z-index: 5;
}

/* --- TYPE TEXT STYLE --- */
.typed-text {
    font-family: serif;
    font-size: 20px;
    letter-spacing: 0.04em;
    line-height: 1.8;
    max-width: 720px;
    white-space: pre-line;
}

/* --- ENTER INDICATOR --- */
.enter-indicator {
    margin-top: 60px;
    font-size: 12px;
    letter-spacing: 0.2em;
    opacity: 0;
    transition: opacity 1200ms ease;
}

.enter-indicator.visible {
    opacity: 0.6;
}


document.addEventListener("DOMContentLoaded", function() {

    const trigger = document.querySelector('a[href="lllllll-1"]');
    const backdrop = document.getElementById("cinematicBackdrop");
    const backpage = document.getElementById("backpage");
    const typedText = document.getElementById("typedText");
    const enterIndicator = document.getElementById("enterIndicator");

    const nextURL = "lllllll-1";

    const scripture = `Luke 21:16–18

You will be betrayed even by parents,
brothers and sisters, relatives and friends,
and they will put some of you to death.

Everyone will hate you because of me.
But not a hair of your head will perish.`;

    let clickStage = 0;
    let typingComplete = false;

    function typeWriter(text, element, speed = 32) {
        let i = 0;
        element.innerHTML = "";

        function typing() {
            if (i &#60; text.length) {
                element.innerHTML += text.charAt(i);
                i++;
                setTimeout(typing, speed);
            } else {
                typingComplete = true;
                enterIndicator.classList.add("visible");
            }
        }

        typing();
    }

    trigger.addEventListener("click", function(e) {

        e.preventDefault();

        if (clickStage === 0) {

            clickStage = 1;

            trigger.classList.add("fade-out");
            backdrop.classList.add("active");

            setTimeout(() =&#62; {
                backpage.classList.add("active");
                typeWriter(scripture, typedText);
            }, 900);

        } else if (clickStage === 1 &#38;&#38; typingComplete) {

            clickStage = 2;

            backpage.style.transition = "opacity 900ms ease";
            backdrop.style.transition = "opacity 900ms ease";

            backpage.style.opacity = 0;
            backdrop.style.opacity = 0;

            setTimeout(() =&#62; {
                window.location.href = nextURL;
            }, 800);
        }

    });

});


/* --- PINK PARALLAX BACKGROUND --- */
.cinematic-backdrop {
    position: fixed;
    inset: 0;
    background-image: url('https://freight.cargo.site/t/original/i/197fade6c6c9230e7fb43697fe224d6fc3c6be1560b33a8ad85a629869f6b741/Screenshot-2026-02-10-at-4.14.51PM.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.08);
    opacity: 0;
    transition: opacity 800ms ease, transform 2000ms cubic-bezier(.19,1,.22,1);
    z-index: -3;
    pointer-events: none;
}

.cinematic-backdrop.active {
    opacity: 1;
}

.cinematic-backdrop.zoom {
    transform: scale(1.16);
}

/* --- FOREGROUND FADE --- */
.image-link img {
    transition: opacity 400ms ease, transform 400ms ease;
}

.image-link.fade-out img {
    opacity: 0;
    transform: scale(0.96);
}

/* --- FLASH CONTAINER --- */
.gunshot-flash {
    position: fixed;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

/* --- EXPERTS ONLY FRAME --- */
.flash-image {
    position: absolute;
    inset: 0;
    background-image: url('https://freight.cargo.site/t/original/i/4e3e4732fb3b53d6d9bfd759adba83614b6eceb29830c29405e886ad786a4179/Screenshot-2026-02-21-at-7.19.08AM.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.02);
}

body.entering {
    transition: opacity 600ms ease;
    opacity: 0;
}


document.addEventListener("DOMContentLoaded", function() {

    const trigger = document.querySelector('a[href="lllllll-1"]');
    const backdrop = document.getElementById("cinematicBackdrop");
    const flash = document.getElementById("gunshotFlash");
    const flashImage = flash.querySelector(".flash-image");

    const nextURL = "lllllll-1";

    /* --- PARALLAX --- */
    let mouseX = 0, mouseY = 0, currentX = 0, currentY = 0;
    const strength = 25;

    function animateParallax() {
        currentX += (mouseX - currentX) * 0.08;
        currentY += (mouseY - currentY) * 0.08;
        backdrop.style.transform =
            `scale(1.10) translate(${currentX}px, ${currentY}px)`;
        requestAnimationFrame(animateParallax);
    }

    document.addEventListener("mousemove", function(e) {
        mouseX = (e.clientX / window.innerWidth - 0.5) * strength;
        mouseY = (e.clientY / window.innerHeight - 0.5) * strength;
    });

    animateParallax();

    /* --- HOVER --- */
    trigger.addEventListener("mouseenter", function() {
        backdrop.classList.add("active", "zoom");
    });

    trigger.addEventListener("mouseleave", function() {
        backdrop.classList.remove("zoom");
    });

    /* --- CLICK: VIOLENT SNAP --- */
    trigger.addEventListener("click", function(e) {
        e.preventDefault();

        trigger.classList.add("fade-out");

        /* 1 — HARD WHITE BLAST */
        flash.style.transition = "opacity 40ms linear";
        flash.style.opacity = 1;

        /* 2 — SNAP TO EXPERTS FRAME */
        setTimeout(() =&#62; {
            flash.style.background = "black";
            flashImage.style.transition = "opacity 60ms linear, transform 300ms ease-out";
            flashImage.style.opacity = 1;
            flashImage.style.transform = "scale(1)";
        }, 70);

        /* 3 — HOLD LONG ENOUGH TO READ */
        setTimeout(() =&#62; {
            flash.style.transition = "opacity 200ms ease";
            flash.style.opacity = 0;
        }, 900);

        /* 4 — ENTER SITE */
        setTimeout(() =&#62; {
            document.body.classList.add("entering");
        }, 950);

        setTimeout(() =&#62; {
            window.location.href = nextURL;
        }, 1500);
    });

});


document.addEventListener("DOMContentLoaded", function() {
    const trigger = document.querySelector('a[href="lllllll-1"]');
    const mainImg = trigger.querySelector("img");

    if (!mainImg) return; // safety check

    // Create hover overlay
    const hoverOverlay = document.createElement("div");
    hoverOverlay.style.position = "absolute";
    hoverOverlay.style.backgroundImage = "url('https://freight.cargo.site/t/original/i/4e3e4732fb3b53d6d9bfd759adba83614b6eceb29830c29405e886ad786a4179/Screenshot-2026-02-21-at-7.19.08AM.png')";
    hoverOverlay.style.backgroundSize = "100% 100%"; // match the img exactly
    hoverOverlay.style.backgroundPosition = "center";
    hoverOverlay.style.backgroundRepeat = "no-repeat";
    hoverOverlay.style.opacity = "0";
    hoverOverlay.style.transition = "opacity 400ms ease";
    hoverOverlay.style.pointerEvents = "none";
    hoverOverlay.style.zIndex = "3";

    // Append overlay inside trigger
    trigger.style.position = "relative";
    trigger.appendChild(hoverOverlay);

    // Update overlay to match image size
    function updateOverlaySize() {
        const rect = mainImg.getBoundingClientRect();
        hoverOverlay.style.width = rect.width + "px";
        hoverOverlay.style.height = rect.height + "px";
        hoverOverlay.style.top = mainImg.offsetTop + "px";
        hoverOverlay.style.left = mainImg.offsetLeft + "px";
    }

    // Initial size
    updateOverlaySize();

    // Recalculate on window resize
    window.addEventListener("resize", updateOverlaySize);

    // Hover in/out
    trigger.addEventListener("mouseenter", function() {
        hoverOverlay.style.opacity = "1";
    });
    trigger.addEventListener("mouseleave", function() {
        hoverOverlay.style.opacity = "0";
    });

    // Disappear immediately on click
    trigger.addEventListener("click", function() {
        hoverOverlay.style.opacity = "0";
    });
});


/* --- BACKDROP --- */
.cinematic-backdrop {
    position: fixed;
    inset: 0;
    background-image: url('https://freight.cargo.site/t/original/i/197fade6c6c9230e7fb43697fe224d6fc3c6be1560b33a8ad85a629869f6b741/Screenshot-2026-02-10-at-4.14.51PM.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.08);
    opacity: 0;
    transition: opacity 1400ms ease, transform 2200ms cubic-bezier(.19,1,.22,1);
    z-index: -3;
    pointer-events: none;
}

.cinematic-backdrop.active {
    opacity: 1;
}

.cinematic-backdrop.zoom {
    transform: scale(1.16);
}

/* --- FOREGROUND IMAGE FADE --- */
.image-link img {
    transition: opacity 800ms ease, transform 800ms ease;
}

.image-link.fade-out img {
    opacity: 0;
    transform: scale(0.96);
}


document.addEventListener("DOMContentLoaded", function() {
    const trigger = document.querySelector('a[href="lllllll-1"]');
    const backdrop = document.getElementById("cinematicBackdrop");

    // --- PARALLAX SETTINGS ---
    let mouseX = 0, mouseY = 0, currentX = 0, currentY = 0;
    const strength = 20; // subtle cinematic strength

    function animateParallax() {
        currentX += (mouseX - currentX) * 0.08;
        currentY += (mouseY - currentY) * 0.08;
        backdrop.style.transform = `scale(1.10) translate(${currentX}px, ${currentY}px)`;
        requestAnimationFrame(animateParallax);
    }

    document.addEventListener("mousemove", function(e) {
        mouseX = (e.clientX / window.innerWidth - 0.5) * strength;
        mouseY = (e.clientY / window.innerHeight - 0.5) * strength;
    });

    animateParallax();

    // --- HOVER EFFECT ---
    trigger.addEventListener("mouseenter", function() {
        backdrop.classList.add("active", "zoom");
        trigger.classList.add("fade-out");
    });

    trigger.addEventListener("mouseleave", function() {
        backdrop.classList.remove("zoom");
        trigger.classList.remove("fade-out");
    });

    // --- OPTIONAL CLICK (ENTER SITE) ---
    trigger.addEventListener("click", function(e) {
        e.preventDefault();
        backdrop.classList.remove("active", "zoom");
        // navigate after fade
        setTimeout(() =&#62; window.location.href = trigger.href, 900);
    });

    // --- CREATE HOVER OVERLAY MATCHING MAIN IMAGE ---
    const mainImg = trigger.querySelector("img");
    if (!mainImg) return;

    const hoverOverlay = document.createElement("div");
    hoverOverlay.style.position = "absolute";
    hoverOverlay.style.backgroundImage = `url('${mainImg.src}')`;
    hoverOverlay.style.backgroundSize = "100% 100%";
    hoverOverlay.style.backgroundPosition = "center";
    hoverOverlay.style.backgroundRepeat = "no-repeat";
    hoverOverlay.style.opacity = "0";
    hoverOverlay.style.transition = "opacity 1200ms ease"; // slower fade
    hoverOverlay.style.pointerEvents = "none";
    hoverOverlay.style.zIndex = "3";

    trigger.style.position = "relative";
    trigger.appendChild(hoverOverlay);

    function updateOverlaySize() {
        const rect = mainImg.getBoundingClientRect();
        hoverOverlay.style.width = rect.width + "px";
        hoverOverlay.style.height = rect.height + "px";
        hoverOverlay.style.top = mainImg.offsetTop + "px";
        hoverOverlay.style.left = mainImg.offsetLeft + "px";
    }

    updateOverlaySize();
    window.addEventListener("resize", updateOverlaySize);

    trigger.addEventListener("mouseenter", () =&#62; hoverOverlay.style.opacity = "1");
    trigger.addEventListener("mouseleave", () =&#62; hoverOverlay.style.opacity = "0");
    trigger.addEventListener("click", () =&#62; hoverOverlay.style.opacity = "0");
});


/* --- BACKDROP --- */
.cinematic-backdrop {
    position: fixed;
    inset: 0;
    background-image: url('https://freight.cargo.site/t/original/i/4e3e4732fb3b53d6d9bfd759adba83614b6eceb29830c29405e886ad786a4179/Screenshot-2026-02-21-at-7.19.08AM.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: blur(28px) brightness(0.55); /* Gaussian blur + darker */
    transform: scale(1.15);
    opacity: 0;

    transition: opacity 1200ms ease, transform 2200ms cubic-bezier(.19,1,.22,1);
    z-index: -3;
    pointer-events: none;
}

.cinematic-backdrop.active {
    opacity: 1;
    transform: scale(1.08);
}

/* --- FOREGROUND IMAGE --- */
.image-link {
    position: relative;
    z-index: 5;
}

.image-link img {
    transition: transform 1400ms cubic-bezier(.19,1,.22,1);
}

.image-link.hovering img {
    transform: scale(1.04);
}


document.addEventListener("DOMContentLoaded", function() {

    const trigger = document.querySelector('a[href="lllllll-1"]');
    const backdrop = document.getElementById("cinematicBackdrop");

    if (!trigger &#124;&#124; !backdrop) return;

    /* --- PARALLAX --- */
    let mouseX = 0, mouseY = 0, currentX = 0, currentY = 0;
    const strength = 22;

    function animateParallax() {
        currentX += (mouseX - currentX) * 0.06;
        currentY += (mouseY - currentY) * 0.06;

        backdrop.style.transform =
            `scale(1.12) translate(${currentX}px, ${currentY}px)`;

        requestAnimationFrame(animateParallax);
    }

    document.addEventListener("mousemove", function(e) {
        mouseX = (e.clientX / window.innerWidth - 0.5) * strength;
        mouseY = (e.clientY / window.innerHeight - 0.5) * strength;
    });

    animateParallax();

    /* --- HOVER --- */
    trigger.addEventListener("mouseenter", function() {
        backdrop.classList.add("active");
        trigger.classList.add("hovering");
    });

    trigger.addEventListener("mouseleave", function() {
        backdrop.classList.remove("active");
        trigger.classList.remove("hovering");
    });

});
</description>
		
	</item>
		
	</channel>
</rss>