/* ============================================ LE CIEL Trois couches d'etoiles. Les lointaines sont immobiles, les proches derivent au passage de la souris : c'est ce decalage relatif qui donne sa profondeur au ciel. ============================================ */ .sys__ciel { position: absolute; inset: -12%; z-index: 0; pointer-events: none; overflow: hidden; } .sys__etoiles { position: absolute; inset: 0; background-repeat: no-repeat; will-change: transform; } .sys__etoiles--loin { background-image: radial-gradient(circle 0.93px at 32.38% 15.08%, rgba(255,255,255,0.24) 0%, transparent 100%), radial-gradient(circle 0.63px at 53.59% 36.57%, rgba(255,255,255,0.36) 0%, transparent 100%), radial-gradient(circle 0.63px at 3.75% 43.36%, rgba(255,255,255,0.25) 0%, transparent 100%), radial-gradient(circle 0.66px at 42.45% 82.69%, rgba(255,255,255,0.28) 0%, transparent 100%), radial-gradient(circle 0.89px at 62.74% 94.77%, rgba(255,255,255,0.33) 0%, transparent 100%), radial-gradient(circle 1.03px at 97.63% 4.66%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(circle 0.75px at 14.43% 11.78%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(circle 0.92px at 18.07% 58.16%, rgba(255,255,255,0.32) 0%, transparent 100%), radial-gradient(circle 0.63px at 54.77% 6.28%, rgba(255,255,255,0.28) 0%, transparent 100%), radial-gradient(circle 0.76px at 68.04% 42.76%, rgba(255,255,255,0.38) 0%, transparent 100%), radial-gradient(circle 1.0px at 45.32% 29.98%, rgba(255,255,255,0.42) 0%, transparent 100%), radial-gradient(circle 0.86px at 24.41% 57.44%, rgba(255,255,255,0.47) 0%, transparent 100%), radial-gradient(circle 1.09px at 72.94% 28.79%, rgba(255,255,255,0.25) 0%, transparent 100%), radial-gradient(circle 0.68px at 41.81% 75.71%, rgba(255,255,255,0.36) 0%, transparent 100%), radial-gradient(circle 0.98px at 3.92% 66.82%, rgba(255,255,255,0.38) 0%, transparent 100%), radial-gradient(circle 0.95px at 87.55% 31.37%, rgba(255,255,255,0.39) 0%, transparent 100%), radial-gradient(circle 1.02px at 57.99% 45.62%, rgba(255,255,255,0.48) 0%, transparent 100%), radial-gradient(circle 0.63px at 47.41% 66.42%, rgba(255,255,255,0.42) 0%, transparent 100%), radial-gradient(circle 1.01px at 64.71% 99.31%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(circle 0.61px at 38.58% 66.87%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(circle 0.63px at 16.8% 11.71%, rgba(255,255,255,0.44) 0%, transparent 100%), radial-gradient(circle 0.8px at 12.93% 24.76%, rgba(255,255,255,0.46) 0%, transparent 100%), radial-gradient(circle 0.87px at 8.06% 44.92%, rgba(255,255,255,0.47) 0%, transparent 100%), radial-gradient(circle 0.74px at 81.93% 86.4%, rgba(255,255,255,0.34) 0%, transparent 100%), radial-gradient(circle 1.08px at 35.88% 88.42%, rgba(255,255,255,0.26) 0%, transparent 100%), radial-gradient(circle 0.72px at 17.62% 23.2%, rgba(255,255,255,0.36) 0%, transparent 100%), radial-gradient(circle 0.6px at 58.91% 26.27%, rgba(255,255,255,0.34) 0%, transparent 100%), radial-gradient(circle 1.08px at 36.93% 56.63%, rgba(255,255,255,0.41) 0%, transparent 100%), radial-gradient(circle 0.94px at 51.55% 61.76%, rgba(255,255,255,0.24) 0%, transparent 100%), radial-gradient(circle 1.04px at 89.95% 78.0%, rgba(255,255,255,0.44) 0%, transparent 100%), radial-gradient(circle 0.65px at 39.24% 39.9%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(circle 0.7px at 6.22% 6.73%, rgba(255,255,255,0.27) 0%, transparent 100%), radial-gradient(circle 0.6px at 34.01% 5.26%, rgba(255,255,255,0.26) 0%, transparent 100%), radial-gradient(circle 0.61px at 10.15% 36.36%, rgba(255,255,255,0.46) 0%, transparent 100%), radial-gradient(circle 0.73px at 61.41% 14.86%, rgba(255,255,255,0.32) 0%, transparent 100%), radial-gradient(circle 1.02px at 36.42% 12.28%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(circle 0.64px at 46.6% 48.38%, rgba(255,255,255,0.25) 0%, transparent 100%), radial-gradient(circle 1.01px at 34.26% 26.48%, rgba(255,255,255,0.27) 0%, transparent 100%), radial-gradient(circle 0.86px at 2.31% 95.1%, rgba(255,255,255,0.26) 0%, transparent 100%), radial-gradient(circle 0.86px at 54.32% 2.7%, rgba(255,255,255,0.49) 0%, transparent 100%), radial-gradient(circle 0.73px at 86.33% 69.62%, rgba(255,255,255,0.32) 0%, transparent 100%), radial-gradient(circle 0.87px at 16.7% 77.19%, rgba(255,255,255,0.44) 0%, transparent 100%), radial-gradient(circle 1.01px at 32.97% 22.3%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(circle 1.01px at 85.26% 80.61%, rgba(255,255,255,0.43) 0%, transparent 100%), radial-gradient(circle 0.78px at 22.67% 51.76%, rgba(255,255,255,0.23) 0%, transparent 100%), radial-gradient(circle 0.73px at 2.79% 27.94%, rgba(255,255,255,0.41) 0%, transparent 100%), radial-gradient(circle 1.07px at 95.65% 44.72%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(circle 0.71px at 95.5% 36.46%, rgba(255,255,255,0.28) 0%, transparent 100%), radial-gradient(circle 0.91px at 19.67% 20.44%, rgba(255,255,255,0.47) 0%, transparent 100%), radial-gradient(circle 0.93px at 84.04% 47.95%, rgba(255,255,255,0.44) 0%, transparent 100%), radial-gradient(circle 1.05px at 8.48% 66.06%, rgba(255,255,255,0.44) 0%, transparent 100%), radial-gradient(circle 0.69px at 75.01% 47.8%, rgba(255,255,255,0.44) 0%, transparent 100%), radial-gradient(circle 1.09px at 33.25% 80.08%, rgba(255,255,255,0.33) 0%, transparent 100%), radial-gradient(circle 0.96px at 40.14% 94.68%, rgba(255,255,255,0.27) 0%, transparent 100%), radial-gradient(circle 1.05px at 12.7% 15.12%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(circle 1.09px at 14.62% 82.65%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(circle 0.67px at 35.04% 54.87%, rgba(255,255,255,0.22) 0%, transparent 100%), radial-gradient(circle 0.86px at 97.09% 64.97%, rgba(255,255,255,0.48) 0%, transparent 100%), radial-gradient(circle 1.01px at 43.38% 87.17%, rgba(255,255,255,0.28) 0%, transparent 100%), radial-gradient(circle 0.72px at 25.18% 29.3%, rgba(255,255,255,0.38) 0%, transparent 100%), radial-gradient(circle 0.67px at 25.94% 41.9%, rgba(255,255,255,0.47) 0%, transparent 100%), radial-gradient(circle 0.89px at 35.38% 45.82%, rgba(255,255,255,0.47) 0%, transparent 100%), radial-gradient(circle 0.85px at 42.06% 91.77%, rgba(255,255,255,0.37) 0%, transparent 100%), radial-gradient(circle 0.82px at 52.35% 1.87%, rgba(255,255,255,0.27) 0%, transparent 100%), radial-gradient(circle 0.69px at 0.39% 79.92%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(circle 0.76px at 72.52% 55.65%, rgba(255,255,255,0.37) 0%, transparent 100%), radial-gradient(circle 0.65px at 55.54% 78.43%, rgba(255,255,255,0.38) 0%, transparent 100%), radial-gradient(circle 0.99px at 24.85% 27.69%, rgba(255,255,255,0.36) 0%, transparent 100%), radial-gradient(circle 1.06px at 56.17% 76.0%, rgba(255,255,255,0.34) 0%, transparent 100%), radial-gradient(circle 0.86px at 61.25% 50.56%, rgba(255,255,255,0.41) 0%, transparent 100%), radial-gradient(circle 0.84px at 45.23% 53.33%, rgba(255,255,255,0.48) 0%, transparent 100%), radial-gradient(circle 1.07px at 69.92% 87.65%, rgba(255,255,255,0.29) 0%, transparent 100%), radial-gradient(circle 1.02px at 55.95% 94.33%, rgba(255,255,255,0.26) 0%, transparent 100%), radial-gradient(circle 0.64px at 12.16% 44.21%, rgba(255,255,255,0.29) 0%, transparent 100%), radial-gradient(circle 0.99px at 7.31% 66.95%, rgba(255,255,255,0.47) 0%, transparent 100%), radial-gradient(circle 0.93px at 15.44% 71.61%, rgba(255,255,255,0.26) 0%, transparent 100%), radial-gradient(circle 0.71px at 88.28% 96.75%, rgba(255,255,255,0.49) 0%, transparent 100%), radial-gradient(circle 1.09px at 39.83% 48.73%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(circle 0.86px at 16.15% 43.15%, rgba(255,255,255,0.31) 0%, transparent 100%), radial-gradient(circle 0.96px at 19.57% 31.85%, rgba(255,255,255,0.23) 0%, transparent 100%), radial-gradient(circle 0.61px at 55.41% 44.05%, rgba(255,255,255,0.31) 0%, transparent 100%), radial-gradient(circle 0.63px at 62.39% 51.23%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(circle 0.65px at 78.84% 97.17%, rgba(255,255,255,0.29) 0%, transparent 100%), radial-gradient(circle 0.74px at 3.96% 77.9%, rgba(255,255,255,0.26) 0%, transparent 100%), radial-gradient(circle 1.01px at 42.23% 91.14%, rgba(255,255,255,0.29) 0%, transparent 100%), radial-gradient(circle 0.89px at 14.94% 91.92%, rgba(255,255,255,0.42) 0%, transparent 100%), radial-gradient(circle 0.94px at 8.95% 5.75%, rgba(255,255,255,0.34) 0%, transparent 100%), radial-gradient(circle 0.92px at 7.24% 93.83%, rgba(255,255,255,0.44) 0%, transparent 100%), radial-gradient(circle 0.63px at 8.37% 85.62%, rgba(255,255,255,0.46) 0%, transparent 100%), radial-gradient(circle 0.88px at 45.38% 33.92%, rgba(255,255,255,0.48) 0%, transparent 100%); } .sys__etoiles--milieu { background-image: radial-gradient(circle 1.32px at 26.79% 12.92%, rgba(255,255,255,0.43) 0%, transparent 100%), radial-gradient(circle 0.94px at 10.95% 16.14%, rgba(255,255,255,0.42) 0%, transparent 100%), radial-gradient(circle 1.51px at 31.2% 30.5%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(circle 1.18px at 50.01% 17.79%, rgba(255,255,255,0.36) 0%, transparent 100%), radial-gradient(circle 1.49px at 25.04% 1.53%, rgba(255,255,255,0.53) 0%, transparent 100%), radial-gradient(circle 1.65px at 18.95% 47.48%, rgba(255,255,255,0.39) 0%, transparent 100%), radial-gradient(circle 1.3px at 81.89% 43.22%, rgba(255,255,255,0.63) 0%, transparent 100%), radial-gradient(circle 1.45px at 39.31% 50.67%, rgba(255,255,255,0.67) 0%, transparent 100%), radial-gradient(circle 1.47px at 34.27% 83.23%, rgba(255,255,255,0.56) 0%, transparent 100%), radial-gradient(circle 0.94px at 40.47% 34.76%, rgba(255,255,255,0.39) 0%, transparent 100%), radial-gradient(circle 1.1px at 7.07% 74.09%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(circle 1.6px at 8.45% 84.13%, rgba(255,255,255,0.57) 0%, transparent 100%), radial-gradient(circle 1.13px at 28.19% 24.22%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(circle 1.11px at 15.75% 44.58%, rgba(255,255,255,0.67) 0%, transparent 100%), radial-gradient(circle 1.1px at 97.26% 54.71%, rgba(255,255,255,0.67) 0%, transparent 100%), radial-gradient(circle 0.9px at 30.95% 35.66%, rgba(255,255,255,0.48) 0%, transparent 100%), radial-gradient(circle 1.06px at 47.46% 50.28%, rgba(255,255,255,0.52) 0%, transparent 100%), radial-gradient(circle 0.97px at 0.5% 26.42%, rgba(255,255,255,0.48) 0%, transparent 100%), radial-gradient(circle 1.14px at 4.17% 2.25%, rgba(255,255,255,0.43) 0%, transparent 100%), radial-gradient(circle 1.5px at 58.56% 52.92%, rgba(255,255,255,0.57) 0%, transparent 100%), radial-gradient(circle 1.21px at 71.6% 87.91%, rgba(255,255,255,0.46) 0%, transparent 100%), radial-gradient(circle 1.48px at 98.47% 14.95%, rgba(255,255,255,0.56) 0%, transparent 100%), radial-gradient(circle 1.61px at 4.38% 83.53%, rgba(255,255,255,0.56) 0%, transparent 100%), radial-gradient(circle 1.01px at 73.39% 81.22%, rgba(255,255,255,0.52) 0%, transparent 100%), radial-gradient(circle 1.54px at 50.44% 83.49%, rgba(255,255,255,0.62) 0%, transparent 100%), radial-gradient(circle 1.45px at 58.41% 89.28%, rgba(255,255,255,0.58) 0%, transparent 100%), radial-gradient(circle 1.01px at 22.99% 3.12%, rgba(255,255,255,0.47) 0%, transparent 100%), radial-gradient(circle 1.35px at 10.49% 83.58%, rgba(255,255,255,0.56) 0%, transparent 100%), radial-gradient(circle 1.29px at 62.62% 68.07%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(circle 1.3px at 79.77% 74.83%, rgba(255,255,255,0.53) 0%, transparent 100%), radial-gradient(circle 1.49px at 65.93% 6.61%, rgba(255,255,255,0.43) 0%, transparent 100%), radial-gradient(circle 1.48px at 7.44% 26.56%, rgba(255,255,255,0.42) 0%, transparent 100%), radial-gradient(circle 1.3px at 73.98% 97.57%, rgba(255,255,255,0.48) 0%, transparent 100%), radial-gradient(circle 1.51px at 47.9% 68.37%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(circle 1.02px at 64.28% 7.75%, rgba(255,255,255,0.43) 0%, transparent 100%), radial-gradient(circle 1.35px at 74.32% 30.44%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(circle 1.44px at 6.07% 26.88%, rgba(255,255,255,0.58) 0%, transparent 100%), radial-gradient(circle 1.31px at 67.57% 29.09%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(circle 1.61px at 46.63% 11.85%, rgba(255,255,255,0.42) 0%, transparent 100%), radial-gradient(circle 0.91px at 97.81% 93.63%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(circle 1.26px at 81.99% 96.81%, rgba(255,255,255,0.44) 0%, transparent 100%), radial-gradient(circle 1.07px at 20.98% 94.56%, rgba(255,255,255,0.54) 0%, transparent 100%), radial-gradient(circle 1.66px at 14.17% 52.41%, rgba(255,255,255,0.39) 0%, transparent 100%), radial-gradient(circle 1.61px at 82.02% 50.87%, rgba(255,255,255,0.58) 0%, transparent 100%), radial-gradient(circle 1.29px at 23.14% 89.77%, rgba(255,255,255,0.36) 0%, transparent 100%), radial-gradient(circle 1.26px at 0.36% 49.17%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(circle 1.15px at 14.07% 34.4%, rgba(255,255,255,0.63) 0%, transparent 100%), radial-gradient(circle 1.57px at 0.17% 75.07%, rgba(255,255,255,0.39) 0%, transparent 100%), radial-gradient(circle 1.62px at 92.64% 71.3%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(circle 1.7px at 37.22% 39.29%, rgba(255,255,255,0.54) 0%, transparent 100%), radial-gradient(circle 1.12px at 36.07% 42.81%, rgba(255,255,255,0.37) 0%, transparent 100%), radial-gradient(circle 1.13px at 10.17% 83.47%, rgba(255,255,255,0.66) 0%, transparent 100%), radial-gradient(circle 1.31px at 24.93% 26.57%, rgba(255,255,255,0.41) 0%, transparent 100%), radial-gradient(circle 1.61px at 37.33% 95.62%, rgba(255,255,255,0.62) 0%, transparent 100%), radial-gradient(circle 1.65px at 63.09% 91.34%, rgba(255,255,255,0.53) 0%, transparent 100%); } .sys__etoiles--pres { background-image: radial-gradient(circle 2.11px at 71.96% 4.95%, rgba(255,255,255,0.73) 0%, transparent 100%), radial-gradient(circle 1.61px at 75.27% 64.45%, rgba(255,255,255,0.57) 0%, transparent 100%), radial-gradient(circle 1.82px at 92.68% 12.73%, rgba(255,255,255,0.69) 0%, transparent 100%), radial-gradient(circle 2.37px at 29.78% 73.9%, rgba(255,255,255,0.65) 0%, transparent 100%), radial-gradient(circle 1.91px at 65.6% 30.08%, rgba(255,255,255,0.71) 0%, transparent 100%), radial-gradient(circle 1.53px at 16.73% 16.17%, rgba(255,255,255,0.91) 0%, transparent 100%), radial-gradient(circle 2.3px at 49.71% 22.0%, rgba(255,255,255,0.95) 0%, transparent 100%), radial-gradient(circle 1.51px at 45.0% 13.96%, rgba(255,255,255,0.59) 0%, transparent 100%), radial-gradient(circle 1.56px at 34.2% 9.11%, rgba(255,255,255,0.65) 0%, transparent 100%), radial-gradient(circle 2.12px at 56.96% 88.73%, rgba(255,255,255,0.72) 0%, transparent 100%), radial-gradient(circle 1.71px at 41.39% 52.42%, rgba(255,255,255,0.69) 0%, transparent 100%), radial-gradient(circle 2.36px at 6.21% 27.75%, rgba(255,255,255,0.6) 0%, transparent 100%), radial-gradient(circle 2.25px at 50.34% 62.96%, rgba(255,255,255,0.64) 0%, transparent 100%), radial-gradient(circle 1.74px at 27.1% 24.85%, rgba(255,255,255,0.73) 0%, transparent 100%), radial-gradient(circle 2.26px at 95.39% 84.87%, rgba(255,255,255,0.56) 0%, transparent 100%), radial-gradient(circle 2.29px at 3.22% 70.95%, rgba(255,255,255,0.74) 0%, transparent 100%), radial-gradient(circle 1.73px at 58.72% 0.02%, rgba(255,255,255,0.92) 0%, transparent 100%), radial-gradient(circle 2.37px at 82.56% 85.55%, rgba(255,255,255,0.65) 0%, transparent 100%), radial-gradient(circle 1.87px at 10.9% 15.44%, rgba(255,255,255,0.82) 0%, transparent 100%), radial-gradient(circle 2.01px at 94.15% 72.17%, rgba(255,255,255,0.86) 0%, transparent 100%), radial-gradient(circle 1.34px at 45.73% 55.15%, rgba(255,255,255,0.86) 0%, transparent 100%), radial-gradient(circle 2.01px at 23.26% 91.99%, rgba(255,255,255,0.67) 0%, transparent 100%), radial-gradient(circle 2.0px at 12.8% 25.18%, rgba(255,255,255,0.83) 0%, transparent 100%), radial-gradient(circle 1.88px at 11.21% 7.04%, rgba(255,255,255,0.78) 0%, transparent 100%), radial-gradient(circle 1.96px at 38.81% 22.36%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(circle 2.35px at 30.15% 46.07%, rgba(255,255,255,0.81) 0%, transparent 100%); animation: sys-scintille 5.5s ease-in-out infinite; } @keyframes sys-scintille { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* La nebuleuse : un degrade violet vers rose, tres diffus. Elle ne doit jamais devenir un objet — juste une couleur dans le fond. */ .sys__nebuleuse { position: absolute; left: -8%; top: -6%; width: 78%; height: 74%; pointer-events: none; opacity: 0.5; background: radial-gradient(ellipse 52% 46% at 38% 42%, rgba(139, 92, 246, 0.34) 0%, rgba(139, 92, 246, 0.16) 38%, transparent 72%), radial-gradient(ellipse 44% 40% at 62% 58%, rgba(255, 45, 149, 0.26) 0%, rgba(255, 45, 149, 0.10) 42%, transparent 74%); filter: blur(24px); animation: sys-derive 34s ease-in-out infinite; } @keyframes sys-derive { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -2%) scale(1.06); } } /* La lune : petite, loin, decentree. Pas de soleil — c'est NOE, le soleil de ce systeme, et rien ne doit lui disputer ce role. */ .sys__lune { position: absolute; right: 9%; top: 11%; width: 62px; height: 62px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 36% 32%, rgba(236, 238, 250, 0.95) 0%, rgba(198, 202, 226, 0.9) 44%, rgba(126, 130, 160, 0.85) 78%, rgba(84, 88, 118, 0.8) 100%); box-shadow: 0 0 26px rgba(214, 220, 255, 0.24), inset -8px -6px 16px rgba(20, 22, 40, 0.55); opacity: 0.7; } /* Ses crateres, en creux */ .sys__lune::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle 7px at 62% 38%, rgba(70,74,102,0.5) 0%, transparent 100%), radial-gradient(circle 5px at 40% 62%, rgba(70,74,102,0.42) 0%, transparent 100%), radial-gradient(circle 4px at 70% 68%, rgba(70,74,102,0.36) 0%, transparent 100%); } /* ============================================ LE SOL Une grille elliptique posee sur le plan de reference. Sans plan, l'oeil n'a rien pour situer les orbites : chaque medaillon a l'air pose n'importe ou plutot que de tourner dans un espace. C'est ce qui manquait le plus. ============================================ */ .sys__sol { position: absolute; left: 0; top: 0; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; pointer-events: none; transform: rotateX(90deg); transform-style: preserve-3d; opacity: 0.5; } .sys__sol-grille { position: absolute; inset: 0; border-radius: 50%; background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 74px, rgba(139, 92, 246, 0.16) 74px 75px), repeating-conic-gradient(from 0deg at 50% 50%, rgba(139, 92, 246, 0.13) 0deg 0.35deg, transparent 0.35deg 15deg); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.7) 42%, rgba(0,0,0,0.25) 68%, transparent 88%); mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.7) 42%, rgba(0,0,0,0.25) 68%, transparent 88%); } .sys.sans-sol .sys__sol { opacity: 0; } .sys__sol { transition: opacity 500ms ease; }