/* RAYE manifests with the magic of VirtualPawsReal!!!! Glorious!!! */
:root {
    --raye-anim-p2-delay: 5.5s;
    --raye-anim-p3-delay: 10s;
}
#raye {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: clip;
    overflow-clip-margin: 30px;
    pointer-events: none;
    
    animation: 
    hover 5s ease-in-out infinite alternate var(--raye-anim-p2-delay);

    transition: opacity 4s;
}
#raye > *, #raye::after, #raye-fx > * {
    position: absolute;
    pointer-events: none;
    left: calc(50vw - 400px);
    top: 100px;
}
/* #raye * {
    image-rendering: pixelated; 
    
    image-rendering: -moz-crisp-edges;
    
    image-rendering: -webkit-optimize-contrast; 

    image-rendering: crisp-edges; 
} */
#raye-body {
    width: 800px;
    height: 800px;
    position: relative;
    left: calc(50vw - 400px);
    top: 100px;
    opacity: 0.7;
    pointer-events: none;

    transition: opacity 4s;

    animation: raye-body-appear 5s ease-in-out var(--raye-anim-p3-delay) backwards;
}
@keyframes raye-body-appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.7;
    }
}
.raye-body-animate-flicker {
    animation:  
        raye-body-flicker 6s ease-out 3s both;
}
@keyframes raye-body-flicker {
    0% {
        opacity: 0.7;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.7;
    }
}
@keyframes raye-body-fade {
    0% {
        opacity: 0.7;
    }
    100% {
        opacity: 0.1;
    }
}
#raye-skin {
    position: absolute;
    width: 800px;
    height: 800px;
}
#raye-mouth-expressions *, #raye-other-expressions * {
    position: absolute;
    display: none;
    width: 800px;
    height: 800px;
    pointer-events: none;
}
#raye-phallus {
    position: absolute;
    left: 272px;
    top: 512px;
    width: 224px;
    height: 128px;
    background-image: url('/img/raye/raye_phallus.png');
    background-repeat: no-repeat;
}
#raye-eye-expressions {
    position: absolute;
    left: 352px;
    top: 256px;
    display: none;
    width: 96px;
    height: 96px;
    background-image: url('/img/raye/raye_eye_expressions.png');
    background-repeat: no-repeat;
}
/* RAYE expressions in spritesheet */
.raye-eyes-closed {
    background-position: 0 0;
}
.raye-eyes-wink {
    background-position: -96px 0;
}
.raye-eyes-grin {
    background-position: -192px 0;
}
.raye-eyes-closed-grin {
    background-position: -288px 0;
}


