.source-field {
    --HeroProgress: 0;
    position: absolute;
    inset: -12% 0;
    z-index: -2;
    overflow: hidden;
    opacity: calc(1 - var(--HeroProgress));
    transform: scale(calc(1 - var(--HeroProgress) * 0.08));
    transition: opacity 80ms linear;
}

.source-fragment {
    position: absolute;
    top: var(--Y);
    left: var(--X);
    color: var(--text-soft);
    font-family: var(--mono);
    font-size: clamp(0.58rem, calc(0.5rem + var(--Depth) * 0.3vw), 0.95rem);
    opacity: var(--Alpha);
    filter: blur(var(--Blur));
    transform: translate3d(-50%, 0, 0) scale(var(--Depth));
    white-space: nowrap;
    animation: source-drift var(--Drift) linear infinite;
    animation-delay: var(--Delay);
    will-change: transform;
}

.hero-frame {
    --HeroProgress: 0;
    transform: scale(calc(1 + var(--HeroProgress) * 0.22));
    opacity: calc(1 - var(--HeroProgress) * 0.65);
    transform-origin: center;
    will-change: transform, opacity;
}

.project,
.section-heading,
.principle,
.organization,
.historical-note {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.project.is-visible,
.section-heading.is-visible,
.principle.is-visible,
.organization.is-visible,
.historical-note.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes source-drift {
    from { transform: translate3d(-50%, -10vh, 0) scale(var(--Depth)); }
    to { transform: translate3d(-50%, 120vh, 0) scale(var(--Depth)); }
}

@keyframes waveform {
    from { transform: translateX(-3rem); }
    to { transform: translateX(0); }
}

@media (max-width: 600px) {
    .source-fragment:nth-child(n + 11) { display: none; }
    .source-fragment { filter: blur(min(var(--Blur), 1.2px)); }
    .hero-frame { transform: scale(calc(1 + var(--HeroProgress) * 0.08)); }
}

@media (prefers-reduced-motion: reduce) {
    .source-field { opacity: 0.5; transform: none; }
    .source-fragment { animation: none; transform: translate3d(-50%, 0, 0) scale(var(--Depth)); }
    .hero-frame { opacity: 1; transform: none; }
    .project,
    .section-heading,
    .principle,
    .organization,
    .historical-note { opacity: 1; transform: none; }
    .wave-stack span { animation: none; }
}