/* ============================================================ SHARED ANIMATED BACKGROUND — index.html & app.html Night: canvas-rendered stars + mountains + aurora Day: WebGL procedural clouds + birds + sage sky glow Controlled by data-theme="light"|"dark" on ============================================================ */ /* Base — transparent so canvas / WebGL shows through */ .animated-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: transparent; overflow: hidden; } /* Kill any old CSS pseudo-element stars/clouds from swapped theme files */ .animated-bg::before, .animated-bg::after { display: none !important; } /* Night body fallback (behind canvas) */ body { background: #07001a; } /* Day body fallback (behind WebGL) — sage mid-tone */ body[data-theme="light"] { background: #6a9e8c; } /* ── Day: sage sky gradient (while WebGL initialises) ─────── */ body[data-theme="light"] .animated-bg { background: linear-gradient(180deg, #4a8272 0%, #6a9e8c 18%, #8abaa8 38%, #aad0be 58%, #c4e0d4 76%, #daeee6 100% ); } /* ══════════════════════════════════════════════════════════ NIGHT SKY CANVAS LAYER ══════════════════════════════════════════════════════════ */ .night-sky { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(to bottom, #060010 0%, #060010 6%, #090016 11%, #070016 20%, #0a0121 48%, #0a0127 55%, #0a0129 57%, #0c012b 62%, #0e0131 68%, #0d012f 69%, #18023c 78%, #19023e 79%, #1c0242 81%, #22034b 85%, #2e045a 92%, #2f045e 96%, #340464 98%, #370569 100% ); } body[data-theme="light"] .night-sky { display: none; } /* Mountains container */ .night-sky .mountains { position: absolute; height: 80px; width: 100%; bottom: 0; left: 0; z-index: 2; } /* Mountain & land shapes */ .night-sky .mountains > [class^="mountain"], .night-sky .mountains > [class^="land"] { background: #110124; box-shadow: 0 0 50px 5px rgba(255, 255, 255, 0.2); position: absolute; bottom: 0; } .night-sky .mountain-2 { width: 60px; height: 60px; bottom: -20px !important; left: -10px; transform: rotate(45deg); border-top-left-radius: 10px; } .night-sky .mountain-1 { width: 100px; height: 100px; bottom: -40px !important; left: 10px; transform: rotate(45deg); border-top-left-radius: 10px; } .night-sky .land-1 { width: 30%; height: 20px; border-top-right-radius: 100%; } .night-sky .land-2 { width: 60%; height: 15px; left: 30%; border-top-left-radius: 200%; border-top-right-radius: 200%; } .night-sky .land-3 { width: 20%; height: 20px; left: 80%; border-top-left-radius: 100%; } /* Mountains base gradient fade */ .night-sky .mountains-base { background: linear-gradient(to bottom, rgba(55,5,105,0) 0%, rgba(9,0,22,1) 100%); width: 100%; height: 100px; position: absolute; bottom: -10px; z-index: 3; } /* Aurora / horizon glow */ .night-sky .light-base { position: absolute; bottom: -80px; left: 10vw; width: 80vw; height: 100px; border-radius: 50%; box-shadow: 0 -10px 30px 10px #ffc1a0, 0 -20px 40px 20px #fe9c7f, 0 -30px 60px 30px #be6590, 0 -50px 150px 75px #632b6c; background-color: #ffc1a0; z-index: 1; } /* Hide night sky when animation disabled */ .animated-bg.stars-disabled .night-sky { display: none; } /* ══════════════════════════════════════════════════════════ BIRD ANIMATION (day mode only) ══════════════════════════════════════════════════════════ */ @keyframes fly-cycle { 100% { background-position: -900px 0; } } @keyframes fly-right-one { 0% { transform: translateX(-10vw) translateY(0vh) scale(0.3); } 20% { transform: translateX(18vw) translateY(-3vh) scale(0.44); } 40% { transform: translateX(46vw) translateY(2.5vh) scale(0.55); } 60% { transform: translateX(72vw) translateY(-1.5vh) scale(0.57); } 80% { transform: translateX(96vw) translateY(1.5vh) scale(0.57); } 100% { transform: translateX(120vw) translateY(0vh) scale(0.57); } } @keyframes fly-right-two { 0% { transform: translateX(-10vw) translateY(0vh) scale(0.4); } 20% { transform: translateX(16vw) translateY(3.5vh) scale(0.46); } 40% { transform: translateX(42vw) translateY(-2vh) scale(0.52); } 60% { transform: translateX(68vw) translateY(2vh) scale(0.5); } 80% { transform: translateX(94vw) translateY(-1vh) scale(0.52); } 100% { transform: translateX(120vw) translateY(0vh) scale(0.52); } } /* Bird sprite */ .bird { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg'); background-size: auto 100%; width: 88px; height: 125px; will-change: background-position; animation-name: fly-cycle; animation-timing-function: steps(10); animation-iteration-count: infinite; /* Sage green filter — brightness 0.55 keeps them visible but not too dark */ filter: invert(1) sepia(1) hue-rotate(75deg) saturate(2) brightness(0.55); } .bird-one { animation-duration: 1s; animation-delay: -0.5s; } .bird-two { animation-duration: 0.9s; animation-delay: -0.75s; } .bird-three { animation-duration: 1.25s; animation-delay: -0.25s; } .bird-four { animation-duration: 1.1s; animation-delay: -0.5s; } .bird-five { animation-duration: 0.85s; animation-delay: -0.3s; } .bird-six { animation-duration: 1.15s; animation-delay: -0.6s; } .bird-seven { animation-duration: 1s; animation-delay: -0.9s; } .bird-eight { animation-duration: 0.95s; animation-delay: -0.4s; } /* Bird containers — always in DOM so animations run continuously; visibility controls whether they're seen (avoids animation-restart on display change) */ .bird-container { display: block; visibility: hidden; /* hidden in night — animation still runs */ position: absolute; top: 20%; left: -10%; will-change: transform; animation-timing-function: linear; animation-iteration-count: infinite; pointer-events: none; } body[data-theme="light"] .bird-container { visibility: visible; } .bird-container-one { animation-duration: 15s; animation-delay: -7.5s; animation-name: fly-right-one; top: 12%; } .bird-container-two { animation-duration: 17s; animation-delay: -3.4s; animation-name: fly-right-two; top: 22%; } .bird-container-three { animation-duration: 14s; animation-delay: -10.5s; animation-name: fly-right-one; top: 33%; } .bird-container-four { animation-duration: 18s; animation-delay: -1.8s; animation-name: fly-right-two; top: 17%; } .bird-container-five { animation-duration: 13.5s; animation-delay: -6.75s; animation-name: fly-right-two; top: 42%; } .bird-container-six { animation-duration: 16.5s; animation-delay: -13.2s; animation-name: fly-right-one; top: 28%; } .bird-container-seven { animation-duration: 15.5s; animation-delay: -9.3s; animation-name: fly-right-two; top: 50%; } .bird-container-eight { animation-duration: 19s; animation-delay: -4.75s; animation-name: fly-right-one; top: 38%; } .animated-bg.birds-disabled .bird-container { visibility: hidden !important; } /* ══════════════════════════════════════════════════════════ MOBILE ADJUSTMENTS ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Keep bird size readable — too small and wing frames look like glyphs */ .bird { width: 88px; height: 125px; } /* Show only 3 birds on mobile to avoid clutter */ .bird-container-four, .bird-container-five, .bird-container-six, .bird-container-seven, .bird-container-eight { visibility: hidden !important; } /* Push birds into the open sky — below content on app, below logo on index */ .bird-container-one { top: 55%; } .bird-container-two { top: 67%; } .bird-container-three { top: 72%; } }