html { --pka-window-fill: #8d87ab; --pka-night-display: none; } html:not([data-theme="light"]) { --pka-window-fill: #ffd98a; --pka-night-display: block; } .pka svg { display: block; } .pka .pka-win, .pka .pka-win [fill="#8d87ab"] { fill: var(--pka-window-fill, #8d87ab); } .pka .pka-fw { display: var(--pka-night-display, none); } svg > use[data-park-art-theme="dark"] { display: inline; } html[data-theme="light"] svg > use[data-park-art-theme="light"] { display: inline; } html[data-theme="light"] svg > use[data-park-art-theme="dark"] { display: none; } html:not([data-theme="light"]) svg > use[data-park-art-theme="light"] { display: none; } @keyframes pkaSpin { to { transform: rotate(360deg); } } .pka .pka-spin { animation: pkaSpin var(--spd, 8s) linear infinite; transform-box: fill-box; transform-origin: center; } .pka .pka-spin-r { animation: pkaSpin 3.5s linear infinite reverse; transform-box: fill-box; transform-origin: center; } .pka .pka-counter { animation: pkaSpin var(--spd, 8s) linear infinite reverse; transform-box: fill-box; transform-origin: center; } @keyframes pkaLoop { from { offset-distance: 0%; } to { offset-distance: 100%; } } .pka .pka-loop { animation: pkaLoop var(--spd, 8s) linear infinite; offset-rotate: auto; } @keyframes pkaBlink { 0%, 70% { opacity: 1; } 80%, 100% { opacity: .15; } } .pka .pka-blink { animation: pkaBlink 1.6s infinite; } @keyframes pkaFlag { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-9deg); } } .pka .pka-flag { animation: pkaFlag 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; } @keyframes pkaGhost { 0%, 100% { opacity: 0; transform: translateY(2.5px); } 35%, 65% { opacity: .85; transform: translateY(-3px); } } .pka .pka-ghost { animation: pkaGhost 6s ease-in-out infinite; } @keyframes pkaPuff { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .7; } 100% { opacity: 0; transform: translateY(-11px) scale(1.5); } } .pka .pka-puff { animation: pkaPuff 3s ease-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes pkaFall { to { stroke-dashoffset: -18; } } .pka .pka-fall { animation: pkaFall .8s linear infinite; } @keyframes pkaSplash { 0%, 58%, 100% { opacity: 0; transform: scale(.7); } 66%, 78% { opacity: .9; transform: scale(1.12); } } .pka .pka-splash { animation: pkaSplash 5.2s infinite; transform-box: fill-box; transform-origin: center; } @keyframes pkaPend { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } } .pka .pka-pend { animation: pkaPend 1.7s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; } @keyframes pkaBoat { from { transform: translateX(0); } to { transform: translateX(26px); } } .pka .pka-boatA { animation: pkaBoat 7s linear infinite alternate; } .pka .pka-boatB { animation: pkaBoat 7s linear infinite alternate-reverse; } @keyframes pkaBob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.6px) rotate(1.4deg); } } .pka .pka-bob { animation: pkaBob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes pkaSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } } .pka .pka-sway { animation: pkaSway 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; } @keyframes pkaFw { 0%, 55% { opacity: 0; transform: scale(.15); } 62% { opacity: 1; } 78%, 100% { opacity: 0; transform: scale(1); } } .pka .pka-fwb { animation: pkaFw 5.5s infinite; transform-box: fill-box; transform-origin: center; } .pka .pka-fwb.f2 { animation-delay: 2.7s; } @keyframes pkaLog { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 46% { offset-distance: 100%; opacity: 1; } 54% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 0%; opacity: 0; } } .pka .pka-log { animation: pkaLog 5.2s ease-in infinite; offset-rotate: auto; } @keyframes pkaFlash { 0%, 86%, 96%, 100% { opacity: 0; } 88%, 94% { opacity: 1; } } .pka .pka-flash { animation: pkaFlash 4.5s infinite; } @keyframes pkaDrop { 0%, 55% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(var(--drop, 30px)); opacity: 1; } 78% { opacity: 0; } 79% { transform: translateY(0); opacity: 0; } 92%, 100% { opacity: 1; transform: translateY(0); } } .pka .pka-drop { animation: pkaDrop 5s cubic-bezier(.6,0,.9,.4) infinite; } @keyframes pkaSlide { from { transform: translateX(0); } to { transform: translateX(var(--slide, -48px)); } } .pka .pka-slide { animation: pkaSlide var(--spd, 10s) linear infinite; } @keyframes pkaLift { from { transform: translateY(0); } to { transform: translateY(var(--lift, -40px)); } } .pka .pka-lift { animation: pkaLift var(--spd, 9s) ease-in-out infinite alternate; } .pka[data-art-paused] *, .pka [data-art-paused] * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .pka * { animation: none !important; } .pka .pka-loop { offset-distance: 50% !important; } .pka .pka-log { offset-distance: 42% !important; opacity: 1 !important; } .pka .pka-ghost, .pka .pka-puff, .pka .pka-splash, .pka .pka-fwb, .pka .pka-flash { opacity: 0 !important; } } html[data-reduce-motion="true"] .pka * { animation: none !important; } html[data-reduce-motion="true"] .pka .pka-loop { offset-distance: 50% !important; } html[data-reduce-motion="true"] .pka .pka-log { offset-distance: 42% !important; opacity: 1 !important; } html[data-reduce-motion="true"] .pka .pka-ghost, html[data-reduce-motion="true"] .pka .pka-puff, html[data-reduce-motion="true"] .pka .pka-splash, html[data-reduce-motion="true"] .pka .pka-fwb, html[data-reduce-motion="true"] .pka .pka-flash { opacity: 0 !important; }