.pc-intro{
    position: fixed;
    inset: 0;
    z-index: 9999999999999999999999999999999999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: radial-gradient(circle at top left, #1e40af 0, #020617 40%, #000 100%);
}

/* скрываем всё по умолчанию, чтобы не мигало до gsap */
.pc-intro__bracket,
.pc-intro__letter,
.pc-intro__cursor,
.pc-intro__subtitle{
    opacity: 0;
}

.pc-intro__inner{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    will-change: transform, opacity, filter;
}

.pc-intro__logo{
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: 60px;
    line-height: 1.1;
    font-weight: 500;
    color: #fff;
}

.pc-intro__bracket{ font-size: 70px; }

.pc-intro__main{
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.pc-intro__letters{
    display: inline-flex;
    gap: 2px;
}

.pc-intro__letter{
    display: inline-block;
}

.pc-intro__cursor{
    display: inline-block;
    font-size: 42px;
    line-height: 1;
    transform: translateY(4px);
}

.pc-intro__cursor--active{
    animation: pc-intro-cursor-blink 0.8s steps(1) infinite;
}

@keyframes pc-intro-cursor-blink{
    0%, 50%{ opacity: 1; }
    50.01%, 100%{ opacity: 0; }
}

.pc-intro__subtitle{
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    color: rgba(255,255,255,.75);
}

/* уход */
.pc-intro.is-leaving{
    animation: pc-intro-leave .6s ease forwards;
}
@keyframes pc-intro-leave{
    from{ opacity: 1; transform: scale(1); }
    to{ opacity: 0; transform: scale(1.03); }
}

/* мобилка */
@media (max-width: 768px){
    .pc-intro__logo{ font-size: 38px; }
    .pc-intro__bracket{ font-size: 46px; }
    .pc-intro__cursor{ font-size: 28px; }
    .pc-intro__subtitle{ font-size: 14px; }
}