/* ========================================================== OrbitPanel — v4 enhancement (earthaccess.xyz parity) Goal: idle page = ZERO continuous CPU/GPU work. ========================================================== */ :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================ 1) GLOBAL CALM: clamp every infinite animation to a single iteration so it reaches the rest frame and stops forever. Earthaccess hero has zero continuous loops — same here. Hover/transition effects remain unaffected. ============================================================ */ *, *::before, *::after { animation-iteration-count: 1 !important; animation-fill-mode: both !important; } /* Entrance / one-shot animations: stay enabled (count=1 already fine). */ /* Video bg: drop GPU zoom, add containment, fixed position so scroll never re-layouts it. */ #earth-video { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; transform: translateZ(0) scale(1.02) !important; will-change: opacity, transform !important; transition: opacity 850ms var(--ease-out-quart, ease), transform 1100ms var(--ease-out-quart, ease) !important; backface-visibility: hidden !important; contain: strict; object-fit: cover; z-index: 0; /* Hidden by default — JS marks as .video-ready when the first real frame is decoded, then we cinematically reveal. */ opacity: 0 !important; animation: none !important; } body.video-ready #earth-video { opacity: 0.72 !important; transform: translateZ(0) scale(1) !important; } body.is-lowpower.video-ready #earth-video { opacity: 0.42 !important; } /* ============================================================ SMOOTH PAGE-OPEN ANIMATION On every page open, gently lift the content into view and let the video bloom in behind it. One-shot, no repeats. ============================================================ */ .wrap, .shell, .panel { animation: opPageIn 720ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)) 80ms both; } @keyframes opPageIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @media (prefers-reduced-motion: reduce) { .wrap, .shell, .panel { animation: none !important; } } /* The various pages each wrap the video in a .stage / .panel container with a solid #03040a background. That solid layer would HIDE our beautiful CSS earth-glow during the brief moment before the decoder emits its first frame. Make those backgrounds transparent so users never stare at a flat-black panel. */ .stage, .panel { background: transparent !important; } /* ============================================================ STATIC EARTH-GLOW BASE LAYER — pure CSS, zero per-frame cost. Sits behind the video. On mobile / low-end devices it BECOMES the background (video is removed completely from the DOM). ============================================================ */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 50% 58%, rgba(34, 211, 238, 0.18) 0%, rgba(34, 211, 238, 0.06) 28%, transparent 60%), radial-gradient(ellipse 55% 40% at 50% 60%, rgba(99, 102, 241, 0.18) 0%, transparent 65%), radial-gradient(ellipse 95% 70% at 50% 100%, rgba(3, 7, 18, 0.95) 0%, rgba(3, 7, 18, 0.6) 60%, transparent 100%), linear-gradient(180deg, #03060f 0%, #050a18 45%, #03060f 100%); } body::after { /* Sparse star dots — single static paint, no animation. */ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.55), transparent 50%), radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,0.45), transparent 50%), radial-gradient(1px 1px at 32% 80%, rgba(255,255,255,0.5), transparent 50%), radial-gradient(1px 1px at 62% 64%, rgba(255,255,255,0.4), transparent 50%), radial-gradient(1px 1px at 88% 88%, rgba(255,255,255,0.5), transparent 50%), radial-gradient(1px 1px at 18% 52%, rgba(255,255,255,0.35), transparent 50%), radial-gradient(1px 1px at 50% 12%, rgba(255,255,255,0.45), transparent 50%), radial-gradient(1px 1px at 92% 48%, rgba(255,255,255,0.35), transparent 50%); opacity: 0.65; } /* Grain is a constant compositing cost on idle frames → kill it completely (earthaccess paints noise into a static