I have a problem because I am learning about svg and I have made a basic animation but I want to fill the second rectangle with a gradient. The colour of the second rectangle is always grey or black, no matter what colour I change to even I can type red directly and it will still be grey. Anyone know why this is happening?

<svg width="650" height="490" viewBox="0 -27 415 190" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                          <linearGradient id="ss" gradientTransform="rotate(63)">
                            <stop offset="0%" style="stop-color:rgb(230,67,22);" />
                            <stop offset="100%" style="stop-color:rgb(101,32,70);" />
                          </linearGradient>
                      
                          <mask id="mask1">
                            <rect x="-445" y="0" width="445" height="190" fill="white">
                              <animate attributeName="x" values="-445; 0; 0; 445" keyTimes="0; 0.4; 0.8; 1" dur="15s" repeatCount="indefinite" />
                            </rect>
                            <rect x="-445" y="0" width="85" height="190" fill="url(#ss)">
                              <animate attributeName="x" values="-445; -445; 445; 445" keyTimes="0; 0.4; 0.8; 1" dur="15s" repeatCount="indefinite" />
                            </rect>
                          </mask>
                        </defs>
                      
                        <path d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z" fill="white" mask="url(#mask1)"/>
                      </svg>

I have no idea why this is happening.
I will be very happy if someone can help.
Thank you in advance!