/* * WebGPU fallback. When WebGPU is unavailable (home-shader.js adds * .pg-no-webgpu to ), the shader canvases can't paint, so we render a * CSS approximation of the design's shader look instead of a flat wash: * the hero gets the fluted-glass diagonal ridges (FlutedGlass angle 31) over * a soft iridescent wash in the design's accent hues; sec4 gets the crossed * ridge grid (FlutedGlass 90 + 0). A slow drift animates the wash like the * live shader's movement (disabled for prefers-reduced-motion). Only applies * when WebGPU is absent, so the real render is never altered. */ .pg-no-webgpu .shader { background: repeating-linear-gradient( 121deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 0%) 26px, rgb(255 255 255 / 60%) 34px, rgb(222 226 236 / 30%) 42px, rgb(255 255 255 / 45%) 50px, rgb(255 255 255 / 0%) 58px ), linear-gradient( 135deg, rgb(140 115 232 / 10%) 0%, rgb(54 190 219 / 9%) 28%, rgb(69 197 142 / 7%) 52%, rgb(244 198 69 / 9%) 76%, rgb(239 126 108 / 10%) 100% ), #f4f5f8; background-size: auto, 220% 220%, auto; animation: pg-fallback-drift-hero 26s ease-in-out infinite; } .pg-no-webgpu .sec4-bg .shader { background: repeating-linear-gradient( 90deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 0%) 30px, rgb(255 255 255 / 55%) 38px, rgb(226 229 238 / 28%) 46px, rgb(255 255 255 / 0%) 54px ), repeating-linear-gradient( 0deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 0%) 30px, rgb(255 255 255 / 55%) 38px, rgb(226 229 238 / 28%) 46px, rgb(255 255 255 / 0%) 54px ), linear-gradient( 135deg, rgb(140 115 232 / 9%) 0%, rgb(54 190 219 / 8%) 28%, rgb(69 197 142 / 6%) 52%, rgb(244 198 69 / 8%) 76%, rgb(239 126 108 / 9%) 100% ), #fff; background-size: auto, auto, 220% 220%, auto; animation: pg-fallback-drift-sec4 26s ease-in-out infinite; } /* One keyframe set per element: background-position is per-layer, and the hero has 3 background layers while sec4 has 4 (the wash layer must be the one that moves). */ @keyframes pg-fallback-drift-hero { 0%, 100% { background-position: 0 0, 0% 50%, 0 0; } 50% { background-position: 0 0, 100% 50%, 0 0; } } @keyframes pg-fallback-drift-sec4 { 0%, 100% { background-position: 0 0, 0 0, 0% 50%, 0 0; } 50% { background-position: 0 0, 0 0, 100% 50%, 0 0; } } @media (prefers-reduced-motion: reduce) { .pg-no-webgpu .shader, .pg-no-webgpu .sec4-bg .shader { animation: none; } }