/* Projects "coming soon" teaser ------------------------------------------- */
.projects-soon{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;

    width:100%;
    height:100%;
    min-height:0;

    text-align:center;
    overflow:hidden;
}

/* Pulsing orb - the mysterious "something" glowing in the dark. */
.projects-soon-orb{
    width:170px;
    height:170px;
    border-radius:50%;

    background:radial-gradient(circle at 50% 40%, var(--main-color), transparent 70%);

    filter:blur(5px);
    opacity:.9;
    margin-bottom:14px;

    animation:projects-orb-pulse 3.5s ease-in-out infinite;
}
@keyframes projects-orb-pulse{
    0%,100%{
        transform:scale(1);
        opacity:.55;
    }
    50%{
        transform:scale(1.18);
        opacity:1;
    }
}

.projects-soon-title{
    margin:0;
    font-size:42px;
    font-weight:700;
    letter-spacing:.5px;

    opacity:0;
    animation:projects-fade-up .6s ease both;
    animation-delay:.1s;
}

/* Animated trailing dots after the title. */
.projects-soon-dots span{
    opacity:0;
    animation:projects-dot-blink 1.4s infinite;
}
.projects-soon-dots span:nth-child(1){ animation-delay:0s; }
.projects-soon-dots span:nth-child(2){ animation-delay:.2s; }
.projects-soon-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes projects-dot-blink{
    0%,60%,100%{ opacity:0; }
    30%{ opacity:1; }
}

.projects-soon-line{
    margin:0;
    font-size:23px;
    opacity:0;
    color:rgba(255,255,255,.72);
    animation:projects-fade-up .6s ease both;
}
.projects-soon-line:nth-of-type(1){ animation-delay:.3s; }
.projects-soon-line:nth-of-type(2){ animation-delay:.5s; }
.projects-soon-line:nth-of-type(3){ animation-delay:.7s; }

/* Shimmering "August". */
.projects-soon-highlight{
    font-weight:700;
    background:linear-gradient(100deg,
        var(--main-color) 0%,
        #fff 45%,
        var(--main-color) 90%);
    background-size:200% auto;

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;

    animation:projects-shimmer 3s linear infinite;
}
@keyframes projects-shimmer{
    to{ background-position:200% center; }
}

.projects-soon-wink{
    display:inline-block;
    color:var(--main-color);
    animation:projects-wink 4s ease-in-out infinite;
}
@keyframes projects-wink{
    0%,92%,100%{ transform:rotate(0); }
    96%{ transform:rotate(-12deg) scale(1.15); }
}

@keyframes projects-fade-up{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Tablet ------------------------------------------------------------------- */
@media (max-width:1024px){
    .projects-soon-orb{
        width:130px;
        height:130px;
    }
    .projects-soon-title{
        font-size:32px;
    }
    .projects-soon-line{
        font-size:19px;
    }
}

/* Phone -------------------------------------------------------------------- */
@media (max-width:680px){
    .projects-soon{
        box-sizing:border-box;
        padding:0 14px;
        gap:14px;
    }
    .projects-soon-orb{
        width:100px;
        height:100px;
        margin-bottom:8px;
    }
    .projects-soon-title{
        font-size:24px;
    }
    .projects-soon-line{
        font-size:15px;
    }
}