/* ════════════════════════════════════════════════════════════ Shared ambient bloom background (mx-blooms) Used by: reserve, labs, resources. Include includes/blooms.php right after the nav, add class="has-blooms" to , and link this stylesheet. Fixed layer follows the viewport; footer goes transparent so the color flows to the very bottom of the page. ════════════════════════════════════════════════════════════ */ .mx-blooms { position: fixed; inset: -10%; overflow: hidden; pointer-events: none; z-index: 0; opacity: 0.5; } .mx-bloom { position: absolute; display: block; width: min(88vw, 680px); height: min(88vw, 680px); border-radius: 50%; filter: blur(72px); will-change: transform; transform: translate3d(0,0,0); backface-visibility: hidden; } .mx-bloom--green { top: 0; left: 0; background: radial-gradient(circle, rgba(88,145,118,0.95) 0%, rgba(55,95,78,0.45) 38%, rgba(45,74,62,0) 72%); animation: mx-bloom-drift-a 34s ease-in-out infinite, mx-bloom-breathe-a 22s ease-in-out infinite; } .mx-bloom--navy { top: 6%; right: -4%; background: radial-gradient(circle, rgba(72,108,168,0.9) 0%, rgba(45,72,120,0.42) 38%, rgba(28,46,74,0) 72%); animation: mx-bloom-drift-b 40s ease-in-out infinite, mx-bloom-breathe-b 26s ease-in-out infinite; animation-delay: -9s, -14s; } .mx-bloom--rust { bottom: 0; left: 22%; background: radial-gradient(circle, rgba(195,88,72,0.75) 0%, rgba(140,58,48,0.35) 38%, rgba(120,42,38,0) 72%); animation: mx-bloom-drift-c 30s ease-in-out infinite, mx-bloom-breathe-c 19s ease-in-out infinite; animation-delay: -16s, -6s; } .mx-bloom--sand { bottom: 6%; right: 6%; background: radial-gradient(circle, rgba(220,195,150,0.8) 0%, rgba(180,155,115,0.35) 38%, rgba(168,148,112,0) 72%); animation: mx-bloom-drift-d 38s ease-in-out infinite, mx-bloom-breathe-d 24s ease-in-out infinite; animation-delay: -5s, -18s; } .mx-bloom--lower { top: auto; bottom: -6%; left: 34%; animation-delay: -22s, -3s; } .mx-bloom--lower2 { top: 58%; right: auto; left: -8%; animation-delay: -30s, -11s; } @keyframes mx-bloom-drift-a { 0% { transform: translate3d(0,0,0) scale(1); } 20% { transform: translate3d(16%,6%,0) scale(1.1); } 45% { transform: translate3d(24%,18%,0) scale(0.92); } 70% { transform: translate3d(8%,22%,0) scale(1.06); } 100% { transform: translate3d(0,0,0) scale(1); } } @keyframes mx-bloom-drift-b { 0% { transform: translate3d(0,0,0) scale(1.02); } 25% { transform: translate3d(-18%,12%,0) scale(0.9); } 50% { transform: translate3d(-26%,22%,0) scale(1.08); } 75% { transform: translate3d(-10%,8%,0) scale(0.96); } 100% { transform: translate3d(0,0,0) scale(1.02); } } @keyframes mx-bloom-drift-c { 0% { transform: translate3d(0,0,0) scale(0.98); } 30% { transform: translate3d(14%,-14%,0) scale(1.12); } 55% { transform: translate3d(-8%,-20%,0) scale(0.94); } 80% { transform: translate3d(20%,-6%,0) scale(1.04); } 100% { transform: translate3d(0,0,0) scale(0.98); } } @keyframes mx-bloom-drift-d { 0% { transform: translate3d(0,0,0) scale(1); } 22% { transform: translate3d(-14%,-8%,0) scale(1.08); } 48% { transform: translate3d(-22%,-18%,0) scale(0.93); } 72% { transform: translate3d(-6%,-24%,0) scale(1.05); } 100% { transform: translate3d(0,0,0) scale(1); } } @keyframes mx-bloom-breathe-a { 0%,100% { opacity: 0.82; } 50% { opacity: 1; } } @keyframes mx-bloom-breathe-b { 0%,100% { opacity: 0.78; } 50% { opacity: 0.95; } } @keyframes mx-bloom-breathe-c { 0%,100% { opacity: 0.88; } 50% { opacity: 0.7; } } @keyframes mx-bloom-breathe-d { 0%,100% { opacity: 0.75; } 50% { opacity: 0.98; } } @media (prefers-reduced-motion: reduce) { .mx-bloom { animation: none; } } /* content sits above the layer; footer lets it flow to the bottom */ body.has-blooms main { position: relative; z-index: 1; } body.has-blooms .footer, body.has-blooms footer { background: transparent !important; position: relative; z-index: 1; }