How to apply with svg mask?

Question

SVG

example link: https://codepen.io/mareeee/pen/QWdraqd

spoiler

треугольник должен расползаться на весь экран, это баг

Essence of the question: when opening the triangle, it is required to make it so that the content is displayed inside it, which, in theory, should be located under fresh blocks.

I think this problem is solved using masks, but I can’t figure out how exactly

<section class = "main">
            <svg width="100%" height="100vh" viewBox="0 0 1280 720" fill="none" preserveAspectRatio="none" class = "main" >
                <rect width="100%" height="100%" fill="black"/>
               
                
            </svg>

            <svg class = "tringl" width = "100%" height=  "100vh"  viewBox=" 30 -100 20 300" fill="none" xmlns="http://www.w3.org/2000/svg" >
                <defs>
                    <mask id = "mask">
                        <path  d="M37.5 0L74.3061 63H0.69392L37.5 0Z" fill="red" opacity = "1"  stroke="#17181c"   stroke-width="2" transform-box = "fill-box" transform-origin = "38px 40px" >
                            <animateTransform    
                            attributeName="transform"
                            type="scale"
                            values="0,0;15;0,0"
                            dur = "3s"
                            repeatCount="2"
                            
                            />
                        </path>

                    </mask>
                </defs>
                <path  d="M37.5 0L74.3061 63H0.69392L37.5 0Z" fill="red"  stroke="#17181c"   stroke-width="2" transform-box = "fill-box" transform-origin = "38px 40px" >
                    <animateTransform 
                    id = "rot"   
                    attributeName="transform"
                    type="rotate"
                    values="0;250;0"
                    dur = "1.5s"
                    repeatCount="2"
                    
                    />
                    <animateTransform    
                    attributeName="transform"
                    type="scale"
                    values = "1; 0,8; 10"
                    dur = "1s"
                    repeatCount="1"
                    fill = "freeze"
                    begin = "rot.end"
                    
                    /> 
                    <animate
                        attributeName="d"
                        calMode="spline"
                        to = "M90.5 00L74.1231 63H0.69392L-20.5 0Z"
                        dur = "3s"
                        begin = "rot.end"
                        
                        repeatCount="1"
                        fill = "freeze"
                    />
                </path>
            </svg>
                

        </section>