.oggi-fuego {
--fi: 1.55;
position: relative;
display: inline-grid;
place-items: center;
width: 1.2em;
height: 1em;
flex-shrink: 0;
line-height: 1;
}
.oggi-fuego svg {
grid-area: 1 / 1;
display: block;
width: 1.15em;
height: 1.3em;
margin-block: -.15em;
overflow: visible;
filter: drop-shadow(0 0 calc(3px * var(--fi)) rgba(255, 110, 0, .75));
transition: transform .25s ease, filter .25s ease;
animation: oggi-fuego-mece calc(2.4s / var(--fi)) ease-in-out infinite alternate;
}
.oggi-fuego path {
transform-box: fill-box;
transform-origin: 50% 100%;
}
.oggi-fuego .oggi-fuego__f1 { animation: oggi-fuego-1 calc(.9s / var(--fi)) ease-in-out infinite alternate; }
.oggi-fuego .oggi-fuego__f2 { animation: oggi-fuego-2 calc(.62s / var(--fi)) ease-in-out infinite alternate; }
.oggi-fuego .oggi-fuego__f3 { animation: oggi-fuego-3 calc(.45s / var(--fi)) ease-in-out infinite alternate; }
a:hover > .oggi-fuego svg,
a:focus-visible > .oggi-fuego svg {
transform: scale(1.22);
filter: drop-shadow(0 0 7px rgba(255, 120, 0, .95));
}
@keyframes oggi-fuego-mece {
from { rotate: calc(-3deg * var(--fi)); }
to { rotate: calc(3deg * var(--fi)); }
}
@keyframes oggi-fuego-1 {
0% { transform: scale(1, 1) skewX(0); }
50% { transform: scale(calc(1 - .04 * var(--fi)), calc(1 + .07 * var(--fi))) skewX(calc(-3deg * var(--fi))); }
100% { transform: scale(calc(1 + .03 * var(--fi)), calc(1 - .03 * var(--fi))) skewX(calc(2deg * var(--fi))); }
}
@keyframes oggi-fuego-2 {
0% { transform: scale(1, 1) skewX(calc(3deg * var(--fi))); }
100% { transform: scale(calc(1 - .06 * var(--fi)), calc(1 + .14 * var(--fi))) skewX(calc(-5deg * var(--fi))); }
}
@keyframes oggi-fuego-3 {
0% { transform: scale(1, .92) translateY(0); }
100% { transform: scale(calc(1 - .1 * var(--fi)), calc(1 + .2 * var(--fi))) translateY(calc(-.6px * var(--fi))); }
}
.oggi-fuego__chispas {
position: absolute;
left: 50%;
bottom: 55%;
width: 0;
height: 0;
pointer-events: none;
}
.oggi-fuego__chispa {
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 3px;
border-radius: 50%;
background: #FFB347;
box-shadow: 0 0 6px 1px rgba(255, 140, 0, .9);
}
.oggi-fuego__chispa--clara { background: #FFE08A; }
.oggi-fuego__brillo { display: none; }
@supports selector(:has(*)) {
a:has(> .oggi-fuego) {
position: relative;
isolation: isolate;
}
.oggi-fuego__brillo {
display: block;
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
}
.oggi-fuego__brillo::after {
content: "";
position: absolute;
top: -20%;
bottom: -20%;
left: -50%;
width: 38%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), rgba(255, 170, 90, .22), transparent);
transform: skewX(-18deg);
opacity: 0;
animation: oggi-fuego-brillo calc(4.2s / 1.55) ease-in-out infinite;
}
}
@keyframes oggi-fuego-brillo {
0%, 62% { left: -50%; opacity: 0; }
66% { opacity: 1; }
100% { left: 120%; opacity: 1; }
}
.oggi-catnav__links {
padding-block: 8px;
margin-block: -8px;
}
@media (prefers-reduced-motion: reduce) {
.oggi-fuego svg,
.oggi-fuego path,
.oggi-fuego__brillo::after { animation: none !important; }
}