#raye-fx {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
}
#raye-outline {
    width: 800px;
    height: 800px;

    animation: img-appear 3s ease-in-out var(--raye-anim-p2-delay) both
    /* arise 10s ease-in-out var(--raye-anim-p2-delay) */
    ;
}
#raye-area-head {
    /* outline: 5px solid blue; */
    pointer-events: auto;
    width: 80px;
    height: 80px;
    position: absolute;
    left: 360px;
    top: 270px;
    z-index: 50;
    cursor: url('/img/pawcursor_highlight.png'), auto;
}
#raye-area-baby {
    /* outline: 5px solid rgb(212, 0, 255); */
    pointer-events: auto;
    opacity: 0;
    width: 100px;
    height: 60px;
    position: absolute;
    left: 330px;
    top: 430px;
    z-index: 50;
    cursor: url('/img/pawcursor_highlight.png'), auto;
}
#raye-area-phallus {
    /* outline: 5px solid rgb(255, 0, 183); */
    pointer-events: auto;
    opacity: 0;
    width: 110px;
    height: 70px;
    position: absolute;
    left: 360px;
    top: 530px;
    z-index: 50;
    cursor: url('/img/pawcursor_highlight.png'), auto;
}
/*
#raye-outline-b {
    width: 800px;
    height: 800px;
    left: 0px;
    top: 0px;
    opacity: 0.1;

    animation: entity-grow-out 10s ease-out 2s both;
}
#raye-outline-c {
    width: 800px;
    height: 800px;
    left: 0px;
    top: 0px;
    
    animation: entity-grow-out 15s ease-out 2s both;
    opacity: 0.1;
}*/
#raye-tears {
    width: 800px;
    height: 800px;
    position: absolute;
    z-index: 2;
    opacity: 0;
    animation: 
        raye-tears 3s ease-in infinite calc(var(--raye-anim-p3-delay) + 2s);
    pointer-events: none;
}
@keyframes raye-tears {
    0% {
        top: 100px;
    }
    10% {
        opacity: 1;
    }
    50% {
        top: 108px;
        opacity: 1;
    }
    100% {
        top: 220px;
        opacity: 0;
    }
}
#raye::after {
    /* RAYEnibow skin!! animate! */
    content: "";
    /* position: absolute; */
    width: 800px;
    height: 800px;
    background: radial-gradient(circle at 50% 52%,
    rgb(255, 136, 136), 
    rgb(255, 255, 132), 
    rgb(157, 255, 157),
    rgb(131, 255, 255),
    rgb(148, 148, 255),
    rgb(255, 142, 255),
    rgb(255, 136, 136));
    background-size: 100% 100%;
    z-index: 1;
    pointer-events: none;

    mask-image: url("/img/raye/raye_body.png");
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;

    animation: 
    /* arise 10s ease-in-out var(--raye-anim-p2-delay), */
    rainbow-skin-appear 8s linear var(--raye-anim-p2-delay) both,
    colorShift 4s linear infinite calc(var(--raye-anim-p2-delay)) reverse;
}
@keyframes rainbow-skin-appear {
    0% {
        opacity: 0.0;
        /* filter: hue-rotate(-180deg) brightness(3) saturate(0.2); */
    }
    20% {
        opacity: 1;
        /* filter: hue-rotate(-180deg) brightness(3) saturate(0.2); */
    }
    70% {
        opacity: 0.7;
    }
    100% {
        opacity: 0.4;
        /* filter: hue-rotate(0deg) brightness(1) saturate(1); */
    }
}
#raye-wing-l {
    position: absolute;
    width: 800px;
    height: 800px;

    animation: 
        /* arise 10s ease-in-out var(--raye-anim-p2-delay), */
        raye-wing-opacity 4s var(--raye-anim-p2-delay) both,
        raye-winganim-l-appear 2s ease-in-out var(--raye-anim-p2-delay) alternate backwards,
        raye-winganim-l 5s ease-in-out calc(var(--raye-anim-p2-delay) + 2s) alternate infinite;

    transition: opacity 2s;
}
#raye-wing-r {
    position: absolute;
    width: 800px;
    height: 800px;

    animation: 
        /* arise 10s ease-in-out var(--raye-anim-p2-delay), */
        raye-wing-opacity 4s var(--raye-anim-p2-delay) both,
        raye-winganim-r-appear 2s ease-in-out var(--raye-anim-p2-delay) alternate backwards,
        raye-winganim-r 5s ease-in-out calc(var(--raye-anim-p2-delay) + 2s) alternate infinite;

    transition: opacity 2s;
}
/* Wing overlay! SO MANY WINGS!! WAOW!!!! 
#raye-wing-l::after, #raye-wing-r::after, #raye-wing-l2::after, #raye-wing-r2::after { 
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    left: 0px;
    top: 0px;

    opacity: 0.2;
    background-repeat: repeat;
    background-size: 50% 50%;
    z-index: 1;

    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;

    animation: 
        moveGradient 30s linear infinite,
        colorShift 10s linear infinite;
}
#raye-wing-l::after { 
    background: url("/img/stars-colorful.gif");
    -webkit-mask-image: url("/img/raye_wing_l.png");
    mask-image: url("/img/raye_wing_l.png");
}

#raye-wing-r::after { 
    background: url("/img/stars-colorful.gif");
    -webkit-mask-image: url("/img/raye_wing_r.png");
    mask-image: url("/img/raye_wing_r.png");
}*/
@keyframes raye-wing-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.4;
    }
}
@keyframes raye-winganim-l-appear {
    0% {
        transform: rotateY(90deg) rotateZ(-55deg) scaleX(1.5);
    }
    100% {
        transform: rotateY(0deg) rotateZ(10deg) scaleX(1);
    }
}
@keyframes raye-winganim-l {
    0% {
        transform: rotateY(0deg) rotateZ(10deg);
    }
    100% {
        transform: rotateY(25deg) rotateZ(-5deg);
    }
}
@keyframes raye-winganim-r-appear {
    0% {
        transform: rotateY(-90deg) rotateZ(55deg) scaleX(1.5);
    }
    100% {
        transform: rotateY(0deg) rotateZ(-10deg) scaleX(1);
    }
}
@keyframes raye-winganim-r {
    0% {
        transform: rotateY(0deg) rotateZ(-10deg);
    }
    100% {
        transform: rotateY(-25deg) rotateZ(5deg);
    }
}
/* Too many..!
#raye-wing-l2 {
    position: absolute;
    width: 800px;
    height: 800px;
    opacity: 0;
    left: 0px;
    top: 50px;

    animation: raye-body-appear 4s ease-in-out 3s forwards,
        raye-winganim-l2-appear 3s ease-in-out 2s alternate,
        raye-winganim-l2 3s ease-in-out 5s alternate infinite;
}
#raye-wing-r2 {
    position: absolute;
    width: 800px;
    height: 800px;
    opacity: 0;
    left: 0px;
    top: 50px;

    animation: raye-body-appear 4s ease-in-out 3s forwards,
        raye-winganim-r2-appear 3s ease-in-out 2s alternate,
        raye-winganim-r2 3s ease-in-out 5s alternate infinite;
}
#raye-wing-l2::after { 
    background: url("/img/Puffy_Sky-Blue_04-1024x512.png");
    -webkit-mask-image: url("/img/raye_wing_l.png");
    mask-image: url("/img/raye_wing_l.png");
}
#raye-wing-r2::after { 
    background: url("/img/Puffy_Sky-Blue_04-1024x512.png");
    -webkit-mask-image: url("/img/raye_wing_r.png");
    mask-image: url("/img/raye_wing_r.png");
}
@keyframes raye-winganim-r2-appear {
    0% {
        transform: rotateY(-90deg) rotateZ(45deg) scaleY(0.8);
    }
    100% {
        transform: rotateY(-25deg) rotateZ(5deg) scaleY(0.8);
    }
}
@keyframes raye-winganim-r2 {
    100% {
        transform: rotateY(0deg) rotateZ(-5deg) scaleY(0.8);
    }
    0% {
        transform: rotateY(-25deg) rotateZ(5deg) scaleY(0.8);
    }
}
@keyframes raye-winganim-l2-appear {
    0% {
        transform: rotateY(90deg) rotateZ(-45deg) scaleY(0.8);
    }
    100% {
        transform: rotateY(25deg) rotateZ(-5deg) scaleY(0.8);
    }
}
@keyframes raye-winganim-l2 {
    100% {
        transform: rotateY(0deg) rotateZ(5deg) scaleY(0.8);
    }
    0% {
        transform: rotateY(25deg) rotateZ(-5deg) scaleY(0.8);
    }
}*/

