/* backdrop.css -- the field every page of the desk sits on. Linked last in every so it wins over each page's own body wash. It paints three layers behind the content: the still field, the whale crossing it, and a veil that keeps text legible over both. The still field is vector and weighs about 5 KB, so a phone pays nothing for it and it stays sharp on a retina screen at any size. The whale is a real element, added by backdrop.js, because an SVG referenced as a background-image will not animate reliably. Everything it does is a transform, so the compositor carries it and the main thread is left alone. To swap a raster still in for the field, point --bd-art (and the portrait one below) at the file; nothing else needs to change. */ :root{ --bd-base:#050609; --bd-art:url("/backdrop.svg"); /* the panels go from solid to glass, so the field is felt through the page */ --ink-2:rgba(9,12,19,.70); --paper-2:rgba(9,11,17,.70); } html{background-color:var(--bd-base)} /* each page's own wash steps aside; the backdrop is the floor now */ body{background-color:transparent;background-image:none} html::before{ content:"";position:fixed;inset:0;z-index:-3;pointer-events:none; background-color:var(--bd-base); background-image:var(--bd-art); background-repeat:no-repeat; background-position:50% 100%; background-size:cover; } /* the veil: dark where the nav sits, dark at the foot, quiet in between */ html::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(92% 58% at 6% -8%,rgba(0,230,118,.10) 0%,transparent 60%), radial-gradient(80% 54% at 96% -4%,rgba(34,211,238,.085) 0%,transparent 62%), linear-gradient(180deg,rgba(5,6,9,.62) 0%,rgba(5,6,9,.38) 22%,rgba(5,6,9,.30) 58%,rgba(5,6,9,.56) 100%); } /* taller than wide: a phone, a tablet held upright, a narrow window */ @media (max-aspect-ratio:1/1){ :root{--bd-art:url("/backdrop_tall.svg")} } /* the header band on the interior pages lets the field through */ .top{background:radial-gradient(130% 120% at 20% -20%,rgba(0,230,118,.13) 0%,rgba(3,4,7,.40) 55%) transparent} /* ---- the swimmer --------------------------------------------------------- Three movements, each on its own element so each is a plain transform: the crossing, the rise and fall of a body that is breathing, and the tail. The two animals move nothing alike. A humpback's flukes beat up and down once in seven seconds and the whole body rolls with it. A bluefin swims thunniform -- the body stays rigid, only the stock and tail work -- so it holds still and flicks about once a second, and covers ground twice as fast. Same rig, different numbers. */ .bd-swim{ position:fixed;z-index:-2;left:0;top:56%; width:clamp(300px,46vw,780px); pointer-events:none;contain:layout style; animation:bdSwim 186s linear infinite; } .bd-swim__bob{animation:bdBob 26s ease-in-out infinite alternate} .bd-swim__art{display:block;width:100%;height:auto;overflow:visible} .bd-tail{transform-origin:846px 196px;animation:bdBeat 7s ease-in-out infinite alternate} .bd-pec{transform-origin:296px 224px;animation:bdScull 11s ease-in-out infinite alternate} @keyframes bdSwim{from{transform:translate3d(122vw,0,0)}to{transform:translate3d(-92vw,0,0)}} @keyframes bdBob{from{transform:translate3d(0,-16px,0) rotate(1.6deg)} to{transform:translate3d(0,15px,0) rotate(-1.6deg)}} @keyframes bdBeat{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}} @keyframes bdScull{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}} /* the bluefin: rigid, quick, and the tail turns about the keels */ .bd-swim--tuna{width:clamp(280px,40vw,700px);animation-duration:96s} .bd-swim--tuna .bd-swim__bob{animation-name:bdHold;animation-duration:15s} .bd-swim--tuna .bd-tail{transform-origin:800px 252px;animation-name:bdFlick;animation-duration:1.1s} .bd-swim--tuna .bd-pec{transform-origin:222px 240px;animation-duration:17s} @keyframes bdHold{from{transform:translate3d(0,-6px,0) rotate(.5deg)} to{transform:translate3d(0,6px,0) rotate(-.5deg)}} @keyframes bdFlick{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}} /* nobody is looking at this tab */ .bd-swim--held,.bd-swim--held *{animation-play-state:paused} @media (max-width:820px){.bd-swim{width:78vw;top:60%}} /* metered connections get the gradients and none of the still field */ @media (prefers-reduced-data:reduce){ html::before{background-image:none} } @media (prefers-reduced-motion:reduce){ .bd-swim{animation:none;transform:translate3d(12vw,0,0)} .bd-swim__bob,.bd-tail,.bd-pec{animation:none} } @media print{ html::before,html::after,.bd-swim{display:none} html{background:#fff} }