/* ==========================================
   FEATURE: JOBS / ACTIVITIES
========================================== */

[data-job-effect]{
    cursor:pointer;
}

[data-job-effect]:focus-visible{
    outline:2px solid var(--color-primary);
    outline-offset:5px;
}

.jobs-screen-effect{
    position:absolute;
    inset:0;
    overflow:hidden;
}

/* Money rain */

.money-rain span{
    position:absolute;
    top:-90px;
    left:var(--x);
    width:64px;
    height:34px;
    display:grid;
    place-items:center;
    border:2px solid rgba(220,255,225,.85);
    border-radius:7px;
    color:#163d20;
    background:linear-gradient(135deg, #b8efad, #67c979);
    box-shadow:0 10px 28px rgba(35,210,82,.3);
    font-size:1.25rem;
    font-weight:1000;
    animation:moneyFall 2s var(--delay) cubic-bezier(.2,.55,.45,1) forwards;
}

.money-rain span::before,
.money-rain span::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    border:1px solid rgba(22,61,32,.55);
    border-radius:50%;
}

.money-rain span::before{ left:7px; }
.money-rain span::after{ right:7px; }

@keyframes moneyFall{
    0%{
        opacity:0;
        transform:translate3d(0,-30px,0) rotate(0) scale(.7);
    }
    12%{ opacity:1; }
    100%{
        opacity:0;
        transform:translate3d(var(--drift),calc(100vh + 150px),0) rotate(var(--spin)) scale(1);
    }
}

/* Leisure icons */

.leisure-burst{
    display:grid;
    place-items:center;
}

.leisure-burst span{
    position:absolute;
    left:50%;
    top:50%;
    width:74px;
    height:74px;
    display:grid;
    place-items:center;
    border-radius:22px;
    background:linear-gradient(145deg, rgba(255,132,35,.96), rgba(105,38,0,.95));
    box-shadow:0 0 34px rgba(255,106,0,.48), 0 18px 35px rgba(0,0,0,.5);
    font-size:2rem;
    opacity:0;
    animation:leisureFly 2s var(--delay) cubic-bezier(.16,.8,.3,1) forwards;
}

@keyframes leisureFly{
    0%{
        opacity:0;
        transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(.25);
    }
    18%{ opacity:1; }
    65%{ opacity:1; }
    100%{
        opacity:0;
        transform:translate(-50%,-50%) rotate(var(--angle)) translateX(min(42vw, 430px)) rotate(540deg) scale(1.05);
    }
}

/* AFK sleep */

.sleep-scene{
    display:grid;
    place-items:center;
    background:radial-gradient(circle, rgba(44,54,112,.25), transparent 38%);
}

.sleep-scene__sleeper{
    font-size:clamp(6rem, 16vw, 11rem);
    filter:drop-shadow(0 25px 30px rgba(0,0,0,.6));
    animation:sleeperBreathe .8s ease-in-out 2 alternate forwards;
}

.sleep-scene__z{
    position:absolute;
    left:calc(50% + 50px);
    top:calc(50% - 60px);
    color:#bdc8ff;
    font-size:var(--z-size);
    font-weight:1000;
    text-shadow:0 0 20px rgba(133,153,255,.75);
    opacity:0;
    animation:sleepZ 1.65s calc(var(--index) * .28s) ease-out forwards;
}

@keyframes sleeperBreathe{
    to{ transform:scale(1.045) rotate(-2deg); }
}

@keyframes sleepZ{
    0%{
        opacity:0;
        transform:translate(0,20px) scale(.5);
    }
    25%, 70%{ opacity:1; }
    100%{
        opacity:0;
        transform:translate(var(--z-x),var(--z-y)) scale(1.3);
    }
}

@media (prefers-reduced-motion: reduce){
    .money-rain span,
    .leisure-burst span,
    .sleep-scene__sleeper,
    .sleep-scene__z{
        animation-duration:.01ms;
        animation-iteration-count:1;
    }
}