/* ══════════════════════════════════════════════════════════════ HERO FADE — CODABYTE Cross-fade hero image cycler styles + plexus safety layering. Link this AFTER overrides.css in : ══════════════════════════════════════════════════════════════ */ /* Stack wrapper injected by hero-cycle.js around #heroImg */ .hero-visual .hero-img-stack { position: relative; width: 100%; height: 100%; overflow: hidden; } .hero-visual .hero-img-stack .hero-img-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease, ease); will-change: opacity; backface-visibility: hidden; } .hero-visual .hero-img-stack .hero-img-layer.is-active { opacity: 1; } /* Subtle vignette so caption stays readable while images change */ .hero-visual .hero-img-stack::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,7,16,0) 55%, rgba(6,7,16,.55) 100%); } /* Plexus canvas — keep behind hero content but above background */ #hero-plexus { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85; } .hero { position: relative; } .hero > *:not(#hero-plexus) { position: relative; z-index: 1; }