NICHOLAS TECHNOLOGIES

<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>NICHOLAS TECHNOLOGIES</title>
	<link>https://ntech.online</link>
	<description>NICHOLAS TECHNOLOGIES</description>
	<pubDate>Wed, 30 Apr 2025 14:57:30 +0000</pubDate>
	<generator>https://ntech.online</generator>
	<language>en</language>
	
		
	<item>
		<title>1955</title>
				
		<link>https://ntech.online/1955</link>

		<pubDate>Thu, 03 Apr 2025 05:31:13 +0000</pubDate>

		<dc:creator>NICHOLAS TECHNOLOGIES</dc:creator>

		<guid isPermaLink="true">https://ntech.online/1955</guid>

		<description>
    
      
        /* --- General Body Styling --- */
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            color: white;
            font-family: monospace; /* Basic fallback - Ensure 'DOS-font', 'Charmset-font' are loaded */
            overflow-x: hidden;
        }

        /* --- Site 1: Top Text Columns --- */
        .two-column-container {
            width: 90%;
            margin: 5px auto 0px auto;
            display: flex;
            justify-content: space-between;
            overflow: visible;
            padding: 0;
        }
        .column {
            flex: 1;
            margin: 0 15px;
            overflow: visible;
            position: relative;
            display: flex;
            justify-content: center;
        }
        .column-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: 1.5rem;
            color: #ffffff;
            text-align: center;
            opacity: 0;
            width: 100%;
            display: block;
            line-height: 1.2;
            padding: 0 5px;
            position: relative;
            overflow: visible;
            transition: opacity 0.25s ease-in;
            animation: glow 1.5s ease-in-out infinite alternate;
            margin: 0;
            box-sizing: border-box;
        }

        /* --- Site 1: Content Container (Glowing Text + Image) --- */
        .content-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 90%;
            margin: 5px auto;
            padding: 5px 0;
            position: relative;
        }
        .glowing-text-wrapper {
            flex: 1;
            display: flex;
            justify-content: center; /* Center wrapper content */
            padding: 0;
            min-width: 0; /* Flex fix */
        }
        .glowing-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: clamp(1.5rem, 4vw + 0.5rem, 2.2rem);
            color: #ffffff;
            text-align: center; /* Restored center align */
            opacity: 0;
            animation: glow 1.5s ease-in-out infinite alternate;
            padding: 5px;
            margin: 0;
            display: block;
            width: 100%;
            box-sizing: border-box;
            word-wrap: break-word;
        }
        .image-container {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            opacity: 0;
            transition: opacity 1s ease-in;
            padding: 0;
            margin: 0;
        }
        .image-container img {
            max-width: 100%;
            max-height: 630px;
            height: auto;
            cursor: pointer;
            display: block;
        }

        /* --- Site 1: Terminal Text --- */
        .terminal-text-container {
             opacity: 1;
        }
        .terminal-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: clamp(1.1rem, 2.5vw + 0.5rem, 1.5rem);
            white-space: normal;
            letter-spacing: 1px;
            word-break: break-word;
            text-align: left;
            opacity: 0;
            width: 100%; /* Takes width from parent/max-width */
            display: block;
            line-height: 2;
            margin: 0 auto;
            padding: 25px 20px;
            position: relative;
            overflow: hidden;
            transition: opacity 0.25s ease-in;
            max-width: 90vw; /* Sets desktop width */
            box-sizing: border-box;
        }

        /* --- Site 1: Arrow --- */
        .arrow-container {
            position: absolute; left: 24%; top: 80%; margin-top: 0;
            opacity: 0; animation: arrowFadeIn 1s ease-in forwards 3s, arrowPulsate 2s ease-in-out infinite 3s;
            z-index: 10; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;
        }

        /* --- Site 1: Text Container Helpers --- */
        .text-container { position: relative; width: 100%; }
        .text-spacer {
            visibility: hidden; position: absolute; width: 100%; top: 0; left: 0; z-index: -1;
            font-family: inherit; font-size: inherit; line-height: inherit; padding: inherit;
            margin: inherit; text-align: inherit; box-sizing: border-box; word-wrap: break-word;
        }
        small { margin: 0; padding: 0; display: block; }

        /* === Site 2: Styles === */

        /* --- Site 2: Glowing Title Styles --- */
        .glowing-title-base {
            color: #ffffff; text-align: center; opacity: 1;
            padding: 15px 5px; margin: 40px auto 15px auto;
            width: 85%; max-width: 1200px; box-sizing: border-box;
            font-family: 'Charmset-font', monospace;
        }
        .glowing-title-base h1 {
            margin: 0; padding: 0; font-weight: normal; line-height: 1.2; font-family: inherit;
            white-space: normal; overflow-wrap: break-word; word-break: break-word;
            font-size: clamp(1.5rem, 4vw + 0.8rem, 2.8rem);
            opacity: 0; animation: glow 1.5s ease-in-out infinite alternate;
        }
        .composition-card-title { margin-top: 60px; margin-bottom: 0px; }
        .composition-card-title + .cg-container { margin-top: 20px !important; }

        /* --- Site 2: Expanding Gallery --- */
        .cg-container {
             opacity: 0; transition: opacity 1s ease-in;
             width: 85%; max-width: 1000px; margin: 20px auto;
             min-height: 150px; box-sizing: border-box;
        }

        /* --- Site 2: Two-column gallery layout --- */
        .gallery-row {
            display: flex; gap: 40px; margin: 20px auto;
            width: 85%; max-width: 1200px; opacity: 0;
            transition: opacity 1s ease-in; box-sizing: border-box;
        }
        .gallery-column { flex: 1; min-width: 0; }
        .gallery-wrapper { width: 95%; margin: 0 auto; position: relative; min-height: 150px; }
        .gallery-wrapper .futuristic-slideshow img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
         .gallery-wrapper noscript img { max-width: 100%; height: auto; display: block; margin: 10px auto; }

        /* --- Site 2: Single Gallery Container Styles --- */
        .single-gallery-container {
            width: 85%; max-width: 1200px; margin: 20px auto;
            padding-bottom: 50px; opacity: 0; transition: opacity 1s ease-in;
            box-sizing: border-box;
        }
        .single-gallery-container .gallery-wrapper { max-width: 550px; width: 95%; }

        /* --- Shared Keyframes --- */
        @keyframes glow { 0% { text-shadow: 0 0 10px #ffffff, 0 0 15px #ffffff; } 100% { text-shadow: 0 0 20px #ffffff, 0 0 30px #ffffff; } }
        @keyframes arrowFadeIn { from { opacity: 0; } to { opacity: 0.9; } }
        @keyframes arrowPulsate { 0% { opacity: 0; } 50% { opacity: 0.9; } 100% { opacity: 0; } }

        /* --- Responsive Adjustments --- */
               /* --- Responsive Adjustments --- */
               /* --- Responsive Adjustments --- */
        @media (max-width: 768px) {
            /* Site 1 Responsive */
            .content-container { flex-direction: column; width: 100%; padding: 0 5px; }
            .two-column-container { width: 100%; padding: 0 5px; margin-bottom: 20px; }
            .glowing-text-wrapper, .image-container { justify-content: center; width: 100%; text-align: center; margin: 10px 0; }
            .column { padding: 0 5px; }
            .terminal-text {
                max-width: none; /* Remove desktop constraint */
                width: 95%; /* Reference width */
                margin-left: auto; margin-right: auto;
                padding: 20px 10px;
            }
            .arrow-container { display: none; }

            /* Site 2 Responsive */

            .cg-container { /* Expanding gallery matches terminal text */
                width: 95%;
                max-width: none;
                /* margin-left/right: auto is inherited */
            }

            .gallery-row,
            .single-gallery-container {
                width: 100%; /* Row/Container takes full width */
                max-width: none;
                padding-left: 0;
                padding-right: 0;
                /* margin-left/right: auto; Centers the 100% width block (no visual effect) */
                 margin-left: auto;
                 margin-right: auto;
            }

            .gallery-row {
                flex-direction: column;
                gap: 20px;
                margin-bottom: 20px;
            }
            .single-gallery-container {
                padding-bottom: 30px;
            }

            /* --- FIX: Apply consistent width to GALLERY WRAPPERS on mobile --- */
            .gallery-wrapper {
                width: 95%;      /* Make wrapper match terminal text width */
                max-width: none; /* Override any desktop max-width */
                margin-left: auto;  /* Center the wrapper within its parent column/container */
                margin-right: auto;
            }
             /* No longer need specific rule for .single-gallery-container .gallery-wrapper */


            .glowing-title-base {
                margin-top: 30px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px;
                width: 95%; /* Match other content width */
            }
            .glowing-title-base h1 { font-size: clamp(1.2rem, 7vw + 0.5rem, 2.5rem); hyphens: auto; }
            .composition-card-title { margin-top: 40px; }

            /* Spacing between sections */
            .gallery-row + .glowing-title-base,
            .single-gallery-container + .glowing-title-base,
            .cg-container + .glowing-title-base {
                 margin-top: 30px;
            }
        }
    

                PREDICTION YEAR: 1955
                ...
            
        
                CAPTURE YEAR: 2025
                ...
            
        
                &#38;gt;...
                
            
            &#60;img src="https://freight.cargo.site/t/original/i/de3cce155a701deb2430d9d118a4df32e4069dee39bb8a9889e75e91efd7d356/1955A.png" id="image"&#62;
        
        
            ...
            ...
        
    
        COMPOSITION CARD
    
    
        &#60;img src="https://freight.cargo.site/t/original/i/4c379b1c1cf09314ca0501904dc332ccdecd434a10268abd590db17e1791f178/19-4406-BLACK-SAND.png" alt="COLOR 1"&#62;
			&#60;img src="https://freight.cargo.site/t/original/i/196ea89161359c9c1f1ed8fbb1d9fa743553847f200d3dd56bdba0ba11b13d21/19-4004-TAP-SHOE.png" alt="COLOR 2"&#62;
        &#60;img src="https://freight.cargo.site/t/original/i/5b2ce8cfddf47adab6afba9457749608dc9a0f2e8ad161a4b3846a9fe2b8c94e/19-3911-BLACK-BEAUTY.png" alt="COLOR 3"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/0b3f27f1a7d5dbdc073b41634da995ef4b413861ed1b6f878cfbbd7cd0e87a9b/HEAVY-WOOL.jpg" alt="FABRIC 1"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/70d44d7967b17436c49d0588e69445513012a984b819cb736967f0814d4a77d0/BULL-DENIM.jpg" alt="FABRIC 2"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/593fb044bd4c2d0fe24245299b03b05429f372addeae5fb0ed9c77347ea55ce0/SATIN-LINING.jpg" alt="FABRIC 3"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/048af3c61fd39504aaf4e81c39cc151c86adbfa045436ac1dace6dae95fd79f0/WAXED-DENIM.jpg" alt="FABRIC 4"&#62;
        
        SWATCH
        ...
    

        M44 WORK COAT
    
    
                &#60;img src="" alt=""&#62;
            
        
                 &#60;img src="" alt=""&#62;
            
        
        PARTITION DENIM JEANS
    
    
                &#60;img src="" alt=""&#62;
            
        
                &#60;img src="" alt=""&#62;
            
        
        PROCESS
    
    
            &#60;img src="" alt=""&#62;
        
    
        document.addEventListener("DOMContentLoaded", function() {
            // --- Shared Variables &#38; Functions ---
            const isMobile = /Android&#124;webOS&#124;iPhone&#124;iPad&#124;iPod&#124;BlackBerry&#124;IEMobile&#124;Opera Mini/i.test(navigator.userAgent) &#124;&#124; window.innerWidth &#60; 768;
            const randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&#38;*()_+-=[]&#124;/?';

            // --- START: Preload Function for Single Image ---
            function preloadSingleImage(url) {
                return new Promise((resolve, reject) =&#62; {
                    if (!url) {
                        // Don't reject here, just resolve immediately if no URL
                        console.warn("No URL provided for preloading.");
                        resolve(null); // Resolve with null or undefined
                        return;
                    }
                    // console.log(`Starting preload: ${url}`); // Optional logging
                    const img = new Image();
                    img.onload = () =&#62; {
                        // console.log(`Preload success: ${url}`); // Optional logging
                        resolve(img);
                    };
                    img.onerror = (err) =&#62; {
                        console.error(`Failed to preload image: ${url}`, err);
                        // Resolve rather than reject to not cause unhandled promise errors if not caught
                        resolve(null);
                    };
                    img.src = url;
                });
            }
            // --- END: Preload Function ---


            // --- Site 1 Specific Elements &#38; Content ---
            const mainElements = { /* Initialize object */ };
            const textContent = { /* Initialize object */ };
             mainElements.leftColumn = document.getElementById("left-column-text");
             mainElements.rightColumn = document.getElementById("right-column-text");
             mainElements.glowingText = document.getElementById("glowing-text");
             mainElements.imageContainer = document.getElementById("image-container");
             mainElements.image = document.getElementById("image"); //  {
                         if (loadedImg) { /* console.log("Background preload success."); */ }
                         else { /* console.log("Background preload failed or no image."); */ }
                     })
                     .catch(err =&#62; console.error("Error in preload promise chain:", err)); // Catch potential errors in the promise itself
             } else {
                 console.warn("Main image element or src not found, skipping preload trigger.");
             }

             // 2. Get the function to start the main animation sequence
             const startAnimations = runMainAnimationSequence();

             // 3. Schedule the main Site 1 animations to start after the delay
             setTimeout(startAnimations, 300); // 300ms delay before starting animation sequence

             // 4. Setup other listeners
             setupImageClickListeners();

             // 5. Perform an initial check for Site 2 sections already in view
             setTimeout(() =&#62; {
                 // console.log("--- Initial Viewport Check ---");
                 animatedSections.forEach(section =&#62; checkAndAnimateSection(section.id));
             }, 500); // Allow some time for layout


        }); // End of DOMContentLoaded
    </description>
		
	</item>
		
		
	<item>
		<title>2000</title>
				
		<link>https://ntech.online/2000</link>

		<pubDate>Wed, 09 Apr 2025 13:51:09 +0000</pubDate>

		<dc:creator>NICHOLAS TECHNOLOGIES</dc:creator>

		<guid isPermaLink="true">https://ntech.online/2000</guid>

		<description>
    
    
        /* --- General Body Styling --- */
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            color: white;
            font-family: monospace; /* Basic fallback - Ensure 'DOS-font', 'Charmset-font' are loaded */
            overflow-x: hidden;
        }

        /* --- Site 1: Top Text Columns --- */
        .two-column-container {
            width: 90%;
            margin: 5px auto 0px auto;
            display: flex;
            justify-content: space-between;
            overflow: visible;
            padding: 0;
        }
        .column {
            flex: 1;
            margin: 0 15px;
            overflow: visible;
            position: relative;
            display: flex;
            justify-content: center;
        }
        .column-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: 1.5rem;
            color: #47e17b;
            text-align: center;
            opacity: 0;
            width: 100%;
            display: block;
            line-height: 1.2;
            padding: 0 5px;
            position: relative;
            overflow: visible;
            transition: opacity 0.25s ease-in;
            animation: glow 1.5s ease-in-out infinite alternate;
            margin: 0;
            box-sizing: border-box;
        }

        /* --- Site 1: Content Container (Glowing Text + Image) --- */
        .content-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 90%;
            margin: 5px auto;
            padding: 5px 0;
            position: relative;
        }
        .glowing-text-wrapper {
            flex: 1;
            display: flex;
            justify-content: center; /* Center wrapper content */
            padding: 0;
            min-width: 0; /* Flex fix */
        }
        .glowing-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: clamp(1.5rem, 4vw + 0.5rem, 2.2rem);
            color: #47e17b;
            text-align: center; /* Restored center align */
            opacity: 0;
            animation: glow 1.5s ease-in-out infinite alternate;
            padding: 5px;
            margin: 0;
            display: block;
            width: 100%;
            box-sizing: border-box;
            word-wrap: break-word;
        }
        .image-container {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            opacity: 0;
            transition: opacity 1s ease-in;
            padding: 0;
            margin: 0;
        }
        .image-container img {
            max-width: 100%;
            max-height: 630px;
            height: auto;
            cursor: pointer;
            display: block;
        }

        /* --- Site 1: Terminal Text --- */
        .terminal-text-container {
             opacity: 1; /* Start visible but content animates */
        }
        .terminal-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: clamp(1.1rem, 2.5vw + 0.5rem, 1.5rem);
            color: #47e17b;
            white-space: normal;
            letter-spacing: 1px;
            word-break: break-word;
            text-align: left;
            opacity: 0; /* Text starts hidden */
            width: 100%; /* Takes width from parent/max-width */
            display: block;
            line-height: 2;
            margin: 0 auto;
            padding: 25px 20px;
            position: relative;
            overflow: hidden;
            transition: opacity 0.25s ease-in;
            max-width: 90vw; /* Sets desktop width */
            box-sizing: border-box;
        }

        /* --- Site 1: Arrow --- */
        .arrow-container {
            position: absolute; left: 24%; top: 80%; margin-top: 0;
            opacity: 0; animation: arrowFadeIn 1s ease-in forwards 3s, arrowPulsate 2s ease-in-out infinite 3s;
            z-index: 10; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;
        }

        /* --- Site 1: Text Container Helpers --- */
        .text-container { position: relative; width: 100%; }
        .text-spacer {
            visibility: hidden; position: absolute; width: 100%; top: 0; left: 0; z-index: -1;
            font-family: inherit; font-size: inherit; line-height: inherit; padding: inherit;
            margin: inherit; text-align: inherit; box-sizing: border-box; word-wrap: break-word;
        }
        small { margin: 0; padding: 0; display: block; }

        /* === Site 2: Styles === */

        /* --- Site 2: Glowing Title Styles --- */
        .glowing-title-base {
            color: #47e17b; text-align: center; opacity: 1; /* Container visible */
            padding: 15px 5px; margin: 40px auto 15px auto;
            width: 85%; max-width: 1200px; box-sizing: border-box;
            font-family: 'Charmset-font', monospace;
        }
        .glowing-title-base h1 {
            margin: 0; padding: 0; font-weight: normal; line-height: 1.2; font-family: inherit;
            white-space: normal; overflow-wrap: break-word; word-break: break-word; color: #47e17b;
            font-size: clamp(1.5rem, 4vw + 0.8rem, 2.8rem);
            opacity: 0; /* Title text starts hidden */
            animation: glow 1.5s ease-in-out infinite alternate;
        }
        .composition-card-title { margin-top: 60px; margin-bottom: 0px; }
        .composition-card-title + .cg-container { margin-top: 20px !important; }

        /* --- Site 2: Expanding Gallery --- */
        .cg-container {
             opacity: 0; transition: opacity 1s ease-in; /* Gallery fades in */
             width: 85%; max-width: 1000px; margin: 20px auto;
             min-height: 150px; box-sizing: border-box;
        }

        /* --- Site 2: Two-column gallery layout --- */
        .gallery-row {
            display: flex; gap: 40px; margin: 20px auto;
            width: 85%; max-width: 1200px; opacity: 0; /* Gallery row fades in */
            transition: opacity 1s ease-in; box-sizing: border-box;
        }
        .gallery-column { flex: 1; min-width: 0; }
        .gallery-wrapper { width: 95%; margin: 0 auto; position: relative; min-height: 150px; }
        .gallery-wrapper .futuristic-slideshow img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
         .gallery-wrapper noscript img { max-width: 100%; height: auto; display: block; margin: 10px auto; }

        /* --- Site 2: Single Gallery Container Styles --- */
        .single-gallery-container {
            width: 85%; max-width: 1200px; margin: 20px auto;
            padding-bottom: 50px; opacity: 0; transition: opacity 1s ease-in; /* Container fades in */
            box-sizing: border-box;
        }
        .single-gallery-container .gallery-wrapper { max-width: 550px; width: 95%; }

        /* --- Shared Keyframes --- */
        @keyframes glow { 0% { text-shadow: 0 0 10px #47e17b, 0 0 15px #47e17b; } 100% { text-shadow: 0 0 20px #47e17b, 0 0 30px #47e17b; } }
        @keyframes arrowFadeIn { from { opacity: 0; } to { opacity: 0.9; } }
        @keyframes arrowPulsate { 0% { opacity: 0; } 50% { opacity: 0.9; } 100% { opacity: 0; } }

        /* --- Responsive Adjustments --- */
        @media (max-width: 768px) {
            /* Site 1 Responsive */
            .content-container { flex-direction: column; width: 100%; padding: 0 5px; }
            .two-column-container { width: 100%; padding: 0 5px; margin-bottom: 20px; }
            .glowing-text-wrapper, .image-container { justify-content: center; width: 100%; text-align: center; margin: 10px 0; }
            .column { padding: 0 5px; }
            .terminal-text {
                max-width: none; /* Remove desktop constraint */
                width: 95%; /* Reference width */
                margin-left: auto; margin-right: auto;
                padding: 20px 10px;
            }
            .arrow-container { display: none; }

            /* Site 2 Responsive */
            .cg-container { /* Expanding gallery matches terminal text */
                width: 95%;
                max-width: none;
            }

            .gallery-row,
            .single-gallery-container {
                width: 100%; /* Row/Container takes full width */
                max-width: none;
                padding-left: 0;
                padding-right: 0;
                 margin-left: auto;
                 margin-right: auto;
            }

            .gallery-row {
                flex-direction: column;
                gap: 20px;
                margin-bottom: 20px;
            }
            .single-gallery-container {
                padding-bottom: 30px;
            }

            /* --- FIX: Apply consistent width to GALLERY WRAPPERS on mobile --- */
            .gallery-wrapper {
                width: 95%;      /* Make wrapper match terminal text width */
                max-width: none; /* Override any desktop max-width */
                margin-left: auto;  /* Center the wrapper within its parent column/container */
                margin-right: auto;
            }

            .glowing-title-base {
                margin-top: 30px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px;
                width: 95%; /* Match other content width */
            }
            .glowing-title-base h1 { font-size: clamp(1.2rem, 7vw + 0.5rem, 2.5rem); hyphens: auto; }
            .composition-card-title { margin-top: 40px; }

            /* Spacing between sections */
            .gallery-row + .glowing-title-base,
            .single-gallery-container + .glowing-title-base,
            .cg-container + .glowing-title-base {
                 margin-top: 30px;
            }
        }
    

                ...
                ...
            
        
                ...
                ...
            
        
                &#38;gt; ...
                
            
            &#60;img src="https://freight.cargo.site/t/original/i/7e907c96138e69b52fd54a2a3ee2b09ad43b7efbbe23a67d74fedee9af0ce5be/2000A.png" id="image"&#62;
        
        
            ...
            ...
        
    
        COMPOSITION CARD
    
    
            &#60;img src="https://freight.cargo.site/t/original/i/521fd3e7dabb116d2237b41017be74c6b5c55e358e488d2a8a064d57a5670e27/13-4108-NIMBUS-CLOUD.png" alt="COLOR 1"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/bf5599d48c87110cce12389a3d44ef399c891ffb0ded9962081a024425042dcc/14-4804-BLUE-FOX.png" alt="COLOR 2"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/196ea89161359c9c1f1ed8fbb1d9fa743553847f200d3dd56bdba0ba11b13d21/19-4004-TAP-SHOE.png" alt="COLOR 3"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/7c0de912968da4e034fc874fa696623080f6e5af96ef8912626073f170705f0b/COTTON-TWILL-DICKIES.png" alt="FABRIC 1"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/c497461cceface83b63ae1a8a56d3a4d57c8580bb4cabdba65baf3f0b701186b/BLACK-WAXED-DENIM.png" alt="FABRIC 2"&#62; 
            &#60;img src="https://freight.cargo.site/t/original/i/ee333e33876926c46443e2753fde1134acbe0d29a393dc989e45f681ce286e1e/COTTON-TWILL-DOCKERS.png" alt="FABRIC 3"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/9062000b823b1fea0a09fa13580f3561697a5fb9a99fb75b67a1b0e53b395ba3/OXFORD-CLOTH.png" alt="FABRIC 4"&#62;
            
            
        SWATCH
        ...
    

        ...
    
    
                &#60;img src="" alt=""&#62;
            
        
                 &#60;img src="" alt=""&#62;
            
        
        ...
    
    
                &#60;img src="" alt=""&#62;
            
        
                &#60;img src="" alt=""&#62;
            
        
        PROCESS
    
    
            &#60;img src="" alt=""&#62;
        
    
        document.addEventListener("DOMContentLoaded", function() {
            // --- Shared Variables &#38; Functions ---
            const isMobile = /Android&#124;webOS&#124;iPhone&#124;iPad&#124;iPod&#124;BlackBerry&#124;IEMobile&#124;Opera Mini/i.test(navigator.userAgent) &#124;&#124; window.innerWidth &#60; 768;
            const randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&#38;*()_+-=[]&#124;/?';

            // --- START: Preload Function for Single Image ---
            function preloadSingleImage(url) {
                return new Promise((resolve, reject) =&#62; {
                    if (!url) {
                        // Don't reject here, just resolve immediately if no URL
                        console.warn("No URL provided for preloading.");
                        resolve(null); // Resolve with null or undefined
                        return;
                    }
                    // console.log(`Starting preload: ${url}`); // Optional logging
                    const img = new Image();
                    img.onload = () =&#62; {
                        // console.log(`Preload success: ${url}`); // Optional logging
                        resolve(img);
                    };
                    img.onerror = (err) =&#62; {
                        console.error(`Failed to preload image: ${url}`, err);
                        // Resolve rather than reject to not cause unhandled promise errors if not caught
                        resolve(null);
                    };
                    img.src = url;
                });
            }
            // --- END: Preload Function ---


            // --- Site 1 Specific Elements &#38; Content ---
            const mainElements = {
                leftColumn: document.getElementById("left-column-text"),
                rightColumn: document.getElementById("right-column-text"),
                glowingText: document.getElementById("glowing-text"),
                imageContainer: document.getElementById("image-container"),
                image: document.getElementById("image"), //  { if (section.dependency === dependencyId) { checkAndAnimateSection(section.id); } }); } } else { console.warn(`Attempted to complete non-existent dependency: ${dependencyId}`); }
                },
                isDependencyComplete: function(dependencyId) { /* ...(same logic)... */
                    if (!dependencyId) return true; const status = this.dependencies[dependencyId]; return status === true;
                }
            };

             // --- Text Animation Function ---
             function animateText(element, finalText, batchSize, typingSpeed, callback) { /* ...(same logic)... */
                 if (!element) { console.error("Element not found for animation:", element); if (callback) callback(); return; }
                 element.style.opacity = 1;
                 if (!isMobile) { let currentIndex = 0; let interval = setInterval(() =&#62; { let randomText = ''; for (let i = currentIndex; i &#60; finalText.length; i++) { if (finalText[i] === ' ' &#124;&#124; finalText[i] === 'n' &#124;&#124; finalText[i] === 'r') randomText += finalText[i]; else randomText += randomChars.charAt(Math.floor(Math.random() * randomChars.length)); } requestAnimationFrame(() =&#62; { if(element) element.innerHTML = finalText.substring(0, currentIndex) + randomText; }); currentIndex += batchSize; if (currentIndex &#62;= finalText.length) { clearInterval(interval); requestAnimationFrame(() =&#62; { if(element) element.innerHTML = finalText.replace(/(rn&#124;n&#124;r)/g, ''); if (callback) callback(); }); } }, typingSpeed); }
                 else { let currentIndex = 0; let effectiveBatchSize = batchSize; let effectiveTypingSpeed = typingSpeed; if (finalText.length &#62; 100) { effectiveBatchSize = Math.max(15, Math.floor(finalText.length / 10)); effectiveTypingSpeed = 0.25; } const processMobileFrame = () =&#62; { let currentFixedText = finalText.substring(0, currentIndex); let randomTextPart = ''; for (let i = currentIndex; i &#60; finalText.length; i++) { if (finalText[i] === ' ' &#124;&#124; finalText[i] === 'n' &#124;&#124; finalText[i] === 'r') randomTextPart += finalText[i]; else randomTextPart += randomChars.charAt(Math.floor(Math.random() * randomChars.length)); } if(element) element.innerHTML = currentFixedText + randomTextPart; currentIndex += effectiveBatchSize; if (currentIndex &#62;= finalText.length) { if(element) element.innerHTML = finalText.replace(/(rn&#124;n&#124;r)/g, ''); if (callback) setTimeout(callback, 50); return; } requestAnimationFrame(() =&#62; { setTimeout(processMobileFrame, effectiveTypingSpeed); }); }; requestAnimationFrame(() =&#62; { setTimeout(processMobileFrame, effectiveTypingSpeed); }); }
             }

            // --- Viewport Check ---
            function isInViewport(element) { /* ...(same logic)... */
                 if (!element) return false; const rect = element.getBoundingClientRect(); const windowHeight = window.innerHeight &#124;&#124; document.documentElement.clientHeight; const buffer = 50; return rect.top &#60; windowHeight - buffer &#38;&#38; rect.bottom &#62; buffer;
            }

            // --- Scroll-Triggered Section Definitions ---
             // Ensure elements exist before creating section definitions
             const compCardTitleContainer = document.getElementById("comp-card-title-container");
             const compCardTitleH1 = document.getElementById("comp-card-title-h1");
             const compCardGallerySection = document.getElementById("comp-card-gallery-section");
             const firstGalleryTitleContainer = document.getElementById("first-gallery-row-title-container");
             const firstGalleryTitleH1 = document.getElementById("first-gallery-row-title-h1");
             const firstGallerySection = document.getElementById("first-gallery-row-section");
             const secondGalleryTitleContainer = document.getElementById("second-gallery-row-title-container");
             const secondGalleryTitleH1 = document.getElementById("second-gallery-row-title-h1");
             const secondGallerySection = document.getElementById("second-gallery-row-section");
             const processTitleContainer = document.getElementById("process-title-container");
             const processTitleH1 = document.getElementById("process-title-h1");
             const processGallerySection = document.getElementById("process-gallery-section");

             const animatedSections = [ /* ...(same definitions)... */
                { id: "comp-card-gallery-section", titleContainerElement: compCardTitleContainer, titleTextElement: compCardTitleH1, titleTextContent: "COMPOSITION CARD", container: compCardGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "terminal" },
                { id: "first-gallery-row-section", titleContainerElement: firstGalleryTitleContainer, titleTextElement: firstGalleryTitleH1, titleTextContent: "NTECH™ Vz-N DISPLAY JACKET", container: firstGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "comp-card-gallery-section" },
                { id: "second-gallery-row-section", titleContainerElement: secondGalleryTitleContainer, titleTextElement: secondGalleryTitleH1, titleTextContent: "NTECH™ SPLIT WORK TROUSER", container: secondGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "first-gallery-row-section" },
                { id: "process-gallery-section", titleContainerElement: processTitleContainer, titleTextElement: processTitleH1, titleTextContent: "PROCESS", container: processGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "second-gallery-row-section" }
             ];

            // --- Section Animation Trigger ---
            function animateSectionSequence(section) { /* ...(same logic)... */
                 section.triggered = true; if (typeof section.customAnimation === 'function') { section.customAnimation(); } else { console.warn(`Section ${section.id} has no customAnimation defined.`); if (section.container) section.container.style.opacity = 1; setTimeout(() =&#62; animationState.setDependencyComplete(section.id), 1000); }
            }

            // --- Check &#38; Animate Logic ---
            function checkAndAnimateSection(sectionId) { /* ...(same logic)... */
                 const section = animatedSections.find(s =&#62; s.id === sectionId); if (!section &#124;&#124; section.triggered) return; const dependencyMet = animationState.isDependencyComplete(section.dependency); const elementToCheck = section.titleContainerElement &#124;&#124; section.container; const visible = isInViewport(elementToCheck); if (dependencyMet &#38;&#38; visible) { animateSectionSequence(section); }
            }

            // --- Scroll Listener ---
            let scrollTimeout;
            window.addEventListener('scroll', () =&#62; { /* ...(same logic)... */
                 clearTimeout(scrollTimeout); scrollTimeout = setTimeout(() =&#62; { animatedSections.forEach(section =&#62; checkAndAnimateSection(section.id)); }, 50);
            }, { passive: true });

            // --- Main Site 1 Animation Sequence Function ---
            // Returns the function that starts the sequence
            function runMainAnimationSequence() {
                const sequence = [ /* ...(same sequence)... */
                    { action: (next) =&#62; animateText(mainElements.leftColumn, textContent.leftColumn, 3, 5, next) },
                    { action: (next) =&#62; animateText(mainElements.rightColumn, textContent.rightColumn, 3, 5, next) },
                    { action: (next) =&#62; setTimeout(next, 250) },
                    { action: (next) =&#62; animateText(mainElements.glowingText, textContent.glowingText, 7, 5, next) },
                    { action: (next) =&#62; setTimeout(() =&#62; { if(mainElements.imageContainer) mainElements.imageContainer.style.opacity = "1"; next(); }, 500) },
                    { action: (next) =&#62; setTimeout(() =&#62; { const terminalContainer = document.querySelector('.terminal-text-container'); if(terminalContainer) terminalContainer.style.opacity = 1; animateText(mainElements.terminalText, textContent.terminalText, 7, 5, next); }, 1000) },
                    { action: (next) =&#62; { animationState.setDependencyComplete("terminal"); checkAndAnimateSection("comp-card-gallery-section"); next(); } }
                ];
                let currentStep = 0;
                function runNextStep() { if (currentStep &#60; sequence.length) sequence[currentStep++].action(runNextStep); }
                // --- MODIFICATION: No longer starts itself with setTimeout here ---
                // setTimeout(runNextStep, 300); //  {
                       const handleClick = function(event) { if (this.closest('.cg-gallery-item') &#124;&#124; this.id === 'image') { return; } const anchor = event.target.closest('a[target="_blank"]'); if (anchor) { return; } };
                       img.addEventListener('click', handleClick);
                       if (!img.closest('.cg-gallery-item') &#38;&#38; img.src) { if (img.id === 'image' &#124;&#124; img.closest('a[target="_blank"]')) img.style.cursor = 'pointer'; else img.style.cursor = ''; }
                       else { img.style.cursor = ''; }
                  });
             }


             // --- Initialization ---

             // 1. Start preloading the main image concurrently (don't await)
             if (mainElements.image &#38;&#38; mainElements.image.src) {
                 preloadSingleImage(mainElements.image.src)
                     .then(loadedImg =&#62; {
                         if (loadedImg) { /* console.log("Background preload success."); */ }
                         else { /* console.log("Background preload failed or no image."); */ }
                     })
                     .catch(err =&#62; console.error("Error in preload promise chain:", err));
             } else {
                 console.warn("Main image element or src not found, skipping preload trigger.");
             }

             // 2. Get the function to start the main animation sequence
             // (runMainAnimationSequence now just returns the starter function)
             const startAnimations = runMainAnimationSequence();

             // 3. Schedule the main Site 1 animations to start after the delay
             setTimeout(startAnimations, 300); // 300ms delay

             // 4. Setup other listeners
             setupImageClickListeners();

             // 5. Perform an initial check for Site 2 sections already in view
             setTimeout(() =&#62; {
                 // console.log("--- Initial Viewport Check ---");
                 animatedSections.forEach(section =&#62; checkAndAnimateSection(section.id));
             }, 500);


        }); // End of DOMContentLoaded
    </description>
		
	</item>
		
		
	<item>
		<title>2060</title>
				
		<link>https://ntech.online/2060</link>

		<pubDate>Sun, 27 Apr 2025 14:04:48 +0000</pubDate>

		<dc:creator>NICHOLAS TECHNOLOGIES</dc:creator>

		<guid isPermaLink="true">https://ntech.online/2060</guid>

		<description>
    
    
        /* --- General Body Styling --- */
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            color: white;
            font-family: monospace; /* Basic fallback - Ensure 'DOS-font', 'Charmset-font' are loaded */
            overflow-x: hidden;
        }

        /* --- Site 1: Top Text Columns --- */
        .two-column-container {
            width: 90%;
            margin: 5px auto 0px auto;
            display: flex;
            justify-content: space-between;
            overflow: visible;
            padding: 0;
        }
        .column {
            flex: 1;
            margin: 0 15px;
            overflow: visible;
            position: relative;
            display: flex;
            justify-content: center;
        }
        .column-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: 1.5rem;
            color: #cac2b9;
            text-align: center;
            opacity: 0;
            width: 100%;
            display: block;
            line-height: 1.2;
            padding: 0 5px;
            position: relative;
            overflow: visible;
            transition: opacity 0.25s ease-in;
            animation: glow 1.5s ease-in-out infinite alternate;
            margin: 0;
            box-sizing: border-box;
        }

        /* --- Site 1: Content Container (Glowing Text + Image) --- */
        .content-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 90%;
            margin: 5px auto;
            padding: 5px 0;
            position: relative;
        }
        .glowing-text-wrapper {
            flex: 1;
            display: flex;
            justify-content: center; /* Center wrapper content */
            padding: 0;
            min-width: 0; /* Flex fix */
        }
        .glowing-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: clamp(1.5rem, 4vw + 0.5rem, 2.2rem);
            color: #cac2b9;
            text-align: center; /* Restored center align */
            opacity: 0;
            animation: glow 1.5s ease-in-out infinite alternate;
            padding: 5px;
            margin: 0;
            display: block;
            width: 100%;
            box-sizing: border-box;
            word-wrap: break-word;
        }
        .image-container {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            opacity: 0;
            transition: opacity 1s ease-in;
            padding: 0;
            margin: 0;
        }
        .image-container img {
            max-width: 100%;
            max-height: 630px;
            height: auto;
            cursor: pointer;
            display: block;
        }

        /* --- Site 1: Terminal Text --- */
        .terminal-text-container {
             opacity: 1; /* Start visible but content animates */
        }
        .terminal-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: clamp(1.1rem, 2.5vw + 0.5rem, 1.5rem);
            color: #cac2b9;
            white-space: normal;
            letter-spacing: 1px;
            word-break: break-word;
            text-align: left;
            opacity: 0; /* Text starts hidden */
            width: 100%; /* Takes width from parent/max-width */
            display: block;
            line-height: 2;
            margin: 0 auto;
            padding: 25px 20px;
            position: relative;
            overflow: hidden;
            transition: opacity 0.25s ease-in;
            max-width: 90vw; /* Sets desktop width */
            box-sizing: border-box;
        }

        /* --- Site 1: Arrow --- */
        .arrow-container {
            position: absolute; left: 24%; top: 80%; margin-top: 0;
            opacity: 0; animation: arrowFadeIn 1s ease-in forwards 3s, arrowPulsate 2s ease-in-out infinite 3s;
            z-index: 10; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;
        }

        /* --- Site 1: Text Container Helpers --- */
        .text-container { position: relative; width: 100%; }
        .text-spacer {
            visibility: hidden; position: absolute; width: 100%; top: 0; left: 0; z-index: -1;
            font-family: inherit; font-size: inherit; line-height: inherit; padding: inherit;
            margin: inherit; text-align: inherit; box-sizing: border-box; word-wrap: break-word;
        }
        small { margin: 0; padding: 0; display: block; }

        /* === Site 2: Styles === */

        /* --- Site 2: Glowing Title Styles --- */
        .glowing-title-base {
            color: #cac2b9; text-align: center; opacity: 1; /* Container visible */
            padding: 15px 5px; margin: 40px auto 15px auto;
            width: 85%; max-width: 1200px; box-sizing: border-box;
            font-family: 'Charmset-font', monospace;
        }
        .glowing-title-base h1 {
            margin: 0; padding: 0; font-weight: normal; line-height: 1.2; font-family: inherit;
            white-space: normal; overflow-wrap: break-word; word-break: break-word; color: #cac2b9;
            font-size: clamp(1.5rem, 4vw + 0.8rem, 2.8rem);
            opacity: 0; /* Title text starts hidden */
            animation: glow 1.5s ease-in-out infinite alternate;
        }
        .composition-card-title { margin-top: 60px; margin-bottom: 0px; }
        .composition-card-title + .cg-container { margin-top: 20px !important; }

        /* --- Site 2: Expanding Gallery --- */
        .cg-container {
             opacity: 0; transition: opacity 1s ease-in; /* Gallery fades in */
             width: 85%; max-width: 1000px; margin: 20px auto;
             min-height: 150px; box-sizing: border-box;
        }

        /* --- Site 2: Two-column gallery layout --- */
        .gallery-row {
            display: flex; gap: 40px; margin: 20px auto;
            width: 85%; max-width: 1200px; opacity: 0; /* Gallery row fades in */
            transition: opacity 1s ease-in; box-sizing: border-box;
        }
        .gallery-column { flex: 1; min-width: 0; }
        .gallery-wrapper { width: 95%; margin: 0 auto; position: relative; min-height: 150px; }
        .gallery-wrapper .futuristic-slideshow img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
         .gallery-wrapper noscript img { max-width: 100%; height: auto; display: block; margin: 10px auto; }

        /* --- Site 2: Single Gallery Container Styles --- */
        .single-gallery-container {
            width: 85%; max-width: 1200px; margin: 20px auto;
            padding-bottom: 50px; opacity: 0; transition: opacity 1s ease-in; /* Container fades in */
            box-sizing: border-box;
        }
        .single-gallery-container .gallery-wrapper { max-width: 550px; width: 95%; }

        /* --- Shared Keyframes --- */
        @keyframes glow { 0% { text-shadow: 0 0 10px #cac2b9, 0 0 15px #cac2b9; } 100% { text-shadow: 0 0 20px #cac2b9, 0 0 30px #cac2b9; } }
        @keyframes arrowFadeIn { from { opacity: 0; } to { opacity: 0.9; } }
        @keyframes arrowPulsate { 0% { opacity: 0; } 50% { opacity: 0.9; } 100% { opacity: 0; } }

        /* --- Responsive Adjustments --- */
        @media (max-width: 768px) {
            /* Site 1 Responsive */
            .content-container { flex-direction: column; width: 100%; padding: 0 5px; }
            .two-column-container { width: 100%; padding: 0 5px; margin-bottom: 20px; }
            .glowing-text-wrapper, .image-container { justify-content: center; width: 100%; text-align: center; margin: 10px 0; }
            .column { padding: 0 5px; }
            .terminal-text {
                max-width: none; /* Remove desktop constraint */
                width: 95%; /* Reference width */
                margin-left: auto; margin-right: auto;
                padding: 20px 10px;
            }
            .arrow-container { display: none; }

            /* Site 2 Responsive */
            .cg-container { /* Expanding gallery matches terminal text */
                width: 95%;
                max-width: none;
            }

            .gallery-row,
            .single-gallery-container {
                width: 100%; /* Row/Container takes full width */
                max-width: none;
                padding-left: 0;
                padding-right: 0;
                 margin-left: auto;
                 margin-right: auto;
            }

            .gallery-row {
                flex-direction: column;
                gap: 20px;
                margin-bottom: 20px;
            }
            .single-gallery-container {
                padding-bottom: 30px;
            }

            /* --- FIX: Apply consistent width to GALLERY WRAPPERS on mobile --- */
            .gallery-wrapper {
                width: 95%;      /* Make wrapper match terminal text width */
                max-width: none; /* Override any desktop max-width */
                margin-left: auto;  /* Center the wrapper within its parent column/container */
                margin-right: auto;
            }

            .glowing-title-base {
                margin-top: 30px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px;
                width: 95%; /* Match other content width */
            }
            .glowing-title-base h1 { font-size: clamp(1.2rem, 7vw + 0.5rem, 2.5rem); hyphens: auto; }
            .composition-card-title { margin-top: 40px; }

            /* Spacing between sections */
            .gallery-row + .glowing-title-base,
            .single-gallery-container + .glowing-title-base,
            .cg-container + .glowing-title-base {
                 margin-top: 30px;
            }
        }
    

                ...
                ...
            
        
                ...
                ...
            
        
                &#38;gt; ...
                
            
            &#60;img src="https://freight.cargo.site/t/original/i/2dd6bed245349efc12a3f2012166bcc2c3687f85b40faccf94d1dc6657c5943d/2060A.png" id="image"&#62;
        
        
            ...
            ...
        
    
        COMPOSITION CARD
    
    
            &#60;img src="https://freight.cargo.site/t/original/i/b89647e3cb2eb66496a2794a6b9fb7d3ed2a1af805a6360f43798aeace721858/14-0002-PUMICE-STONE.png" alt="COLOR 1"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/0a3ed5c65b9d984336af0a84106a0364a181d6c6a2052cee4ece55cebeadf5de/19-4008-METEORITE.png" alt="COLOR 2"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/6cb6cc5c693d52d61b9d00d6ab15bb9c4bab637de0d27045da667fdf5b3b2b6e/19-3911-BLACK-BEAUTY.png" alt="COLOR 3"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/27abc9420c8415d518c16b924e70ec5ebf3247235eb857d7bce56873e12d087b/COTTON-JERSEY.png" alt="FABRIC 1"&#62;
           
             &#60;img src="https://freight.cargo.site/t/original/i/f77892f5f3598302ad3f531e0b12aac22be33dcd5d46813e0857dcda79cb82f5/COTTON-POPLIN.png" alt="FABRIC 1"&#62;
              &#60;img src="https://freight.cargo.site/t/original/i/ba4ea6e6229de8c202eff6aff900834637c84df724feeb33cf40af80afff782a/WOOL-SUITING.png" alt="FABRIC 2"&#62; 
            &#60;img src="https://freight.cargo.site/t/original/i/ada9e2179a58f82db0ceaeb0bb7232872238e63245096a26894c775aa55ce5b9/MUSLIN.png" alt="FABRIC 3"&#62;
            
            
        SWATCH
        ...
    

        ...
    
    
                &#60;img src="" alt=""&#62;
            
        
                 &#60;img src="" alt=""&#62;
            
        
        ...
    
    
                &#60;img src="" alt=""&#62;
            
        
                &#60;img src="" alt=""&#62;
            
        
        PROCESS
    
    
            &#60;img src="" alt=""&#62;
        
    
        document.addEventListener("DOMContentLoaded", function() {
            // --- Shared Variables &#38; Functions ---
            const isMobile = /Android&#124;webOS&#124;iPhone&#124;iPad&#124;iPod&#124;BlackBerry&#124;IEMobile&#124;Opera Mini/i.test(navigator.userAgent) &#124;&#124; window.innerWidth &#60; 768;
            const randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&#38;*()_+-=[]&#124;/?';

            // --- START: Preload Function for Single Image ---
            function preloadSingleImage(url) {
                return new Promise((resolve, reject) =&#62; {
                    if (!url) {
                        // Don't reject here, just resolve immediately if no URL
                        console.warn("No URL provided for preloading.");
                        resolve(null); // Resolve with null or undefined
                        return;
                    }
                    // console.log(`Starting preload: ${url}`); // Optional logging
                    const img = new Image();
                    img.onload = () =&#62; {
                        // console.log(`Preload success: ${url}`); // Optional logging
                        resolve(img);
                    };
                    img.onerror = (err) =&#62; {
                        console.error(`Failed to preload image: ${url}`, err);
                        // Resolve rather than reject to not cause unhandled promise errors if not caught
                        resolve(null);
                    };
                    img.src = url;
                });
            }
            // --- END: Preload Function ---


            // --- Site 1 Specific Elements &#38; Content ---
            const mainElements = {
                leftColumn: document.getElementById("left-column-text"),
                rightColumn: document.getElementById("right-column-text"),
                glowingText: document.getElementById("glowing-text"),
                imageContainer: document.getElementById("image-container"),
                image: document.getElementById("image"), //  { if (section.dependency === dependencyId) { checkAndAnimateSection(section.id); } }); } } else { console.warn(`Attempted to complete non-existent dependency: ${dependencyId}`); }
                },
                isDependencyComplete: function(dependencyId) { /* ...(same logic)... */
                    if (!dependencyId) return true; const status = this.dependencies[dependencyId]; return status === true;
                }
            };

             // --- Text Animation Function ---
             function animateText(element, finalText, batchSize, typingSpeed, callback) { /* ...(same logic)... */
                  if (!element) { console.error("Element not found for animation:", element); if (callback) callback(); return; }
                 element.style.opacity = 1;
                 if (!isMobile) { let currentIndex = 0; let interval = setInterval(() =&#62; { let randomText = ''; for (let i = currentIndex; i &#60; finalText.length; i++) { if (finalText[i] === ' ' &#124;&#124; finalText[i] === 'n' &#124;&#124; finalText[i] === 'r') randomText += finalText[i]; else randomText += randomChars.charAt(Math.floor(Math.random() * randomChars.length)); } requestAnimationFrame(() =&#62; { if(element) element.innerHTML = finalText.substring(0, currentIndex) + randomText; }); currentIndex += batchSize; if (currentIndex &#62;= finalText.length) { clearInterval(interval); requestAnimationFrame(() =&#62; { if(element) element.innerHTML = finalText.replace(/(rn&#124;n&#124;r)/g, ''); if (callback) callback(); }); } }, typingSpeed); }
                 else { let currentIndex = 0; let effectiveBatchSize = batchSize; let effectiveTypingSpeed = typingSpeed; if (finalText.length &#62; 100) { effectiveBatchSize = Math.max(15, Math.floor(finalText.length / 10)); effectiveTypingSpeed = 0.25; } const processMobileFrame = () =&#62; { let currentFixedText = finalText.substring(0, currentIndex); let randomTextPart = ''; for (let i = currentIndex; i &#60; finalText.length; i++) { if (finalText[i] === ' ' &#124;&#124; finalText[i] === 'n' &#124;&#124; finalText[i] === 'r') randomTextPart += finalText[i]; else randomTextPart += randomChars.charAt(Math.floor(Math.random() * randomChars.length)); } if(element) element.innerHTML = currentFixedText + randomTextPart; currentIndex += effectiveBatchSize; if (currentIndex &#62;= finalText.length) { if(element) element.innerHTML = finalText.replace(/(rn&#124;n&#124;r)/g, ''); if (callback) setTimeout(callback, 50); return; } requestAnimationFrame(() =&#62; { setTimeout(processMobileFrame, effectiveTypingSpeed); }); }; requestAnimationFrame(() =&#62; { setTimeout(processMobileFrame, effectiveTypingSpeed); }); }
             }

            // --- Viewport Check ---
            function isInViewport(element) { /* ...(same logic)... */
                 if (!element) return false; const rect = element.getBoundingClientRect(); const windowHeight = window.innerHeight &#124;&#124; document.documentElement.clientHeight; const buffer = 50; return rect.top &#60; windowHeight - buffer &#38;&#38; rect.bottom &#62; buffer;
            }

            // --- Scroll-Triggered Section Definitions ---
            // Ensure elements exist before creating section definitions
            const compCardTitleContainer = document.getElementById("comp-card-title-container");
            const compCardTitleH1 = document.getElementById("comp-card-title-h1");
            const compCardGallerySection = document.getElementById("comp-card-gallery-section");
            const firstGalleryTitleContainer = document.getElementById("first-gallery-row-title-container");
            const firstGalleryTitleH1 = document.getElementById("first-gallery-row-title-h1");
            const firstGallerySection = document.getElementById("first-gallery-row-section");
            const secondGalleryTitleContainer = document.getElementById("second-gallery-row-title-container");
            const secondGalleryTitleH1 = document.getElementById("second-gallery-row-title-h1");
            const secondGallerySection = document.getElementById("second-gallery-row-section");
            const processTitleContainer = document.getElementById("process-title-container");
            const processTitleH1 = document.getElementById("process-title-h1");
            const processGallerySection = document.getElementById("process-gallery-section");

            const animatedSections = [ /* ...(same definitions)... */
                 { id: "comp-card-gallery-section", titleContainerElement: compCardTitleContainer, titleTextElement: compCardTitleH1, titleTextContent: "COMPOSITION CARD", container: compCardGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "terminal" },
                 { id: "first-gallery-row-section", titleContainerElement: firstGalleryTitleContainer, titleTextElement: firstGalleryTitleH1, titleTextContent: "NTECH™ ANARCH PONCHO", container: firstGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "comp-card-gallery-section" },
                 { id: "second-gallery-row-section", titleContainerElement: secondGalleryTitleContainer, titleTextElement: secondGalleryTitleH1, titleTextContent: "NTECH™ FENDER SKIRT + DOUBLE WIDE TROUSER", container: secondGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "first-gallery-row-section" },
                 { id: "process-gallery-section", titleContainerElement: processTitleContainer, titleTextElement: processTitleH1, titleTextContent: "PROCESS", container: processGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "second-gallery-row-section" }
            ];

            // --- Section Animation Trigger ---
            function animateSectionSequence(section) { /* ...(same logic)... */
                 section.triggered = true; if (typeof section.customAnimation === 'function') { section.customAnimation(); } else { console.warn(`Section ${section.id} has no customAnimation defined.`); if (section.container) section.container.style.opacity = 1; setTimeout(() =&#62; animationState.setDependencyComplete(section.id), 1000); }
            }

            // --- Check &#38; Animate Logic ---
            function checkAndAnimateSection(sectionId) { /* ...(same logic)... */
                 const section = animatedSections.find(s =&#62; s.id === sectionId); if (!section &#124;&#124; section.triggered) return; const dependencyMet = animationState.isDependencyComplete(section.dependency); const elementToCheck = section.titleContainerElement &#124;&#124; section.container; const visible = isInViewport(elementToCheck); if (dependencyMet &#38;&#38; visible) { animateSectionSequence(section); }
            }

            // --- Scroll Listener ---
            let scrollTimeout;
            window.addEventListener('scroll', () =&#62; { /* ...(same logic)... */
                 clearTimeout(scrollTimeout); scrollTimeout = setTimeout(() =&#62; { animatedSections.forEach(section =&#62; checkAndAnimateSection(section.id)); }, 50);
            }, { passive: true });

            // --- Main Site 1 Animation Sequence Function ---
            // Returns the function that starts the sequence
            function runMainAnimationSequence() {
                const sequence = [ /* ...(same sequence)... */
                    { action: (next) =&#62; animateText(mainElements.leftColumn, textContent.leftColumn, 3, 5, next) },
                    { action: (next) =&#62; animateText(mainElements.rightColumn, textContent.rightColumn, 3, 5, next) },
                    { action: (next) =&#62; setTimeout(next, 250) },
                    { action: (next) =&#62; animateText(mainElements.glowingText, textContent.glowingText, 7, 5, next) },
                    { action: (next) =&#62; setTimeout(() =&#62; { if(mainElements.imageContainer) mainElements.imageContainer.style.opacity = "1"; next(); }, 500) },
                    { action: (next) =&#62; setTimeout(() =&#62; { const terminalContainer = document.querySelector('.terminal-text-container'); if(terminalContainer) terminalContainer.style.opacity = 1; animateText(mainElements.terminalText, textContent.terminalText, 7, 5, next); }, 1000) },
                    { action: (next) =&#62; { animationState.setDependencyComplete("terminal"); checkAndAnimateSection("comp-card-gallery-section"); next(); } }
                ];
                let currentStep = 0;
                function runNextStep() { if (currentStep &#60; sequence.length) sequence[currentStep++].action(runNextStep); }
                // --- MODIFICATION: No longer starts itself with setTimeout here ---
                // setTimeout(runNextStep, 300); //  {
                       const handleClick = function(event) { if (this.closest('.cg-gallery-item') &#124;&#124; this.id === 'image') { return; } const anchor = event.target.closest('a[target="_blank"]'); if (anchor) { return; } };
                       img.addEventListener('click', handleClick);
                       if (!img.closest('.cg-gallery-item') &#38;&#38; img.src) { if (img.id === 'image' &#124;&#124; img.closest('a[target="_blank"]')) img.style.cursor = 'pointer'; else img.style.cursor = ''; }
                       else { img.style.cursor = ''; }
                  });
             }


             // --- Initialization ---

             // 1. Start preloading the main image concurrently (don't await)
             if (mainElements.image &#38;&#38; mainElements.image.src) {
                 preloadSingleImage(mainElements.image.src)
                     .then(loadedImg =&#62; {
                         if (loadedImg) { /* console.log("Background preload success."); */ }
                         else { /* console.log("Background preload failed or no image."); */ }
                     })
                     .catch(err =&#62; console.error("Error in preload promise chain:", err)); // Catch potential errors in the promise itself
             } else {
                 console.warn("Main image element or src not found, skipping preload trigger.");
             }

             // 2. Get the function to start the main animation sequence
             const startAnimations = runMainAnimationSequence();

             // 3. Schedule the main Site 1 animations to start after the delay
             setTimeout(startAnimations, 300); // 300ms delay

             // 4. Setup other listeners
             setupImageClickListeners();

             // 5. Perform an initial check for Site 2 sections already in view
             setTimeout(() =&#62; {
                 // console.log("--- Initial Viewport Check ---");
                 animatedSections.forEach(section =&#62; checkAndAnimateSection(section.id));
             }, 500);


        }); // End of DOMContentLoaded
    </description>
		
	</item>
		
		
	<item>
		<title>1980</title>
				
		<link>https://ntech.online/1980</link>

		<pubDate>Wed, 30 Apr 2025 14:57:30 +0000</pubDate>

		<dc:creator>NICHOLAS TECHNOLOGIES</dc:creator>

		<guid isPermaLink="true">https://ntech.online/1980</guid>

		<description>
    
    
        /* --- General Body Styling --- */
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            color: white;
            font-family: monospace; /* Basic fallback - Ensure 'DOS-font', 'Charmset-font' are loaded */
            overflow-x: hidden;
        }

        /* --- Site 1: Top Text Columns --- */
        .two-column-container {
            width: 90%;
            margin: 5px auto 0px auto;
            display: flex;
            justify-content: space-between;
            overflow: visible;
            padding: 0;
        }
        .column {
            flex: 1;
            margin: 0 15px;
            overflow: visible;
            position: relative;
            display: flex;
            justify-content: center;
        }
        .column-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: 1.5rem;
            color: #cebb96;
            text-align: center;
            opacity: 0;
            width: 100%;
            display: block;
            line-height: 1.2;
            padding: 0 5px;
            position: relative;
            overflow: visible;
            transition: opacity 0.25s ease-in;
            animation: glow 1.5s ease-in-out infinite alternate;
            margin: 0;
            box-sizing: border-box;
        }

        /* --- Site 1: Content Container (Glowing Text + Image) --- */
        .content-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 90%;
            margin: 5px auto;
            padding: 5px 0;
            position: relative;
        }
        .glowing-text-wrapper {
            flex: 1;
            display: flex;
            justify-content: center; /* Center wrapper content */
            padding: 0;
            min-width: 0; /* Flex fix */
        }
        .glowing-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: clamp(1.5rem, 4vw + 0.5rem, 2.2rem);
            color: #cebb96;
            text-align: center; /* Restored center align */
            opacity: 0;
            animation: glow 1.5s ease-in-out infinite alternate;
            padding: 5px;
            margin: 0;
            display: block;
            width: 100%;
            box-sizing: border-box;
            word-wrap: break-word;
        }
        .image-container {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            opacity: 0;
            transition: opacity 1s ease-in;
            padding: 0;
            margin: 0;
        }
        .image-container img {
            max-width: 100%;
            max-height: 630px;
            height: auto;
            cursor: pointer;
            display: block;
        }

        /* --- Site 1: Terminal Text --- */
        .terminal-text-container {
             opacity: 1; /* Start visible but content animates */
        }
        .terminal-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: clamp(1.1rem, 2.5vw + 0.5rem, 1.5rem);
            color: #cebb96;
            white-space: normal;
            letter-spacing: 1px;
            word-break: break-word;
            text-align: left;
            opacity: 0; /* Text starts hidden */
            width: 100%; /* Takes width from parent/max-width */
            display: block;
            line-height: 2;
            margin: 0 auto;
            padding: 25px 20px;
            position: relative;
            overflow: hidden;
            transition: opacity 0.25s ease-in;
            max-width: 90vw; /* Sets desktop width */
            box-sizing: border-box;
        }

        /* --- Site 1: Arrow --- */
        .arrow-container {
            position: absolute; left: 24%; top: 80%; margin-top: 0;
            opacity: 0; animation: arrowFadeIn 1s ease-in forwards 3s, arrowPulsate 2s ease-in-out infinite 3s;
            z-index: 10; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;
        }

        /* --- Site 1: Text Container Helpers --- */
        .text-container { position: relative; width: 100%; }
        .text-spacer {
            visibility: hidden; position: absolute; width: 100%; top: 0; left: 0; z-index: -1;
            font-family: inherit; font-size: inherit; line-height: inherit; padding: inherit;
            margin: inherit; text-align: inherit; box-sizing: border-box; word-wrap: break-word;
        }
        small { margin: 0; padding: 0; display: block; }

        /* === Site 2: Styles === */

        /* --- Site 2: Glowing Title Styles --- */
        .glowing-title-base {
            color: #cebb96; text-align: center; opacity: 1; /* Container visible */
            padding: 15px 5px; margin: 40px auto 15px auto;
            width: 85%; max-width: 1200px; box-sizing: border-box;
            font-family: 'Charmset-font', monospace;
        }
        .glowing-title-base h1 {
            margin: 0; padding: 0; font-weight: normal; line-height: 1.2; font-family: inherit;
            white-space: normal; overflow-wrap: break-word; word-break: break-word; color: #cebb96;
            font-size: clamp(1.5rem, 4vw + 0.8rem, 2.8rem);
            opacity: 0; /* Title text starts hidden */
            animation: glow 1.5s ease-in-out infinite alternate;
        }
        .composition-card-title { margin-top: 60px; margin-bottom: 0px; }
        .composition-card-title + .cg-container { margin-top: 20px !important; }

        /* --- Site 2: Expanding Gallery --- */
        .cg-container {
             opacity: 0; transition: opacity 1s ease-in; /* Gallery fades in */
             width: 85%; max-width: 1000px; margin: 20px auto;
             min-height: 150px; box-sizing: border-box;
        }

        /* --- Site 2: Two-column gallery layout --- */
        .gallery-row {
            display: flex; gap: 40px; margin: 20px auto;
            width: 85%; max-width: 1200px; opacity: 0; /* Gallery row fades in */
            transition: opacity 1s ease-in; box-sizing: border-box;
        }
        .gallery-column { flex: 1; min-width: 0; }
        .gallery-wrapper { width: 95%; margin: 0 auto; position: relative; min-height: 150px; }
        .gallery-wrapper .futuristic-slideshow img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
         .gallery-wrapper noscript img { max-width: 100%; height: auto; display: block; margin: 10px auto; }

        /* --- Site 2: Single Gallery Container Styles --- */
        .single-gallery-container {
            width: 85%; max-width: 1200px; margin: 20px auto;
            padding-bottom: 50px; opacity: 0; transition: opacity 1s ease-in; /* Container fades in */
            box-sizing: border-box;
        }
        .single-gallery-container .gallery-wrapper { max-width: 550px; width: 95%; }

        /* --- Shared Keyframes --- */
        @keyframes glow { 0% { text-shadow: 0 0 10px #cebb96, 0 0 15px #cebb96; } 100% { text-shadow: 0 0 20px #cebb96, 0 0 30px #cebb96; } }
        @keyframes arrowFadeIn { from { opacity: 0; } to { opacity: 0.9; } }
        @keyframes arrowPulsate { 0% { opacity: 0; } 50% { opacity: 0.9; } 100% { opacity: 0; } }

        /* --- Responsive Adjustments --- */
        @media (max-width: 768px) {
            /* Site 1 Responsive */
            .content-container { flex-direction: column; width: 100%; padding: 0 5px; }
            .two-column-container { width: 100%; padding: 0 5px; margin-bottom: 20px; }
            .glowing-text-wrapper, .image-container { justify-content: center; width: 100%; text-align: center; margin: 10px 0; }
            .column { padding: 0 5px; }
            .terminal-text {
                max-width: none; /* Remove desktop constraint */
                width: 95%; /* Reference width */
                margin-left: auto; margin-right: auto;
                padding: 20px 10px;
            }
            .arrow-container { display: none; }

            /* Site 2 Responsive */
            .cg-container { /* Expanding gallery matches terminal text */
                width: 95%;
                max-width: none;
            }

            .gallery-row,
            .single-gallery-container {
                width: 100%; /* Row/Container takes full width */
                max-width: none;
                padding-left: 0;
                padding-right: 0;
                 margin-left: auto;
                 margin-right: auto;
            }

            .gallery-row {
                flex-direction: column;
                gap: 20px;
                margin-bottom: 20px;
            }
            .single-gallery-container {
                padding-bottom: 30px;
            }

            /* --- FIX: Apply consistent width to GALLERY WRAPPERS on mobile --- */
            .gallery-wrapper {
                width: 95%;      /* Make wrapper match terminal text width */
                max-width: none; /* Override any desktop max-width */
                margin-left: auto;  /* Center the wrapper within its parent column/container */
                margin-right: auto;
            }

            .glowing-title-base {
                margin-top: 30px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px;
                width: 95%; /* Match other content width */
            }
            .glowing-title-base h1 { font-size: clamp(1.2rem, 7vw + 0.5rem, 2.5rem); hyphens: auto; }
            .composition-card-title { margin-top: 40px; }

            /* Spacing between sections */
            .gallery-row + .glowing-title-base,
            .single-gallery-container + .glowing-title-base,
            .cg-container + .glowing-title-base {
                 margin-top: 30px;
            }
        }
    

                ...
                ...
            
        
                ...
                ...
            
        
                &#38;gt; ...
                
            
            &#60;img src="https://freight.cargo.site/t/original/i/20a241a0702dd82a81ee2ff7f4aba2c33c977a8fed5b961cf15aec557f1b6348/1980A.png" id="image"&#62;
        
        
            ...
            ...
        
    
        COMPOSITION CARD
    
    
            &#60;img src="https://freight.cargo.site/t/original/i/3ffa41c190ed5ac9bd380a6119cd3153db5d58e7229c1afd4eac470c11132847/14-0105-OVERCAST.png" alt="COLOR 1"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/a8d9c598a7263be12bff7218e51fc61fceeb4a397761da40dc4a92416e3aabb3/17-1019-ELMWOOD.png" alt="COLOR 2"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/a818c23ec333805e5dd51e0894a3366295275f516350d045b074e82df51982d9/19-0622-MILITARY-OLIVE.png" alt="COLOR 3"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/8c75632a20465bf39a85293dd8e0a2979e3bafd21ed1bdce7595b57438b1c817/19-1020-DARK-EARTH.png" alt="COLOR 4"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/a15d42dc3ba7d1cf67c68c354a8e059c6c2a020bb6db8248fa2de0aa630ca4f1/17-6219-DEEP-GRASS-GREEN.png" alt="COLOR 5"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/1042b9cfce2d9ded07749f8d165f8784aea2773e9bb23f166bbd958c123cca33/HOUNDSTOOTH-TWEED.png" alt="FABRIC 1"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/50ae9275577204f605683f500d98383404208e91a967aff5e784befcb2fb747d/POLYESTER-MICROCHECK-TWILL.png" alt="FABRIC 2"&#62; 
            &#60;img src="https://freight.cargo.site/t/original/i/72547596dc449784953cd667e7fecd17ff054326545dff14e506924099bdb54e/POLYESTER-LINING.png" alt="FABRIC 3"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/468f415510ee56676fbc541783863f140db553081436ff9a3f4106168624fd4c/POLYESTER-MICROFIBER.png" alt="FABRIC 4"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/4c7dcfb2ff546d070db8d57a5ec026c7fb120b9fd826e6ea77eb24c5c4aa9b89/WRANGLER-COTTON-TWILL.png" alt="FABRIC 5"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/de57121da47bfccbccea4b2067f249e4aaaf121e483e59aa55cf1085637ea1c1/COTTON-TWILL.png" alt="FABRIC 6"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/69626e93e57d0a5492f1a665f8f6a91996f338a4921afdecb24f6c334e64a6ca/SATEEN-COTTON-SHEET.png" alt="FABRIC 7"&#62;
            
            
        SWATCH
        ...
    

        ...
    
    
                &#60;img src="" alt=""&#62;
            
        
                 &#60;img src="" alt=""&#62;
            
        
        ...
    
    
                &#60;img src="" alt=""&#62;
            
        
                &#60;img src="" alt=""&#62;
            
        
        PROCESS
    
    
            &#60;img src="" alt=""&#62;
        
    
        // --- Make the main handler synchronous again ---
        document.addEventListener("DOMContentLoaded", function() {
            // --- Shared Variables &#38; Functions ---
            const isMobile = /Android&#124;webOS&#124;iPhone&#124;iPad&#124;iPod&#124;BlackBerry&#124;IEMobile&#124;Opera Mini/i.test(navigator.userAgent) &#124;&#124; window.innerWidth &#60; 768;
            const randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&#38;*()_+-=[]&#124;/?';

            // --- Preload Function for Single Image (remains the same) ---
            function preloadSingleImage(url) {
                return new Promise((resolve, reject) =&#62; {
                    if (!url) {
                        // Don't reject here, just resolve immediately if no URL
                        console.warn("No URL provided for preloading.");
                        resolve(null); // Resolve with null or undefined
                        return;
                    }
                    // console.log(`Starting preload: ${url}`);
                    const img = new Image();
                    img.onload = () =&#62; {
                        // console.log(`Preload success: ${url}`);
                        resolve(img);
                    };
                    img.onerror = (err) =&#62; {
                        console.error(`Failed to preload image: ${url}`, err);
                        // Resolve rather than reject to not cause unhandled promise errors if not caught
                        resolve(null);
                    };
                    img.src = url;
                });
            }
            // --- END: Preload Function ---


            // --- Site 1 Specific Elements &#38; Content ---
            const mainElements = {
                leftColumn: document.getElementById("left-column-text"),
                rightColumn: document.getElementById("right-column-text"),
                glowingText: document.getElementById("glowing-text"),
                imageContainer: document.getElementById("image-container"),
                image: document.getElementById("image"),
                terminalText: document.getElementById("animated-text")
             };
            const textContent = { /* ...(your text content)... */
                leftColumn: "PREDICTION YEAR: 1980",
                rightColumn: "CAPTURE YEAR: 2020",
                glowingText: "&#62; CREATE A RETRO-STYLE CYBER SUIT FROM THE YEAR 1980. DRAW INSPIRATION FROM 1970S TRENDS AND REFRESH THEM FOR THE NEW DECADE. EMPHASIZE EXAGGERATED PROPORTIONS. USE AN EARTH-TONED PALETTE. INTEGRATE SUSTAINABILITY INTO THE OUTFIT AND EMPHASIZE PATCHWORK CONSTRUCTION IN THE JACKET.",
                terminalText: `IN AN ALTERNATE 1980, THE INTRODUCTION OF HOUSEHOLD TECHNOLOGY BEGAN A DECADE EARLIER THAN IN OUR TIMELINE AND EVOLVED AT TWICE THE SPEED. THIS RAPID ADVANCEMENT LED TO A WIDESPREAD EMBRACE OF CYBER AESTHETICS BY THE TURN OF THE DECADE, WITH INDIVIDUALS INTEGRATING TECHNOLOGY INTO EVERY POSSIBLE ASPECT OF THEIR DAILY LIFE. FASHION, AS ONE OF THE MOST VISIBLE FORMS OF PERSONAL EXPRESSION, WAS AT THE FOREFRONT OF THIS TECH OBSESSION. CLOTHING STORES BEGAN OFFERING EXPERIMENTAL GARMENTS AS READY-TO-WEAR STAPLES. NICHOLAS TECHNOLOGIES WAS AMONG THE FIRST BRANDS TO PIONEER THIS STYLE, DEVELOPING “EXPERIMENTAL” OFFICE SUITS SPECIFICALLY TAILORED FOR TECH COMPANIES OPERATING WITHIN THIS VIBRANT, FAST-EVOLVING WORLD.‎ THIS OUTFIT PRESENTS AN EXAGGERATED TAKE ON THE MAXIMALIST AESTHETICS OFTEN ASSOCIATED WITH THE 1980S, ACHIEVED THROUGH BOLD GARMENT PROPORTIONS AND STRUCTURED DESIGN. THE BLAZER JACKET IS CRAFTED BY UPCYCLING A DIVERSE MIX OF GARMENTS—INCLUDING A PAIR OF POLO TROUSERS, ZARA TROUSERS, WRANGLER CARGO PANTS, A LONDON FOG RAIN JACKET, A COTTON BEDSHEET, AND NEW STOCK HOUNDSTOOTH TWEED. ITS PATTERN IS SEGMENTED WITH VARIOUS ANGLED CUTS, AND THE FABRICS ARE STRATEGICALLY ARRANGED TO EMPHASIZE THESE DYNAMIC LINES. THE JACKET FEATURES TWO POCKETS: ONE AT THE CHEST THAT FOLLOWS A DIAGONAL CONTOUR PARALLEL TO A SEAM, AND ANOTHER HIDDEN AT THE RIGHT WAIST, INTEGRATED INTO THE CONSTRUCTION. EMBRACING THE TECH-INSPIRED THEME, THE FRONT AND POCKET CLOSURES USE NUTS AND BOLTS INSTEAD OF TRADITIONAL BUTTONS. THE SILHOUETTE IS DEFINED BY OVERSIZED PADDED SHOULDERS AND AN ASYMMETRICAL HEMLINE THAT CREATES A SPLIT BETWEEN THE LEFT AND RIGHT SIDES. THE PANTS, MADE FROM MATCHING HOUNDSTOOTH FABRIC, FEATURE A FLARED SILHOUETTE THAT NODS TO 1970S FASHION. A COMPLEMENTING BELT IS INCLUDED, DESIGNED WITH AN EXTENDED LENGTH TO REVEAL THE TAG AND EMBROIDERED LOGO ON OPPOSITE ENDS. SCRAPS FROM THE REMAINING UPCYCLED GARMENTS ARE ALSO USED IN THESE TROUSERS TO CREATE THE LINING FOR THE POCKETS, FURTHER ENHANCING THE SUSTAINABILITY OF THE LOOK.`
            };

             // Original listener for the main image click
            if (mainElements.image) {
                 mainElements.image.addEventListener("click", function() { window.open(this.src, "_blank"); });
            }

            // --- Animation State Manager (remains the same) ---
            const animationState = { /* ...(your animationState object)... */
                 dependencies: {
                    "terminal": false,
                    "comp-card-gallery-section": false,
                    "first-gallery-row-section": false,
                    "second-gallery-row-section": false,
                    "process-gallery-section": false
                },
                setDependencyComplete: function(dependencyId) { /* ... same ... */
                     if (this.dependencies.hasOwnProperty(dependencyId)) {
                        if (this.dependencies[dependencyId] === false) {
                            this.dependencies[dependencyId] = true;
                            animatedSections.forEach(section =&#62; {
                                if (section.dependency === dependencyId) {
                                    checkAndAnimateSection(section.id);
                                }
                            });
                        }
                    } else { console.warn(`Attempted to complete non-existent dependency: ${dependencyId}`); }
                },
                isDependencyComplete: function(dependencyId) { /* ... same ... */
                     if (!dependencyId) return true;
                    const status = this.dependencies[dependencyId];
                    return status === true;
                 }
            };

            // --- Text Animation Function (remains the same) ---
            function animateText(element, finalText, batchSize, typingSpeed, callback) { /* ...(your animateText function)... */
                 if (!element) { if (callback) callback(); return; }
                element.style.opacity = 1;
                if (!isMobile) { // Desktop
                    let currentIndex = 0;
                    let interval = setInterval(() =&#62; {
                        let randomText = '';
                        for (let i = currentIndex; i &#60; finalText.length; i++) {
                            if (finalText[i] === ' ' &#124;&#124; finalText[i] === 'n' &#124;&#124; finalText[i] === 'r') randomText += finalText[i];
                            else randomText += randomChars.charAt(Math.floor(Math.random() * randomChars.length));
                        }
                        requestAnimationFrame(() =&#62; { if(element) element.innerHTML = finalText.substring(0, currentIndex) + randomText; });
                        currentIndex += batchSize;
                        if (currentIndex &#62;= finalText.length) {
                            clearInterval(interval);
                            requestAnimationFrame(() =&#62; { if(element) element.innerHTML = finalText.replace(/(rn&#124;n&#124;r)/g, ''); if (callback) callback(); });
                        }
                    }, typingSpeed);
                } else { // Mobile
                    let currentIndex = 0;
                    let effectiveBatchSize = batchSize;
                    let effectiveTypingSpeed = typingSpeed;
                    if (finalText.length &#62; 100) { effectiveBatchSize = Math.max(15, Math.floor(finalText.length / 10)); effectiveTypingSpeed = 0.25; }
                    const processMobileFrame = () =&#62; {
                         let currentFixedText = finalText.substring(0, currentIndex);
                         let randomTextPart = '';
                         for (let i = currentIndex; i &#60; finalText.length; i++) {
                             if (finalText[i] === ' ' &#124;&#124; finalText[i] === 'n' &#124;&#124; finalText[i] === 'r') randomTextPart += finalText[i];
                            else randomTextPart += randomChars.charAt(Math.floor(Math.random() * randomChars.length));
                         }
                         if(element) element.innerHTML = currentFixedText + randomTextPart;
                        currentIndex += effectiveBatchSize;
                        if (currentIndex &#62;= finalText.length) {
                            if(element) element.innerHTML = finalText.replace(/(rn&#124;n&#124;r)/g, '');
                            if (callback) setTimeout(callback, 50);
                            return;
                        }
                        requestAnimationFrame(() =&#62; { setTimeout(processMobileFrame, effectiveTypingSpeed); });
                    };
                    requestAnimationFrame(() =&#62; { setTimeout(processMobileFrame, effectiveTypingSpeed); });
                }
            }

            // --- Viewport Check (remains the same) ---
            function isInViewport(element) { /* ...(your isInViewport function)... */
                 if (!element) return false;
                 const rect = element.getBoundingClientRect();
                 const windowHeight = window.innerHeight &#124;&#124; document.documentElement.clientHeight;
                 const buffer = 50;
                 return rect.top &#60; windowHeight - buffer &#38;&#38; rect.bottom &#62; buffer;
            }

            // --- Scroll-Triggered Section Definitions (remains the same) ---
            const animatedSections = [ /* ...(your animatedSections array)... */
                 { id: "comp-card-gallery-section", titleContainerElement: document.getElementById("comp-card-title-container"), titleTextElement: document.getElementById("comp-card-title-h1"), titleTextContent: "COMPOSITION CARD", container: document.getElementById("comp-card-gallery-section"), customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "terminal" },
                { id: "first-gallery-row-section", titleContainerElement: document.getElementById("first-gallery-row-title-container"), titleTextElement: document.getElementById("first-gallery-row-title-h1"), titleTextContent: "NTECH™ HYPER-POWER BLAzER", container: document.getElementById("first-gallery-row-section"), customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "comp-card-gallery-section" },
                { id: "second-gallery-row-section", titleContainerElement: document.getElementById("second-gallery-row-title-container"), titleTextElement: document.getElementById("second-gallery-row-title-h1"), titleTextContent: "NTECH™ FLARED HOUNDSTOOTH BELTED TROUSERS", container: document.getElementById("second-gallery-row-section"), customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "first-gallery-row-section" },
                { id: "process-gallery-section", titleContainerElement: document.getElementById("process-title-container"), titleTextElement: document.getElementById("process-title-h1"), titleTextContent: "PROCESS", container: document.getElementById("process-gallery-section"), customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "second-gallery-row-section" }
            ];

            // --- Section Animation Trigger (remains the same) ---
            function animateSectionSequence(section) { /* ...(your animateSectionSequence function)... */
                 section.triggered = true;
                if (typeof section.customAnimation === 'function') { section.customAnimation(); }
                else { console.warn(`Section ${section.id} has no customAnimation defined.`); if (section.container) section.container.style.opacity = 1; setTimeout(() =&#62; animationState.setDependencyComplete(section.id), 1000); }
            }

            // --- Check &#38; Animate Logic (remains the same) ---
            function checkAndAnimateSection(sectionId) { /* ...(your checkAndAnimateSection function)... */
                const section = animatedSections.find(s =&#62; s.id === sectionId);
                if (!section &#124;&#124; section.triggered) return;
                const dependencyMet = animationState.isDependencyComplete(section.dependency);
                const elementToCheck = section.titleContainerElement &#124;&#124; section.container;
                const visible = isInViewport(elementToCheck);
                if (dependencyMet &#38;&#38; visible) { animateSectionSequence(section); }
            }

            // --- Scroll Listener (remains the same) ---
            let scrollTimeout;
            window.addEventListener('scroll', () =&#62; { /* ...(your scroll listener)... */
                 clearTimeout(scrollTimeout);
                 scrollTimeout = setTimeout(() =&#62; { animatedSections.forEach(section =&#62; checkAndAnimateSection(section.id)); }, 50);
            }, { passive: true });

            // --- Main Site 1 Animation Sequence (returns start function) ---
            function runMainAnimationSequence() { /* ...(same sequence logic)... */
                 const sequence = [
                    { action: (next) =&#62; animateText(mainElements.leftColumn, textContent.leftColumn, 3, 5, next) },
                    { action: (next) =&#62; animateText(mainElements.rightColumn, textContent.rightColumn, 3, 5, next) },
                    { action: (next) =&#62; setTimeout(next, 250) },
                    { action: (next) =&#62; animateText(mainElements.glowingText, textContent.glowingText, 7, 5, next) },
                    { action: (next) =&#62; setTimeout(() =&#62; { if(mainElements.imageContainer) mainElements.imageContainer.style.opacity = "1"; next(); }, 500) },
                    { action: (next) =&#62; setTimeout(() =&#62; { if(document.querySelector('.terminal-text-container')) document.querySelector('.terminal-text-container').style.opacity = 1; animateText(mainElements.terminalText, textContent.terminalText, 7, 5, next); }, 1000) },
                    { action: (next) =&#62; { animationState.setDependencyComplete("terminal"); checkAndAnimateSection("comp-card-gallery-section"); next(); } }
                ];
                let currentStep = 0;
                function runNextStep() { if (currentStep &#60; sequence.length) sequence[currentStep++].action(runNextStep); }
                return runNextStep; // Return the function that starts the steps
            }

            // --- Image Click Listener Setup Function (remains the same) ---
            function setupImageClickListeners() { /* ...(your setupImageClickListeners function)... */
                 document.querySelectorAll('img').forEach(img =&#62; {
                    const handleClick = function(event) { if (this.closest('.cg-gallery-item') &#124;&#124; this.id === 'image' &#124;&#124; event.target.closest('a[target="_blank"]')) { return; } };
                    img.addEventListener('click', handleClick);
                    if (img.id === 'image' &#124;&#124; img.closest('a[target="_blank"]')) { img.style.cursor = 'pointer'; }
                    else if (!img.closest('.cg-gallery-item')) { /* Optional: img.style.cursor = 'pointer'; */ }
                    else { img.style.cursor = ''; }
                });
            }


            // --- MODIFIED Initialization ---

            // 1. Start preloading the main image immediately (don't await)
            if (mainElements.image &#38;&#38; mainElements.image.src) {
                preloadSingleImage(mainElements.image.src)
                    .then(loadedImg =&#62; {
                        if (loadedImg) {
                           // console.log("Background preload successful."); // Optional confirmation
                        } else {
                           // console.log("Background preload failed or no image found."); // Optional info
                        }
                    }); // We don't need await, just let it run. .then/.catch are optional logging
            } else {
                console.warn("Main image element or src not found, skipping preload trigger.");
            }

            // 2. Get the function to start the main animation sequence
            const startAnimations = runMainAnimationSequence();

            // 3. Schedule the main Site 1 animations to start after the delay
            // This runs regardless of whether preload is finished
            setTimeout(startAnimations, 300);

            // 4. Setup other listeners
            setupImageClickListeners();

            // 5. Perform an initial check for Site 2 sections already in view
            setTimeout(() =&#62; {
                // console.log("--- Initial Viewport Check ---");
                animatedSections.forEach(section =&#62; checkAndAnimateSection(section.id));
            }, 500);


        }); // End of DOMContentLoaded
    </description>
		
	</item>
		
		
	<item>
		<title>1960</title>
				
		<link>https://ntech.online/1960</link>

		<pubDate>Thu, 03 Apr 2025 12:49:52 +0000</pubDate>

		<dc:creator>NICHOLAS TECHNOLOGIES</dc:creator>

		<guid isPermaLink="true">https://ntech.online/1960</guid>

		<description>
    
    
        /* --- General Body Styling --- */
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            color: white;
            font-family: monospace; /* Basic fallback - Ensure 'DOS-font', 'Charmset-font' are loaded */
            overflow-x: hidden;
        }

        /* --- Site 1: Top Text Columns --- */
        .two-column-container {
            width: 90%;
            margin: 5px auto 0px auto;
            display: flex;
            justify-content: space-between;
            overflow: visible;
            padding: 0;
        }
        .column {
            flex: 1;
            margin: 0 15px;
            overflow: visible;
            position: relative;
            display: flex;
            justify-content: center;
        }
        .column-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: 1.5rem;
            color: #cac2b9;
            text-align: center;
            opacity: 0;
            width: 100%;
            display: block;
            line-height: 1.2;
            padding: 0 5px;
            position: relative;
            overflow: visible;
            transition: opacity 0.25s ease-in;
            animation: glow 1.5s ease-in-out infinite alternate;
            margin: 0;
            box-sizing: border-box;
        }

        /* --- Site 1: Content Container (Glowing Text + Image) --- */
        .content-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 90%;
            margin: 5px auto;
            padding: 5px 0;
            position: relative;
        }
        .glowing-text-wrapper {
            flex: 1;
            display: flex;
            justify-content: center; /* Center wrapper content */
            padding: 0;
            min-width: 0; /* Flex fix */
        }
        .glowing-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: clamp(1.5rem, 4vw + 0.5rem, 2.2rem);
            color: #cac2b9;
            text-align: center; /* Restored center align */
            opacity: 0;
            animation: glow 1.5s ease-in-out infinite alternate;
            padding: 5px;
            margin: 0;
            display: block;
            width: 100%;
            box-sizing: border-box;
            word-wrap: break-word;
        }
        .image-container {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            opacity: 0;
            transition: opacity 1s ease-in;
            padding: 0;
            margin: 0;
        }
        .image-container img {
            max-width: 100%;
            max-height: 630px;
            height: auto;
            cursor: pointer;
            display: block;
        }

        /* --- Site 1: Terminal Text --- */
        .terminal-text-container {
             opacity: 1; /* Start visible but content animates */
        }
        .terminal-text {
            font-family: 'DOS-font', monospace; /* Specific font */
            font-size: clamp(1.1rem, 2.5vw + 0.5rem, 1.5rem);
            color: #cac2b9;
            white-space: normal;
            letter-spacing: 1px;
            word-break: break-word;
            text-align: left;
            opacity: 0; /* Text starts hidden */
            width: 100%; /* Takes width from parent/max-width */
            display: block;
            line-height: 2;
            margin: 0 auto;
            padding: 25px 20px;
            position: relative;
            overflow: hidden;
            transition: opacity 0.25s ease-in;
            max-width: 90vw; /* Sets desktop width */
            box-sizing: border-box;
        }

        /* --- Site 1: Arrow --- */
        .arrow-container {
            position: absolute; left: 24%; top: 80%; margin-top: 0;
            opacity: 0; animation: arrowFadeIn 1s ease-in forwards 3s, arrowPulsate 2s ease-in-out infinite 3s;
            z-index: 10; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;
        }

        /* --- Site 1: Text Container Helpers --- */
        .text-container { position: relative; width: 100%; }
        .text-spacer {
            visibility: hidden; position: absolute; width: 100%; top: 0; left: 0; z-index: -1;
            font-family: inherit; font-size: inherit; line-height: inherit; padding: inherit;
            margin: inherit; text-align: inherit; box-sizing: border-box; word-wrap: break-word;
        }
        small { margin: 0; padding: 0; display: block; }

        /* === Site 2: Styles === */

        /* --- Site 2: Glowing Title Styles --- */
        .glowing-title-base {
            color: #cac2b9; text-align: center; opacity: 1; /* Container visible */
            padding: 15px 5px; margin: 40px auto 15px auto;
            width: 85%; max-width: 1200px; box-sizing: border-box;
            font-family: 'Charmset-font', monospace;
        }
        .glowing-title-base h1 {
            margin: 0; padding: 0; font-weight: normal; line-height: 1.2; font-family: inherit;
            white-space: normal; overflow-wrap: break-word; word-break: break-word; color: #cac2b9;
            font-size: clamp(1.5rem, 4vw + 0.8rem, 2.8rem);
            opacity: 0; /* Title text starts hidden */
            animation: glow 1.5s ease-in-out infinite alternate;
        }
        .composition-card-title { margin-top: 60px; margin-bottom: 0px; }
        .composition-card-title + .cg-container { margin-top: 20px !important; }

        /* --- Site 2: Expanding Gallery --- */
        .cg-container {
             opacity: 0; transition: opacity 1s ease-in; /* Gallery fades in */
             width: 85%; max-width: 1000px; margin: 20px auto;
             min-height: 150px; box-sizing: border-box;
        }

        /* --- Site 2: Two-column gallery layout --- */
        .gallery-row {
            display: flex; gap: 40px; margin: 20px auto;
            width: 85%; max-width: 1200px; opacity: 0; /* Gallery row fades in */
            transition: opacity 1s ease-in; box-sizing: border-box;
        }
        .gallery-column { flex: 1; min-width: 0; }
        .gallery-wrapper { width: 95%; margin: 0 auto; position: relative; min-height: 150px; }
        .gallery-wrapper .futuristic-slideshow img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
         .gallery-wrapper noscript img { max-width: 100%; height: auto; display: block; margin: 10px auto; }

        /* --- Site 2: Single Gallery Container Styles --- */
        .single-gallery-container {
            width: 85%; max-width: 1200px; margin: 20px auto;
            padding-bottom: 50px; opacity: 0; transition: opacity 1s ease-in; /* Container fades in */
            box-sizing: border-box;
        }
        .single-gallery-container .gallery-wrapper { max-width: 550px; width: 95%; }

        /* --- Shared Keyframes --- */
        @keyframes glow { 0% { text-shadow: 0 0 10px #cac2b9, 0 0 15px #cac2b9; } 100% { text-shadow: 0 0 20px #cac2b9, 0 0 30px #cac2b9; } }
        @keyframes arrowFadeIn { from { opacity: 0; } to { opacity: 0.9; } }
        @keyframes arrowPulsate { 0% { opacity: 0; } 50% { opacity: 0.9; } 100% { opacity: 0; } }

        /* --- Responsive Adjustments --- */
        @media (max-width: 768px) {
            /* Site 1 Responsive */
            .content-container { flex-direction: column; width: 100%; padding: 0 5px; }
            .two-column-container { width: 100%; padding: 0 5px; margin-bottom: 20px; }
            .glowing-text-wrapper, .image-container { justify-content: center; width: 100%; text-align: center; margin: 10px 0; }
            .column { padding: 0 5px; }
            .terminal-text {
                max-width: none; /* Remove desktop constraint */
                width: 95%; /* Reference width */
                margin-left: auto; margin-right: auto;
                padding: 20px 10px;
            }
            .arrow-container { display: none; }

            /* Site 2 Responsive */
            .cg-container { /* Expanding gallery matches terminal text */
                width: 95%;
                max-width: none;
            }

            .gallery-row,
            .single-gallery-container {
                width: 100%; /* Row/Container takes full width */
                max-width: none;
                padding-left: 0;
                padding-right: 0;
                 margin-left: auto;
                 margin-right: auto;
            }

            .gallery-row {
                flex-direction: column;
                gap: 20px;
                margin-bottom: 20px;
            }
            .single-gallery-container {
                padding-bottom: 30px;
            }

            /* --- FIX: Apply consistent width to GALLERY WRAPPERS on mobile --- */
            .gallery-wrapper {
                width: 95%;      /* Make wrapper match terminal text width */
                max-width: none; /* Override any desktop max-width */
                margin-left: auto;  /* Center the wrapper within its parent column/container */
                margin-right: auto;
            }

            .glowing-title-base {
                margin-top: 30px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px;
                width: 95%; /* Match other content width */
            }
            .glowing-title-base h1 { font-size: clamp(1.2rem, 7vw + 0.5rem, 2.5rem); hyphens: auto; }
            .composition-card-title { margin-top: 40px; }

            /* Spacing between sections */
            .gallery-row + .glowing-title-base,
            .single-gallery-container + .glowing-title-base,
            .cg-container + .glowing-title-base {
                 margin-top: 30px;
            }
        }
    

                ...
                ...
            
        
                ...
                ...
            
        
                &#38;gt; ...
                
            
            &#60;img src="https://freight.cargo.site/t/original/i/bcf2e01f3758de5f9228f0b2e3f7e65f0aab89c75487aeaf6d15369667ada861/1960A.png" id="image"&#62;
        
        
            ...
            ...
        
    
        COMPOSITION CARD
    
    
            &#60;img src="https://freight.cargo.site/t/original/i/b89647e3cb2eb66496a2794a6b9fb7d3ed2a1af805a6360f43798aeace721858/14-0002-PUMICE-STONE.png" alt="COLOR 1"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/0a3ed5c65b9d984336af0a84106a0364a181d6c6a2052cee4ece55cebeadf5de/19-4008-METEORITE.png" alt="COLOR 2"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/6cb6cc5c693d52d61b9d00d6ab15bb9c4bab637de0d27045da667fdf5b3b2b6e/19-3911-BLACK-BEAUTY.png" alt="COLOR 3"&#62;
            &#60;img src="https://freight.cargo.site/t/original/i/27abc9420c8415d518c16b924e70ec5ebf3247235eb857d7bce56873e12d087b/COTTON-JERSEY.png" alt="FABRIC 1"&#62;
           
             &#60;img src="https://freight.cargo.site/t/original/i/f77892f5f3598302ad3f531e0b12aac22be33dcd5d46813e0857dcda79cb82f5/COTTON-POPLIN.png" alt="FABRIC 1"&#62;
              &#60;img src="https://freight.cargo.site/t/original/i/ba4ea6e6229de8c202eff6aff900834637c84df724feeb33cf40af80afff782a/WOOL-SUITING.png" alt="FABRIC 2"&#62; 
            &#60;img src="https://freight.cargo.site/t/original/i/ada9e2179a58f82db0ceaeb0bb7232872238e63245096a26894c775aa55ce5b9/MUSLIN.png" alt="FABRIC 3"&#62;
            
            
        SWATCH
        ...
    

        ...
    
    
                &#60;img src="" alt=""&#62;
            
        
                 &#60;img src="" alt=""&#62;
            
        
        ...
    
    
                &#60;img src="" alt=""&#62;
            
        
                &#60;img src="" alt=""&#62;
            
        
        PROCESS
    
    
            &#60;img src="" alt=""&#62;
        
    
        document.addEventListener("DOMContentLoaded", function() {
            // --- Shared Variables &#38; Functions ---
            const isMobile = /Android&#124;webOS&#124;iPhone&#124;iPad&#124;iPod&#124;BlackBerry&#124;IEMobile&#124;Opera Mini/i.test(navigator.userAgent) &#124;&#124; window.innerWidth &#60; 768;
            const randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&#38;*()_+-=[]&#124;/?';

            // --- START: Preload Function for Single Image ---
            function preloadSingleImage(url) {
                return new Promise((resolve, reject) =&#62; {
                    if (!url) {
                        // Don't reject here, just resolve immediately if no URL
                        console.warn("No URL provided for preloading.");
                        resolve(null); // Resolve with null or undefined
                        return;
                    }
                    // console.log(`Starting preload: ${url}`); // Optional logging
                    const img = new Image();
                    img.onload = () =&#62; {
                        // console.log(`Preload success: ${url}`); // Optional logging
                        resolve(img);
                    };
                    img.onerror = (err) =&#62; {
                        console.error(`Failed to preload image: ${url}`, err);
                        // Resolve rather than reject to not cause unhandled promise errors if not caught
                        resolve(null);
                    };
                    img.src = url;
                });
            }
            // --- END: Preload Function ---


            // --- Site 1 Specific Elements &#38; Content ---
            const mainElements = {
                leftColumn: document.getElementById("left-column-text"),
                rightColumn: document.getElementById("right-column-text"),
                glowingText: document.getElementById("glowing-text"),
                imageContainer: document.getElementById("image-container"),
                image: document.getElementById("image"), //  { if (section.dependency === dependencyId) { checkAndAnimateSection(section.id); } }); } } else { console.warn(`Attempted to complete non-existent dependency: ${dependencyId}`); }
                },
                isDependencyComplete: function(dependencyId) { /* ...(same logic)... */
                    if (!dependencyId) return true; const status = this.dependencies[dependencyId]; return status === true;
                }
            };

             // --- Text Animation Function ---
             function animateText(element, finalText, batchSize, typingSpeed, callback) { /* ...(same logic)... */
                  if (!element) { console.error("Element not found for animation:", element); if (callback) callback(); return; }
                 element.style.opacity = 1;
                 if (!isMobile) { let currentIndex = 0; let interval = setInterval(() =&#62; { let randomText = ''; for (let i = currentIndex; i &#60; finalText.length; i++) { if (finalText[i] === ' ' &#124;&#124; finalText[i] === 'n' &#124;&#124; finalText[i] === 'r') randomText += finalText[i]; else randomText += randomChars.charAt(Math.floor(Math.random() * randomChars.length)); } requestAnimationFrame(() =&#62; { if(element) element.innerHTML = finalText.substring(0, currentIndex) + randomText; }); currentIndex += batchSize; if (currentIndex &#62;= finalText.length) { clearInterval(interval); requestAnimationFrame(() =&#62; { if(element) element.innerHTML = finalText.replace(/(rn&#124;n&#124;r)/g, ''); if (callback) callback(); }); } }, typingSpeed); }
                 else { let currentIndex = 0; let effectiveBatchSize = batchSize; let effectiveTypingSpeed = typingSpeed; if (finalText.length &#62; 100) { effectiveBatchSize = Math.max(15, Math.floor(finalText.length / 10)); effectiveTypingSpeed = 0.25; } const processMobileFrame = () =&#62; { let currentFixedText = finalText.substring(0, currentIndex); let randomTextPart = ''; for (let i = currentIndex; i &#60; finalText.length; i++) { if (finalText[i] === ' ' &#124;&#124; finalText[i] === 'n' &#124;&#124; finalText[i] === 'r') randomTextPart += finalText[i]; else randomTextPart += randomChars.charAt(Math.floor(Math.random() * randomChars.length)); } if(element) element.innerHTML = currentFixedText + randomTextPart; currentIndex += effectiveBatchSize; if (currentIndex &#62;= finalText.length) { if(element) element.innerHTML = finalText.replace(/(rn&#124;n&#124;r)/g, ''); if (callback) setTimeout(callback, 50); return; } requestAnimationFrame(() =&#62; { setTimeout(processMobileFrame, effectiveTypingSpeed); }); }; requestAnimationFrame(() =&#62; { setTimeout(processMobileFrame, effectiveTypingSpeed); }); }
             }

            // --- Viewport Check ---
            function isInViewport(element) { /* ...(same logic)... */
                 if (!element) return false; const rect = element.getBoundingClientRect(); const windowHeight = window.innerHeight &#124;&#124; document.documentElement.clientHeight; const buffer = 50; return rect.top &#60; windowHeight - buffer &#38;&#38; rect.bottom &#62; buffer;
            }

            // --- Scroll-Triggered Section Definitions ---
            // Ensure elements exist before creating section definitions
            const compCardTitleContainer = document.getElementById("comp-card-title-container");
            const compCardTitleH1 = document.getElementById("comp-card-title-h1");
            const compCardGallerySection = document.getElementById("comp-card-gallery-section");
            const firstGalleryTitleContainer = document.getElementById("first-gallery-row-title-container");
            const firstGalleryTitleH1 = document.getElementById("first-gallery-row-title-h1");
            const firstGallerySection = document.getElementById("first-gallery-row-section");
            const secondGalleryTitleContainer = document.getElementById("second-gallery-row-title-container");
            const secondGalleryTitleH1 = document.getElementById("second-gallery-row-title-h1");
            const secondGallerySection = document.getElementById("second-gallery-row-section");
            const processTitleContainer = document.getElementById("process-title-container");
            const processTitleH1 = document.getElementById("process-title-h1");
            const processGallerySection = document.getElementById("process-gallery-section");

            const animatedSections = [ /* ...(same definitions)... */
                 { id: "comp-card-gallery-section", titleContainerElement: compCardTitleContainer, titleTextElement: compCardTitleH1, titleTextContent: "COMPOSITION CARD", container: compCardGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "terminal" },
                 { id: "first-gallery-row-section", titleContainerElement: firstGalleryTitleContainer, titleTextElement: firstGalleryTitleH1, titleTextContent: "NTECH™ ANARCH PONCHO", container: firstGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "comp-card-gallery-section" },
                 { id: "second-gallery-row-section", titleContainerElement: secondGalleryTitleContainer, titleTextElement: secondGalleryTitleH1, titleTextContent: "NTECH™ FENDER SKIRT + DOUBLE WIDE TROUSER", container: secondGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "first-gallery-row-section" },
                 { id: "process-gallery-section", titleContainerElement: processTitleContainer, titleTextElement: processTitleH1, titleTextContent: "PROCESS", container: processGallerySection, customAnimation: function(callback) { const self = this; animateText(self.titleTextElement, self.titleTextContent, 3, 40, () =&#62; { if (self.container) self.container.style.opacity = 1; setTimeout(() =&#62; { animationState.setDependencyComplete(self.id); if (callback) callback(); }, 1000); }); }, triggered: false, dependency: "second-gallery-row-section" }
            ];

            // --- Section Animation Trigger ---
            function animateSectionSequence(section) { /* ...(same logic)... */
                 section.triggered = true; if (typeof section.customAnimation === 'function') { section.customAnimation(); } else { console.warn(`Section ${section.id} has no customAnimation defined.`); if (section.container) section.container.style.opacity = 1; setTimeout(() =&#62; animationState.setDependencyComplete(section.id), 1000); }
            }

            // --- Check &#38; Animate Logic ---
            function checkAndAnimateSection(sectionId) { /* ...(same logic)... */
                 const section = animatedSections.find(s =&#62; s.id === sectionId); if (!section &#124;&#124; section.triggered) return; const dependencyMet = animationState.isDependencyComplete(section.dependency); const elementToCheck = section.titleContainerElement &#124;&#124; section.container; const visible = isInViewport(elementToCheck); if (dependencyMet &#38;&#38; visible) { animateSectionSequence(section); }
            }

            // --- Scroll Listener ---
            let scrollTimeout;
            window.addEventListener('scroll', () =&#62; { /* ...(same logic)... */
                 clearTimeout(scrollTimeout); scrollTimeout = setTimeout(() =&#62; { animatedSections.forEach(section =&#62; checkAndAnimateSection(section.id)); }, 50);
            }, { passive: true });

            // --- Main Site 1 Animation Sequence Function ---
            // Returns the function that starts the sequence
            function runMainAnimationSequence() {
                const sequence = [ /* ...(same sequence)... */
                    { action: (next) =&#62; animateText(mainElements.leftColumn, textContent.leftColumn, 3, 5, next) },
                    { action: (next) =&#62; animateText(mainElements.rightColumn, textContent.rightColumn, 3, 5, next) },
                    { action: (next) =&#62; setTimeout(next, 250) },
                    { action: (next) =&#62; animateText(mainElements.glowingText, textContent.glowingText, 7, 5, next) },
                    { action: (next) =&#62; setTimeout(() =&#62; { if(mainElements.imageContainer) mainElements.imageContainer.style.opacity = "1"; next(); }, 500) },
                    { action: (next) =&#62; setTimeout(() =&#62; { const terminalContainer = document.querySelector('.terminal-text-container'); if(terminalContainer) terminalContainer.style.opacity = 1; animateText(mainElements.terminalText, textContent.terminalText, 7, 5, next); }, 1000) },
                    { action: (next) =&#62; { animationState.setDependencyComplete("terminal"); checkAndAnimateSection("comp-card-gallery-section"); next(); } }
                ];
                let currentStep = 0;
                function runNextStep() { if (currentStep &#60; sequence.length) sequence[currentStep++].action(runNextStep); }
                // --- MODIFICATION: No longer starts itself with setTimeout here ---
                // setTimeout(runNextStep, 300); //  {
                       const handleClick = function(event) { if (this.closest('.cg-gallery-item') &#124;&#124; this.id === 'image') { return; } const anchor = event.target.closest('a[target="_blank"]'); if (anchor) { return; } };
                       img.addEventListener('click', handleClick);
                       if (!img.closest('.cg-gallery-item') &#38;&#38; img.src) { if (img.id === 'image' &#124;&#124; img.closest('a[target="_blank"]')) img.style.cursor = 'pointer'; else img.style.cursor = ''; }
                       else { img.style.cursor = ''; }
                  });
             }


             // --- Initialization ---

             // 1. Start preloading the main image concurrently (don't await)
             if (mainElements.image &#38;&#38; mainElements.image.src) {
                 preloadSingleImage(mainElements.image.src)
                     .then(loadedImg =&#62; {
                         if (loadedImg) { /* console.log("Background preload success."); */ }
                         else { /* console.log("Background preload failed or no image."); */ }
                     })
                     .catch(err =&#62; console.error("Error in preload promise chain:", err)); // Catch potential errors in the promise itself
             } else {
                 console.warn("Main image element or src not found, skipping preload trigger.");
             }

             // 2. Get the function to start the main animation sequence
             const startAnimations = runMainAnimationSequence();

             // 3. Schedule the main Site 1 animations to start after the delay
             setTimeout(startAnimations, 300); // 300ms delay

             // 4. Setup other listeners
             setupImageClickListeners();

             // 5. Perform an initial check for Site 2 sections already in view
             setTimeout(() =&#62; {
                 // console.log("--- Initial Viewport Check ---");
                 animatedSections.forEach(section =&#62; checkAndAnimateSection(section.id));
             }, 500);


        }); // End of DOMContentLoaded
    </description>
		
	</item>
		
		
	<item>
		<title>ENTRIES</title>
				
		<link>https://ntech.online/ENTRIES</link>

		<pubDate>Mon, 24 Mar 2025 01:48:12 +0000</pubDate>

		<dc:creator>NICHOLAS TECHNOLOGIES</dc:creator>

		<guid isPermaLink="true">https://ntech.online/ENTRIES</guid>

		<description>
    
    3D Tilted Image Carousel with Glowing Text
    
       /* Core Page Styles */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
            overflow-y: hidden; /* Prevent vertical scrolling */
            position: relative; /* Needed for z-index stacking context if using absolute on ::before */
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #000; /* Keep the base black color */
            /* background-image: radial-gradient(circle, rgba(30,30,30,1) 0%, rgba(0,0,0,1) 100%); </description>
		
	</item>
		
		
	<item>
		<title>HOME</title>
				
		<link>https://ntech.online/HOME</link>

		<pubDate>Wed, 05 Mar 2025 19:53:15 +0000</pubDate>

		<dc:creator>NICHOLAS TECHNOLOGIES</dc:creator>

		<guid isPermaLink="true">https://ntech.online/HOME</guid>

		<description>
    
    Your Page Title
    
       html, body {
            overflow-x: hidden;
            overflow-y: hidden; /* Prevent vertical scrolling */
            
         }
        /* Apply DOS font to the image gallery and remove bold */
        .image-gallery, .image-gallery a, .image-gallery * {
            font-family: 'DOS-font', sans-serif !important;
            font-size: 1.4rem !important; /* Adjust the font size here */
            font-weight: normal !important; /* Remove bold */
        }
    

&#60;img width="524" height="524" width_o="524" height_o="524" data-src="https://freight.cargo.site/t/original/i/76be04094edd537b5b1215b33dadfd510cae9499d23549d6ef4e05e0777a610e/ENTRIES.png" data-mid="231790248" border="0" alt="ENTRIES (ITEMS)" data-caption="ENTRIES (ITEMS)" src="https://freight.cargo.site/w/524/i/76be04094edd537b5b1215b33dadfd510cae9499d23549d6ef4e05e0777a610e/ENTRIES.png" /&#62;
&#60;img width="500" height="500" width_o="500" height_o="500" data-src="https://freight.cargo.site/t/original/i/91f526b178064075c3b0a03e62a2689af9c1d052ebeb54c5701a1d2435d74a7b/contact-icon.png" data-mid="227716257" border="0" alt="BRAND_INFO" data-caption="BRAND_INFO" src="https://freight.cargo.site/w/500/i/91f526b178064075c3b0a03e62a2689af9c1d052ebeb54c5701a1d2435d74a7b/contact-icon.png" /&#62;
&#60;img width="427" height="427" width_o="427" height_o="427" data-src="https://freight.cargo.site/t/original/i/50d6ba1647aabeaf38ea089022470086b27927e6dac7e83a3d341d61c2620e7b/question.png" data-mid="227716262" border="0" alt="ABOUT" data-caption="ABOUT" src="https://freight.cargo.site/w/427/i/50d6ba1647aabeaf38ea089022470086b27927e6dac7e83a3d341d61c2620e7b/question.png" /&#62;
&#60;img width="500" height="500" width_o="500" height_o="500" data-src="https://freight.cargo.site/t/original/i/a8b35c507f6c8a94041e49020c3373e4822b4eff4093a93a294ab39a38800418/INSTA.png" data-mid="231790210" border="0" alt="INSTAGRAM" data-caption="INSTAGRAM" src="https://freight.cargo.site/w/500/i/a8b35c507f6c8a94041e49020c3373e4822b4eff4093a93a294ab39a38800418/INSTA.png" /&#62;
</description>
		
	</item>
		
		
	<item>
		<title>ABOUT</title>
				
		<link>https://ntech.online/ABOUT</link>

		<pubDate>Wed, 05 Mar 2025 19:53:16 +0000</pubDate>

		<dc:creator>NICHOLAS TECHNOLOGIES</dc:creator>

		<guid isPermaLink="true">https://ntech.online/ABOUT</guid>

		<description>
    
    Page Title
    
        h1 {
            font-family: 'CHARMSET-font'; /* Customize font-family if needed */
            font-size: 4.5rem; /* Adjust the size as necessary */
            color: #fff; /* Text color */
            opacity: 0; /* Initially hidden */
            transition: opacity 2s ease-in; /* 2-second fade-in transition */
        }

        .terminal-text {
            font-family: 'DOS-font', monospace;
            white-space: normal;
            letter-spacing: 1px;
            font-size: 1.5rem;
            color: #fff;
            word-break: break-word;
            text-align: center;
            opacity: 0;
            width: 100%;
            display: block;
            line-height: 1.5;
            margin: 0;
            padding: 0;
            position: relative;
            overflow: hidden;
            transition: opacity 2s ease-in; /* CSS transition for fade-in */
        }

        .text-container {
            width: 100%;
            height: auto;
            overflow: hidden;
            position: relative;
         
        }

        .terminal-text p {
            margin-bottom: 20px; /* Space between paragraphs */
        }

        /* New CSS for the image container */
        .image-container {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            padding: 20px 0;
            margin-top: 0px;
            background-color: transparent; /* Optional background color */
        }

        .image-container img {
            max-width: 150px; /* Adjust image size */
            height: auto;
            cursor: pointer;
            transition: opacity 2s ease-in; /* For fade-in */
            opacity: 0; /* Initially hidden */
        }

        /* Mobile adjustments */
        @media (max-width: 600px) {
            .image-container {
                padding: 10px 0; /* Adjust the padding for smaller screens */
            }

            .image-container img {
                max-width: 80px; /* Smaller images for mobile */
            }
        }
    

    ABOUT
    
        document.addEventListener("DOMContentLoaded", function() {
            const headerText = document.getElementById('header-text');
            headerText.style.opacity = 1; // Trigger the fade-in effect
        });
    

        Loading...
    

        document.addEventListener("DOMContentLoaded", function() {
            const finalText2 = `NICHOLAS IS MY LAST NAME WITH AN ADDED H, REPRESENTATIVE OF MY MOTHER’S LAST NAME. I AM A FIRST-GENERATION MEXICAN-AMERICAN NATIVE TO LOS ANGELES. IN 2018, I BEGAN CRAFTING MY BRAND’S IDENTITY THROUGH MANY PRODUCT LAUNCHES AND REBRANDINGS. IN 2020, NICHOLAS TECHNOLOGIES (NTECH), WAS CREATED, A BRAND DEDICATED TO PRODUCING A WIDE RANGE OF ITEMS THROUGH THE USE OF HYPOTHETICAL FUTURISTIC TECHNOLOGY.
    THE GOAL OF NTECH IS TO CREATE QUALITY CLOTHING FROM VARIOUS MOMENTS IN TIME. NTECH IS NOT A BRAND ABOUT FOLLOWING TRENDS OR YEARLY SEASONAL CYCLES, RATHER A BRAND THAT SERVES AS THE FASHION EQUIVALENT OF A JOURNAL ENTRY THAT EXPLORES THE “WHAT-IFS” OF HISTORY AND PUTS THEM IN TERMS OF CLOTHING.
    NTECH HAS FUTURE PLANS TO EXPAND ITS PRODUCT OFFERINGS WITH THE SALE OF FUTURISTICALLY STYLED ELECTRONICS AND FURNITURE. ADDITIONALLY, A PRODUCT DEVELOPMENT SERVICE WILL BE IMPLEMENTED FOR SELECT DESIGNERS LOOKING TO CREATE EXPERIMENTAL, FORWARD-THINKING PRODUCTS.`;

            const element2 = document.getElementById("animated-text-2");

            element2.innerHTML = "";
            let currentIndex2 = 0;
            const randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&#38;*()_+-=[]&#124;/?';
            const typingSpeed = 5;
            const batchSize = 7;

            function typeText() {
                element2.style.opacity = 1;

                let interval = setInterval(() =&#62; {
                    let randomText = '';
                    for (let i = currentIndex2; i &#60; finalText2.length; i++) {
                        if (finalText2[i] === ' ') {
                            randomText += ' ';
                        } else {
                            randomText += randomChars.charAt(Math.floor(Math.random() * randomChars.length));
                        }
                    }

                    element2.innerHTML = finalText2.substring(0, currentIndex2) + randomText;

                    currentIndex2 += batchSize;

                    if (currentIndex2 &#62; finalText2.length) {
                        clearInterval(interval);
                        element2.innerHTML = finalText2;
                        fadeInImages(); // Call the fade-in images function after typing finishes
                    }
                }, typingSpeed);
            }

            typeText();

            // Function to fade in the images
            function fadeInImages() {
                const images = document.querySelectorAll('.fade-in-image');
                images.forEach((img, index) =&#62; {
                    setTimeout(() =&#62; {
                        img.style.opacity = 1; // Trigger the fade-in effect for each image
                    }, index * 500); // Add a small stagger between each image fade-in
                });
            }
        });
    

            &#60;img src="https://freight.cargo.site/t/original/i/c6e589e7e051d6f88070a0da750a27b18e3a0b8c7d348c34aa5214b38b12cd60/insta-logo.png" alt="Image 1" class="fade-in-image"&#62;
        
        
            &#60;img src="https://freight.cargo.site/t/original/i/52b88ef1299980696065e57b0dac8dd2ade894a5abeadd0d2daa2c686dfe853c/email-logo.png" alt="Image 2" class="fade-in-image"&#62;
        
        
            &#60;img src="https://freight.cargo.site/t/original/i/c125df56197d6840b24234ea3c147a9f836ba2acda0ac00dc1c748b6fadc5b38/linkedin-logo.png" alt="Image 3" class="fade-in-image"&#62;
        
    
 </description>
		
	</item>
		
		
	<item>
		<title>BRAND</title>
				
		<link>https://ntech.online/BRAND</link>

		<pubDate>Wed, 05 Mar 2025 19:53:18 +0000</pubDate>

		<dc:creator>NICHOLAS TECHNOLOGIES</dc:creator>

		<guid isPermaLink="true">https://ntech.online/BRAND</guid>

		<description>
    
    Page Title
    
        h1 {
            font-family: 'CHARMSET-font'; /* Customize font-family if needed */
            font-size: 4.5rem; /* Adjust the size as necessary */
            color: #fff; /* Text color */
            opacity: 0; /* Initially hidden */
            transition: opacity 2s ease-in; /* 2-second fade-in transition */
        }

        .terminal-text {
            font-family: 'DOS-font', monospace;
            white-space: normal;
            font-size: 1.5rem;
            letter-spacing: 1px;
            color: #fff;
            word-break: break-word;
            text-align: center;
            opacity: 0;
            width: 100%;
            display: block;
            line-height: 1.5;
            margin: 0;
            padding: 0;
            position: relative;
            overflow: hidden;
            transition: opacity 2s ease-in; /* CSS transition for fade-in */
        }

        .text-container {
            width: 100%;
            height: auto;
            overflow: hidden;
            position: relative;
        }

        .terminal-text p {
            margin-bottom: 20px; /* Space between paragraphs */
        }

        @keyframes blink {
            from, to { border-color: transparent; }
            50% { border-color: black; }
        }

        /* Button Styling */
        .futuristic-button {
            font-family: 'DOS-font', monospace;
            font-size: 1.5rem;
            color: rgba(0, 150, 255, 0.8); /* Futuristic blue text */
            background: rgba(0, 150, 255, 0.2); /* Futuristic blue background */
            border: 2px solid rgba(0, 150, 255, 0.5); /* Blue border */
            padding: 10px 20px;
            margin-top: 30px;
            cursor: pointer;
            opacity: 0; /* Initially hidden */
            transition: opacity 2s ease-in-out, background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            text-transform: uppercase;
            box-shadow: 0 0 15px rgba(0, 150, 255, 0.5); /* Blue glow */
            text-align: center;
        }

        .futuristic-button:hover {
            background: rgba(0, 150, 255, 0.4); /* Darker blue on hover */
            box-shadow: 0 0 25px rgba(0, 150, 255, 0.8); /* Brighter glow on hover */
        }

        /* Center button */
        .button-container {
            text-align: center;
        }

        /* Button fade-in after text animation */
        .fade-in {
            opacity: 1; /* Show the button */
        }

        /* Modal (Pop-up) Styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 150, 255, 0.2);
            border: 3px solid rgba(0, 150, 255, 0.5); /* Slightly thicker border */
            box-shadow: 0 0 35px rgba(0, 150, 255, 0.8); /* Brighter glow */
            padding: 40px; /* Increase padding */
            width: 450px; /* Increase modal width */
            text-align: center;
            z-index: 1000;
        }

        .modal-title {
            font-family: 'CHARMSET-font', sans-serif;
            font-size: 3rem; /* Scale up title */
            color: rgba(0, 150, 255, 0.8); /* Blue color */
            margin-bottom: 30px;
        }

        .modal-input {
            width: 100%;
            padding: 15px; /* Increase padding */
            font-family: 'DOS-font', monospace;
            font-size: 1.5rem; /* Scale up input text size */
            background: rgba(255, 255, 255, 0.1);
            border: 3px solid rgba(0, 150, 255, 0.5); /* Slightly thicker border */
            color: #fff;
            box-shadow: 0 0 15px rgba(0, 150, 255, 0.5);
        }

        .modal-input::placeholder {
            color: rgba(0, 150, 255, 0.5); /* Blue placeholder */
        }

        .submit-button {
            font-family: 'DOS-font', monospace;
            font-size: 1.8rem; /* Scale up button text size */
            color: rgba(0, 150, 255, 0.8); /* Blue text */
            background: rgba(0, 150, 255, 0.2); /* Blue background */
            border: 3px solid rgba(0, 150, 255, 0.5); /* Slightly thicker border */
            padding: 15px 30px; /* Increase padding */
            margin-top: 30px;
            cursor: pointer;
            text-transform: uppercase;
            box-shadow: 0 0 22px rgba(0, 150, 255, 0.5); /* Scale up glow */
        }

        .submit-button:hover {
            background: rgba(0, 150, 255, 0.4);
            box-shadow: 0 0 35px rgba(0, 150, 255, 0.8);
        }

        /* Modal overlay - Darkened background when modal opens */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95); /* Darker overlay */
            display: none;
            z-index: 999;
        }
    

    BRAND

    
        document.addEventListener("DOMContentLoaded", function() {
            const headerText = document.getElementById('header-text');
            headerText.style.opacity = 1; // Trigger the fade-in effect
        });
    

    Optimized Random Letter Typing Animation

    
            Loading...
        
    
        REQUEST A PROMPT
    

        PROMPT REQUEST
        
        SUBMIT
    

        document.addEventListener("DOMContentLoaded", function() {
            const finalText2 = `NTECH CAN REPLICATE OR PREDICT CLOTHING DESIGNS WHEN GIVEN AN INPUT PROMPT OR KEYWORD.
    REPLICATION REFERS TO THE REPRODUCTION OF ANY CLOTHING ITEM BEFORE THE CURRENT DATE.
PREDICTION CAN EITHER BE A PREDICTION OF THE FUTURE OR ALTERNATE TIMELINE OF THE PAST.
    INPUTS CAN BE AS DETAILED AS A PARAGRAPH OR VAGUE AS A SINGLE WORD. INCREASINGLY ABSTRACT RESULTS WILL BE GENERATED WHEN GIVEN LESS TO WORK WITH.
ENTRIES ARE GROUPED BY THEIR YEAR OF CAPTURE.
BY DEFAULT, ALL ITEMS ARE OUTPUT WITH NTECH’S SIGNATURE TAILORING WHICH PROVIDES AN IMPROVED, RELAXED FIT. ENTRIES THAT CONTAIN IT WILL EXPLICITLY MENTION IT IN THEIR PROMPT.
IN ADDITION TO THE INFINITE NUMBER OF POSSIBILITIES FOR PROMPTS, NTECH ALSO ALLOWS COMMUNITY INPUT AND RECOMMENDATIONS FOR FUTURE ENTRIES. CLICK THE BUTTON BELOW TO SEND A REQUEST.`;

            const element2 = document.getElementById("animated-text-2");
            const promptButton = document.getElementById("prompt-button");
            const modal = document.getElementById("prompt-modal");
            const modalOverlay = document.getElementById("modal-overlay");
            const submitButton = document.getElementById("submit-button");

            // Clear the placeholder text immediately
            element2.innerHTML = "";

            let currentIndex2 = 0;
            const randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&#38;*()_+-=[]&#124;/?';
            const typingSpeed = 5; // Typing speed in ms
            const batchSize = 7; // Number of characters to update in a single DOM change

            // Function to show random characters
            async function typeText() {
                element2.style.opacity = 1; // Apply the CSS transition for fade-in

                let interval = setInterval(() =&#62; {
                    let randomText = '';
                    for (let i = currentIndex2; i &#60; finalText2.length; i++) {
                        if (finalText2[i] === ' ') {
                            randomText += ' '; // Keep spaces as spaces
                        } else {
                            randomText += randomChars.charAt(Math.floor(Math.random() * randomChars.length));
                        }
                    }

                    element2.innerHTML = finalText2.substring(0, currentIndex2) + randomText;

                    currentIndex2 += batchSize; // Type in batches

                    if (currentIndex2 &#62; finalText2.length) {
                        clearInterval(interval);
                        element2.innerHTML = finalText2; // Finish by showing the final text
                        // Show the button after text is fully typed
                        setTimeout(() =&#62; {
                            promptButton.classList.add('fade-in');
                        }, 1000); // Delay before showing the button
                    }
                }, typingSpeed);
            }

            // Start typing and fading in
            typeText();

            // Show the modal when the request button is clicked
            promptButton.addEventListener('click', function() {
                modal.style.display = "block";
                modalOverlay.style.display = "block";
            });

            // Close the modal overlay when clicked
            modalOverlay.addEventListener('click', function() {
                modal.style.display = "none";
                modalOverlay.style.display = "none";
            });

            // Handle form submission
            submitButton.addEventListener('click', function() {
                const userMessage = document.getElementById("user-prompt").value;
                if (userMessage) {
                    // Open the user's email client with the message
                    const mailtoLink = `mailto:contact@ntech.online?subject=Prompt%20Request&#38;body=${encodeURIComponent(userMessage)}`;
                    window.location.href = mailtoLink;
                }
            });
        });
    

</description>
		
	</item>
		
		
	<item>
		<title>NICO_RADIO</title>
				
		<link>https://ntech.online/NICO_RADIO</link>

		<pubDate>Wed, 05 Mar 2025 19:53:19 +0000</pubDate>

		<dc:creator>NICHOLAS TECHNOLOGIES</dc:creator>

		<guid isPermaLink="true">https://ntech.online/NICO_RADIO</guid>

		<description>NICO RADIO


	&#60;img width="2000" height="1282" width_o="2000" height_o="1282" data-src="https://freight.cargo.site/t/original/i/992b725b23db09ff8631b2146d80a06febce9fe68b9163a6b5a2a7eeb2eaf0ad/RADIO-LOGO-SMALLER-FOR-WEB.png" data-mid="227716306" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/992b725b23db09ff8631b2146d80a06febce9fe68b9163a6b5a2a7eeb2eaf0ad/RADIO-LOGO-SMALLER-FOR-WEB.png" /&#62;
	

&#38;nbsp; &#38;nbsp; 

&#38;nbsp; &#38;nbsp;
&#38;nbsp;IN A MID-CENTURY ALTERNATE TIMELINE, NICHOLAS TECHNOLOGIES EXISTS AS A RADIO COMMUNICATIONS COMPANY KNOWN AS “NCOMM” OR NICHOLAS COMMUNICATIONS. THIS COMPANY OWNS AND OPERATES SOME OF THE STRONGEST 50,000-WATT AM FREQUENCY RADIO STATIONS IN NORTHERN AMERICA. ONE OF THEIR MOST POPULAR STATIONS IS 88 AM N.I.C.O, A STATION CAPABLE OF BROADCASTING TO THE ENTIRE WEST COAST FROM THEIR HEADQUARTERS IN THE SOUTHERN CALIFORNIA DESERT.
&#38;nbsp;

NTECH USES SPECIALIZED EQUIPMENT TO INTERCEPT THE RADIO FREQUENCIES GENERATED IN THIS PAST, ALTERNATE TIMELINE. THE PROCESS IS TIME-INTENSIVE AND AS A RESULT, ONLY ALLOWS FOR THE DOCUMENTATION OF 2 BROADCASTS PER MONTH. THESE ENTRIES WILL BE SHARED TO 3 LOCATIONS, THE FIRST BEING YOUTUBE FOR ON-DEMAND LISTENING, AND THE SECOND, A HOSTING WEBSITE FOR DOWNLOADING PURPOSES.


	LISTEN ON YOUTUBE:
&#60;img width="600" height="512" width_o="600" height_o="512" data-src="https://freight.cargo.site/t/original/i/a1896599d18398500c141d00ca286fe6fa6e2ec3699f1c913544c65462c48311/LIVE-ICON.png" data-mid="227716305" border="0" data-scale="28" src="https://freight.cargo.site/w/600/i/a1896599d18398500c141d00ca286fe6fa6e2ec3699f1c913544c65462c48311/LIVE-ICON.png" /&#62;

&#38;nbsp;

BROADCAST SCHEDULENEW BROADCASTS:
	

PERIODICALLY THROUGHOUT 2024.
(NO SET SCHEDULE)


ARCHIVE


ORIGINAL BROADCAST DATE:


OCTOBER 27, 1965
INTERCEPTED BROADCAST DATE:
OCTOBER 27, 2023
DESCRIPTION:“SURF HOUR” AN ASSORTMENT OF GARAGE SURF INSTRUMENTALS RANGING FROM 1958 TO 1965

	...ARCHIVE IN PROGRESS...


ORIGINAL BROADCAST DATE: 
NOVEMBER 10, 1963
INTERCEPTED BROADCAST DATE:NOVEMBER 10, 2023
DESCRIPTION:“SOLID GOLD HOUR” AN ASSORTMENT OF OLDIES RECORDS FROM 1952 - 1963.


ORIGINAL BROADCAST DATE: 
DECEMBER 1, 1966
INTERCEPTED BROADCAST DATE:DECEMBER 1, 2023
DESCRIPTION:“SWINGIN’ SOUTHERN 60S” AN ASSORTMENT OF MEXICAN GARAGE ROCK RECORDS FROM 1965 AND 1966.
	

...ARCHIVE IN PROGRESS...


ORIGINAL BROADCAST DATE: 
DECEMBER 22, 1963
INTERCEPTED BROADCAST DATE:DECEMBER 22, 2023
DESCRIPTION:“HOLIDAY HITBOUND TIME” SEASONAL RECORDS FROM 1949 - 1960.
	...ARCHIVE IN PROGRESS...
</description>
		
	</item>
		
	</channel>
</rss>