/* Light effects! */
#raye-sundog {
    width: 800px;
    height: 800px;
    position: absolute;
    
    animation: radiant-rotate 60s linear infinite, 
        sundog-grow-appear 2s ease-out var(--raye-anim-p2-delay) both;
}
@keyframes sundog-grow-appear {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 0.3;
        transform: scale(1.4);
    }
}
#raye-halo {
    width: 800px;
    height: 800px;
    top: 0px;
    position: absolute;
    animation: radiant-rotate 60s linear infinite reverse 0s, 
        halo-appear 5s ease-out var(--raye-anim-p2-delay) both;
}
#raye-halo-b {
    width: 400px;
    height: 400px;
    left: calc(50vw - 200px);
    top: 200px;
    position: absolute;
    animation: radiant-rotate 50s linear infinite 0s, 
        halo-appear 5s ease-out var(--raye-anim-p2-delay) both;
}
#raye-lighthalo {
    width: 800px;
    height: 800px;
    position: absolute;
    animation: lighthalo-appear 6s ease-out var(--raye-anim-p2-delay) both;
}
@keyframes halo-appear {
    0% {
        opacity: 0.0;
        transform: scale(0.1);
    }
    100% {
        opacity: 0.5;
        transform: scale(0.7);
    }
}
@keyframes lighthalo-appear {
    0% {
        opacity: 0.0;
        transform: scale(0.1);
    }
    50% {
        opacity: 0.8;
        transform: scale(2);
    }
    100% {
        opacity: 0.6;
        transform: scale(0.8);
    }
}
#raye .raye-radiant {
    width: 500px;
    height: 500px;
    left: calc(50vw - 250px);
    top: 150px;
    position: absolute;

    animation: radiant-rotate 55s linear infinite, 
        radiant-appear 4s ease-out var(--raye-anim-p2-delay) both;
}
@keyframes radiant-appear {
    0% {
        opacity: 0.0;
        transform: scale(0.1) rotate(0deg);
    }
    100% {
        opacity: 0.9;
        transform: scale(2);
    }
}
@keyframes radiant-rotate {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}
/*
#raye #radiant-b {
    animation: radiant-rotate 55s linear infinite reverse, 
        radiant-appear 6s ease-out 0.1s forwards;
}
#raye #radiant-d {
    animation: radiant-rotate 30s linear infinite reverse, 
        radiant-appear 7s ease-out 0.3s forwards;
}
#raye #radiant-d {
    opacity: 0.9;
    animation: entity-grow-out 3s ease-out 1s infinite both;
    z-index: -1;
}*/

