/* The white page with purple pictures that float and appear one by one as you scroll down. */
html { background: #fff; } body { background: #fff !important; position: relative; }
body::before, body::after { display: none !important; }
.deco { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; overflow: hidden; pointer-events: none; }
.deco .it { position: absolute; opacity: 0; transform: translate3d(0, calc(var(--py, 0) * 1px + 46px), 0) scale(.55); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1); will-change: transform, opacity; }
.deco .it.in { opacity: var(--o, 1); transform: translate3d(0, calc(var(--py, 0) * 1px), 0) scale(1); }
.deco .it svg { display: block; width: 100%; height: auto; overflow: visible; }
.deco .fl { animation: dfloat var(--d, 9s) ease-in-out var(--dl, 0s) infinite; }
.deco .fl.spin { animation: dspin var(--d, 40s) linear infinite; }
.deco .fl.pulse { animation: dpulse var(--d, 4s) ease-in-out var(--dl, 0s) infinite; }
.deco .fl.twinkle { animation: dtwinkle var(--d, 3.4s) ease-in-out var(--dl, 0s) infinite; }
.deco .fl.drift { animation: ddrift var(--d, 12s) ease-in-out var(--dl, 0s) infinite; }
@keyframes dfloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(2.5deg); } }
@keyframes dspin { to { transform: rotate(360deg); } }
@keyframes dpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes dtwinkle { 0%, 100% { transform: scale(.85) rotate(0); opacity: .6; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes ddrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
@media (prefers-reduced-motion: reduce) { .deco .fl { animation: none !important; } .deco .it { transition: none; opacity: var(--o, 1); transform: none; } }