fix: smooth balada nebula color transition via ::after opacity

This commit is contained in:
vini 2026-06-14 13:27:27 -03:00
parent d422cea905
commit 36220dc34f

View file

@ -31,8 +31,16 @@ html, body {
filter: blur(80px);
pointer-events: none;
animation: nebulaFloat ease-in-out infinite;
transition: background 3.5s ease;
}
.nebula::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
opacity: 0;
transition: opacity 9s ease;
}
body.balada .nebula::after { opacity: 1; }
.nebula-a {
width: 500px; height: 350px;
background: radial-gradient(ellipse, rgba(120,0,220,0.18), transparent 70%);
@ -991,9 +999,9 @@ body.balada .spotlight-wrap { opacity: 1; }
/* ============================================================
BALADA — SOBRESCRITAS DO AMBIENTE
============================================================ */
body.balada .nebula-a { background: radial-gradient(ellipse, rgba(255,0,100,0.22), transparent 70%); }
body.balada .nebula-b { background: radial-gradient(ellipse, rgba(180,0,255,0.18), transparent 70%); }
body.balada .nebula-c { background: radial-gradient(ellipse, rgba(255,140,0,0.14), transparent 70%); }
.nebula-a::after { background: radial-gradient(ellipse, rgba(255,0,100,0.22), transparent 70%); }
.nebula-b::after { background: radial-gradient(ellipse, rgba(180,0,255,0.18), transparent 70%); }
.nebula-c::after { background: radial-gradient(ellipse, rgba(255,140,0,0.14), transparent 70%); }
</style>
</head>