/* ============================================
   Loading Screen
   Minimalist single-line paw prints + tagline
   ============================================ */

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: var(--z-loading-screen);
    background-color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s var(--ease-out);
}

.loading-screen--hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-screen__content {
    text-align: center;
}

.loading-screen__footprints {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    justify-content: center;
    align-items: flex-end;
}

.loading-screen__footprint {
    width: 24px;
    height: 30px;
    opacity: 0;
    transform: translateY(10px);
}

.loading-screen__footprint svg {
    width: 100%;
    height: 100%;
}

/* Walking offset pattern — subtle, refined */
.loading-screen__footprint:nth-child(odd) {
    margin-bottom: 0;
}

.loading-screen__footprint:nth-child(even) {
    margin-bottom: 10px;
}

.loading-screen__footprint:nth-child(1) { transform: translateY(10px) rotate(-8deg); }
.loading-screen__footprint:nth-child(2) { transform: translateY(10px) rotate(6deg); }
.loading-screen__footprint:nth-child(3) { transform: translateY(10px) rotate(-5deg); }
.loading-screen__footprint:nth-child(4) { transform: translateY(10px) rotate(7deg); }
.loading-screen__footprint:nth-child(5) { transform: translateY(10px) rotate(-4deg); }

.loading-screen__tagline {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-light);
    color: var(--color-cream);
    letter-spacing: var(--ls-wider);
    opacity: 0;
}

.loading-screen__subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-light);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-stone);
    margin-top: var(--space-sm);
    opacity: 0;
}