/* /ai-solutions — real photographic backgrounds for the hero + the two sections explicitly named "PhotoDivider" (kind-systems, kind-operators). Layered behind the existing dark scrim so all copy stays readable. The Unsplash URLs (?w=1800 q=70) are the same hosts already preconnected in the page . Cached for 1 year by Unsplash, so the second view is instant. ============================================================ */ /* --- Hero: subtle abstract circuit-board photo behind the orbs --- */ .aisol-hero { /* Layer order (top → bottom): orbs/orb CSS already on top via z-index, existing radial gradients (preserved via the original rule below), then dark scrim, then the photo. */ background-image: radial-gradient(1200px 700px at 18% 28%, rgba(0,85,255,.32), transparent 60%), radial-gradient(900px 600px at 82% 62%, rgba(110,231,199,.10), transparent 65%), linear-gradient(180deg, rgba(5,7,13,0.78) 0%, rgba(10,13,20,0.86) 100%), url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1800&q=70"); background-size: cover, cover, cover, cover; background-position: 18% 28%, 82% 62%, center, center; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } /* --- kind-systems divider: data center / server racks photography --- */ .aisol-cinema.kind-systems .aisol-cinema-bg { background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(0,85,255,.22) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,0,0,.65) 0%, transparent 65%), linear-gradient(180deg, rgba(2,4,10,0.78) 0%, rgba(6,8,15,0.84) 50%, rgba(2,4,10,0.92) 100%), url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1800&q=70") center/cover no-repeat; } /* --- kind-operators divider: people in an ops room / engineering team --- */ .aisol-cinema.kind-operators .aisol-cinema-bg { background: radial-gradient(ellipse 70% 60% at 50% 110%, rgba(244,183,64,.20) 0%, transparent 55%), radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,0,0,.70) 0%, transparent 60%), linear-gradient(180deg, rgba(4,6,11,0.75) 0%, rgba(10,10,16,0.82) 50%, rgba(4,6,11,0.92) 100%), url("https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=1800&q=70") center/cover no-repeat; } /* Smooth fade-in once the image decodes, so we don't flash a half-loaded photo. Pairs with the preload hints in the HTML head. */ .aisol-cinema-bg, .aisol-hero { animation: aisolPhotoFade 380ms ease-out both; } @keyframes aisolPhotoFade { from { filter: brightness(0.85); } to { filter: brightness(1); } } @media (prefers-reduced-motion: reduce) { .aisol-cinema-bg, .aisol-hero { animation: none; } }