remove: all scan/tech overlay effects

public/style.css

@@ -659,181 +659,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
 .footer a { color: var(--clr-black); text-decoration: none; }
 .footer a:hover { text-decoration: underline; }
 
-/* ---- TECHNICAL DRAWING OVERLAY (panel image) ---- */
+/* ---- (REMOVED) tech overlay + card CAD effects ---- */
-.tech-overlay {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    z-index: 10;
-    overflow: hidden;
-}
-.tech-corner {
-    position: absolute;
-    width: 28px; height: 28px;
-    border-color: rgba(232,168,0,0);
-    border-style: solid;
-    border-width: 0;
-    transition: border-color 0.6s ease, width 0.5s ease, height 0.5s ease;
-}
-.tech-visible .tech-corner {
-    border-color: rgba(232,168,0,0.6);
-}
-.tech-corner--tl { top: 7%; left: 5%; border-top-width: 1px; border-left-width: 1px; }
-.tech-corner--tr { top: 7%; right: 5%; border-top-width: 1px; border-right-width: 1px; }
-.tech-corner--br { bottom: 7%; right: 5%; border-bottom-width: 1px; border-right-width: 1px; }
-.tech-corner--bl { bottom: 7%; left: 5%; border-bottom-width: 1px; border-left-width: 1px; }
-
-.tech-center-h, .tech-center-v {
-    position: absolute;
-    background: rgba(232,168,0,0);
-    transition: background 0.5s ease 0.15s;
-}
-.tech-visible .tech-center-h, .tech-visible .tech-center-v {
-    background: rgba(232,168,0,0.2);
-}
-.tech-center-h {
-    top: 50%; left: 38%; right: 38%;
-    height: 1px; transform: translateY(-0.5px);
-}
-.tech-center-v {
-    left: 50%; top: 38%; bottom: 38%;
-    width: 1px; transform: translateX(-0.5px);
-}
-
-/* Dimension lines */
-.tech-dim {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    opacity: 0;
-    transition: opacity 0.5s ease 0.3s;
-}
-.tech-visible .tech-dim { opacity: 1; }
-.tech-dim--h {
-    bottom: 4%; left: 5%; right: 5%;
-}
-.tech-dim--v {
-    right: 2.5%; top: 7%; bottom: 7%;
-    flex-direction: column;
-    writing-mode: vertical-lr;
-}
-.tech-dim-line {
-    flex: 1;
-}
-.tech-dim--h .tech-dim-line { height: 1px; background: rgba(232,168,0,0.35); }
-.tech-dim--v .tech-dim-line { width: 1px; background: rgba(232,168,0,0.35); }
-.tech-dim-text {
-    font-family: var(--font-mono);
-    font-size: 0.5rem;
-    color: rgba(232,168,0,0.65);
-    letter-spacing: 0.06em;
-}
-/* Dimension arrows */
-.tech-dim-arrow {
-    font-size: 0.5rem;
-    color: rgba(232,168,0,0.5);
-    line-height: 1;
-}
-
-/* Reference text */
-.tech-ref {
-    position: absolute;
-    bottom: 1.5%; left: 5%;
-    font-family: var(--font-mono);
-    font-size: 0.45rem;
-    color: rgba(232,168,0,0);
-    letter-spacing: 0.06em;
-    transition: color 0.5s ease 0.5s;
-}
-.tech-visible .tech-ref { color: rgba(232,168,0,0.45); }
-
-/* Blueprint grid */
-.tech-grid {
-    position: absolute;
-    inset: 7% 5%;
-    background-image:
-        linear-gradient(rgba(232,168,0,0.04) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(232,168,0,0.04) 1px, transparent 1px);
-    background-size: 40px 40px;
-    opacity: 0;
-    transition: opacity 0.8s ease 0.05s;
-}
-.tech-visible .tech-grid { opacity: 1; }
-
-/* Scan line effect */
-.tech-scanline {
-    position: absolute;
-    left: 0; right: 0;
-    height: 1px;
-    background: linear-gradient(to bottom,
-        transparent,
-        rgba(232,168,0,0.3),
-        rgba(232,168,0,0.5),
-        rgba(232,168,0,0.3),
-        transparent);
-    box-shadow: 0 0 4px rgba(232,168,0,0.15);
-    z-index: 11;
-    pointer-events: none;
-    opacity: 0;
-    top: 0;
-}
-.tech-visible .tech-scanline {
-    /* disabled — scan effect removed for cleaner look */
-    opacity: 0;
-}
-@keyframes techScanLine {
-    0%   { top: 0%; opacity: 1; }
-    90%  { opacity: 0.8; }
-    100% { top: 100%; opacity: 0; }
-}
-
-/* ---- CARD CAD ELEMENTS (scroll-triggered via GSAP) ---- */
-.card-scanline {
-    position: absolute;
-    left: 0; right: 0;
-    height: 1px;
-    background: linear-gradient(to bottom,
-        transparent,
-        rgba(232,168,0,0.3),
-        rgba(232,168,0,0.5),
-        rgba(232,168,0,0.3),
-        transparent);
-    box-shadow: 0 0 6px rgba(232,168,0,0.15);
-    z-index: 5;
-    pointer-events: none;
-    top: 100%;
-}
-.card-corners {
-    position: absolute;
-    inset: 8%;
-    pointer-events: none;
-    z-index: 4;
-}
-.cc {
-    position: absolute;
-    width: 16px; height: 16px;
-    border-color: rgba(232,168,0,0.55);
-    border-style: solid;
-    border-width: 0;
-}
-.cc-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
-.cc-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
-.cc-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
-.cc-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
-
-.card-coord-tag {
-    position: absolute;
-    bottom: 8px; left: 10px;
-    font-family: var(--font-mono);
-    font-size: 0.58rem;
-    color: rgba(232,168,0,0.9);
-    letter-spacing: 0.05em;
-    z-index: 5;
-    pointer-events: none;
-    background: #111;
-    padding: 2px 7px;
-}
 
 /* Construction line under collection header — visible on hover only */
 .cad-construction-line {

src/scripts/main.js

@@ -165,38 +165,15 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
-    // ---- Product cards: staggered CAD reveal ----
+    // ---- Product cards: simple fade-in on scroll ----
     const cards = document.querySelectorAll('.product-card');
 
-    cards.forEach((card, i) => {
+    cards.forEach((card) => {
         const img = card.querySelector('.card-img-wrap img');
         const meta = card.querySelector('.card-meta');
-        const imgWrap = card.querySelector('.card-img-wrap');
 
         if (!img) return;
 
-        // Create a CAD scan line per card
-        const scanLine = document.createElement('div');
-        scanLine.className = 'card-scanline';
-        imgWrap.appendChild(scanLine);
-
-        // Create corner marks per card
-        const cornerOverlay = document.createElement('div');
-        cornerOverlay.className = 'card-corners';
-        cornerOverlay.innerHTML =
-            '<span class="cc cc-tl"></span>' +
-            '<span class="cc cc-tr"></span>' +
-            '<span class="cc cc-br"></span>' +
-            '<span class="cc cc-bl"></span>';
-        imgWrap.appendChild(cornerOverlay);
-
-        // Create coordinate annotation per card
-        const coordTag = document.createElement('div');
-        coordTag.className = 'card-coord-tag';
-        coordTag.textContent = `[${String(i + 1).padStart(3, '0')}] — ${img.naturalWidth || '1024'} × ${img.naturalHeight || '1024'} px`;
-        imgWrap.appendChild(coordTag);
-
-        // GSAP timeline triggered on scroll
         const tl = gsap.timeline({
             scrollTrigger: {
                 trigger: card,
@@ -205,41 +182,18 @@ document.addEventListener('DOMContentLoaded', () => {
             },
         });
 
-        // 1. Image clip-path reveal (bottom → top scan) — subtle
+        // Simple fade + slide up
         tl.fromTo(img,
-            { clipPath: 'inset(100% 0 0 0)', filter: 'brightness(1.1) grayscale(40%)' },
+            { opacity: 0, y: 20 },
-            { clipPath: 'inset(0% 0 0 0)', filter: 'brightness(1) grayscale(15%)',
+            { opacity: 1, y: 0, duration: 0.6, ease: 'power2.out' },
-              duration: 0.9, ease: 'power3.out' },
             0
         );
 
-        // 2. Scan line sweeps up
-        tl.fromTo(scanLine,
-            { top: '100%', opacity: 1 },
-            { top: '-2%', opacity: 0, duration: 0.9, ease: 'power3.out' },
-            0
-        );
-
-        // 3. Corner brackets appear
-        tl.fromTo(cornerOverlay.querySelectorAll('.cc'),
-            { opacity: 0, scale: 0.5 },
-            { opacity: 1, scale: 1, duration: 0.4, stagger: 0.06, ease: 'back.out(2)' },
-            0.3
-        );
-
-        // 4. Coordinate tag types in
-        tl.fromTo(coordTag,
-            { opacity: 0, x: -10 },
-            { opacity: 1, x: 0, duration: 0.4, ease: 'power2.out' },
-            0.5
-        );
-
-        // 5. Meta bar slides in
         if (meta) {
             tl.fromTo(meta,
                 { opacity: 0, y: 8 },
                 { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' },
-                0.4
+                0.2
             );
         }
     });
@@ -259,169 +213,9 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     // ==========================================================
-    //  4. TECHNICAL DRAWING OVERLAY (panel)
+    //  4. (REMOVED) — no overlay effects on panel image
     // ==========================================================
 
-    const panelImgCol = document.querySelector('.panel-img-col');
-    let techOverlay = null;
-    let techTimeline = null;
-
-    function createTechOverlay(card) {
-        if (techOverlay) techOverlay.remove();
-
-        techOverlay = document.createElement('div');
-        techOverlay.className = 'tech-overlay';
-
-        // Corner brackets
-        ['tl', 'tr', 'br', 'bl'].forEach(pos => {
-            const corner = document.createElement('div');
-            corner.className = `tech-corner tech-corner--${pos}`;
-            techOverlay.appendChild(corner);
-        });
-
-        // Center crosshair
-        const centerH = document.createElement('div');
-        centerH.className = 'tech-center-h';
-        const centerV = document.createElement('div');
-        centerV.className = 'tech-center-v';
-        techOverlay.appendChild(centerH);
-        techOverlay.appendChild(centerV);
-
-        // Horizontal dimension line
-        const dimH = document.createElement('div');
-        dimH.className = 'tech-dim tech-dim--h';
-        dimH.innerHTML =
-            '<span class="tech-dim-arrow">◂</span>' +
-            '<span class="tech-dim-line"></span>' +
-            '<span class="tech-dim-text">840</span>' +
-            '<span class="tech-dim-line"></span>' +
-            '<span class="tech-dim-arrow">▸</span>';
-        techOverlay.appendChild(dimH);
-
-        // Vertical dimension line
-        const dimV = document.createElement('div');
-        dimV.className = 'tech-dim tech-dim--v';
-        dimV.innerHTML =
-            '<span class="tech-dim-arrow">▴</span>' +
-            '<span class="tech-dim-line"></span>' +
-            '<span class="tech-dim-text">420</span>' +
-            '<span class="tech-dim-line"></span>' +
-            '<span class="tech-dim-arrow">▾</span>';
-        techOverlay.appendChild(dimV);
-
-        // Reference text
-        const ref = document.createElement('div');
-        ref.className = 'tech-ref';
-        const idx = card ? card.dataset.index : '001';
-        ref.textContent = `REF: ${idx} — SCALE 1:5 — UNIT: mm`;
-        techOverlay.appendChild(ref);
-
-        // Blueprint grid
-        const grid = document.createElement('div');
-        grid.className = 'tech-grid';
-        techOverlay.appendChild(grid);
-
-        // Scan line
-        const scanline = document.createElement('div');
-        scanline.className = 'tech-scanline';
-        techOverlay.appendChild(scanline);
-
-        if (panelImgCol) panelImgCol.appendChild(techOverlay);
-    }
-
-    function animateTechOverlay() {
-        if (!techOverlay) return;
-
-        // Kill previous timeline
-        if (techTimeline) techTimeline.kill();
-
-        const corners = techOverlay.querySelectorAll('.tech-corner');
-        const centerH = techOverlay.querySelector('.tech-center-h');
-        const centerV = techOverlay.querySelector('.tech-center-v');
-        const dimH = techOverlay.querySelector('.tech-dim--h');
-        const dimV = techOverlay.querySelector('.tech-dim--v');
-        const ref = techOverlay.querySelector('.tech-ref');
-        const grid = techOverlay.querySelector('.tech-grid');
-        const scanline = techOverlay.querySelector('.tech-scanline');
-
-        techTimeline = gsap.timeline();
-
-        // 1. Blueprint grid fades in
-        techTimeline.fromTo(grid,
-            { opacity: 0 },
-            { opacity: 1, duration: 0.6, ease: 'power1.in' },
-            0
-        );
-
-        // 2. Scan line — disabled for cleaner look
-        gsap.set(scanline, { opacity: 0 });
-
-        // 3. Corner brackets draw in (scale from corner)
-        corners.forEach((c, i) => {
-            const origins = ['top left', 'top right', 'bottom right', 'bottom left'];
-            techTimeline.fromTo(c,
-                { opacity: 0, scale: 0, borderColor: 'rgba(232,168,0,0)' },
-                { opacity: 1, scale: 1, borderColor: 'rgba(232,168,0,0.6)',
-                  transformOrigin: origins[i],
-                  duration: 0.4, ease: 'back.out(1.5)' },
-                0.15 + i * 0.08
-            );
-        });
-
-        // 4. Center crosshair extends
-        techTimeline.fromTo(centerH,
-            { scaleX: 0, opacity: 0 },
-            { scaleX: 1, opacity: 1, duration: 0.5, ease: 'power2.out' },
-            0.3
-        );
-        techTimeline.fromTo(centerV,
-            { scaleY: 0, opacity: 0 },
-            { scaleY: 1, opacity: 1, duration: 0.5, ease: 'power2.out' },
-            0.35
-        );
-
-        // 5. Dimension lines extend
-        techTimeline.fromTo(dimH,
-            { opacity: 0, scaleX: 0 },
-            { opacity: 1, scaleX: 1, transformOrigin: 'center center',
-              duration: 0.6, ease: 'power2.out' },
-            0.4
-        );
-        techTimeline.fromTo(dimV,
-            { opacity: 0, scaleY: 0 },
-            { opacity: 1, scaleY: 1, transformOrigin: 'center center',
-              duration: 0.6, ease: 'power2.out' },
-            0.45
-        );
-
-        // 6. Reference text types in
-        techTimeline.fromTo(ref,
-            { opacity: 0, x: -15 },
-            { opacity: 1, x: 0, duration: 0.4, ease: 'power2.out' },
-            0.6
-        );
-
-        // 7. Panel image — smooth zoom reveal
-        const panelImg = document.getElementById('panel-img');
-        if (panelImg) {
-            techTimeline.fromTo(panelImg,
-                { opacity: 0, scale: 1.06 },
-                { opacity: 0.92, scale: 1, duration: 1.2, ease: 'power2.out' },
-                0
-            );
-        }
-    }
-
-    function hideTechOverlay() {
-        if (techTimeline) techTimeline.kill();
-        if (techOverlay) {
-            gsap.to(techOverlay, { opacity: 0, duration: 0.3, onComplete: () => {
-                if (techOverlay) techOverlay.remove();
-                techOverlay = null;
-            }});
-        }
-    }
-
     // ==========================================================
     //  5. PRODUCT PANEL
     // ==========================================================
@@ -551,10 +345,6 @@ document.addEventListener('DOMContentLoaded', () => {
             'summary, .panel-close, .checkout-btn, .checkout-submit'
         ));
 
-        // Technical drawing overlay (delayed for panel slide-in)
-        createTechOverlay(card);
-        setTimeout(() => animateTechOverlay(), 350);
-
         if (pushState) {
             const cardSlug = card.dataset.slug || toSlug(card.dataset.name);
             history.pushState({ slug: cardSlug }, '', `/collection/${cardSlug}`);
@@ -562,7 +352,6 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function closePanel(pushState = true) {
-        hideTechOverlay();
         panel.classList.remove('is-open');
         panel.setAttribute('aria-hidden', 'true');
         document.body.style.overflow = '';