/* ======================================== ============Paper Animation Styles=============== ============================================ */ /* Animation Keyframes */ @keyframes translateSquareOffScreen { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100vw); opacity: 0; } } @keyframes rotateRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotateRingReverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes arcDraw { from { stroke-dasharray: 0 1000; } to { stroke-dasharray: 1000 0; } } /* SVG Animation States */ .paper-svg-wrapper svg .svg-grid rect { opacity: 1; transform: scale(1); animation: none; } .paper-svg-wrapper svg .svg-ring-1, .paper-svg-wrapper svg .svg-ring-2, .paper-svg-wrapper svg .svg-ring-3 { animation: none; transform-origin: 300px 300px; /* Center of the circles */ } .paper-svg-wrapper svg .svg-arc-1, .paper-svg-wrapper svg .svg-arc-2 { animation: none; transform-origin: 300px 300px; /* Center of the circles */ } /* Animation Trigger Classes - Individual squares only */ /* Grid square animations - diagonal pattern from bottom-left to top-right */ .paper-animation-container.animate-svg .grid-square-1 { animation: translateSquareOffScreen 0.8s ease-out 2.5s forwards; } .paper-animation-container.animate-svg .grid-square-2 { animation: translateSquareOffScreen 0.8s ease-out 2.6s forwards; } .paper-animation-container.animate-svg .grid-square-3 { animation: translateSquareOffScreen 0.8s ease-out 2.7s forwards; } .paper-animation-container.animate-svg .grid-square-4 { animation: translateSquareOffScreen 0.8s ease-out 2.8s forwards; } .paper-animation-container.animate-svg .grid-square-5 { animation: translateSquareOffScreen 0.8s ease-out 2.9s forwards; } .paper-animation-container.animate-svg .grid-square-6 { animation: translateSquareOffScreen 0.8s ease-out 3.0s forwards; } .paper-animation-container.animate-svg .grid-square-7 { animation: translateSquareOffScreen 0.8s ease-out 3.1s forwards; } .paper-animation-container.animate-svg .grid-square-8 { animation: translateSquareOffScreen 0.8s ease-out 3.2s forwards; } .paper-animation-container.animate-svg .grid-square-9 { animation: translateSquareOffScreen 0.8s ease-out 3.3s forwards; } .paper-animation-container.animate-svg .grid-square-10 { animation: translateSquareOffScreen 0.8s ease-out 2.4s forwards; } .paper-animation-container.animate-svg .grid-square-11 { animation: translateSquareOffScreen 0.8s ease-out 2.5s forwards; } .paper-animation-container.animate-svg .grid-square-12 { animation: translateSquareOffScreen 0.8s ease-out 2.6s forwards; } .paper-animation-container.animate-svg .grid-square-13 { animation: translateSquareOffScreen 0.8s ease-out 2.7s forwards; } .paper-animation-container.animate-svg .grid-square-14 { animation: translateSquareOffScreen 0.8s ease-out 2.8s forwards; } .paper-animation-container.animate-svg .grid-square-15 { animation: translateSquareOffScreen 0.8s ease-out 2.9s forwards; } .paper-animation-container.animate-svg .grid-square-16 { animation: translateSquareOffScreen 0.8s ease-out 3.0s forwards; } .paper-animation-container.animate-svg .grid-square-17 { animation: translateSquareOffScreen 0.8s ease-out 3.1s forwards; } .paper-animation-container.animate-svg .grid-square-18 { animation: translateSquareOffScreen 0.8s ease-out 3.2s forwards; } .paper-animation-container.animate-svg .grid-square-19 { animation: translateSquareOffScreen 0.8s ease-out 3.3s forwards; } .paper-animation-container.animate-svg .grid-square-20 { animation: translateSquareOffScreen 0.8s ease-out 2.3s forwards; } .paper-animation-container.animate-svg .grid-square-21 { animation: translateSquareOffScreen 0.8s ease-out 2.4s forwards; } .paper-animation-container.animate-svg .grid-square-22 { animation: translateSquareOffScreen 0.8s ease-out 2.5s forwards; } .paper-animation-container.animate-svg .grid-square-23 { animation: translateSquareOffScreen 0.8s ease-out 2.6s forwards; } .paper-animation-container.animate-svg .grid-square-24 { animation: translateSquareOffScreen 0.8s ease-out 2.7s forwards; } .paper-animation-container.animate-svg .grid-square-25 { animation: translateSquareOffScreen 0.8s ease-out 2.8s forwards; } .paper-animation-container.animate-svg .grid-square-26 { animation: translateSquareOffScreen 0.8s ease-out 2.9s forwards; } .paper-animation-container.animate-svg .grid-square-27 { animation: translateSquareOffScreen 0.8s ease-out 3.0s forwards; } .paper-animation-container.animate-svg .grid-square-28 { animation: translateSquareOffScreen 0.8s ease-out 3.1s forwards; } .paper-animation-container.animate-svg .grid-square-29 { animation: translateSquareOffScreen 0.8s ease-out 3.2s forwards; } .paper-animation-container.animate-svg .grid-square-30 { animation: translateSquareOffScreen 0.8s ease-out 2.2s forwards; } .paper-animation-container.animate-svg .grid-square-31 { animation: translateSquareOffScreen 0.8s ease-out 2.3s forwards; } .paper-animation-container.animate-svg .grid-square-32 { animation: translateSquareOffScreen 0.8s ease-out 2.4s forwards; } .paper-animation-container.animate-svg .grid-square-33 { animation: translateSquareOffScreen 0.8s ease-out 2.5s forwards; } .paper-animation-container.animate-svg .grid-square-34 { animation: translateSquareOffScreen 0.8s ease-out 2.6s forwards; } .paper-animation-container.animate-svg .grid-square-35 { animation: translateSquareOffScreen 0.8s ease-out 2.7s forwards; } .paper-animation-container.animate-svg .grid-square-36 { animation: translateSquareOffScreen 0.8s ease-out 2.8s forwards; } .paper-animation-container.animate-svg .grid-square-37 { animation: translateSquareOffScreen 0.8s ease-out 2.9s forwards; } .paper-animation-container.animate-svg .grid-square-38 { animation: translateSquareOffScreen 0.8s ease-out 3.0s forwards; } .paper-animation-container.animate-svg .grid-square-39 { animation: translateSquareOffScreen 0.8s ease-out 3.1s forwards; } .paper-animation-container.animate-svg .grid-square-40 { animation: translateSquareOffScreen 0.8s ease-out 2.1s forwards; } .paper-animation-container.animate-svg .grid-square-41 { animation: translateSquareOffScreen 0.8s ease-out 2.2s forwards; } .paper-animation-container.animate-svg .grid-square-42 { animation: translateSquareOffScreen 0.8s ease-out 2.3s forwards; } .paper-animation-container.animate-svg .grid-square-43 { animation: translateSquareOffScreen 0.8s ease-out 2.4s forwards; } .paper-animation-container.animate-svg .grid-square-44 { animation: translateSquareOffScreen 0.8s ease-out 2.5s forwards; } .paper-animation-container.animate-svg .grid-square-45 { animation: translateSquareOffScreen 0.8s ease-out 2.6s forwards; } .paper-animation-container.animate-svg .grid-square-46 { animation: translateSquareOffScreen 0.8s ease-out 2.7s forwards; } .paper-animation-container.animate-svg .grid-square-47 { animation: translateSquareOffScreen 0.8s ease-out 2.8s forwards; } .paper-animation-container.animate-svg .grid-square-48 { animation: translateSquareOffScreen 0.8s ease-out 2.9s forwards; } .paper-animation-container.animate-svg .grid-square-49 { animation: translateSquareOffScreen 0.8s ease-out 3.0s forwards; } .paper-animation-container.animate-svg .grid-square-50 { animation: translateSquareOffScreen 0.8s ease-out 2.0s forwards; } .paper-animation-container.animate-svg .grid-square-51 { animation: translateSquareOffScreen 0.8s ease-out 2.1s forwards; } .paper-animation-container.animate-svg .grid-square-52 { animation: translateSquareOffScreen 0.8s ease-out 2.2s forwards; } .paper-animation-container.animate-svg .grid-square-53 { animation: translateSquareOffScreen 0.8s ease-out 2.3s forwards; } .paper-animation-container.animate-svg .grid-square-54 { animation: translateSquareOffScreen 0.8s ease-out 2.4s forwards; } .paper-animation-container.animate-svg .grid-square-55 { animation: translateSquareOffScreen 0.8s ease-out 2.5s forwards; } .paper-animation-container.animate-svg .grid-square-56 { animation: translateSquareOffScreen 0.8s ease-out 2.6s forwards; } .paper-animation-container.animate-svg .grid-square-57 { animation: translateSquareOffScreen 0.8s ease-out 2.7s forwards; } .paper-animation-container.animate-svg .grid-square-58 { animation: translateSquareOffScreen 0.8s ease-out 2.8s forwards; } .paper-animation-container.animate-svg .grid-square-59 { animation: translateSquareOffScreen 0.8s ease-out 2.9s forwards; } .paper-animation-container.animate-svg .grid-square-60 { animation: translateSquareOffScreen 0.8s ease-out 1.9s forwards; } .paper-animation-container.animate-svg .grid-square-61 { animation: translateSquareOffScreen 0.8s ease-out 2.0s forwards; } .paper-animation-container.animate-svg .grid-square-62 { animation: translateSquareOffScreen 0.8s ease-out 2.1s forwards; } .paper-animation-container.animate-svg .grid-square-63 { animation: translateSquareOffScreen 0.8s ease-out 2.2s forwards; } .paper-animation-container.animate-svg .grid-square-64 { animation: translateSquareOffScreen 0.8s ease-out 2.3s forwards; } .paper-animation-container.animate-svg .grid-square-65 { animation: translateSquareOffScreen 0.8s ease-out 2.4s forwards; } .paper-animation-container.animate-svg .grid-square-66 { animation: translateSquareOffScreen 0.8s ease-out 2.5s forwards; } .paper-animation-container.animate-svg .grid-square-67 { animation: translateSquareOffScreen 0.8s ease-out 2.6s forwards; } .paper-animation-container.animate-svg .grid-square-68 { animation: translateSquareOffScreen 0.8s ease-out 2.7s forwards; } .paper-animation-container.animate-svg .grid-square-69 { animation: translateSquareOffScreen 0.8s ease-out 2.8s forwards; } .paper-animation-container.animate-svg .grid-square-70 { animation: translateSquareOffScreen 0.8s ease-out 1.8s forwards; } .paper-animation-container.animate-svg .grid-square-71 { animation: translateSquareOffScreen 0.8s ease-out 1.9s forwards; } .paper-animation-container.animate-svg .grid-square-72 { animation: translateSquareOffScreen 0.8s ease-out 2.0s forwards; } .paper-animation-container.animate-svg .grid-square-73 { animation: translateSquareOffScreen 0.8s ease-out 2.1s forwards; } .paper-animation-container.animate-svg .grid-square-74 { animation: translateSquareOffScreen 0.8s ease-out 2.2s forwards; } .paper-animation-container.animate-svg .grid-square-75 { animation: translateSquareOffScreen 0.8s ease-out 2.3s forwards; } .paper-animation-container.animate-svg .grid-square-76 { animation: translateSquareOffScreen 0.8s ease-out 2.4s forwards; } .paper-animation-container.animate-svg .grid-square-77 { animation: translateSquareOffScreen 0.8s ease-out 2.5s forwards; } .paper-animation-container.animate-svg .grid-square-78 { animation: translateSquareOffScreen 0.8s ease-out 2.6s forwards; } .paper-animation-container.animate-svg .grid-square-79 { animation: translateSquareOffScreen 0.8s ease-out 2.7s forwards; } .paper-animation-container.animate-svg .grid-square-80 { animation: translateSquareOffScreen 0.8s ease-out 1.7s forwards; } .paper-animation-container.animate-svg .grid-square-81 { animation: translateSquareOffScreen 0.8s ease-out 1.8s forwards; } .paper-animation-container.animate-svg .grid-square-82 { animation: translateSquareOffScreen 0.8s ease-out 1.9s forwards; } .paper-animation-container.animate-svg .grid-square-83 { animation: translateSquareOffScreen 0.8s ease-out 2.0s forwards; } .paper-animation-container.animate-svg .grid-square-84 { animation: translateSquareOffScreen 0.8s ease-out 2.1s forwards; } .paper-animation-container.animate-svg .grid-square-85 { animation: translateSquareOffScreen 0.8s ease-out 2.2s forwards; } .paper-animation-container.animate-svg .grid-square-86 { animation: translateSquareOffScreen 0.8s ease-out 2.3s forwards; } .paper-animation-container.animate-svg .grid-square-87 { animation: translateSquareOffScreen 0.8s ease-out 2.4s forwards; } .paper-animation-container.animate-svg .grid-square-88 { animation: translateSquareOffScreen 0.8s ease-out 2.5s forwards; } .paper-animation-container.animate-svg .grid-square-89 { animation: translateSquareOffScreen 0.8s ease-out 2.6s forwards; } .paper-animation-container.animate-svg .grid-square-90 { animation: translateSquareOffScreen 0.8s ease-out 1.6s forwards; } .paper-animation-container.animate-svg .grid-square-91 { animation: translateSquareOffScreen 0.8s ease-out 1.7s forwards; } .paper-animation-container.animate-svg .grid-square-92 { animation: translateSquareOffScreen 0.8s ease-out 1.8s forwards; } .paper-animation-container.animate-svg .grid-square-93 { animation: translateSquareOffScreen 0.8s ease-out 1.9s forwards; } .paper-animation-container.animate-svg .grid-square-94 { animation: translateSquareOffScreen 0.8s ease-out 2.0s forwards; } .paper-animation-container.animate-svg .grid-square-95 { animation: translateSquareOffScreen 0.8s ease-out 2.1s forwards; } .paper-animation-container.animate-svg .grid-square-96 { animation: translateSquareOffScreen 0.8s ease-out 2.2s forwards; } .paper-animation-container.animate-svg .grid-square-97 { animation: translateSquareOffScreen 0.8s ease-out 2.3s forwards; } .paper-animation-container.animate-svg .grid-square-98 { animation: translateSquareOffScreen 0.8s ease-out 2.4s forwards; } .paper-animation-container.animate-svg .grid-square-99 { animation: translateSquareOffScreen 0.8s ease-out 2.5s forwards; } /* Ring animations - matching sample page */ .paper-animation-container.animate-svg .svg-ring-1 { animation: rotateRing 2s ease-out forwards; } .paper-animation-container.animate-svg .svg-ring-2 { animation: rotateRingReverse 2.5s ease-out 0.3s forwards; } .paper-animation-container.animate-svg .svg-ring-3 { animation: rotateRing 3s ease-out 0.6s forwards; } .paper-animation-container.animate-svg .svg-arc-1 { animation: rotateRing 1.8s ease-out 0.9s forwards; } .paper-animation-container.animate-svg .svg-arc-2 { animation: rotateRingReverse 2.2s ease-out 1.2s forwards; }