/* ═══════════════════════════════════════════════════════ 3d.css — Three.js real-time scene overlay Applied on top of styles.css. Makes every section transparent so the canvas renders through the page. ═══════════════════════════════════════════════════════ */ /* ─── Lenis smooth scroll ─── */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ─── Three.js canvas (fixed, full-screen, behind everything) ─── */ #ci-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: block; } /* ─── Dark scrim so text stays readable ─── The old vignette only darkened the screen edges, leaving the centre — where the glowing models render AND where the text sits — fully clear. When a bright model passed behind the text it washed the words out. This now lays an EVEN dark tint across the whole scene (a flat layer plus the edge vignette), so the models are dimmed uniformly behind the copy. Tune the 0.50 flat-layer alpha up for more contrast / down to let the models glow brighter. */ #scene-vignette { position: fixed; inset: 0; background: /* flat, even darkening across the entire viewport (incl. centre) */ linear-gradient(rgba(5, 10, 18, 0.50), rgba(5, 10, 18, 0.50)), /* edge vignette for depth */ radial-gradient(ellipse 130% 85% at 50% 50%, transparent 30%, rgba(5, 10, 18, 0.55) 100%), linear-gradient(to bottom, rgba(5, 10, 18, 0.30) 0%, transparent 18%, transparent 78%, rgba(5, 10, 18, 0.45) 100%); z-index: -1; pointer-events: none; } /* ═══════════════════════════════════════════════════════ WARP OVERLAY — hyperspace streaks during fast section jumps. Sits above the scene + content but below the nav. Hidden until gets the .warping class (added by the warp-scroll handler), then vertical light streaks stretch outward to sell the "insanely large site / faster-than-possible scroll" illusion. ═══════════════════════════════════════════════════════ */ #warp-overlay { position: fixed; inset: 0; z-index: 500; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient(ellipse 65% 100% at 50% 50%, transparent 28%, rgba(3, 7, 14, 0.55) 100%); } #warp-overlay::before, #warp-overlay::after { content: ''; position: absolute; inset: -20% 0; background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 212, 255, 0.12) 10px, transparent 11px 22px); opacity: 0; transform: scaleY(1); } #warp-overlay::after { background-image: repeating-linear-gradient(90deg, transparent 0 13px, rgba(255, 255, 255, 0.10) 14px, transparent 15px 30px); } html.warping #warp-overlay { opacity: 1; transition: opacity 0.07s ease; } html.warping #warp-overlay::before { animation: warp-streak 0.45s ease-in infinite; } html.warping #warp-overlay::after { animation: warp-streak 0.6s ease-in infinite; } @keyframes warp-streak { 0% { transform: scaleY(1); opacity: 0; filter: blur(0); } 35% { opacity: 0.9; } 100% { transform: scaleY(3.2); opacity: 0; filter: blur(2px); } } @media (prefers-reduced-motion: reduce) { html.warping #warp-overlay { opacity: 0; } #warp-overlay::before, #warp-overlay::after { animation: none !important; } } /* ─── Body: dark bg shows behind transparent canvas regions ─── */ body { background: var(--bg-primary, #0a0e17) !important; } /* ─── Strip opaque backgrounds so the scene shows through ─── */ .hero { background: transparent !important; } /* Keep the hero headline readable over the glowing 3D model behind it */ .hero__content h1 { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.9), 0 0 14px rgba(5, 8, 16, 0.85), 0 0 4px rgba(5, 8, 16, 0.9); } .section, .bounty-section, .oss { background: transparent !important; } /* Disable circuit-canvas animation (replaced by 3D scene) */ #circuit-canvas { display: none !important; } /* ─── Content blocks — dark glass for readability ─── */ .value-block { background: rgba(10, 14, 23, 0.58) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 6px; } .product__info, .product__interactive { background: rgba(10, 14, 23, 0.55) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 10px; padding: 1.5rem; } .repo-card { background: rgba(10, 14, 23, 0.62) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hacker-card { background: rgba(10, 14, 23, 0.62) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Interactive demo widgets — more opaque so UX stays clear */ .chat-window, .browser-frame, .pipeline-demo, .vote-demo, .detection-demo { background: rgba(8, 12, 22, 0.88) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Contact section */ #contact > .container > .contact__grid > div { background: rgba(10, 14, 23, 0.60); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 10px; padding: 1.5rem; } /* Bounty area */ .bounty-counters, .bounty-cta { background: transparent !important; } /* Nav stays opaque so it's always readable */ .nav { background: rgba(8, 12, 20, 0.80) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Footer slight glass */ .footer { background: rgba(5, 8, 16, 0.75) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ═══════════════════════════════════════════════════════ READABILITY LAYER Loose prose floats directly over the moving 3D scene, so it gets the same protective text-shadow as the founder bio (.founder-body p) — dark halo that lifts text off the background without changing the type itself. ═══════════════════════════════════════════════════════ */ .section h2, .section h3, .section h4, .section p, .section li, .section-label, .portfolio-intro, .portfolio-meta h3, .portfolio-link, .clients-intro, .client-name, .about-lede, .about-subhead, .about-sub-intro, .cap-note, .cap-more, .cap-group h4, .work-card h3, .work-card p, .work-cat, .work-lang, .stat-label { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 1px rgba(0, 0, 0, 0.9); } /* Glitch headings animate text-shadow, so their baseline keyframes must carry the protective halo too — otherwise they flash to `text-shadow: none` and become unreadable most of the time. Redefined here (after styles.css) to override the base animation. */ @keyframes glitch { 0%, 93%, 100% { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 1px rgba(0, 0, 0, 0.9); } 94% { text-shadow: 2px 0 var(--accent-cyan), -2px 0 var(--accent-hot); } 95% { text-shadow: -1px 0 var(--accent-hot), 1px 0 var(--accent-cyan); } 96% { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 1px rgba(0, 0, 0, 0.9); } 97% { text-shadow: 3px 0 var(--accent-cyan), -3px 0 var(--accent-hot); } 98% { text-shadow: -2px 0 var(--accent-hot), 2px 0 var(--accent-cyan); } } /* ─── Loading overlay ─── */ #ci-loading { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #05080f; transition: opacity 0.8s ease; } #ci-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; } #ci-loading-inner .mono { color: var(--accent-cyan, #00d4ff); font-family: var(--font-mono, monospace); font-size: 0.72rem; letter-spacing: 0.3em; opacity: 0.85; } #ci-loading-track { width: 200px; height: 2px; background: rgba(0, 212, 255, 0.15); border-radius: 2px; overflow: hidden; } #ci-loading-bar { width: 0%; height: 100%; background: var(--accent-cyan, #00d4ff); box-shadow: 0 0 12px var(--accent-cyan, #00d4ff); transition: width 0.3s ease; } /* ═══════════════════════════════════════════════════════ PERFORMANCE / FALLBACK LAYER Every glass panel above re-samples the moving WebGL scene each frame via backdrop-filter — the dominant cause of jank on phones. On small screens (and where backdrop-filter is unsupported) we drop the blur and lean on more opaque backgrounds so text stays readable without the GPU cost. ═══════════════════════════════════════════════════════ */ @media (max-width: 768px) { .value-block, .product__info, .product__interactive, .repo-card, .hacker-card, .chat-window, .browser-frame, .pipeline-demo, .vote-demo, .detection-demo, #contact > .container > .contact__grid > div, .nav, .footer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(8, 12, 20, 0.92) !important; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .value-block, .product__info, .product__interactive, .repo-card, .hacker-card, .chat-window, .browser-frame, .pipeline-demo, .vote-demo, .detection-demo, #contact > .container > .contact__grid > div, .nav, .footer { background: rgba(8, 12, 20, 0.94) !important; } }