/* fx-ambient — "always alive" grid layer (cheap, GPU-only) Active only when JS adds .fx-ambient to . */ /* 1) Ken Burns idle drift on every poster — desynced per card via CSS vars */ .fx-ambient #grid .work-card .thumb img { animation: fx-kb-drift var(--kb-dur, 18s) ease-in-out var(--kb-delay, 0s) infinite alternate; } .fx-ambient #grid .work-card[data-kb="0"] .thumb img { transform-origin: 20% 30%; } .fx-ambient #grid .work-card[data-kb="1"] .thumb img { transform-origin: 80% 25%; } .fx-ambient #grid .work-card[data-kb="2"] .thumb img { transform-origin: 25% 75%; } .fx-ambient #grid .work-card[data-kb="3"] .thumb img { transform-origin: 75% 70%; } @keyframes fx-kb-drift { from { transform: scale(1.03); } to { transform: scale(1.085) translate3d(var(--kb-x, 1.2%), var(--kb-y, -1%), 0); } } /* when the real video preview is playing, let it own the frame */ .fx-ambient #grid .work-card.is-playing .thumb img { animation-play-state: paused; } /* 2) LIVE indicator pulse — a breathing ring so "live" reads as live */ .fx-ambient .live-indicator { position: relative; } .fx-ambient .live-indicator::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 1px solid currentColor; opacity: 0; animation: fx-live-pulse 2.8s ease-out infinite; pointer-events: none; } @keyframes fx-live-pulse { 0% { opacity: .55; transform: scale(.7); } 70% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(1.7); } } /* 3) Occasional light sweep across the grid — one soft beam every ~12s */ .fx-ambient #grid { position: relative; } .fx-ambient #grid::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: linear-gradient(115deg, transparent 42%, rgba(242, 239, 233, .028) 50%, transparent 58%); background-size: 280% 100%; animation: fx-grid-sweep 12s linear infinite; mix-blend-mode: screen; } @keyframes fx-grid-sweep { 0% { background-position: 120% 0; } 55% { background-position: -60% 0; } 100% { background-position: -60% 0; } } /* everything off for reduced motion */ @media (prefers-reduced-motion: reduce) { .fx-ambient #grid .work-card .thumb img, .fx-ambient .live-indicator::after, .fx-ambient #grid::after { animation: none !important; } }