[pgtrns\:id=trns-anim-element]{position:fixed;top:0;left:0;width:100%;height:100%;visibility:hidden;background-color:var(--color-primary);transform:translateY(calc(100% + var(--angled-segment-height)));z-index:100;--angle:4deg;--angled-segment-height:calc(100vw * tan(var(--angle)))}[pgtrns\:id=trns-anim-element]::after,[pgtrns\:id=trns-anim-element]::before{content:"";position:absolute;left:0;width:100%;height:var(--angled-segment-height);background-color:inherit;transform:rotate(calc(-1*var(--angle)))}[pgtrns\:id=trns-anim-element]::before{bottom:100%;transform-origin:top right}[pgtrns\:id=trns-anim-element]::after{top:100%;transform-origin:bottom left}[pgtrns\:state] [pgtrns\:id=trns-anim-element]{visibility:visible;transition:transform .6s}[pgtrns\:state=start] [pgtrns\:id=trns-anim-element]{transform:translateY(0)}[pgtrns\:state=end] [pgtrns\:id=trns-anim-element]{transform:translateY(calc(-100% - var(--angled-segment-height)))}