/* Keep the drafted name legible while WebGL and the local font initialise. */
.grey-site.glass-depth.has-home-video .pc-wordmark-front {
    filter: drop-shadow(0 2px 3px rgba(23, 26, 25, .14));
}

.grey-site.glass-depth.has-home-video .pc-wordmark-front > span {
    color: rgba(255, 255, 255, .3);
    background: none;
    -webkit-text-fill-color: rgba(255, 255, 255, .3);
    -webkit-text-stroke: clamp(2px, .18vw, 3.5px) #fff;
}

.grey-site.glass-depth.has-home-video .pc-wordmark-front > span::after {
    -webkit-text-stroke: 1px rgba(255, 255, 255, .3);
    translate: 2px -2px;
}

.grey-site.glass-depth.has-home-video .pc-wordmark-front::before {
    background-image:
        linear-gradient(to bottom,
            transparent 13%, rgba(255, 255, 255, .3) 13.3%, transparent 13.6%,
            transparent 48%, rgba(255, 255, 255, .2) 48.3%, transparent 48.6%,
            transparent 84%, rgba(255, 255, 255, .3) 84.3%, transparent 84.6%),
        repeating-linear-gradient(to right,
            transparent 0 9.9%, rgba(255, 255, 255, .15) 10%, transparent 10.1% 20%),
        radial-gradient(circle 16px at 6% 14%, transparent 14px, rgba(255, 255, 255, .32) 15px, transparent 16px),
        radial-gradient(circle 16px at 33% 84%, transparent 14px, rgba(255, 255, 255, .32) 15px, transparent 16px),
        radial-gradient(circle 16px at 64% 14%, transparent 14px, rgba(255, 255, 255, .32) 15px, transparent 16px),
        radial-gradient(circle 16px at 94% 84%, transparent 14px, rgba(255, 255, 255, .32) 15px, transparent 16px);
}

.grey-site.glass-depth.has-home-video .pc-wordmark-webgl {
    position: absolute;
    z-index: 3;
    top: -.16em;
    left: -.025em;
    display: block;
    width: calc(100% + .05em);
    height: calc(100% + .34em);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

.grey-site.glass-depth.has-home-video .pc-wordmark.pc-wordmark-running .pc-wordmark-webgl {
    opacity: 1;
}

.grey-site.glass-depth.has-home-video .pc-wordmark-front {
    transition: opacity .25s ease;
}

.grey-site.glass-depth.has-home-video .pc-wordmark.pc-wordmark-ready .pc-wordmark-front {
    opacity: 0;
}

.grey-site.glass-depth.has-home-video.pc-wordmark-motion .pc-wordmark.pc-wordmark-running {
    animation: none;
}

@media (max-width: 760px) {
    /* The reference stacks DNA; the homepage name stays on a single line. */
    .grey-site.glass-depth.has-home-video .pc-wordmark {
        top: -.9em;
        width: max-content;
        max-width: calc(100% - 24px);
        margin: 0 0 -1.06em clamp(12px, 3vw, 22px);
        padding-right: 0;
        font-size: clamp(2.7rem, 13vw, 6.25rem);
        letter-spacing: -.075em;
        line-height: .9;
        white-space: nowrap;
    }

    .grey-site.glass-depth.has-home-video .pc-wordmark-front {
        display: block;
    }

    .grey-site.glass-depth.has-home-video .pc-wordmark-webgl {
        top: -.11em;
        height: calc(100% + .27em);
    }
}

@media (prefers-reduced-motion: reduce), print {
    .grey-site.glass-depth.has-home-video .pc-wordmark-webgl { display: none !important; }
    .grey-site.glass-depth.has-home-video .pc-wordmark-front { opacity: 1 !important; }
}