/* animations.css */

@keyframes sf-fly-by {
    from {
        transform: translateZ(var(--start-z)) translateX(var(--start-x)) translateY(var(--start-y));
        opacity: 0.5;
    }
    to {
        transform: translateZ(var(--end-z)) translateX(var(--end-x)) translateY(var(--end-y));
        opacity: 0.5;
    }
}

@keyframes sf-fly-by-2 {
    from {
        transform: translateZ(var(--start-z)) translateX(var(--start-x)) translateY(var(--start-y));
        opacity: 0.5;
    }
    to {
        transform: translateZ(var(--end-z)) translateX(var(--end-x)) translateY(var(--end-y));
        opacity: 0.7;
    }
}

@keyframes sf-fly-by-3 {
    from {
        transform: translateZ(var(--start-z)) translateX(var(--start-x)) translateY(var(--start-y));
        opacity: 0.3;
    }
    to {
        transform: translateZ(var(--end-z)) translateX(var(--end-x)) translateY(var(--end-y));
        opacity: 0.8;
    }
}

.star-field {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    perspective: 600px;
    -webkit-perspective: 600px;
    z-index: -1;
}

/* Base styles for .layer, applied to all screens */
.star-field .layer {
    box-shadow: 
        -411px -476px #cccccc, 777px -407px #d4d4d4, -387px -477px #fcfcfc, -91px -235px #d4d4d4, 
        491px -460px #f7f7f7, 892px -128px #f7f7f7, 758px -277px #ededed, 596px 378px #cccccc, 
        647px 423px whitesmoke, 183px 389px #c7c7c7, 524px -237px #f0f0f0, 679px -535px #e3e3e3, 
        158px 399px #ededed, 157px 249px #ededed, 81px -450px #ebebeb, 719px -360px #c2c2c2, 
        -499px 473px #e8e8e8, -158px -349px #d4d4d4, 870px -134px #cfcfcf, 446px 404px #c2c2c2, 
        440px 490px #d4d4d4, 414px 507px #e6e6e6, -12px 246px #fcfcfc, -384px 369px #e3e3e3, 
        641px -413px #fcfcfc, 822px 516px #dbdbdb, 449px 132px #c2c2c2, 727px 146px #f7f7f7, 
        -315px -488px #e6e6e6, 952px -70px #e3e3e3, -869px -29px #dbdbdb, 502px 80px #dedede, 
        764px 342px #e0e0e0, -150px -380px #dbdbdb, 654px -426px #e3e3e3, -325px -263px #c2c2c2, 
        -911px -277px #c9c9c9, -500px -500px #ffffff, 600px 600px #eeeeee;
    transform-style: preserve-3d;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4px;
    width: 4px;
    border-radius: 2px;
}

/* Hide some layers on small screens */
@media (max-width: 767px) {
    .star-field .layer:nth-child(n+3) { /* Hide layers starting from the 6th one */
        display: none;
    }
}

/* Hide some layers on medium screens */
@media (min-width: 768px) and (max-width: 1024px) {
    .star-field .layer:nth-child(n+3){ /* Hide layers starting from the 16th one */
        display: none;
    }
}
/* Hide some layers on medium screens */
@media (min-width: 1025px) {
    .star-field .layer:nth-child(n+6){ /* Hide layers starting from the 16th one */
        display: none;
    }
}