/* ========================================================================== backdrop.css — the living gradient field and the translucent surfaces that let it show through ========================================================================== */ /* The canvas overscans the viewport so its blur never reveals a hard edge. z-index -1 puts it above the root background but below all page content, which is why must stay transparent (see base.css). */ .backdrop { position: fixed; top: -12%; left: -12%; width: 124%; height: 124%; z-index: -1; pointer-events: none; filter: blur(70px) saturate(160%) contrast(108%); opacity: 1; transform: translateZ(0); } /* A slow breath on the whole field, independent of the canvas animation — two different periods means the loop never reads as a loop. */ @media (prefers-reduced-motion: no-preference) { .backdrop { animation: backdrop-breathe 19s ease-in-out infinite; } } @keyframes backdrop-breathe { 0%, 100% { opacity: 0.9; transform: scale(1.02); } 50% { opacity: 1; transform: scale(1.1); } } /* --- Surfaces ------------------------------------------------------------ */ /* Content sits on smoked glass rather than solid panels: enough opacity to keep body copy at full contrast, enough transparency for the field to move behind it. */ .chapter { background: rgba(11, 11, 12, 0.72); } .chapter--alt { background: rgba(16, 16, 19, 0.8); } .marquee { background: rgba(16, 16, 19, 0.78); } .card { background: rgba(11, 11, 12, 0.55); } .chapter--alt .card { background: rgba(16, 16, 19, 0.6); } .card:hover { background: rgba(255, 255, 255, 0.045); } /* The hero and contact panels are the two places the field runs at full strength — they only get a legibility scrim, not a fill. */ .hero__media { background: linear-gradient(170deg, rgba(11, 11, 12, 0.1) 0%, rgba(11, 11, 12, 0.28) 62%); } .contact { background: rgba(11, 11, 12, 0.3); } .site-footer { background: rgba(11, 11, 12, 0.82); }