/* Manifesting effects!! */
#star-halo-container {
    transform-origin: 50% center;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50vw - 50px);
    top: 350px;
}   
#star-halo-a {
    background-image: url("/img/raye/Raye's Halo.png");
    background-size: cover;
    width: 100px;
    height: 100px;
    position: absolute;

    animation: halo-rayaverse-anim 30s linear infinite;
    opacity: 0.3;
}
#star-halo-b {
    background-image: url("/img/raye/raye_flare_b.png");
    background-size: cover;
    width: 100px;
    height: 100px;

    position: absolute;
    scale: 2;
    animation: halo-rayaverse-anim 15s linear infinite;
}
@keyframes halo-rayaverse-anim {
    0%{
        scale: 0.5;
        rotate: 0deg;
    }
    100%{
        scale: 0.8;
        rotate: 360deg;
    }
}
#raye-star {
    position: absolute;
    left: calc(50vw - 210px);
    top: 379px;
    width: 423px;
    height: 43px;
    transform: scale(1.4);
    transform-origin: 50% center;
    cursor: url('/img/pawcursor_highlight.png'), auto;
    opacity: 0.3;

    animation: colorShift 2s linear infinite alternate;
}
.flare-animating {
    animation: star-collapse 12s ease-out 1 both !important;
}
@keyframes star-collapse {
    0% {
        transform: scale(1);
    }
    2% {
        transform: scale(0.01);
        opacity: 1;
    }
    50% {
        transform: scale(6);
        opacity: 0;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
#raye-flare-a {
    position: absolute;
    width: 800px;
    height: 800px;
    top: 0px;
    z-index: 0;
    animation: 
        flare-anim 6s ease-out 2s both;
    /* display: none; */
}
#raye-flare-b {
    position: absolute;
    width: 800px;
    height: 800px;
    top: 0px;
    left: calc(50vw - 410px);
    z-index: 0;
    animation: 
        flare-anim-b 8s ease-out 0s both,
        radiant-rotate 90s linear 2;
    display: none;
}
.raye-flare-b-p2 {
    animation: raye-flare-b-spark 10s ease-out both;
}
@keyframes flare-anim {
    0% {
        opacity: 1;
        transform: scale(0.01);
    }
    90% {
        opacity: 0.5;
        transform: scale(2);
    }
    100% {
        opacity: 0;
        transform: scale(3);
        visibility: hidden;
    }
}
@keyframes flare-anim-b {
    0% {
        opacity: 1;
        transform: scale(0.01);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
        visibility: hidden;
    }
}
@keyframes flare-anim-c {
    0% {
        opacity: 1;
        transform: scale(0.01);
    }
    100% {
        opacity: 0;
        transform: scale(0.2);
        visibility: hidden;
    }
}
#VNNXI {
    width: 2266px;
    height: 1660px;
    position: absolute;
    left: calc(50vw - 1133px);
    transform-origin: center center;
    
    top: -435px;
    background-image: url("/img/raye/raye vision p3.png");
    background-size: contain;
    background-repeat: no-repeat;
    mask-image: radial-gradient(circle closest-side at center, black 10%, transparent 100%);
}
.VNNXI-animate-flare {
    animation: VNNXI-anim 8s ease-out 3s both,
        radiant-rotate 30s linear infinite;
}
.VNNXI-animate-flare-2 {
    animation: VNNXI-anim 5s ease-out 4s both,
        radiant-rotate 15s linear infinite;
}
@keyframes VNNXI-anim {
    0% {
        visibility: visible;
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.6);
    }
    100% {
        opacity: 0;
        transform: scale(1.6);
        visibility: hidden;
    }
}
#visualizer-container {
    pointer-events: none;
}
/*
#VNNXI::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle closest-side at center, red, yellow, lime, cyan, blue, magenta, red);
    background-size: 100% 100%;
    mix-blend-mode: hue;
    animation: colorShift 5s linear infinite reverse;

}*/
#raye-heart {
    width: 160px;
    height: 160px;
    top: 315px;
    left: calc(50vw - 80px);
    animation: 
        img-appear 5s linear 4s both, 
        img-disappear 4s linear 10.5s forwards,
        heart-reappear 4s linear 14.5s forwards
        ;

    pointer-events: none;
    z-index: 3;
    image-rendering: smooth;
}
@keyframes heart-reappear {
    0% {
        top: 442px;
        opacity: 0;
    }  
    100% {
        top: 442px;
        opacity: 1;
    }
}
#raye-heart-pulse {
    width: 800px;
    height: 800px;
    top: 122px;
    opacity: 0;

    animation: heart-pulse 3s linear 12s infinite;
    
    pointer-events: none;
    z-index: 3;
}
#raye-heart-pulse-2 {
    width: 800px;
    height: 800px;
    top: 122px;
    opacity: 0;

    animation: heart-pulse 3s linear 13.5s infinite;

    pointer-events: none;
    z-index: 3;
}
@keyframes heart-pulse {
    0% {
        opacity: 1;
        transform: scale(0.01);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
#earth {
    width: 140px;
    height: 140px;
    top: 240px;
    left: calc(50vw + 10px);
    position: absolute;
    pointer-events: none;
    opacity: 0;
}
#rayuus {
    width: 140px;
    height: 140px;
    top: 240px;
    left: calc(50vw - 150px);
    position: absolute;
    pointer-events: none;
    opacity: 0;
}
.show-planet {
    animation: img-appear 2s linear both 1s,
    img-disappear 6s linear 6s forwards;
}
#universe-bg-1 {
    width: 800px;
    height: auto;
    position: absolute;
    left: calc(50vw - 403px);
    top: 123px;
    display: none;
    pointer-events: none;
    scale: 0.95;

    clip-path: circle(50% at 50% 50%);
}
.universe-bg-animating {
    animation: rotate 120s linear infinite,
        big-bang 4s 1 ease-out forwards;
}
.universe-bg-animating-out {
    animation: rotate 120s linear infinite,
        big-bang 4s 1 ease-out forwards,
        img-disappear 3s linear forwards;
}
#above-earth-bg {
    /* width: 150vw; */
    width: 2500px;
    position: absolute;

    left: calc(50vw - 910px);
    top: -160px;
    
    opacity: 0;
    display: none;
    pointer-events: none;

}
@keyframes big-bang {
    0% {
        scale: 0;
    }
    100% {
        scale: 0.9;
    }
}
@keyframes entity-grow-appear {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1.5);
    }
}
@keyframes entity-grow-out {
    0% {
        transform: scale(0);
    }
    100% {
        opacity: 0;
        transform: scale(5);
        display: hidden;
    }
}
@keyframes moveGradient {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: 0px 800px;
    }
}
@keyframes arise {
    from { scale: 0; translate: 0px -100px; }
    to { scale: 1; translate: 0px 0px; }
}
@keyframes wiggle {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    25% { transform: translate(-1px, 2px) rotate(0.5deg); }
    50% { transform: translate(2px, -1px) rotate(-0.5deg); }
    75% { transform: translate(-2px, -2px) rotate(1deg); }
    100% { transform: translate(1px, 1px) rotate(0deg); }
}
@keyframes wiggle-b {
    0% { transform: rotate(3deg); }
    50% { transform: rotate(-3deg); }
    100% { transform: rotate(3deg); }
}
@keyframes colorShiftScroll {
    from {
        background-position: 0% 0%;
    } to {
        background-position: 0% -200%;
    }
}
@keyframes colorShift {
    from {
        filter: hue-rotate(0deg);
    } to {
        filter: hue-rotate(360deg);
    }
}
@keyframes hover {
    0% { transform: translate3d(0px, 0px, 0px); }
    100% { transform: translate3d(0px, 20px, 0px); }
}
@media (pefers-reduced-motion:reduce) {
    * {
    animation: none !important;
    transition: none !important;
    }
    *::after {
    animation: none !important;
    transition: none !important;
    }
}
/* Hide initial displays before JS click event shows */
#raye, .sparklies {
    display: none;
}